/**
 * Gewichten staan op 500 en niet hoger.
 *
 * De merkgids zet 500 als plafond, en de aftoplijst in style.css
 * (sectie 33a-3) somt de pakketselectors op die dat moesten volgen.
 * Dit blad wordt echter ná style.css afgedrukt, dus die lijst kreeg
 * legal-hub nooit te pakken — 600 en 700 bleven staan. Hier aan de bron
 * gezet, dan doet de laadvolgorde er niet meer toe.
 *
 * Juridische Hub – layout & accordeon.
 *
 * Pas de variabelen hieronder aan op de kleuren en fonts van je theme.
 * --lh-sticky-top: afstemmen op de hoogte van je (sticky) header.
 */

.legal-hub {
	--lh-border: #e4e0da;
	--lh-text: #201d19;
	--lh-muted: #77716a;
	--lh-hover-bg: #f6f4f1;
	/* Zelfde ankerpunt als elk ander sticky paneel op de site: de
	   gescrolde headerhoogte plus wat lucht — geen vierde kopie van de
	   headerhoogte die stil achterloopt (7rem zat er al 47px naast). */
	--lh-sticky-top: var(--dg-onder-header, calc(var(--dg-header-vol, 81px) + var(--dg-space-4, 16px)));

	/* max-width/margin/padding staan hier niet meer: .legal-hub.legal-hub
	   in style.css (secties 23 en 34d) wint die altijd op specificiteit,
	   dus een kopie hier is dood gewicht dat edits opslokt. */
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: var(--dg-space-8);
	color: var(--lh-text);
}

/* ---------- Sidebar ---------- */

.legal-hub__sidebar {
	position: sticky;
	top: var(--lh-sticky-top);
	align-self: start;
}

.legal-hub__eyebrow {
	margin: 0 0 var(--dg-space-4);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lh-muted);
}

.legal-hub__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.legal-hub__nav li + li {
	border-top: 1px solid var(--lh-border);
}

.legal-hub__nav a {
	display: block;
	padding: var(--dg-space-3);
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--lh-text);
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.legal-hub__nav a:hover {
	background: var(--lh-hover-bg);
}

.legal-hub__nav a.is-active {
	font-weight: 500;
	box-shadow: inset 3px 0 0 currentColor;
	background: var(--lh-hover-bg);
}

/* ---------- Content ---------- */

.legal-hub__download {
	display: inline-block;
	margin-bottom: var(--dg-space-6);
	padding: var(--dg-space-3) var(--dg-space-5);
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--lh-text);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.legal-hub__download:hover {
	background: var(--lh-text);
	color: #fff;
}

.legal-hub__heading {
	margin: 0 0 var(--dg-space-6);
	font-size: clamp(1.7rem, 3.5vw, 2.4rem);
	line-height: 1.2;
}

/* ---------- Accordeon ---------- */

.legal-accordion__item {
	border-top: 1px solid var(--lh-border);
}

.legal-accordion__item:last-child {
	border-bottom: 1px solid var(--lh-border);
}

.legal-accordion__heading {
	margin: 0;
	font-size: inherit;
}

.legal-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dg-space-5);
	width: 100%;
	padding: var(--dg-space-4) var(--dg-space-1);
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font: inherit;
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--lh-text);
}

.legal-accordion__trigger:hover .legal-accordion__label {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.legal-accordion__trigger:focus-visible {
	outline: var(--dg-focus-ring, 2px solid var(--lh-text));
	outline-offset: 2px;
}

/* Plus-icoon dat een min wordt bij openen */
.legal-accordion__icon {
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

.legal-accordion__icon::before,
.legal-accordion__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: currentColor;
	transition: transform 0.25s ease;
}

.legal-accordion__icon::before {
	width: 14px;
	height: 2px;
}

.legal-accordion__icon::after {
	width: 2px;
	height: 14px;
}

.is-open .legal-accordion__icon::after {
	transform: rotate(90deg);
}

.legal-accordion__panel {
	padding: var(--dg-space-1) var(--dg-space-1) var(--dg-space-5);
	line-height: 1.7;
}

.legal-accordion__panel:not([hidden]) {
	animation: legal-fade 0.25s ease;
}

@keyframes legal-fade {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.legal-hub {
		/* minmax(0,1fr): zonder die klem duwt de cookietabel (4+ kolommen)
		   de track naar zijn min-content-breedte en scrolt de hele
		   pagina horizontaal — zelfde fix als sectie 33d/35a in style.css. */
		grid-template-columns: minmax(0, 1fr);
		gap: var(--dg-space-6);
	}

	.legal-hub__sidebar {
		position: static;
	}
}

/* ---------- Toegankelijkheid ---------- */

/* Geen eigen prefers-reduced-motion-blok meer: style.css sectie 2 zet
   `*, *::before, *::after { animation: none !important; transition: none
   !important }` en dekt alles hier al. De kopieën liepen bovendien uit
   elkaar — sommige zetten `none`, andere 0.01ms — en omdat een gescopede
   selector met !important van de universele wint, vuurde transitionend
   binnen het ene pakket wél en binnen het andere niet. Scripts die op
   dat event wachten gedroegen zich daardoor per pagina anders. */