/* designated-2026 · formulieren (Gravity Forms). De CSS van Gravity Forms staat uit; de velden krijgen
   de klassen uit de concepten (.field, .opts, .drop, .submit) via inc/formulieren.php, zodat de
   paginastijl erop past. Hier staat alleen wat Gravity Forms-specifiek is: raster, labels, fouten,
   bevestiging. */

.dsg-form, .dsg-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.gform_wrapper.dsg-form_wrapper { width: 100%; }
/* Het scrollanker van Gravity Forms staat na een bevestiging los naast het formulier; in een grid of flex met gap
   gaf dat een extra tussenruimte boven de bevestiging */
.gform_anchor, #art-news > .gform_anchor { position: absolute; }
.dsg-form .gform_fields { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); }
.dsg-form .gfield { grid-column: 1 / -1; min-width: 0; }
.dsg-form .gfield--width-half { grid-column: auto; }
.dsg-form .gform_hidden, .dsg-form .gform_validation_container, .dsg-form .gfield_visibility_hidden,
.dsg-form .gform_fileupload_rules, .dsg-form .gfield_required, .gform_wrapper.dsg-form_wrapper .gform_heading { display: none !important; }
.dsg-form .hidden_label .gfield_label, .dsg-form .dsg-drop .gfield_label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Vraag boven keuzes, CV-vak of een open vraag */
.dsg-form .gfield_label { display: block; padding: 0; margin: calc(4 * var(--u)) 0 calc(8 * var(--u)); font-size: calc(13.5 * var(--u)); font-weight: 600; letter-spacing: -.01em; line-height: 1.35; color: var(--ink-dark); }
.dsg-form .gfield_description { margin: calc(-4 * var(--u)) 0 calc(8 * var(--u)); font-size: calc(13.5 * var(--u)); line-height: 1.4; color: var(--soft-dark); }
.dsg-form .ginput_container_radio .opts { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.dsg-form .opts label { position: relative; }
.dsg-form .drop { display: flex; }
.dsg-form textarea.field { min-height: calc(96 * var(--u)); height: calc(116 * var(--u)); }

/* Verzenden */
.dsg-form .gform_footer { margin-top: calc(12 * var(--u)); padding: 0; }
.dsg-form .gform_footer .submit { width: 100%; }
.dsg-form .gform_ajax_spinner { width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin-left: calc(10 * var(--u)); vertical-align: middle; }

/* Fouten. Kleur per achtergrond via --fout (tekst), --fout-rand en --fout-gloed: standaard voor witte
   kaarten, lichter op navy (zie "Nieuwsbrief: fout" hieronder). De meldingen zelf: inc/formulieren.php. */
.gform_wrapper.dsg-form_wrapper .gform_validation_errors { margin: 0 0 calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(214,69,69,.07); border: 1px solid rgba(214,69,69,.22); color: var(--fout, #b3261e); outline: none; }
.gform_wrapper.dsg-form_wrapper .gform_validation_errors h2 { display: flex; align-items: center; gap: calc(9 * var(--u)); margin: 0; padding: 0; font: inherit; font-size: calc(14 * var(--u)); font-weight: 600; letter-spacing: -.005em; line-height: 1.4; color: inherit; }
.gform_wrapper.dsg-form_wrapper .gform_validation_errors h2::before { content: ""; flex: none; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--fout-rand, #d64545); }
.gform_wrapper.dsg-form_wrapper .gform_validation_errors .gform-icon { display: none; }
/* Rode rand en gloed op het veld. !important omdat de paginastijlen de velden met een id-selector opmaken
   (#aanvragen .field, #ct-hero .field, #groeiscan-aanvragen .field, #solliciteren .field) en hun focusrand anders de foutrand overschrijft */
.dsg-form .gfield_error .field, .dsg-form .gfield_error .drop { border-color: var(--fout-rand, #d64545) !important; box-shadow: 0 0 0 calc(3 * var(--u)) var(--fout-gloed, rgba(214,69,69,.14)) !important; }
.dsg-form .gfield_error .drop { border-style: dashed !important; }
.dsg-form .gfield_error .opts span { border-color: rgba(214,69,69,.5) !important; }
.dsg-form .validation_message { margin: calc(6 * var(--u)) 0 0; padding: 0; font-size: calc(13 * var(--u)); font-weight: 500; line-height: 1.35; color: var(--fout, #b3261e); }
.dsg-form .validation_message[hidden] { display: none; }

/* Bevestiging (tekst staat in de instellingen van het formulier) */
.dsg-klaar { display: flex; flex-direction: column; gap: calc(14 * var(--u)); align-items: flex-start; padding: calc(8 * var(--u)) 0; color: var(--ink-dark); }
.dsg-klaar .ok { width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: 50%; background: var(--lime); position: relative; }
.dsg-klaar .ok::after { content: ""; position: absolute; left: calc(21 * var(--u)); top: calc(15 * var(--u)); width: calc(11 * var(--u)); height: calc(20 * var(--u)); border: solid var(--navy); border-width: 0 calc(3 * var(--u)) calc(3 * var(--u)) 0; transform: rotate(45deg); }
.dsg-klaar .t { font-size: clamp(calc(26 * var(--u)), min(2.4vw, calc(34.56 * var(--u))), calc(34 * var(--u))); font-weight: 700; letter-spacing: -.055em; line-height: 1; }
.dsg-klaar .t em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; letter-spacing: -.02em; }
.dsg-klaar .s { font-size: calc(16 * var(--u)); line-height: 1.5; color: var(--soft-dark); max-width: 38ch; }

/* Nieuwsbrief: bevestiging als pil op de plek van het formulier, zelfde maat als het formulier. Maatstaf is de
   insight (insight.css); hier de basis, per plek alleen de kleuren: licht vlak (homepage), navy (insights,
   insight), en in de footer zonder eigen pil omdat de witte pil er al omheen staat. */
.gform_confirmation_wrapper.dsg-form--nieuwsbrief .dsg-klaar { flex-direction: row; align-items: center; gap: calc(12 * var(--u)); min-height: calc(56 * var(--u)); padding: calc(6 * var(--u)) calc(20 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--card, #fff); border: 1px solid var(--card-b, rgba(10,29,41,.1)); color: var(--ink-dark); }
.gform_confirmation_wrapper.dsg-form--nieuwsbrief .dsg-klaar .ok { width: calc(42 * var(--u)); height: calc(42 * var(--u)); flex: none; animation: dsg-ok-in .5s var(--ease) both; }
.gform_confirmation_wrapper.dsg-form--nieuwsbrief .dsg-klaar .ok::after { left: calc(16 * var(--u)); top: calc(11 * var(--u)); width: calc(8 * var(--u)); height: calc(15 * var(--u)); border-width: 0 calc(2.5 * var(--u)) calc(2.5 * var(--u)) 0; }
.gform_confirmation_wrapper.dsg-form--nieuwsbrief .dsg-klaar .t { margin: 0; font-size: calc(18 * var(--u)); letter-spacing: -.03em; }
.gform_confirmation_wrapper.dsg-form--nieuwsbrief .dsg-klaar .t em { font-size: 1.12em; }
.gform_confirmation_wrapper.dsg-form--nieuwsbrief .dsg-klaar .s { display: none; }
@keyframes dsg-ok-in { from { transform: scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gform_confirmation_wrapper.dsg-form--nieuwsbrief .dsg-klaar .ok { animation: none; } }
/* Op navy (insights-overzicht; de insight zelf staat in insight.css) */
#art-news .gform_confirmation_wrapper .dsg-klaar { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: var(--ink); }
#art-news .gform_confirmation_wrapper .dsg-klaar .t em { color: var(--lime); }
#art-news .gform_confirmation_wrapper { justify-self: end; width: 100%; max-width: calc(520 * var(--u)); }
@media (max-width: 900px) { #art-news .gform_confirmation_wrapper { justify-self: start; } }
/* In de footer: in de witte pil, zonder eigen pil */
#footer .pill > .gform_confirmation_wrapper { flex: 1; min-width: 0; }
#footer .pill .dsg-klaar { min-height: calc(40 * var(--u)); padding: 0; gap: calc(12 * var(--u)); background: none; border: 0; color: var(--ink-dark); }
#footer .pill .dsg-klaar .ok { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
#footer .pill .dsg-klaar .ok::after { left: calc(15 * var(--u)); top: calc(10 * var(--u)); width: calc(8 * var(--u)); height: calc(15 * var(--u)); border-width: 0 calc(2.5 * var(--u)) calc(2.5 * var(--u)) 0; }
#footer .pill .dsg-klaar .t { font-size: calc(16 * var(--u)); font-weight: 700; letter-spacing: -.02em; }
#footer .pill:has(.gform_confirmation_wrapper) { padding-left: calc(5 * var(--u)); }

/* Nieuwsbrief: veld en knop naast elkaar */
.dsg-form--nieuwsbrief { display: flex; gap: calc(8 * var(--u)); align-items: center; }
.dsg-form--nieuwsbrief .gform-body { flex: 1; }
.dsg-form--nieuwsbrief .gform_fields { display: block; }
.dsg-form--nieuwsbrief .gform_footer { margin: 0; }
.dsg-form--nieuwsbrief .gform_footer .gform_button { white-space: nowrap; display: inline-flex; align-items: center; gap: calc(10 * var(--u)); transition: background-color .3s, box-shadow .35s var(--ease); }
.dsg-form--nieuwsbrief .gform_footer .gform_button .arr { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; background: var(--navy); color: var(--lime); display: grid; place-items: center; flex: none; transition: transform .35s var(--ease); }
.dsg-form--nieuwsbrief .gform_footer .gform_button .arr .ico { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.dsg-form--nieuwsbrief .gform_footer .gform_button:hover { background-color: #d6fb7c; box-shadow: 0 0 0 calc(4 * var(--u)) rgba(200,245,96,.18); }
.dsg-form--nieuwsbrief .gform_footer .gform_button:hover .arr { transform: rotate(-45deg); }
.dsg-form--nieuwsbrief input { width: 100%; }

/* Nieuwsbrief: fout. Geen algemeen foutvlak (alleen voor schermlezers), de pil houdt zijn hoogte en krijgt
   een rode rand; één korte regel onder de pil, met ruimte eronder zodat er niets over de tekst eronder valt. */
.dsg-form--nieuwsbrief_wrapper .gform_validation_errors { position: absolute !important; width: 1px; height: 1px; margin: 0 !important; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 !important; }
.dsg-form--nieuwsbrief { position: relative; }
.dsg-form--nieuwsbrief .gfield_error .field { border: 0 !important; box-shadow: none !important; background: none !important; }
.dsg-form--nieuwsbrief .validation_message { position: absolute; left: var(--nb-fout-links, calc(24 * var(--u))); top: calc(100% + calc(9 * var(--u))); margin: 0; font-size: calc(13.5 * var(--u)); white-space: nowrap; }
.dsg-form--nieuwsbrief_wrapper.gform_validation_error { margin-bottom: calc(30 * var(--u)); }
.dsg-form--nieuwsbrief_wrapper.gform_validation_error form.dsg-form--nieuwsbrief { box-shadow: 0 0 0 calc(2 * var(--u)) var(--fout-rand, #d64545), 0 0 0 calc(6 * var(--u)) var(--fout-gloed, rgba(214,69,69,.14)) !important; }
/* Kleuren en uitlijning per plek: op navy een lichtere rode tint, de regel lijnt uit met de tekst in het veld */
.prose .nb, #art-news, #footer { --fout: #ff9e92; --fout-rand: #ff7b6c; --fout-gloed: rgba(255,123,108,.22); }
#inzichten .news { --nb-fout-links: calc(20 * var(--u)); }
@media (max-width: 520px) { .prose .nb { --nb-fout-links: calc(20 * var(--u)); } }
/* Homepage en footer: niets direct onder de pil, dus geen extra ruimte; die zou de kop erboven laten verspringen */
#inzichten .news .gform_validation_error { margin-bottom: 0; }
#footer .pill:has(.gform_validation_error) { box-shadow: 0 0 0 calc(2 * var(--u)) var(--fout-rand), 0 0 0 calc(6 * var(--u)) var(--fout-gloed); }
#footer .pill .gform_validation_error { margin-bottom: 0; }
#footer .pill .gform_validation_error form.dsg-form--nieuwsbrief { box-shadow: none !important; }
#footer .pill .validation_message { left: 0; top: calc(100% + calc(14 * var(--u))); }

/* In de footer: het formulier vult de witte pil */
#footer .pill > .gform_wrapper { flex: 1; min-width: 0; }
#footer .pill .gform_footer .gform_button { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
/* Footer: de pijl is dezelfde SVG als op de rest van de site; bij hover draait alleen de pijl, niet de cirkel (03-11) */
#footer .pill .gform_footer .gform_button { display: grid; place-items: center; padding: 0; transform: none; transition: background-color .3s, box-shadow .35s var(--ease); }
#footer .pill .gform_footer .gform_button .ico { width: calc(16 * var(--u)); height: calc(16 * var(--u)); transition: transform .35s var(--ease); }
#footer .pill .gform_footer .gform_button:hover { transform: none; background-color: #d6fb7c; box-shadow: 0 0 0 calc(4 * var(--u)) rgba(200,245,96,.18); }
#footer .pill .gform_footer .gform_button:hover .ico { transform: rotate(-45deg); }

/* Tijdens het verzenden zet Gravity Forms een .gform-loader ín de knop. Met justify-content: space-between
   duwde die de pijl naar links (03-11). De loader gaat uit de flow; de pijl pulseert zolang het verzenden loopt. */
.gform_wrapper .gform_button .gform-loader { display: none !important; }
.gform_wrapper .gform_button:has(.gform-loader) { cursor: progress; }
.gform_wrapper .gform_button:has(.gform-loader) .arr,
.gform_wrapper .gform_button:has(.gform-loader) > .ico { animation: dsg-verzenden .7s ease-in-out infinite alternate; }
@keyframes dsg-verzenden { to { opacity: .35; } }

@media (max-width: 520px) {
  .dsg-form .gform_fields { grid-template-columns: 1fr; }
  .dsg-form .gfield--width-half { grid-column: 1 / -1; }
}

/* Na verzenden: kop, belofte en kleine lettertjes rond het formulier weg, de bevestiging zegt het al (12-10). */
.form:has(.gform_confirmation_wrapper) > .ft,
.form:has(.gform_confirmation_wrapper) > .fs,
.form:has(.gform_confirmation_wrapper) > .fine { display: none; }