/**
 * Pleincheck: de antwoorden als grote keuzekaarten
 *
 * Aangevraagd door Beweeg Wijs voor het formulier op /pleincheck/. Staat
 * hier en niet in de Customizer of in een plugin, zodat de opmaak met het
 * thema meeverhuist en in de repository staat.
 *
 * TWEE DINGEN MOETEN IN HET CMS KLOPPEN
 * 1. Elk vraagveld heeft de CSS-class `bw-pleincheck-vraag` (bij het veld
 *    onder Vormgeving → Aangepaste CSS-class). Zonder die class blijft de
 *    vraag een gewone radiolijst. Dat is met opzet: zo raakt deze opmaak
 *    geen enkel ander formulier op de site.
 * 2. De voortgangsbalk en de paginaknoppen hangen aan formulier-ID 8.
 *    Krijgt de Pleincheck een ander ID, dan verhuist #gform_wrapper_8 mee.
 *
 * NAGEMETEN OP HET ECHTE FORMULIER (22 oktober), voorbeeldweergave van
 * formulier 8 met de themastylesheets erbij geladen. Twaalf pagina's,
 * tien vragen met elk vier antwoorden, en de class staat op alle tien:
 *   niet gekozen ... wit vlak, midnight tekst, 2px midnight rand
 *   gekozen ....... midnight vlak, witte tekst
 *   radio ......... dekt de kaart exact, opacity 0
 *   keuzelijst .... grid, 12px ertussen, vier kaarten onder elkaar
 *   voortgangsbalk  midnight; "Stap 1 van 12" onzichtbaar maar
 *                   voorleesbaar (1px, clip-path)
 *   knoppen ....... Vorige en Volgende 48px hoog
 *   toetsenbord ... een Tab landt op de radio, :focus-visible raakt,
 *                   en de kaart krijgt 3px midnight met 3px offset
 *                   (12,9:1 op wit — ruim boven de 3:1 die WCAG vraagt)
 *
 * MARKUP VAN GRAVITY FORMS
 * De keuzestand wordt met :has() op .gchoice gelezen en niet alleen met
 * `input + label`. Gravity Forms kan de volgorde binnen .gchoice wijzigen
 * — bij een update of een andere formulierstijl — en dan blijft de
 * gekozen kaart gemarkeerd. De siblingvariant staat er als vangnet bij.
 */

/*
 * GEMETEN OP DE STAGING (22 oktober)
 * Gravity Forms legt de keuzelijst zelf neer met
 * `.gform-theme--framework .gfield--type-choice .gfield_radio` — drie
 * klassen, in een stylesheet die later laadt dan deze. Een selector van
 * twee klassen verliest daar dus van, ook al staat hij hier. Daarom
 * hangt deze ene regel aan het formulier-id: dat weegt zwaarder, zonder
 * !important.
 *
 * Het gaat om meer dan de ruimte ertussen: zet de redactie de
 * antwoorden in het veld op horizontaal, dan maakt Gravity Forms er een
 * rij van en staan de kaarten naast elkaar. Met grid blijven ze onder
 * elkaar staan, wat de bedoeling is.
 */
#gform_wrapper_8 .bw-pleincheck-vraag .gfield_radio {
	display: grid;
	gap: 0.75rem;
}

/*
 * GEMETEN OP HET ECHTE FORMULIER (22 oktober)
 * Gravity Forms maakt van elke keuze een inline-grid met twee kolommen:
 * het bolletje, en het label ernaast met 12px marge. Met een onzichtbaar
 * bolletje valt die eerste kolom weg en bleef het label op de breedte van
 * zijn eigen tekst staan — 584px in een rij van 1736px — terwijl de
 * onzichtbare radio de hele rij dekte. Daardoor selecteerde een klik ver
 * naast de kaart alsnog dat antwoord, en stond de kaart 12px naar rechts.
 *
 * Als blok vullen label en radio precies hetzelfde vlak. Nagemeten:
 * label en radio 1736x59 met dezelfde linkerrand.
 */
#gform_wrapper_8 .bw-pleincheck-vraag .gchoice {
	display: block;
	position: relative;
}

#gform_wrapper_8 .bw-pleincheck-vraag .gchoice label {
	width: 100%;
	margin: 0;
}

/*
 * De radio zelf dekt de hele kaart. Daarmee is het hele vlak klikbaar,
 * terwijl de bediening die van een gewone radiogroep blijft: pijltjes
 * binnen de groep, Tab naar de volgende vraag.
 */
.bw-pleincheck-vraag .gchoice input[type="radio"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.bw-pleincheck-vraag .gchoice label {
	display: block;
	min-height: 3.5rem;
	padding: 1rem 1.25rem;
	border: 2px solid var(--bw-midnight);
	border-radius: var(--bw-radius);
	background-color: var(--bw-white);
	color: var(--bw-midnight);
	font-size: 1.05rem;
	line-height: 1.4;
	cursor: pointer;
	transition:
		background-color var(--bw-duration-fast) var(--bw-ease),
		color var(--bw-duration-fast) var(--bw-ease);
}

/* Geen hoverstand op een aanraakscherm: die blijft daar hangen na een tik. */
@media (hover: hover) {
	.bw-pleincheck-vraag .gchoice label:hover {
		background-color: var(--bw-oat);
	}
}

.bw-pleincheck-vraag .gchoice:has(input[type="radio"]:checked) label,
.bw-pleincheck-vraag .gchoice input[type="radio"]:checked + label {
	background-color: var(--bw-midnight);
	color: var(--bw-white);
}

/*
 * Focusring: die van het thema, niet caramel. Caramel komt op wit uit op
 * 2,95:1 en op oat op 2,43:1, en WCAG 2.2 vraagt 3:1 voor een
 * focusindicator. --bw-focus wisselt mee met het vlak eronder, dus de
 * ring houdt zijn contrast ook op een donkere sectie.
 */
.bw-pleincheck-vraag .gchoice:has(input[type="radio"]:focus-visible) label,
.bw-pleincheck-vraag .gchoice input[type="radio"]:focus-visible + label {
	outline: var(--bw-focus-width) solid var(--bw-focus);
	outline-offset: var(--bw-focus-offset);
}

/*
 * Hoog contrast in Windows zet alle kleuren opzij. De kleuromslag valt
 * daar dus weg en is dan het enige verschil tussen gekozen en niet
 * gekozen. Daarom krijgt de gekozen kaart ook een dikkere rand.
 */
@media (forced-colors: active) {
	.bw-pleincheck-vraag .gchoice:has(input[type="radio"]:checked) label,
	.bw-pleincheck-vraag .gchoice input[type="radio"]:checked + label {
		border-width: 5px;
	}
}

/*
 * "Stap x van 12" weg: het formulier noemt zelf al "Vraag n van 10".
 * Visueel verbergen en niet display:none, zodat een schermlezer de
 * voortgang nog wel krijgt.
 */
#gform_wrapper_8 .gf_progressbar_title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Voortgangsbalk in huisstijl. Welke kleurklasse Gravity Forms op de
 * gevulde balk zet, hangt aan een instelling in het formulier zelf —
 * percentbar_blue is er maar een van. Daarom alle varianten.
 */
#gform_wrapper_8 .gf_progressbar_percentage,
#gform_wrapper_8 [class*="percentbar_"] {
	background-color: var(--bw-midnight);
}

/* Vorige en Volgende groter: 48px hoog, ruim genoeg om met een duim te raken. */
#gform_wrapper_8 .gform_page_footer .button,
#gform_wrapper_8 .gform_page_footer .gform_button,
#gform_wrapper_8 .gform_page_footer .gform_next_button,
#gform_wrapper_8 .gform_page_footer .gform_previous_button {
	min-height: 3rem;
	padding: 0.75rem 1.75rem;
}