/**
 * Bestelformulier Klein Westland.
 *
 * De meeste bestellers zijn op leeftijd, dus dit bestand is geschreven met drie
 * harde ondergrenzen: niets kleiner dan 18px, niets aanklikbaars kleiner dan
 * 48px, en alle tekstkleuren ruim boven de WCAG AA norm. De gerechtnaam is het
 * enige uitgesproken element op de pagina, de rest blijft rustig.
 */

.kwb {
	/* Contrast op wit: inkt 14:1, gedempt 6,8:1, groen 7,4:1. */
	--kw-inkt: #1b2a1a;
	--kw-gedempt: #4d5a4b;
	--kw-groen: #2f5b2d;
	--kw-groen-diep: #21431f;
	--kw-groen-zacht: #e3eee2;
	/* De rand haalt 3,2:1 tegen wit, de norm voor bedieningselementen. De
	   lichtere lijn is puur een scheiding tussen regels en valt daar buiten. */
	--kw-lijn: #869584;
	--kw-lijn-licht: #dde4dc;
	--kw-wit: #fff;
	--kw-alarm: #9c2b20;
	--kw-alarm-zacht: #fbeceb;
	--kw-let-op: #a8660b;
	--kw-let-op-zacht: #fdf1dc;

	--kw-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
	--kw-radius: 10px;

	color: var(--kw-inkt);
	font-size: 18px;
	line-height: 1.55;
	max-width: 72rem;
	margin: 0 auto;
}

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

/* Het hidden attribuut werkt via de browserstandaard en verliest van elke
   themaregel die display zet. Divi doet dat, dus hier dwingen we het af.
   Zonder deze regel staan alle drie de stappen tegelijk op het scherm. */
.kwb [hidden] { display: none !important; }

/* Themas zetten graag lijstopmaak, marges en knopstijlen terug. Die halen we
   binnen dit formulier weg, zodat de opzet niet afhangt van welk thema er staat. */
.kwb ol,
.kwb ul { list-style: none; margin: 0; padding: 0; }

.kwb button { font-family: inherit; letter-spacing: normal; text-transform: none; }
.kwb fieldset { min-width: 0; }
.kwb p { margin-top: 0; }

/* Divi zet padding-bottom op alle koppen. De categoriekop zit in een h3, dus
   zonder deze reset staat er onder elke categorie een strook witruimte. */
.kwb h1,
.kwb h2,
.kwb h3,
.kwb h4,
.kwb h5,
.kwb h6 {
	margin: 0;
	padding: 0;
	line-height: 1.3;
	color: inherit;
}

.kwb :focus-visible {
	outline: 3px solid var(--kw-groen);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Koppen en blokken */

.kwb-verplicht {
	margin: 0 0 20px;
	font-size: 17px;
	color: var(--kw-gedempt);
}

.kwb-kaart {
	border: 2px solid var(--kw-lijn);
	border-radius: var(--kw-radius);
	background: var(--kw-wit);
}

.kwb-gegevens { padding: 26px 28px; }

.kwb-hint {
	margin: 30px 0 18px;
	font-size: 17px;
	color: var(--kw-gedempt);
}

.kwb-hint strong { color: var(--kw-inkt); }

.kwb-adresbekend {
	margin: 0 0 26px;
	padding: 14px 18px;
	background: var(--kw-groen-zacht);
	border-left: 5px solid var(--kw-groen);
	border-radius: 0 var(--kw-radius) var(--kw-radius) 0;
	font-size: 17px;
}

.kwb-gegevens > .is-laatste { margin-bottom: 0; }

/* Deadlinemelding. Na woensdag 18:00 een opvallend amber vlak met een keuze,
   na donderdag 12:00 een rustige groene mededeling. Tekst blijft in de
   inktkleur, dus het contrast is op beide achtergronden ruim boven de 12:1. */
.kwb-deadline { margin: 0 0 26px; }

.kwb-deadline__melding {
	margin: 0 0 20px;
	padding: 16px 20px;
	border-left: 6px solid var(--kw-groen);
	border-radius: 0 var(--kw-radius) var(--kw-radius) 0;
	background: var(--kw-groen-zacht);
}

.kwb-deadline.is-spoed .kwb-deadline__melding {
	border-left-color: var(--kw-let-op);
	background: var(--kw-let-op-zacht);
}

.kwb-deadline.is-gesloten .kwb-deadline__melding { margin-bottom: 0; }

.kwb-deadline__kop {
	display: block;
	margin-bottom: 4px;
	font-size: 19px;
	line-height: 1.35;
}

.kwb-deadline__tekst { margin: 0; font-size: 18px; }

.kwb-deadline .kwb-spoed { margin-bottom: 0; }

.kwb-spoed__kosten {
	display: block;
	font-size: 16px;
	font-weight: 400;
	color: var(--kw-gedempt);
}

.kwb-spoed__kosten:empty { display: none; }

.kwb-blok {
	border: 0;
	padding: 0;
	margin: 0 0 26px;
	min-width: 0;
}

.kwb-blok legend {
	padding: 0;
	margin-bottom: 12px;
	font-size: 20px;
	font-weight: 700;
}

.kwb-keuzes { display: grid; gap: 10px; }
.kwb-keuzes--2 { grid-template-columns: repeat(2, 1fr); }
.kwb-keuzes--3 { grid-template-columns: repeat(3, 1fr); }

.kwb-keuze {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	padding: 12px 16px;
	border: 2px solid var(--kw-lijn);
	border-radius: var(--kw-radius);
	background: var(--kw-wit);
	cursor: pointer;
}

.kwb-keuze:hover { border-color: var(--kw-groen); }

.kwb-keuze input {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	accent-color: var(--kw-groen);
	margin: 0;
}

.kwb-keuze:has(input:checked) {
	border-color: var(--kw-groen);
	background: var(--kw-groen-zacht);
	font-weight: 700;
}

/* Velden */

.kwb-velden {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-bottom: 26px;
}

.kwb-veld { margin: 0 0 4px; }
.kwb-veld--breed { margin: 26px 0; }

.kwb-veld label,
.kwb-kies label,
.kwb-teller label,
.kwb-gerecht__opmerking label {
	display: block;
	font-weight: 700;
	font-size: 17px;
	margin-bottom: 6px;
}

.kwb input[type="text"],
.kwb input[type="email"],
.kwb input[type="tel"],
.kwb input[type="search"],
.kwb input[type="number"],
.kwb select,
.kwb textarea {
	width: 100%;
	min-height: 52px;
	padding: 12px 14px;
	border: 2px solid var(--kw-lijn);
	border-radius: var(--kw-radius);
	background: var(--kw-wit);
	color: inherit;
	font-family: inherit;
	font-size: 18px;
}

.kwb textarea { min-height: 110px; }

.kwb input[aria-invalid="true"] { border-color: var(--kw-alarm); }

.kwb-hulp {
	display: block;
	margin-top: 5px;
	font-size: 16px;
	color: var(--kw-gedempt);
}

.kwb-veldfout {
	display: none;
	margin-top: 5px;
	font-size: 16px;
	font-weight: 700;
	color: var(--kw-alarm);
}

.kwb-veldfout.is-zichtbaar { display: block; }

.kwb-zoekveld { max-width: 26rem; margin-bottom: 20px; }

/* Categorieen */

.kwb-catalogus { overflow: hidden; }

.kwb-categorie + .kwb-categorie { border-top: 2px solid var(--kw-lijn); }

.kwb-categorie__titel { font-size: inherit; line-height: 0; }

.kwb-categorie__knop {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 68px;
	padding: 14px 18px;
	border: 0;
	background: var(--kw-wit);
	font: inherit;
	font-size: 20px;
	font-weight: 700;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.kwb-categorie__knop:hover { background: var(--kw-groen-zacht); }
.kwb-categorie.is-open .kwb-categorie__knop { background: var(--kw-groen-zacht); }

.kwb-categorie__icoon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	color: var(--kw-groen);
}

.kwb-categorie__icoon img { max-width: 100%; height: auto; }
.kwb-categorie__naam { flex: 1 1 auto; }

.kwb-categorie__telling {
	flex: 0 0 auto;
	background: var(--kw-groen);
	color: var(--kw-wit);
	font-size: 15px;
	padding: 3px 11px;
	border-radius: 20px;
}

.kwb-categorie__pijl {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border-right: 3px solid var(--kw-groen);
	border-bottom: 3px solid var(--kw-groen);
	transform: translateY(-4px) rotate(45deg);
	transition: transform .15s ease;
}

.kwb-categorie.is-open .kwb-categorie__pijl { transform: translateY(2px) rotate(225deg); }

.kwb-categorie__inhoud { display: none; padding: 0 18px 10px; }
.kwb-categorie.is-open .kwb-categorie__inhoud { display: block; }

/* Gerechten. Vijf kolommen zoals de klant gewend is, maar met een kopregel
   per categorie zodat niemand hoeft te raden wat een veld betekent. */

.kwb-koppen,
.kwb-gerecht {
	display: grid;
	grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) 130px 110px;
	gap: 14px;
	align-items: center;
}

.kwb-koppen {
	padding: 10px 14px;
	margin: 0 -14px 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--kw-gedempt);
	border-bottom: 2px solid var(--kw-lijn);
}

.kwb-gerecht {
	padding: 14px;
	margin: 0 -14px;
	border-top: 1px solid var(--kw-lijn-licht);
	border-left: 5px solid transparent;
}

.kwb-gerecht.is-gekozen {
	background: var(--kw-groen-zacht);
	border-left-color: var(--kw-groen);
	border-radius: 0 var(--kw-radius) var(--kw-radius) 0;
}

.kwb-gerecht__tekst { min-width: 0; }

.kwb-gerecht__naam {
	display: block;
	font-family: var(--kw-serif);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.kwb-gerecht__omschrijving {
	display: block;
	color: var(--kw-gedempt);
	font-size: 16px;
	line-height: 1.4;
}

/* De prijs staat altijd bij zijn eenheid, net als in het oude formulier:
   "€ 3,90 per 300 gram". Groen haalt 7,4:1 op wit en 6,6:1 op het zachte
   groen van een gekozen regel. */
.kwb-gerecht__prijs {
	display: block;
	margin-top: 2px;
	color: var(--kw-groen);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}

.kwb-cel { min-width: 0; }
.kwb-cel select,
.kwb-cel input { width: 100%; }

.kwb-verborgen {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.kwb-geenresultaat {
	padding: 16px 18px;
	background: var(--kw-lijn-licht);
	border-radius: var(--kw-radius);
	font-weight: 700;
}

.kwb-versturen { margin: 24px 0 0; }

/* Knoppen */

.kwb-knop {
	min-height: 60px;
	padding: 14px 30px;
	border: 2px solid var(--kw-groen);
	border-radius: var(--kw-radius);
	background: var(--kw-groen);
	color: var(--kw-wit);
	font: inherit;
	font-size: 19px;
	font-weight: 700;
	cursor: pointer;
}

.kwb-knop:hover:not(:disabled) { background: var(--kw-groen-diep); border-color: var(--kw-groen-diep); }
.kwb-knop:disabled { opacity: .65; cursor: default; }

.kwb-knop--verstuur { min-width: 20rem; }

/* Meldingen */

.kwb-melding {
	padding: 16px 20px;
	border-radius: var(--kw-radius);
	margin-bottom: 22px;
	font-weight: 700;
}

.kwb-melding--fout {
	background: var(--kw-alarm-zacht);
	border-left: 6px solid var(--kw-alarm);
	color: var(--kw-alarm);
}

.kwb-klaar {
	background: var(--kw-groen-zacht);
	border-left: 6px solid var(--kw-groen);
	border-radius: var(--kw-radius);
	padding: 26px 28px;
}

.kwb-klaar h2 { margin: 0 0 10px; font-size: 26px; }
.kwb-klaar p { margin: 0 0 8px; }

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

/* Smalle schermen. Veel bestellers werken op een tablet, dus alles stapelt en
   de bediening wordt eerder groter dan kleiner. */

@media (max-width: 860px) {
	.kwb { font-size: 19px; }

	.kwb-velden,
	.kwb-keuzes--2,
	.kwb-keuzes--3 { grid-template-columns: 1fr; }

	.kwb-gegevens { padding: 20px; }

	/* De tabelopzet wordt hier een gestapelde kaart per gerecht. Vijf kolommen
	   naast elkaar op een telefoon is het grootste pijnpunt van het oude
	   formulier, dus dat komt hier niet terug. */
	.kwb-koppen { display: none; }

	.kwb-gerecht {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		padding: 18px 14px;
	}

	.kwb-gerecht__tekst { grid-column: 1 / -1; }
	.kwb-cel:nth-of-type(1) { grid-column: 1 / -1; }

	.kwb-knop--verstuur { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.kwb * { transition: none !important; animation: none !important; }
	.kwb :is(a, button) { scroll-behavior: auto; }
}