/**
 * Gravity Forms in de huisstijl
 *
 * Het thema had geen enkele regel voor Gravity Forms. De formulieren
 * stonden daardoor overal in de standaardkleuren van de plugin: blauwe
 * knoppen (#204ce5), grijze velden van 38px met 3px ronding en tekst op
 * 14px. Dat gold voor alle formulieren op de site.
 *
 * HOE DIT WERKT
 * Het Orbital-thema van Gravity Forms is opgebouwd uit custom properties
 * — bijna achthonderd — die allemaal teruggrijpen op een handvol
 * basiswaarden. Die basiswaarden zetten we hier om naar de thematokens.
 * Dat is stabieler dan tegen de selectors van de plugin aan vechten: bij
 * een update van Gravity Forms veranderen de selectors wel eens, de
 * namen van deze eigenschappen vrijwel nooit.
 *
 * WAAROM !important
 * Gravity Forms drukt per formulier een eigen <style> af in de pagina,
 * met een selector op id-niveau:
 *   #gform_wrapper_2[data-form-index="0"].gform-theme { --gf-color-primary: #204ce5 }
 * Daar komt een gewone klasseselector niet overheen. !important op een
 * custom property is hier de rustigste oplossing: het raakt alleen deze
 * variabelen, niet de regels die ze gebruiken.
 *
 * NAGEMETEN OP DE STAGING (22 oktober), contactpagina, formulier 2:
 *   knop ..... caramelvlak, midnight tekst, 48px hoog, 6px ronding,
 *              AlternateGotNo3D in kapitalen — gelijk aan .bw-btn--primary
 *   veld ..... wit, 1px midnight-30%, 6px ronding, 48px hoog, Hubballi
 *              — gelijk aan .bw-field
 *   vinkje ... midnight in plaats van het blauw van de plugin
 *   focus .... 3px rgba(midnight, 0.65)
 */

.gform_wrapper.gform-theme {

	/* Vorm en maat: gelijk aan .bw-field en .bw-btn. */
	--gf-radius: var(--bw-radius-sm) !important;
	--gf-ctrl-radius: var(--bw-radius-sm) !important;
	--gf-ctrl-btn-radius: var(--bw-radius-sm) !important;
	--gf-ctrl-size: 3rem !important;
	--gf-ctrl-size-md: 3rem !important;
	--gf-ctrl-btn-size: 3rem !important;
	--gf-ctrl-btn-padding-x-md: 1.6rem !important;

	/* Typografie: velden in de broodtekst, knoppen in de kopletter. */
	--gf-ctrl-font-family: var(--bw-font-body) !important;
	--gf-ctrl-font-size: var(--bw-text-base) !important;
	--gf-ctrl-btn-font-family: var(--bw-font-heading) !important;
	--gf-ctrl-btn-font-size: var(--bw-text-sm) !important;
	--gf-ctrl-btn-letter-spacing: var(--bw-tracking-caps) !important;
	--gf-ctrl-btn-text-transform: uppercase !important;

	/* Geen slagschaduw; de site gebruikt die alleen bij zwevende kaarten. */
	--gf-ctrl-shadow: none !important;
	--gf-ctrl-btn-shadow: none !important;
	--gf-ctrl-btn-shadow-hover: none !important;
	--gf-ctrl-btn-shadow-focus: none !important;

	/* Invoervelden. */
	--gf-ctrl-bg-color: var(--bw-white) !important;
	--gf-ctrl-color: var(--bw-midnight) !important;
	--gf-ctrl-border-color: var(--bw-border-strong) !important;
	--gf-ctrl-border-color-focus: var(--bw-midnight) !important;

	/*
	 * De accentkleur stuurt bij Gravity Forms ook de focusring, de
	 * aangevinkte vakjes en de links. Die staat daarom op midnight en
	 * niet op caramel: caramel haalt op wit 2,95:1 en blijft daarmee
	 * onder de 3:1 die WCAG 2.2 voor zulke randen vraagt.
	 */
	--gf-color-primary: var(--bw-midnight) !important;
	--gf-color-primary-rgb: 25, 48, 91 !important;
	--gf-color-primary-contrast: var(--bw-white) !important;
	--gf-color-primary-darker: var(--bw-midnight) !important;
	--gf-color-primary-lighter: var(--bw-midnight-tint) !important;

	/*
	 * De verzendknop staat wel in caramel, net als elke primaire knop op
	 * de site. Het vlak is --bw-caramel-surface en niet het merkcaramel:
	 * met midnight tekst komt dat op 4,82:1 en haalt het AA.
	 */
	--gf-ctrl-btn-bg-color-primary: var(--bw-caramel-surface) !important;
	--gf-ctrl-btn-bg-color-hover-primary: var(--bw-caramel) !important;
	--gf-ctrl-btn-bg-color-focus-primary: var(--bw-caramel-surface) !important;
	--gf-ctrl-btn-border-color-primary: var(--bw-caramel-surface) !important;
	--gf-ctrl-btn-border-color-hover-primary: var(--bw-caramel) !important;
	--gf-ctrl-btn-border-color-focus-primary: var(--bw-caramel-surface) !important;
	--gf-ctrl-btn-color-primary: var(--bw-midnight) !important;
	--gf-ctrl-btn-color-hover-primary: var(--bw-midnight) !important;
	--gf-ctrl-btn-color-focus-primary: var(--bw-midnight) !important;

	/* "Vorige" op een formulier met pagina's: de secundaire knop. */
	--gf-ctrl-btn-bg-color-secondary: transparent !important;
	--gf-ctrl-btn-bg-color-hover-secondary: var(--bw-midnight) !important;
	--gf-ctrl-btn-border-color-secondary: var(--bw-midnight) !important;
	--gf-ctrl-btn-border-color-hover-secondary: var(--bw-midnight) !important;
	--gf-ctrl-btn-color-secondary: var(--bw-midnight) !important;
	--gf-ctrl-btn-color-hover-secondary: var(--bw-white) !important;
}

/*
 * Vinkjes en keuzerondjes zijn gewone browserbesturing. Die luisteren
 * niet naar de variabelen van Gravity Forms maar naar accent-color, en
 * stonden daardoor nog in het blauw van de plugin.
 */
.gform_wrapper.gform-theme input[type="checkbox"],
.gform_wrapper.gform-theme input[type="radio"] {
	accent-color: var(--bw-midnight);
}