/* ---------------------------------------------------------------------------
   Cayenne Coaching — huisstijl
   Kleuren en typografie exact volgens "HUISSTIJL Cayenne Coaching".
   Nunito Sans is self-hosted (OFL, zie fonts/OFL.txt) — geen externe requests,
   zodat de pagina binnen de strikte CSP van deze server past en AVG-proof is.
--------------------------------------------------------------------------- */

@font-face {
	font-family: "Nunito Sans";
	src: url("fonts/NunitoSans-var.woff2") format("woff2-variations");
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Nunito Sans";
	src: url("fonts/NunitoSans-Italic-var.woff2") format("woff2-variations");
	font-weight: 200 1000;
	font-style: italic;
	font-display: swap;
}

:root {
	/* Huisstijlkleuren */
	--goud: #8e7e4d;          /* 1. Olijf-goud — navigatie / primair accent   */
	--creme: #f6f3eb;         /* 2. Crème — hoofd-achtergrond                 */
	--taupe: #d1ccc6;         /* 3. Warm licht-grijs — secundaire secties     */
	--warmgrijs: #9a9894;     /* 4. Diep warm-grijs — contrastvlakken         */
	--zwart: #000000;
	--wit: #ffffff;


	/* Afgeleide tinten van het olijf-goud, puur voor leesbaarheid:
	   wit-op-#8e7e4d haalt 4.0:1 en dat is te weinig voor kleine tekst.
	   --goud-diep haalt 6.2:1 op wit en 5.6:1 op crème (WCAG AA). */
	--goud-diep: #6e6135;
	--goud-licht: #e7e1cf;
	--lijn: #cec8bb;

	--maxbreedte: 72rem;
	--radius: 4px;
	--logobreedte: 28rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	/* De pagina hangt in een iframe met een vaste hoogte. Is die hoogte groter
	   dan de inhoud, dan is de ruimte die overblijft crème — dezelfde kleur als
	   de pagina zelf, dus dat valt niet op. */
	background: var(--creme);
}

body {
	margin: 0;
	background: var(--creme);
	color: var(--zwart);
	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

@media (min-width: 48rem) { body { font-size: 18px; } }

h1, h2, h3, h4 {
	font-family: "Nunito Sans", sans-serif;
	line-height: 1.15;
	margin: 0 0 0.6em;
	text-wrap: balance;
}
h1 { font-weight: 800; font-size: clamp(2.1rem, 5.5vw, 4rem); letter-spacing: -0.015em; }
h2 { font-weight: 700; font-size: clamp(1.6rem, 3.6vw, 2.6rem); letter-spacing: -0.01em; }
h3 { font-weight: 600; font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
h4 { font-weight: 600; font-size: 1.1rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--goud-diep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--zwart); }

strong, b { font-weight: 600; }
small, .klein { font-size: 0.8rem; line-height: 1.5; }

/* --- Layout ---------------------------------------------------------------- */

.wrap { width: min(100% - 2.5rem, var(--maxbreedte)); margin-inline: auto; }
.smal { width: min(100% - 2.5rem, 48rem); margin-inline: auto; }

section { padding: clamp(2.5rem, 6vw, 5rem) 0; }
section.taupe { background: var(--taupe); }
section.wit { background: var(--wit); }

.demo-balk {
	background: var(--goud-diep);
	color: var(--wit);
	font-size: 0.8rem;
	line-height: 1.5;
	padding: 0.5rem 0;
	text-align: center;
}
.demo-balk a { color: var(--wit); }

/* --- Menubalk -------------------------------------------------------------- */
/* Het logo staat niet meer in de balk maar groot in de hero eronder. */

header.site {
	background: var(--goud);
	color: var(--wit);
	position: sticky;
	top: 0;
	z-index: 20;
}
header.site .wrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.5rem;
	min-height: 3.25rem;
	flex-wrap: wrap;
	padding-block: 0.4rem;
}
header.site nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
header.site nav a {
	color: var(--wit);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	padding-block: 0.25rem;
	border-bottom: 2px solid transparent;
}
header.site nav a:hover,
header.site nav a[aria-current="page"] { border-bottom-color: var(--wit); color: var(--wit); }

@media (max-width: 47.99rem) {
	header.site { position: static; }
	header.site .wrap { justify-content: center; }
	header.site nav { gap: 1rem 1.25rem; }
	header.site nav a { font-size: 0.9rem; }
}

/* --- Hero + het grote logo ------------------------------------------------- */

.hero {
	background: var(--goud);
	color: var(--wit);
	padding: clamp(2rem, 5vw, 3.25rem) 0 clamp(3rem, 7vw, 5.5rem);
}
.hero p.lead { font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 300; max-width: 48rem; }
.hero .kicker {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.lead { font-size: clamp(1.05rem, 1.7vw, 1.25rem); font-weight: 300; }


/* --- Knoppen --------------------------------------------------------------- */

.knop {
	display: inline-block;
	background: var(--goud-diep);
	color: var(--wit);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
	padding: 0.95rem 1.9rem;
	border: 2px solid var(--goud-diep);
	border-radius: var(--radius);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	font-family: inherit;
}
.knop:hover { background: var(--zwart); border-color: var(--zwart); color: var(--wit); }
.knop:focus-visible { outline: 3px solid var(--zwart); outline-offset: 3px; }
.knop.op-goud { background: var(--wit); color: var(--goud-diep); border-color: var(--wit); }
.knop.op-goud:hover { background: var(--zwart); color: var(--wit); border-color: var(--zwart); }
.knop.secundair { background: transparent; color: var(--goud-diep); }
.knop.secundair:hover { background: var(--goud-diep); color: var(--wit); }
.knop[disabled] { opacity: 0.55; cursor: not-allowed; }

.knoppenrij { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.75rem; }

/* --- Lijsten --------------------------------------------------------------- */

ul.streep { list-style: none; padding: 0; margin: 0 0 1.1em; }
ul.streep li { position: relative; padding-left: 1.6rem; margin-bottom: 0.55rem; }
ul.streep li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 0.85rem;
	height: 2px;
	background: var(--goud);
}
.hero ul.streep li::before { background: var(--wit); }

/* --- Kaarten --------------------------------------------------------------- */

/* Drie even brede blokken binnen dezelfde tekstkolom als de rest van de
   pagina; op smalle schermen zakken ze onder elkaar. */
.kaarten { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 34rem) { .kaarten { grid-template-columns: 1fr; } }
.kaart {
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: var(--radius);
	padding: 1.75rem;
}
.kaart h3 { margin-bottom: 0.4rem; }

/* --- Vragenlijst: voortgang per schermpje ---------------------------------- */

.voortgang {
	position: sticky;
	top: 3.25rem;
	z-index: 15;
	background: var(--creme);
	border-bottom: 1px solid var(--lijn);
	padding: 0.7rem 0;
}
.voortgang .wrap { display: flex; align-items: center; gap: 0.6rem 1rem; flex-wrap: wrap; }
.voortgang .balk { flex: 1 1 8rem; height: 8px; background: var(--taupe); border-radius: 999px; overflow: hidden; }
.voortgang .balk span { display: block; height: 100%; width: 0; background: var(--goud); transition: width 0.3s ease; }
.voortgang .telling { font-size: 0.9rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 47.99rem) {
	.voortgang { top: 0; }
	.voortgang .balk { flex-basis: 100%; order: 3; }
}

/* --- Vragenlijst: de zes schermpjes ---------------------------------------- */

.stap { display: none; }
.stap.actief { display: block; }

.stapnav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
	flex-wrap: wrap;
}
.stapnav .knop { padding: 0.7rem 1.4rem; font-size: 0.95rem; }
.stapnav .rechts { margin-left: auto; }
.stapnav .bronregel { flex: 1 1 14rem; }

/* Op het laatste schermpje staat de terugknop direct onder de vragen, dus
   vóór het gegevensblok — en dat blok krijgt daarna ruim de tijd. */
.gegevens { margin-top: 3.5rem; }

/* --- Vragenlijst: de vraagkaders ------------------------------------------- */
/* Bewust geen <legend>: die hangt in de rand van het kader. De vraag staat nu
   als gewone alinea binnen het kader. */

.vraag {
	border: 1px solid var(--lijn);
	border-left: 4px solid var(--goud);
	border-radius: var(--radius);
	background: var(--wit);
	margin: 0 0 1.1rem;
	padding: 1.4rem 1.5rem 1.5rem;
	scroll-margin-top: 8rem;
}
.vraag.leeg-fout { border-color: #a8322a; border-left-color: #a8322a; background: #fdf3f2; }
.vraag .vraagtekst {
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.35;
	margin: 0;
}
.vraag .vraagtekst .nr { color: var(--goud-diep); font-variant-numeric: tabular-nums; }
.vraag .vraagtekst .ster { color: #a8322a; }

.opties { display: grid; gap: 0.5rem; margin-top: 0.9rem; }
.optie {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--lijn);
	border-radius: var(--radius);
	cursor: pointer;
	background: var(--creme);
	transition: border-color 0.12s ease, background 0.12s ease;
}
.optie:hover { border-color: var(--goud); }
.optie input { margin: 0.35rem 0 0; accent-color: var(--goud-diep); width: 1.05rem; height: 1.05rem; flex: none; }
.optie:has(input:checked) { border-color: var(--goud-diep); background: var(--goud-licht); }
.optie:has(input:focus-visible) { outline: 3px solid var(--zwart); outline-offset: 2px; }
.optie .letter { font-weight: 700; color: var(--goud-diep); flex: none; }

.velden { display: grid; gap: 1.1rem; max-width: 30rem; }
.veld label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.veld input {
	width: 100%;
	font: inherit;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--warmgrijs);
	border-radius: var(--radius);
	background: var(--wit);
	color: var(--zwart);
}
.veld input:focus-visible { outline: 3px solid var(--goud-diep); outline-offset: 1px; border-color: var(--goud-diep); }
.veld.leeg-fout input { border-color: #a8322a; background: #fdf3f2; }
.veldfout { color: #8f2b23; font-size: 0.85rem; font-weight: 600; margin-top: 0.3rem; display: none; }
.leeg-fout .veldfout { display: block; }

.foutmelding {
	background: #fdf3f2;
	border: 1px solid #a8322a;
	border-left: 4px solid #a8322a;
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	color: #8f2b23;
	font-weight: 600;
}
.foutmelding ol { margin: 0.5rem 0 0; padding-left: 1.2rem; font-weight: 400; }
.stapfout {
	color: #8f2b23;
	font-weight: 600;
	margin: 1rem 0 0;
	display: none;
}
.stapfout.zichtbaar { display: block; }

/* --- Bevestigings-pop-up --------------------------------------------------- */

dialog.popup {
	border: none;
	border-radius: var(--radius);
	padding: 2.25rem;
	max-width: 30rem;
	width: calc(100% - 2.5rem);
	background: var(--wit);
	color: var(--zwart);
	box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.25);
}
dialog.popup::backdrop { background: rgba(0, 0, 0, 0.45); }
dialog.popup h2 { font-size: 1.5rem; }

/* --- Uitslag: tabel in cijfers --------------------------------------------- */

table.uitslag {
	width: 100%;
	max-width: 46rem;
	border-collapse: collapse;
	background: var(--wit);
	font-variant-numeric: tabular-nums;
}
table.uitslag caption { text-align: left; font-weight: 600; padding-bottom: 0.6rem; }
table.uitslag th, table.uitslag td { border: 1px solid var(--lijn); padding: 0.45rem 0.75rem; text-align: left; }
table.uitslag thead th { background: var(--goud); color: var(--wit); font-weight: 700; }
table.uitslag td.nr { width: 3rem; font-weight: 700; color: var(--goud-diep); vertical-align: top; }
table.uitslag td.score { width: 5rem; text-align: center; font-weight: 700; }
/* De uitgesproken voorkeur licht op; de nummerkolom blijft neutraal omdat die
   met rowspan over alle polen van één metaprogramma loopt. */
table.uitslag tr.top td { background: var(--goud-licht); }
table.uitslag tr.top td.nr { background: var(--wit); }
table.uitslag tbody tr.mp-start td { border-top: 2px solid var(--warmgrijs); }

.tabelscroll { overflow-x: auto; }

/* --- Uitslag: staafdiagram ------------------------------------------------- */
/* Niet breder dan nodig: anders wordt de labelkolom een leeg vlak en vallen de
   balken helemaal rechts weg. */

table.staaf { width: 100%; max-width: 46rem; border-collapse: collapse; background: var(--wit); }
table.staaf th, table.staaf td { border: 1px solid var(--lijn); padding: 0.3rem 0.5rem; }
table.staaf thead th { background: var(--goud); color: var(--wit); font-weight: 700; text-align: center; width: 3.2rem; }
table.staaf thead th:first-child { text-align: left; width: auto; }
table.staaf td.pool { font-weight: 400; white-space: nowrap; }
table.staaf td.nr { width: 3rem; font-weight: 700; color: var(--goud-diep); vertical-align: top; }
table.staaf td.vak { padding: 0; height: 1.9rem; }
table.staaf td.vak.aan { background: var(--goud); }
table.staaf tbody tr.mp-start td { border-top: 2px solid var(--warmgrijs); }

/* --- Uitslag: radar -------------------------------------------------------- */

.radarhouder { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1rem; }
.radarhouder svg { display: block; width: 100%; height: auto; }

.toelichting { font-size: 0.85rem; line-height: 1.5; margin-top: 1rem; max-width: 46rem; }

/* --- Uitleg-pagina --------------------------------------------------------- */

article.mp {
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: var(--radius);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	margin-bottom: 1.5rem;
	scroll-margin-top: 6rem;
}
article.mp > h2 { display: flex; gap: 0.75rem; align-items: baseline; }
article.mp > h2 .nr {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--wit);
	background: var(--goud);
	border-radius: 999px;
	min-width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	align-self: center;
}
article.mp .subkop { font-weight: 600; font-size: 1.05rem; margin-bottom: 0.6rem; }
article.mp .pool { border-top: 1px solid var(--lijn); padding-top: 1rem; margin-top: 1rem; }
article.mp .pool h3 { margin-bottom: 0.35rem; color: var(--goud-diep); }
article.mp .voorbeeld {
	background: var(--creme);
	border-left: 4px solid var(--goud);
	padding: 1rem 1.25rem;
	margin-top: 1.25rem;
}
article.mp .voorbeeld .label { font-weight: 700; display: block; margin-bottom: 0.25rem; }
article.mp .ezelsbrug { background: var(--goud-licht); padding: 1rem 1.25rem; border-radius: var(--radius); margin: 1rem 0; }

.inhoud { columns: 2; column-gap: 2rem; margin: 0; padding: 0; list-style: none; }
@media (max-width: 40rem) { .inhoud { columns: 1; } }
.inhoud li { margin-bottom: 0.4rem; break-inside: avoid; }

/* --- Logo boven de footer + zwarte footer ---------------------------------- */
/* Dezelfde opbouw als op cayennecoaching.nl: een crème band met het logo,
   daaronder het zwarte vlak. Het logo lijnt rechts uit met de knoppen en de
   vraagblokken erboven — vandaar de smalle kolom en margin-left:auto. */

/* De pagina eindigt met het logo op een crème band. Een eigen footer zit er
   niet meer in: de website eromheen heeft er al een, en twee footers onder
   elkaar botsten met elkaar. */
.logoband {
	background: var(--creme);
	padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
}
/* Het logo lijnt rechts uit met de tekstkolom erboven. */
.logoband a { display: block; margin-left: auto; width: min(100%, var(--logobreedte)); }
.logoband img {
	display: block;
	width: 100%;
	height: auto;
}

/* De bronvermelding hoort er wel te staan, maar hoeft niet op te vallen. */
.bronregel {
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--warmgrijs);
	margin: 0;
	max-width: 28rem;
}

/* --- Smalle schermen -------------------------------------------------------- */
/* De pagina hangt in een iframe met een vaste hoogte. Op een telefoon wordt de
   inhoud al snel een stuk langer, dus daar houden we de witruimte krapper —
   dat scheelt honderden pixels die anders onder de rand van het iframe
   verdwijnen. */

@media (max-width: 30rem) {
	section { padding: 2rem 0; }
	.hero { padding: 1.5rem 0 2.25rem; }
	.logoband { padding: 2rem 0; }
	.vraag { padding: 1.1rem 1.1rem 1.2rem; margin-bottom: 0.9rem; }
	.optie { padding: 0.6rem 0.8rem; }
	.opties { gap: 0.4rem; }
	.gegevens { margin-top: 2.5rem; }
	.kaarten { gap: 1rem; }
	.kaart { padding: 1.25rem; }
	.knoppenrij { margin-top: 1.25rem; }
}

/* --- Print ----------------------------------------------------------------- */
/* De downloadbare pdf's worden in de browser opgebouwd (pdf.js), niet geprint.
   Deze regels zijn er alleen voor wie tóch Ctrl+P gebruikt. */

@media print {
	@page { margin: 16mm 14mm; }
	body { background: var(--wit); font-size: 11pt; }
	header.site, .logoband, .demo-balk, .voortgang, .knoppenrij, .knop, .geen-print { display: none !important; }
	section { padding: 0 0 1rem; }
	.wrap, .smal { width: 100%; }
	article.mp, .kaart, table.uitslag, table.staaf, .radarhouder { break-inside: avoid; }
	article.mp { border: none; border-top: 1px solid var(--lijn); border-radius: 0; padding: 0.75rem 0 0; }
	a { color: var(--zwart); text-decoration: none; }
	.stap { display: block !important; }
}