/**
 * Aanleg landingspagina — dakterraspro
 * Hoort bij page-aanleg-service.php
 *
 * PLAATSEN: /wp-content/themes/dakterraspro/assets/css/aanleg.css
 *
 * ============================================================
 * ENQUEUE — dit blok in functions.php
 * ============================================================
 *
 * add_action( 'wp_enqueue_scripts', function () {
 *     if ( ! is_page_template( 'page-aanleg-service.php' ) && ! is_page( 'aanleg-service' ) ) {
 *         return;
 *     }
 *     wp_enqueue_style(
 *         'dtp-aanleg',
 *         get_theme_file_uri( '/assets/css/aanleg.css' ),
 *         array(),                       // eventueel array('dakterraspro-style')
 *         '1.0.0'
 *     );
 *     wp_enqueue_script(
 *         'dtp-aanleg',
 *         get_theme_file_uri( '/assets/js/aanleg.js' ),
 *         array(),
 *         '1.0.0',
 *         true                           // in de footer
 *     );
 * } );
 *
 * ============================================================
 * TOKENS
 * ============================================================
 * Alles hieronder gebruikt --al-* variabelen met een fallback.
 * Heeft je theme al eigen variabelen, verwijs er dan naar:
 *
 *     --al-geel: var(--kleur-accent);
 *
 * Dan hoef je verder niets aan te passen.
 *
 * De prefix al- staat overal op, zodat niets in dit bestand
 * kan botsen met je bestaande CSS of met WooCommerce.
 * ============================================================
 */

.aanleg {
	--al-geel:      #F2C400;
	--al-geel-dim:  #C9A300;
	--al-zwart:     #131313;
	--al-eggshell:  #ECEDE8;
	--al-wit:       #FFFFFF;
	--al-grijs:     #8A8A85;

	--al-lijn-d: rgba(255,255,255,.14);
	--al-lijn-l: rgba(19,19,19,.14);

	/* laat leeg om je theme-fonts te erven */
	--al-display: inherit;
	--al-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

	--al-wrap: 76rem;
	--al-pad: clamp(1.25rem, 5vw, 3.5rem);
}

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

.al-wrap {
	max-width: var(--al-wrap);
	margin-inline: auto;
	padding-inline: var(--al-pad);
}

/* ===================== TYPOGRAFIE ===================== */

.al-eyebrow {
	font-family: var(--al-mono);
	font-size: .6875rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--al-grijs);
	margin: 0 0 1rem;
}
.al-eyebrow--geel   { color: var(--al-geel); }
.al-eyebrow--donker { color: rgba(19,19,19,.55); }

.al-h1,
.al-h2 {
	font-family: var(--al-display);
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: -.015em;
	line-height: .94;
	margin: 0;
	text-wrap: balance;
}
.al-h1 { font-size: clamp(2.5rem, 10vw, 5.5rem); }
.al-h2 { font-size: clamp(1.875rem, 6vw, 3.5rem); margin-bottom: 1.5rem; }

.al-lead {
	max-width: 42rem;
	font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
	line-height: 1.6;
}
.al-dim   { color: rgba(255,255,255,.66); }
.al-dim-l { color: rgba(19,19,19,.66); }

/* ===================== KNOPPEN ===================== */

.al-btn {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	font-family: var(--al-mono);
	font-size: .75rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 1.0625rem 1.75rem;
	border: 1px solid transparent;
	border-radius: 0;
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease, transform .1s ease,
	            background-color .15s ease, border-color .15s ease;
}
.al-btn:active { transform: translateY(1px); }
.al-btn:focus-visible { outline: 2px solid var(--al-geel); outline-offset: 3px; }

.al-btn--geel  { background: var(--al-geel); color: var(--al-zwart); }
.al-btn--geel:hover { filter: brightness(1.09); color: var(--al-zwart); }

.al-btn--lijn  { background: transparent; color: var(--al-wit); border-color: var(--al-lijn-d); }
.al-btn--lijn:hover { border-color: var(--al-wit); color: var(--al-wit); }

.al-btn--zwart { background: var(--al-zwart); color: var(--al-wit); }
.al-btn--zwart:hover { background: #000; color: var(--al-wit); }

/* ===================== HERO ===================== */

.al-hero {
	background: var(--al-zwart);
	color: var(--al-wit);
	padding-block: clamp(3rem, 8vw, 6rem) 0;
	overflow: hidden;
}

.al-hero__grid {
	display: grid;
	gap: clamp(2.5rem, 6vw, 4rem);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 62rem) {
	.al-hero__grid {
		grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
		gap: clamp(3rem, 5vw, 5rem);
	}
}

.al-h1 span { display: block; }
.al-accent  { color: var(--al-geel); }

.al-hero__sub {
	margin: 1.75rem 0 0;
	max-width: 34rem;
	font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
	color: rgba(255,255,255,.72);
}
.al-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.al-hero__note {
	margin: 1.5rem 0 0;
	font-family: var(--al-mono);
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--al-grijs);
	line-height: 1.8;
}

/* ---- doorsnede ---- */

.al-snede {
	border: 1px solid var(--al-lijn-d);
	background: linear-gradient(180deg, #171717, #131313);
	padding: clamp(1.25rem, 3vw, 2rem);
}
.al-snede__kop {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 1.5rem;
	font-family: var(--al-mono);
	font-size: .6875rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--al-grijs);
}
.al-snede__hoogte {
	color: var(--al-geel);
	font-size: 1.5rem;
	letter-spacing: 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.al-stack { position: relative; display: flex; flex-direction: column; justify-content: flex-end; }

.al-laag {
	position: relative;
	display: flex;
	align-items: center;
	padding-left: .875rem;
	font-family: var(--al-mono);
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255,255,255,.8);
	border: 1px solid rgba(255,255,255,.1);
	border-bottom: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: height .18s cubic-bezier(.2,.8,.3,1);
}
.al-laag:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }

.al-laag__mm {
	margin-left: auto;
	padding-right: .875rem;
	color: var(--al-grijs);
	font-variant-numeric: tabular-nums;
}

.al-laag--tegel {
	height: 44px;
	background:
		repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 33.333%),
		linear-gradient(180deg, #4A4A46, #373734);
	color: #fff;
}
.al-laag--rubber { height: 12px; background: #262625; font-size: 0; }
.al-laag--drager {
	height: var(--al-h-drager, 90px);
	background:
		repeating-linear-gradient(90deg,
			transparent 0 22%, rgba(242,196,0,.5) 22% 24%, transparent 24% 100%),
		linear-gradient(180deg, #1E1E1D, #1A1A19);
}
.al-laag--doek     { height: 10px; background: #2E2E2B; font-size: 0; }
.al-laag--dakbed   { height: 26px; background: linear-gradient(180deg, #23231F, #1B1B18); }
.al-laag--dakvloer {
	height: 34px;
	background: repeating-linear-gradient(135deg, #1A1A17 0 6px, #141412 6px 12px);
	color: var(--al-grijs);
}

/* ---- schuif ---- */

.al-schuif { margin-top: 1.75rem; }
.al-schuif__label {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-family: var(--al-mono);
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--al-grijs);
	margin-bottom: .75rem;
}

.aanleg input[type=range] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 2rem;
	background: transparent;
	cursor: grab;
	margin: 0;
	padding: 0;
	border: 0;
}
.aanleg input[type=range]:active { cursor: grabbing; }
.aanleg input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--al-lijn-d); }
.aanleg input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1.5rem; height: 1.5rem;
	margin-top: -.6875rem;
	background: var(--al-geel);
	border: 0; border-radius: 0;
}
.aanleg input[type=range]::-moz-range-track { height: 2px; background: var(--al-lijn-d); }
.aanleg input[type=range]::-moz-range-thumb {
	width: 1.5rem; height: 1.5rem;
	background: var(--al-geel);
	border: 0; border-radius: 0;
}
.aanleg input[type=range]:focus-visible { outline: 2px solid var(--al-geel); outline-offset: 6px; }

.al-schuif__uitleg {
	margin: .75rem 0 0;
	font-size: .875rem;
	line-height: 1.55;
	color: rgba(255,255,255,.6);
}

/* ---- badges ---- */

.al-badges {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--al-lijn-d);
	margin-top: clamp(3rem, 7vw, 5rem);
}
@media (min-width: 52rem) { .al-badges { grid-template-columns: repeat(4, 1fr); } }

.al-badge {
	padding: 1.5rem 1.25rem;
	border-right: 1px solid var(--al-lijn-d);
	border-bottom: 1px solid var(--al-lijn-d);
}
@media (min-width: 52rem) { .al-badge:last-child { border-right: 0; } }

.al-badge__t {
	font-family: var(--al-mono);
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0 0 .375rem;
	color: var(--al-wit);
}
.al-badge__d { margin: 0; font-size: .875rem; color: var(--al-grijs); line-height: 1.5; }

/* ===================== SECTIES ===================== */

.al-sec { padding-block: clamp(4rem, 10vw, 7rem); }
.al-sec--donker { background: var(--al-zwart);    color: var(--al-wit); }
.al-sec--licht  { background: var(--al-eggshell); color: var(--al-zwart); }
.al-sec--geel   { background: var(--al-geel);     color: var(--al-zwart); }

.al-sec--licht .al-eyebrow { color: rgba(19,19,19,.5); }

/* ---- opgeleverd werk ---- */

.al-werk {
	list-style: none;
	margin: clamp(2rem, 5vw, 3rem) 0 0;
	padding: 0;
	display: grid;
	gap: clamp(1.5rem, 3vw, 2rem);
	grid-template-columns: 1fr;
}
@media (min-width: 42rem) { .al-werk { grid-template-columns: 1fr 1fr; } }

.al-werk__img,
.al-werk__ph {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin-bottom: 1rem;
}
.al-werk__ph {
	background: #DCDDD7;
	border: 1px solid var(--al-lijn-l);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--al-mono);
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(19,19,19,.4);
	text-align: center;
	padding: 1rem;
}
.al-werk__m2 {
	font-family: var(--al-display);
	font-weight: 800;
	font-size: clamp(1.5rem, 4vw, 2rem);
	line-height: 1;
	margin: 0 0 .375rem;
	font-variant-numeric: tabular-nums;
}
.al-werk__pl {
	margin: 0 0 .5rem;
	font-family: var(--al-mono);
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(19,19,19,.5);
}
.al-werk__mat { margin: 0; font-size: .9375rem; color: rgba(19,19,19,.7); line-height: 1.5; }

/* ---- inmeten ---- */

.al-zien {
	display: grid;
	gap: 0;
	margin-top: clamp(2rem, 5vw, 3rem);
	border-top: 1px solid var(--al-lijn-d);
}
.al-zien__rij {
	display: grid;
	grid-template-columns: 1fr;
	gap: .375rem;
	padding: 1.375rem .25rem;
	border-bottom: 1px solid var(--al-lijn-d);
}
@media (min-width: 48rem) {
	.al-zien__rij { grid-template-columns: 3rem 15rem 1fr; gap: 2rem; align-items: baseline; }
}
.al-zien__nr {
	font-family: var(--al-mono);
	font-size: .75rem;
	color: var(--al-geel);
	font-variant-numeric: tabular-nums;
}
.al-zien__wat    { margin: 0; font-weight: 700; }
.al-zien__uitleg { margin: 0; color: rgba(255,255,255,.66); line-height: 1.6; }

/* ---- werkwijze ---- */

.al-stappen {
	list-style: none;
	margin: clamp(2rem, 5vw, 3rem) 0 0;
	padding: 0;
	border-top: 1px solid var(--al-lijn-l);
}
.al-stappen li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .25rem 1.5rem;
	padding: 1.375rem .25rem;
	border-bottom: 1px solid var(--al-lijn-l);
	align-items: baseline;
}
.al-stappen__nr {
	font-family: var(--al-mono);
	font-size: .75rem;
	color: var(--al-geel-dim);
	font-variant-numeric: tabular-nums;
}

/* ---- twijfels ---- */

.al-vragen { margin-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--al-lijn-d); }

.al-vraag { border-bottom: 1px solid var(--al-lijn-d); }
.al-vraag summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.375rem .25rem;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.4;
}
.al-vraag summary::-webkit-details-marker { display: none; }
.al-vraag summary::after {
	content: "";
	margin-left: auto;
	flex: 0 0 auto;
	width: .875rem;
	height: .875rem;
	background:
		linear-gradient(var(--al-wit), var(--al-wit)) center / 100% 2px no-repeat,
		linear-gradient(var(--al-wit), var(--al-wit)) center / 2px 100% no-repeat;
	transition: transform .2s ease;
}
.al-vraag[open] summary::after { transform: rotate(90deg); background-size: 100% 2px, 0 0; }
.al-vraag summary:hover { color: var(--al-geel); }
.al-vraag summary:focus-visible { outline: 2px solid var(--al-geel); outline-offset: 2px; }

.al-vraag__a { padding: 0 .25rem 1.5rem; max-width: 46rem; }
.al-vraag__a p { margin: 0 0 .875rem; color: rgba(255,255,255,.7); line-height: 1.65; }
.al-vraag__a p:last-child { margin-bottom: 0; }

.al-vragen__slot { margin-top: 2rem; font-weight: 700; }
.al-vragen__slot a { color: var(--al-geel); text-underline-offset: 3px; }

/* ---- formulier ---- */

/* .al-form en .al-hero__tekst hebben bewust geen regels: ze staan in de
   template als haakje om later iets aan te hangen zonder de HTML te
   hoeven aanpassen. Niet weghalen uit de PHP. */

.al-form__grid {
	display: grid;
	gap: 1.25rem 1.5rem;
	grid-template-columns: 1fr;
	margin-top: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 44rem) { .al-form__grid { grid-template-columns: 1fr 1fr; } }

.al-veld { margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.al-veld--vol { grid-column: 1 / -1; }

.al-veld label {
	font-family: var(--al-mono);
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.6);
}
.al-req { color: var(--al-geel); }

.al-veld input,
.al-veld select,
.al-veld textarea {
	width: 100%;
	background: transparent;
	color: var(--al-wit);
	border: 1px solid var(--al-lijn-d);
	border-radius: 0;
	padding: .9375rem 1rem;
	font: inherit;
	font-size: 1rem;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s ease;
}
.al-veld select {
	background-image:
		linear-gradient(45deg, transparent 50%, #fff 50%),
		linear-gradient(135deg, #fff 50%, transparent 50%);
	background-position: calc(100% - 1.25rem) 55%, calc(100% - 1rem) 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2.75rem;
}

/* De opties worden door het besturingssysteem getekend, niet door
   de select. Zonder deze regel krijg je witte tekst op een witte
   achtergrond en zie je de keuzes niet. */
.al-veld select option {
	background-color: var(--al-zwart);
	color: var(--al-wit);
}
.al-veld input::placeholder,
.al-veld textarea::placeholder { color: rgba(255,255,255,.32); }

.al-veld input:focus-visible,
.al-veld select:focus-visible,
.al-veld textarea:focus-visible {
	outline: 2px solid var(--al-geel);
	outline-offset: 2px;
	border-color: var(--al-geel);
}
.al-veld textarea { resize: vertical; min-height: 6.5rem; }

.al-veld input[type=file] { padding: .8125rem 1rem; font-size: .9375rem; }
.al-veld input[type=file]::file-selector-button {
	font: inherit;
	font-family: var(--al-mono);
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--al-geel);
	color: var(--al-zwart);
	border: 0;
	border-radius: 0;
	padding: .5rem .875rem;
	margin-right: 1rem;
	cursor: pointer;
}

.al-hint { font-size: .8125rem; color: rgba(255,255,255,.48); }
.al-form__slot { margin: 1.75rem 0 0; font-size: .9375rem; color: rgba(255,255,255,.6); }
.al-form__slot a { color: var(--al-wit); text-decoration: underline; text-underline-offset: 3px; }

/* honeypot: niet display:none, want daar kijken bots naar */
.al-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.al-fout {
	background: var(--al-geel);
	color: var(--al-zwart);
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
	font-weight: 700;
}

/* ---- zelf leggen ---- */

.al-sec--geel .al-h2   { max-width: 22ch; }
.al-sec--geel .al-lead { color: rgba(19,19,19,.8); }
.al-zelf__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

/* ---- sticky mobiel ---- */

.al-sticky {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 50;
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid rgba(0,0,0,.2);
}
.al-sticky a {
	padding: 1.0625rem .5rem;
	text-align: center;
	text-decoration: none;
	font-family: var(--al-mono);
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
}
.al-sticky__bel   { background: var(--al-wit);  color: var(--al-zwart); }
.al-sticky__vraag { background: var(--al-geel); color: var(--al-zwart); }

@media (min-width: 48rem) { .al-sticky { display: none; } }
@media (max-width: 47.99rem) { .aanleg { padding-bottom: 3.5rem; } }

/* ---- reveal ---- */

.al-rev {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity .6s ease, transform .6s ease;
}
.al-rev.is-in { opacity: 1; transform: none; }

/* Werkt JavaScript niet, dan blijft alles gewoon zichtbaar.
   Onzichtbare tekst is erger dan een animatie die niet afgaat. */
.no-js .al-rev { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.aanleg * { animation: none !important; transition: none !important; }
	.al-rev { opacity: 1; transform: none; }
}