/* ==========================================================================
   GRAVITY FORMS — opmaak
   Zie de handleiding voor uitleg, stappen en probleemoplossing.
   ========================================================================== */


/* ==========================================================================
   1. AANPASSEN — wijzig alleen de waarden in dit blok
   ========================================================================== */

:root {

	/* --- Invoervelden --- */

	--pir2-form-veld-achtergrond:  #fff;      /* achtergrond invoerveld */
	--pir2-form-veld-tekst:        #222;      /* ingetypte tekst */
	--pir2-form-rand:              #145664;   /* rand */
	--pir2-form-rand-actief:       #1e2878;   /* rand bij klikken of Tab */
	--pir2-form-ronding:           6px;       /* hoeken */

	/* --- Teksten --- */

	--pir2-form-titel:             #070D3B;   /* kop boven het formulier */
	--pir2-form-titel-grootte:     30px;
	--pir2-form-intro:             #444;      /* introductietekst */
	--pir2-form-intro-grootte:     16px;
	--pir2-form-label:             #222;      /* tekst boven elk veld */
	--pir2-form-label-grootte:     16px;
	--pir2-form-label-dikte:       600;
	--pir2-form-hulptekst:         #666;      /* kleine tekst onder een veld */
	--pir2-form-hulptekst-grootte: 14px;

	/* --- Verzendknop --- */

	--pir2-form-knop:              #0D284C;   /* achtergrond */
	--pir2-form-knop-hover:        #0D284C;   /* achtergrond bij muis erover */
	--pir2-form-knop-tekst:        #fff;
	--pir2-form-knop-grootte:      19px;
	--pir2-form-knop-dikte:        600;
	--pir2-form-knop-ronding:      6px;
	--pir2-form-knop-padding:      14px 28px; /* boven/onder, links/rechts */

	/* --- Ruimte --- */

	--pir2-form-ruimte-velden:     24px;      /* tussen twee velden */
	--pir2-form-ruimte-knop:       32px;      /* boven de verzendknop */

	/* --- Voortgangsbalk (alleen bij meerdere pagina's) --- */

	--pir2-form-balk-leeg:         #e5e5e5;
	--pir2-form-balk-vol:          #093F4A;
	--pir2-form-balk-hoogte:       10px;
	--pir2-form-balk-ronding:      20px;

}


/* ==========================================================================
   2. NIET AANPASSEN
   ========================================================================== */


/* --- Velden en knop --- */

.gform-theme--framework {
	--gf-color-in-ctrl:                   var(--pir2-form-veld-achtergrond);
	--gf-color-in-ctrl-contrast:          var(--pir2-form-veld-tekst);
	--gf-ctrl-border-color:               var(--pir2-form-rand);
	--gf-ctrl-border-color-focus:         var(--pir2-form-rand-actief);
	--gf-ctrl-radius:                     var(--pir2-form-ronding);

	--gf-ctrl-btn-bg-color-primary:       var(--pir2-form-knop);
	--gf-ctrl-btn-bg-color-hover-primary: var(--pir2-form-knop-hover);
	--gf-ctrl-btn-color-primary:          var(--pir2-form-knop-tekst);
	--gf-ctrl-btn-radius:                 var(--pir2-form-knop-ronding);
}


/* --- Formuliertitel en introductietekst --- */

.gform-theme--framework .gform_title {
	color: var(--pir2-form-titel);
	font-size: var(--pir2-form-titel-grootte);
	line-height: 1.2;
	margin-bottom: 12px;
}

.gform-theme--framework .gform_description {
	color: var(--pir2-form-intro);
	font-size: var(--pir2-form-intro-grootte);
	line-height: 1.6;
}


/* --- Veldtitels, sublabels en toelichtingen --- */

.gform-theme--framework .gfield_label {
	color: var(--pir2-form-label);
	font-size: var(--pir2-form-label-grootte);
	font-weight: var(--pir2-form-label-dikte);
}

.gform-theme--framework .gform-field-label--type-sub,
.gform-theme--framework .gfield_description {
	color: var(--pir2-form-hulptekst);
	font-size: var(--pir2-form-hulptekst-grootte);
}


/* --- Ruimte --- */

.gform-theme--framework .gform_fields {
	row-gap: var(--pir2-form-ruimte-velden);
}

.gform-theme--framework .gform_footer,
.gform-theme--framework .gform_page_footer {
	margin-top: var(--pir2-form-ruimte-knop);
}


/* --- Voortgangsbalk --- */

.gform-theme--framework .gf_progressbar {
	--gf-field-pg-prog-bar-bg-color: var(--pir2-form-balk-leeg);
	--gf-field-pg-prog-bar-radius:   var(--pir2-form-balk-ronding);
	--gf-field-pg-prog-bar-height:   var(--pir2-form-balk-hoogte);
}

.gform-theme--framework .gf_progressbar_percentage.percentbar_blue {
	--gf-field-pg-prog-bar-bg-color-blue: var(--pir2-form-balk-vol);
}


/* --- Verzendknop: typografie en binnenruimte --- */

.gform-theme--framework .gform_footer input[type="submit"].gform_button,
.gform-theme--framework .gform_page_footer input[type="submit"].gform_button,
.gform-theme--framework .gfield--type-submit input[type="submit"],
.gform-theme--framework button[type="submit"] {
	font-family: var(--e-global-typography-text-font-family), inherit !important;
	font-size: var(--pir2-form-knop-grootte) !important;
	font-weight: var(--pir2-form-knop-dikte) !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	color: var(--pir2-form-knop-tekst) !important;
	padding: var(--pir2-form-knop-padding) !important;
}