/*
 * Invoervelden, voor de hele site. Zie velden.php en "Invoervelden" in
 * docs/notities/opmaak.md.
 *
 * De afspraak: wit is invullen, mint is informatie of niet beschikbaar. Een
 * veld is een wit vak met een rand die je ook op de mintgrond ziet; een veld
 * dat uit staat krijgt de mint vulling en een bleke rand.
 *
 * Alles loopt via de variabelen van Blocksy. Het thema zet ze op :root
 * (Customizer, in uploads/blocksy/css/global.css); hier staan ze op body, en
 * wat een kind van :root erft, wint van :root zonder dat een selector zwaarder
 * hoeft te zijn. Een onderdeel dat de variabelen zelf zet op een eigen vak
 * (het zoekvenster, de header) houdt zijn eigen waarden, want die staan
 * dichter bij het veld. De regels voor focus en "uit" staan in :where(), dus
 * elke gewone regel van een onderdeel wint ervan.
 */

body {
	/* De rand: 5,2:1 op wit en 4,7:1 op mint, dus ook als 1px goed te zien. */
	--nrd-veld-rand: #557277;
	--nrd-veld-rand-uit: #d6e5df;
	--nrd-veld-tekst-uit: #557277;
	--nrd-veld-gloed: 0 0 0 4px rgba(49, 84, 91, 0.14);

	--theme-form-field-background-initial-color: var(--theme-palette-color-8, #ffffff);
	--theme-form-field-background-focus-color: var(--theme-palette-color-8, #ffffff);
	--theme-form-field-border-initial-color: var(--nrd-veld-rand);
	--theme-form-field-border-focus-color: var(--theme-palette-color-10, #31545b);
	--theme-form-field-border-radius: 10px;
	--theme-form-field-height: 48px;
	--theme-form-text-initial-color: var(--theme-palette-color-2, #121723);
	--theme-form-text-focus-color: var(--theme-palette-color-2, #121723);
	--theme-form-selection-field-initial-color: var(--nrd-veld-rand);
}

/* De cursor in een veld is oranje, zoals in de cadeaubon (DESIGN.md). */
:where(textarea, input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="search"], [type="password"])) {
	caret-color: var(--theme-palette-color-3, #e94e1b);
}

/*
 * Focus. De ring van 2px tekent Blocksy zelf, als outline in de focuskleur
 * hierboven. De gloed komt erbij als box-shadow, een eigenschap die het thema
 * op velden niet zet.
 */
:where(select, textarea, input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="search"], [type="password"], [type="date"], [type="time"], [type="datetime-local"])):focus {
	box-shadow: var(--nrd-veld-gloed);
}

/* Een veld in een omhulsel (zoeken): de gloed hoort om het omhulsel. */
:where(.ct-pseudo-input) {
	--nrd-veld-gloed: none;
}

:where(.ct-pseudo-input):has(:is(input, select):focus) {
	box-shadow: 0 0 0 4px rgba(49, 84, 91, 0.14);
}

/*
 * Uit. Het thema heeft hier niets voor: een uitgeschakeld veld zag er precies
 * zo uit als een gewoon veld. De variabelen staan op het veld zelf, en wat op
 * het element staat wint van wat het erft.
 */
:where(select, textarea, input):disabled {
	--theme-form-field-background-initial-color: var(--theme-palette-color-7, #eef5f2);
	--theme-form-field-border-initial-color: var(--nrd-veld-rand-uit);
	--theme-form-text-initial-color: var(--nrd-veld-tekst-uit);
	--theme-form-selection-field-initial-color: var(--nrd-veld-rand-uit);
	cursor: not-allowed;
}

/*
 * Het contactformulier is van SureForms en heeft eigen variabelen. Die zet de
 * plugin op het vak om het formulier; op het formulier zelf staan ze dichter
 * bij de velden. SureForms tekent bij focus alleen een rand van 1px en een
 * gloed, dus de gloed is hier voller. De hoek en de gloed hebben in de stand
 * "eigen opmaak" van dat formulier andere namen (--srfm-field-*).
 */
.srfm-form {
	--srfm-color-input-background: var(--theme-palette-color-8, #ffffff);
	--srfm-color-input-border: var(--nrd-veld-rand);
	--srfm-color-input-border-hover: var(--theme-palette-color-10, #31545b);
	--srfm-color-input-text: var(--theme-palette-color-2, #121723);
	--srfm-field-border-radius-top: 10px;
	--srfm-field-border-radius-right: 10px;
	--srfm-field-border-radius-bottom: 10px;
	--srfm-field-border-radius-left: 10px;
	--srfm-field-box-shadow-focus: 0 0 0 3px rgba(49, 84, 91, 0.45);
	--srfm-input-height: 48px;
}

/* ==========================================================================
 * Knoppen, vinkjes en keuzerondjes, en "(optioneel)". Live sinds 12 oktober
 * 2026. Zie "Vinkjes en rondjes 20px" in docs/notities/opmaak.md.
 * ========================================================================== */

/*
 * De gewone knop is petrol. Het thema kleurt een knop zonder eigen opmaak
 * salie, met witte tekst: 3,08:1, en hij oogt uitgeschakeld ("Waardebon
 * toepassen" in de winkelmand, de drie knoppen op Klantenservice). Petrol met
 * wit is 8,2:1. De hover (inkt) blijft die van het thema.
 */
body {
	--theme-button-background-initial-color: var(--theme-palette-color-10, #31545b);
}

/*
 * Vinkjes en keuzerondjes: 20px, zoals DESIGN.md zegt. Dit is de enige plek
 * in dit bestand die bewust van het thema wint. Blocksy zet de maat (16px)
 * vast in selectors met een klasse en heeft er geen variabele voor; "body"
 * ervoor maakt deze regel één stap zwaarder. --top is de variabele van het
 * thema voor de plek op de regel: 3px bij 16px, dus 5px bij 20px.
 */
body :is(.ct-checkbox, .comment-form input[type="checkbox"], .woocommerce-form__input[type="checkbox"], .woocommerce-form__label-for-checkbox input[type="checkbox"], .woocommerce-input-wrapper input[type="checkbox"], .wc_payment_method > input[type="radio"], .woocommerce-shipping-methods input[type="radio"], .payment_box input[type="radio"]) {
	--top: 5px;
	width: 20px;
	min-width: 20px;
	height: 20px;
}

/* Het vinkje en de stip groeien mee. */
body :is(.ct-checkbox, .comment-form input[type="checkbox"], .woocommerce-form__input[type="checkbox"], .woocommerce-form__label-for-checkbox input[type="checkbox"], .woocommerce-input-wrapper input[type="checkbox"])::before {
	width: 10px;
	height: 6px;
}

body :is(.wc_payment_method > input[type="radio"], .woocommerce-shipping-methods input[type="radio"], .payment_box input[type="radio"])::before {
	width: 8px;
	height: 8px;
}

/*
 * Een vinkje of rondje dat de browser zelf tekent (retourneren): ook 20px,
 * in petrol. In :where(), dus elk onderdeel dat zijn invoer een eigen maat
 * geeft of verbergt, houdt die. De bezorgkeuze bij afrekenen heeft zijn 20px
 * in afrekenen-kader.css.
 */
:where(input:is([type="checkbox"], [type="radio"])) {
	width: 20px;
	height: 20px;
	accent-color: var(--theme-palette-color-10, #31545b);
}

/*
 * De filters in de winkel (blok van WooCommerce). Het vakje is 1em van zijn
 * omhulsel en krijgt zijn kleuren uit variabelen; het grijze waas eroverheen
 * is currentColor op 10%. Dus: de letter van het omhulsel op 20px, de kleur
 * op wit (dan is het waas onzichtbaar), en de variabelen op de veldstijl.
 */
.wc-block-product-filter-checkbox-list__input-wrapper {
	--wc-product-filter-checkbox-list-option-element: var(--theme-palette-color-8, #ffffff);
	--wc-product-filter-checkbox-list-option-element-border: var(--nrd-veld-rand);
	--wc-product-filter-checkbox-list-option-element-selected: var(--theme-palette-color-8, #ffffff);
	color: var(--theme-palette-color-8, #ffffff);
	font-size: 20px;
}

.wc-block-product-filter-checkbox-list__input-wrapper:has(:checked) {
	--wc-product-filter-checkbox-list-option-element: var(--theme-palette-color-10, #31545b);
	--wc-product-filter-checkbox-list-option-element-border: var(--theme-palette-color-10, #31545b);
}

/*
 * Verplicht is de gewone stand en krijgt geen teken; wat niet hoeft, krijgt
 * "(optioneel)" achter het label (Aart, 12 oktober 2026). Het contactformulier
 * zette een rood sterretje achter alle vijf de velden.
 */
.srfm-form .srfm-required {
	display: none;
}

/* ==========================================================================
 * Keuzeknoppen bij een variatie: Maling, Branding, kleur en inhoud van het
 * bewaarblik. Live sinds 13 oktober 2026. Zie "Keuzeknoppen wit" in
 * docs/notities/productpagina.md.
 * ========================================================================== */

/*
 * De knoppen van Blocksy waren mint met een salie rand. Volgens de afspraak
 * bovenaan is dat informatie, of een veld dat uit staat, en zo las een
 * bezoeker ze ook: als labels bij de koffie, niet als keuzes (Aart, 13
 * oktober 2026). Nu wit met de rand van een veld. Een gekozen knop blijft
 * petrol met witte tekst; dat is de regel van het thema.
 *
 * Blocksy zet de kleuren uit de Customizer als variabelen op de knop zelf,
 * dus erven vanaf body, zoals bij de velden, kan hier niet. Elke regel
 * hieronder zet dezelfde variabelen en is precies één stap zwaarder dan die
 * van het thema: "table" ervoor. De regel van het thema voor een gekozen
 * knop is zwaarder dan de eerste regel hier en blijft dus gelden.
 * Terug achter de vlag: ":where(.nrd-staging) " voor elke selector (dat telt
 * niet mee in het gewicht).
 */
table [data-swatches-type="button"] .ct-swatch {
	--swatch-button-background-color: var(--theme-palette-color-8, #ffffff);
	--swatch-button-border-color: var(--nrd-veld-rand);
	--swatch-button-text-color: var(--theme-palette-color-2, #121723);
	border-width: 1px;
}

/*
 * Hover. Het thema maakte er een oranje vlak van, en oranje is de bestelknop.
 * De eerste regel haalt dat overal weg, ook op een telefoon: daar blijft
 * hover hangen na een tik, dus een knop die je net weer uitzette bleef oranje
 * tot je ergens anders tikte. Waar een muis is komt er een petrol rand van
 * 2px bij (de rand plus een binnenrand).
 */
table [data-swatches-type="button"] :where(:not(.ct-out-of-stock, [aria-pressed="true"])):hover .ct-swatch {
	--swatch-button-background-color: var(--theme-palette-color-8, #ffffff);
	--swatch-button-border-color: var(--nrd-veld-rand);
	--swatch-button-text-color: var(--theme-palette-color-2, #121723);
}

@media (hover: hover) {
	table [data-swatches-type="button"] :where(:not(.ct-out-of-stock, [aria-pressed="true"])):hover .ct-swatch {
		--swatch-button-border-color: var(--theme-palette-color-10, #31545b);
		box-shadow: inset 0 0 0 1px var(--theme-palette-color-10, #31545b);
	}
}

/* Niet te kiezen (uitverkocht): zoals een veld dat uit staat. */
table [data-swatches-type="button"] .ct-out-of-stock .ct-swatch {
	--swatch-button-background-color: var(--theme-palette-color-7, #eef5f2);
	--swatch-button-border-color: var(--nrd-veld-rand-uit);
	--swatch-button-text-color: var(--nrd-veld-tekst-uit);
}