/**
 * Inschrijfpagina (sjabloon "Inschrijven", page-inschrijven.php).
 *
 * Alle maten en kleuren staan in :root, dus je past ze op één plek aan.
 */

:root {
	--insch-ruimte:      clamp(2rem, 5vw, 3.5rem);
	--insch-gat:         clamp(1.5rem, 3vw, 2.5rem);
	--insch-zij:         22rem;                        /* breedte van de kolom met blokken */
	--insch-radius:      12px;
	--insch-rand:        var(--kleur-lijn, #e5e5e5);
	--insch-vlak:        var(--kleur-wit, #fff);
	--insch-veld-rand:   #c9ccd1;
	--insch-veld-focus:  var(--kleur-primair, #005ca9);
	--insch-label:       var(--kleur-tekst, #111318);
	--insch-ster:        var(--kleur-accent, #e30613);
	--insch-goed-bg:     #e8f5ec;
	--insch-goed-rand:   #9ed3b0;
	--insch-fout-bg:     #fdeaea;
	--insch-fout-rand:   #f0a7a7;
	--insch-blok-radius: 14px;
	--insch-blauw:       var(--oproep-blauw, #005ca9);
	--insch-rood:        var(--oproep-rood, #e30613);
	--insch-geel:        var(--oproep-geel, #fbe100);

	/* Knoppen in de blokken: geel met blauwe tekst, wit bij hover. */
	--insch-knop-bg:     var(--kleur-secundair, #fbe100);
	--insch-knop-tekst:  var(--kleur-zwart, #111318);   /* zelfde donker als het menu in de header */
	--insch-knop-lift:   -2px;                          /* hoe ver de knop omhoog komt bij hover */
	--insch-knop-duur:   0.2s;

	/* Vragenblok, zelfde waarden als op de contactpagina. */
	--insch-vraag-rand:       var(--kleur-lijn, #e5e5e5);
	--insch-vraag-teken:      var(--kleur-secundair, #fbe100);
	--insch-vraag-teken-maat: 32px;
	--insch-vraag-kolom:      400px;                     /* breedte van de kop-kolom */
	--insch-vraag-gat:        clamp(1.75rem, 4vw, 3.5rem);
}

.inschrijven {
	padding-block: var(--insch-ruimte);
}

.inschrijven__kolommen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--insch-zij);
	align-items: start;
	gap: var(--insch-gat);
	margin-top: var(--insch-gat);
}

.inschrijven__vorm {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--insch-rand);
	border-radius: var(--insch-radius);
	background: var(--insch-vlak);
}

.inschrijven__kop {
	margin: 0 0 var(--ruimte-s, 0.75rem);
	font-size: var(--h3, 1.6rem);
}

.inschrijven__intro {
	margin: 0 0 var(--ruimte-m, 1.5rem);
	color: var(--kleur-grijs, #4b5158);
}

.inschrijven__melding {
	margin: 0 0 var(--ruimte-m, 1.5rem);
	padding: 0.85rem 1rem;
	border: 1px solid var(--insch-rand);
	border-radius: 8px;
}

.inschrijven__melding--goed {
	border-color: var(--insch-goed-rand);
	background: var(--insch-goed-bg);
}

.inschrijven__melding--fout {
	border-color: var(--insch-fout-rand);
	background: var(--insch-fout-bg);
}

.inschrijven__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.inschrijven__velden {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
}

.inschrijven__veld {
	flex: 1 1 100%;
	margin: 0 0 1rem;
}

.inschrijven__veld--30 { flex-basis: calc(30% - 1rem); }
.inschrijven__veld--40 { flex-basis: calc(40% - 1rem); }
.inschrijven__veld--50 { flex-basis: calc(50% - 0.5rem); }
.inschrijven__veld--60 { flex-basis: calc(60% - 1rem); }
.inschrijven__veld--70 { flex-basis: calc(70% - 0.5rem); }

.inschrijven__veld label {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--insch-label);
	font-weight: 600;
}

.inschrijven__ster {
	color: var(--insch-ster);
}

.inschrijven__veld input,
.inschrijven__veld textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--insch-veld-rand);
	border-radius: 8px;
	background: var(--kleur-wit, #fff);
	color: inherit;
	font: inherit;
}

.inschrijven__veld textarea {
	resize: vertical;
}

.inschrijven__veld input:focus-visible,
.inschrijven__veld textarea:focus-visible {
	outline: 2px solid var(--insch-veld-focus);
	outline-offset: 1px;
}

.inschrijven__machtiging {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.75rem;
	margin: 0.5rem 0 1.25rem;
	padding: 1rem;
	border: 1px solid var(--insch-rand);
	border-radius: 8px;
	background: #fafafa;
	font-size: 0.92rem;
	line-height: 1.5;
}

.inschrijven__machtiging input {
	margin-top: 0.2rem;
	width: 1.1rem;
	height: 1.1rem;
}

.inschrijven__versturen {
	margin: 0;
}

/* Een <button> erft het lettertype niet vanzelf; zo staat hij gelijk aan de
   knoppen in de blokken ernaast. */
.inschrijven__versturen .btn {
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.65;
	letter-spacing: inherit;
}

.inschrijven__klein {
	margin: 0.75rem 0 0;
	color: var(--kleur-grijs, #4b5158);
	font-size: 0.85rem;
}

/* ------------------------------------------ Blokken ernaast */

.inschrijven__blokken {
	display: grid;
	gap: var(--insch-gat);
}

.inschrijfblok {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border-radius: var(--insch-blok-radius);
	color: var(--kleur-wit, #fff);
	background: var(--insch-blauw);
}

.inschrijfblok--rood { background: var(--insch-rood); }

.inschrijfblok--geel {
	background: var(--insch-geel);
	color: var(--kleur-tekst, #111318);
}

.inschrijfblok__kop {
	margin: 0 0 var(--ruimte-s, 0.75rem);
	color: inherit;
	font-size: var(--h4, 1.3rem);
}

.inschrijfblok__tekst {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
}

/* De knop houdt zijn kleur; hij komt alleen even omhoog, net als elders. */
.inschrijfblok__knop,
.inschrijfblok__knop:visited,
.inschrijfblok__knop:hover,
.inschrijfblok__knop:focus,
.inschrijfblok__knop:focus-visible,
.inschrijfblok__knop:active {
	background: var(--insch-knop-bg);
	color: var(--insch-knop-tekst);
}

.inschrijfblok__knop {
	margin-top: var(--ruimte-m, 1.5rem);
	transition: transform var(--insch-knop-duur) ease;
}

@media (hover: hover) and (pointer: fine) {

	.inschrijfblok__knop:hover,
	.inschrijfblok__knop:focus-visible {
		transform: translateY(var(--insch-knop-lift));
	}
}

@media (prefers-reduced-motion: reduce) {

	.inschrijfblok__knop {
		transition: none;
	}

	.inschrijfblok__knop:hover,
	.inschrijfblok__knop:focus-visible {
		transform: none;
	}
}

/* ------------------------------------------ Vragen
   Zelfde opmaak als het vragenblok op de contactpagina (contact-blokken.css). */

.inschrijven__vragen {
	margin-top: var(--insch-ruimte);
}

.contactfaq__binnen {
	display: grid;
	grid-template-columns: minmax(0, var(--insch-vraag-kolom)) minmax(0, 1fr);
	gap: var(--insch-vraag-gat);
	align-items: start;
}

.contactfaq__intro {
	margin: 0;
	color: var(--kleur-tekst-zacht);
}

.contactfaq__titel {
	margin: 0 0 var(--ruimte-s, 0.75rem);
	font-size: var(--h2);
	line-height: 1.15;
}

.contactfaq__lijst {
	border-top: 1px solid var(--insch-vraag-rand);
}

.vraag {
	border-bottom: 1px solid var(--insch-vraag-rand);
}

.vraag__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ruimte-s, 0.75rem);
	padding: 1.1rem 0;
	font-size: var(--h5);
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}

.vraag__kop::-webkit-details-marker {
	display: none;
}

.vraag__kop:focus-visible {
	outline: 2px solid var(--kleur-primair);
	outline-offset: 2px;
}

/* Het plusje: twee streepjes, waarvan er een wegdraait bij open. */
.vraag__teken {
	position: relative;
	flex: 0 0 auto;
	width: var(--insch-vraag-teken-maat);
	height: var(--insch-vraag-teken-maat);
	border-radius: 50%;
	background: var(--insch-vraag-teken);
}

.vraag__teken::before,
.vraag__teken::after {
	content: "";
	position: absolute;
	inset: 50% 25%;
	height: 2px;
	margin-top: -1px;
	background: var(--kleur-zwart);
	transition: transform 0.2s ease;
}

.vraag__teken::after {
	transform: rotate(90deg);
}

.vraag[open] .vraag__teken::after {
	transform: rotate(0deg);
}

.vraag__antwoord {
	padding: 0 0 1.1rem;
	max-width: 70ch;
	color: var(--kleur-tekst-zacht);
}

.vraag__antwoord p {
	margin: 0 0 0.6rem;
}

.vraag__antwoord p:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {

	.vraag__teken::before,
	.vraag__teken::after { transition: none; }
}

@media (max-width: 900px) {

	.inschrijven__kolommen,
	.contactfaq__binnen {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {

	.inschrijven__veld {
		flex-basis: 100%;
	}
}