/* ---------------------------------------------------------------------------
 * Blok: Juridische tekst. Twee kolommen: links een meelopende inhoudsopgave
 * die blijft plakken tijdens het scrollen, rechts het document. Op mobiel
 * wordt de opgave een uitklapper boven de tekst.
 * ------------------------------------------------------------------------- */

.blok-juridisch {
	padding-block: 60px 100px;
}

.blok-juridisch__raster {
	display: block;
}

.blok-juridisch__kolom {
	max-width: 860px;
}

.blok-juridisch__bijgewerkt {
	margin: 0 0 28px;
	font-size: var(--fs-s);
	color: var(--c-grijs-4);
}

/* Tekst */

.blok-juridisch__tekst h2 {
	margin: 44px 0 14px;
	font-size: 24px;
	line-height: 34px;
	font-weight: 700;
	scroll-margin-top: 130px;
}

.blok-juridisch__tekst h3 {
	margin: 32px 0 10px;
	font-size: 19px;
	line-height: 30px;
	font-weight: 700;
	scroll-margin-top: 130px;
}

.blok-juridisch__tekst > :first-child {
	margin-top: 0;
}

.blok-juridisch__tekst p {
	margin: 0 0 20px;
}

.blok-juridisch__tekst ol {
	margin: 0 0 24px;
	padding-left: 24px;
}

.blok-juridisch__tekst ol li {
	margin-bottom: 12px;
	padding-left: 6px;
}

.blok-juridisch__tekst table {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
}

.blok-juridisch__tekst td,
.blok-juridisch__tekst th {
	padding: 10px 14px;
	border: 1px solid var(--c-grijs-3);
	vertical-align: top;
	text-align: left;
}

/* Inhoudsopgave */

.blok-juridisch__opgave-titel {
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.blok-juridisch__opgave-titel::-webkit-details-marker {
	display: none;
}

.blok-juridisch__lijst {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: juridisch;
}

.blok-juridisch__lijst li {
	margin: 0;
	counter-increment: juridisch;
}

.blok-juridisch__lijst li + li {
	margin-top: 4px;
}

.blok-juridisch__lijst a {
	display: block;
	padding: 7px 12px 7px 0;
	border-left: 2px solid transparent;
	font-size: 15px;
	line-height: 22px;
	color: var(--c-grijs-4);
	text-decoration: none;
	transition:
		color var(--dur-kort) var(--ease-out),
		border-color var(--dur-kort) var(--ease-out),
		padding-left var(--dur-kort) var(--ease-out);
}

.blok-juridisch__lijst a:hover {
	color: var(--c-donkerblauw);
}

/* Het hoofdstuk dat in beeld is, staat blauw met een streep ernaast. */
.blok-juridisch__lijst a.is-actief {
	border-color: var(--c-blauw);
	padding-left: 12px;
	color: var(--c-blauw);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
 * Vanaf tablet: twee kolommen met een plakkende inhoudsopgave.
 * ------------------------------------------------------------------------ */

@media (min-width: 900px) {
	.blok-juridisch--met-opgave .blok-juridisch__raster {
		display: grid;
		grid-template-columns: 300px minmax(0, 1fr);
		gap: 60px;
		align-items: start;
	}

	.blok-juridisch__zijkolom {
		position: sticky;
		/* Onder de vaste balk blijven hangen. */
		top: 120px;
	}

	.blok-juridisch__opgave {
		max-height: calc(100svh - 180px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 26px 24px;
		border-radius: var(--radius-kaart);
		background: var(--c-grijs-2);
	}

	/* Op desktop staat de lijst altijd open (het open-attribuut staat in de
	 * HTML, juridisch.js klapt hem alleen op mobiel dicht). */

	.blok-juridisch__opgave-titel {
		pointer-events: none;
	}

	.blok-juridisch__kolom {
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
 * Mobiel en smalle tablets: uitklapper boven de tekst.
 * ------------------------------------------------------------------------ */

@media (max-width: 899px) {
	.blok-juridisch {
		padding-block: 40px 60px;
	}

	.blok-juridisch__opgave {
		margin-bottom: 32px;
		padding: 18px 20px;
		border-radius: var(--radius-kaart);
		background: var(--c-grijs-2);
	}

	.blok-juridisch__opgave-titel {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	/* Chevron die meedraait bij openen. */
	.blok-juridisch__opgave-titel::after {
		content: "";
		width: 12px;
		height: 8px;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
		transition: rotate var(--dur-kort) var(--ease-out);
	}

	.blok-juridisch__uitklap[open] .blok-juridisch__opgave-titel::after {
		rotate: 180deg;
	}

	.blok-juridisch__tekst h2 {
		font-size: 21px;
		line-height: 30px;
		margin-top: 34px;
	}
}