/* ==========================================================================
   Autive Starter Theme — Gravity Forms styling
   --------------------------------------------------------------------------
   Loaded only when Gravity Forms is active. All values come from theme.json
   tokens; child themes re-skin forms by overriding the palette.
   Covers every field type and state so any form a site editor builds
   inherits design consistency without manual styling.
   ========================================================================== */

/* 1. Form container ----------------------------------------------------- */
.gform_wrapper {
  font-family: var(--font-sans);
  font-size: var(--wp--preset--font-size--medium);
  color: var(--text-body);
}
.gform_wrapper .gform_heading { margin-bottom: var(--wp--preset--spacing--40, 1.5rem); }
.gform_wrapper .gform_title {
  font-family: var(--font-display);
  font-size: var(--wp--preset--font-size--x-large);
  color: var(--text-heading);
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.gform_wrapper .gform_description {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* 2. Field list + rows -------------------------------------------------- */
.gform_wrapper .gform_fields {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(12, 1fr);
}
.gform_wrapper .gfield { grid-column: 1 / -1; }
.gform_wrapper .gfield.gfield--width-half    { grid-column: span 6; }
.gform_wrapper .gfield.gfield--width-third   { grid-column: span 4; }
.gform_wrapper .gfield.gfield--width-quarter { grid-column: span 3; }
.gform_wrapper .gfield.gfield--width-two-thirds { grid-column: span 8; }
.gform_wrapper .gfield.gfield--width-three-quarters { grid-column: span 9; }
@media (max-width: 560px) {
  .gform_wrapper .gfield.gfield--width-half,
  .gform_wrapper .gfield.gfield--width-third,
  .gform_wrapper .gfield.gfield--width-quarter,
  .gform_wrapper .gfield.gfield--width-two-thirds,
  .gform_wrapper .gfield.gfield--width-three-quarters { grid-column: 1 / -1; }
}

/* 3. Labels ------------------------------------------------------------- */
.gform_wrapper .gfield_label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.gform_wrapper .gfield_required {
  color: var(--status-error-text);
  font-weight: 500;
  margin-inline-start: 0.15rem;
}
.gform_wrapper .gfield_description {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.gform_wrapper .ginput_container_sub_label label,
.gform_wrapper .gform-field-label--type-sub {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

/* 4. Text / email / tel / url / password / number / textarea / select --- */
.gform_wrapper :where(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="file"],
  textarea,
  select
) {
  background: var(--bg-page);
  border: var(--stroke-hair) solid var(--border-subtle);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--text-body);
  width: 100%;
  transition: border-color var(--motion-quick), box-shadow var(--motion-quick);
}
.gform_wrapper textarea { min-height: 140px; resize: vertical; line-height: 1.5; }

.gform_wrapper :where(input, textarea, select):focus,
.gform_wrapper :where(input, textarea, select):focus-visible {
  outline: none;
  border-color: var(--brand-secondary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-secondary) 18%, transparent);
}

.gform_wrapper :where(input, textarea, select)[disabled],
.gform_wrapper :where(input, textarea, select)[readonly] {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bg-surface);
}

.gform_wrapper ::placeholder { color: var(--text-muted); opacity: 0.7; }

/* Select dropdown arrow */
.gform_wrapper select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23000' stroke-width='1.6'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* 5. File upload -------------------------------------------------------- */
.gform_wrapper input[type="file"] {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.gform_wrapper input[type="file"]::file-selector-button {
  margin-inline-end: 0.75rem;
  padding: 0.45rem 0.9rem;
  background: var(--brand-secondary);
  color: var(--text-on-inverse);
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
}

/* 6. Checkboxes + radios ------------------------------------------------ */
.gform_wrapper .gchoice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding-block: 0.35rem;
}
.gform_wrapper .gchoice label {
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.45;
  cursor: pointer;
}
.gform_wrapper input[type="checkbox"],
.gform_wrapper input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  margin-top: 0.2rem;
  inline-size: 18px;
  block-size: 18px;
  border: var(--stroke-firm) solid var(--border-strong);
  background: var(--bg-page);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--motion-quick), border-color var(--motion-quick);
  position: relative;
}
.gform_wrapper input[type="radio"] { border-radius: 50%; }
.gform_wrapper input[type="checkbox"] { border-radius: var(--radius-xs); }
.gform_wrapper input[type="checkbox"]:checked,
.gform_wrapper input[type="radio"]:checked {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
.gform_wrapper input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--bg-page);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") no-repeat center / contain;
}
.gform_wrapper input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--bg-page);
  border-radius: 50%;
}
.gform_wrapper input[type="checkbox"]:focus-visible,
.gform_wrapper input[type="radio"]:focus-visible {
  outline: var(--stroke-firm) solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* Consent checkbox is usually wider body copy; respect that */
.gform_wrapper .gfield--type-consent .gchoice label { font-size: 0.9rem; color: var(--text-muted); }

/* 7. List / multi-value fields ----------------------------------------- */
.gform_wrapper .gfield_list {
  border-collapse: collapse;
  width: 100%;
}
.gform_wrapper .gfield_list td {
  padding: 0.35rem;
  border-bottom: var(--stroke-hair) solid var(--border-subtle);
}
.gform_wrapper .gfield_list_icons button {
  background: var(--brand-secondary);
  color: var(--text-on-inverse);
  border: 0;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
}

/* 8. Section breaks + HTML blocks -------------------------------------- */
.gform_wrapper .gsection {
  border-top: var(--stroke-hair) solid var(--border-subtle);
  margin-block: 1.5rem;
  padding-top: 1.5rem;
  grid-column: 1 / -1;
}
.gform_wrapper .gsection_title {
  font-family: var(--font-display);
  font-size: var(--wp--preset--font-size--large);
  color: var(--text-heading);
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.gform_wrapper .gsection_description {
  font-size: 0.9rem;
  color: var(--text-muted);
}
.gform_wrapper .gfield_html { color: var(--text-muted); }

/* 9. Page breaks + multi-page progress bar ----------------------------- */
.gform_wrapper .gf_progressbar_wrapper { margin-bottom: 2rem; }
.gform_wrapper .gf_progressbar {
  background: var(--bg-surface);
  border-radius: var(--radius-pill);
  overflow: hidden;
  block-size: 10px;
}
.gform_wrapper .gf_progressbar_percentage {
  background: var(--brand-primary);
  block-size: 100%;
  transition: width var(--motion-smooth);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline-end: 0.5rem;
  color: var(--text-on-accent);
  font-size: 0.7rem;
  font-weight: 500;
}
.gform_wrapper .gf_progressbar_title {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.gform_wrapper .gform_page_footer {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* 10. Submit button + button styling ----------------------------------- */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: var(--stroke-hair) solid var(--border-subtle);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.gform_wrapper :where(.gform_button, .gform_next_button, .gform_previous_button, button[type="submit"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  background: var(--brand-primary);
  color: var(--text-on-accent);
  border: var(--stroke-hair) solid var(--brand-primary);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: transform var(--motion-quick), background var(--motion-quick), box-shadow var(--motion-quick);
}
.gform_wrapper :where(.gform_button, .gform_next_button, button[type="submit"]):hover {
  background: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn);
}
.gform_wrapper :where(.gform_previous_button) {
  background: transparent;
  color: var(--text-body);
  border-color: var(--border-strong);
}
.gform_wrapper :where(.gform_previous_button):hover {
  background: var(--border-strong);
  color: var(--text-on-inverse);
  transform: translateY(-1px);
}
/* The ring must not be the button's own colour. It was box-shadow in
   --focus-ring, which resolves to primary - the same fill the button already
   has - so focus read as the button growing 3px: 1.00:1 against what it sits
   on. An outline with an offset leaves a gap of page behind it, follows the
   pill radius, and matches how the theme's own buttons behave. */
.gform_wrapper :where(.gform_button, .gform_next_button, .gform_previous_button):focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}

/* 11. Validation / error states ---------------------------------------- */
.gform_wrapper .gfield_error :where(input, textarea, select) {
  border-color: var(--status-error);
  background: color-mix(in srgb, var(--status-error) 6%, var(--bg-page));
}
.gform_wrapper .gfield_error :where(input, textarea, select):focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-error) 20%, transparent);
}
.gform_wrapper .gfield_error .gfield_label { color: var(--status-error-text); }

.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message {
  color: var(--status-error-text);
  font-size: 0.82rem;
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.gform_wrapper .validation_message::before,
.gform_wrapper .gfield_validation_message::before {
  /* The empty alternative text keeps a screen reader from prefixing every
     error with "exclamation mark". */
  content: "!" / "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 14px;
  block-size: 14px;
  background: var(--status-error-text);
  color: var(--text-on-accent);
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 700;
  flex-shrink: 0;
}

.gform_wrapper .validation_error,
.gform_wrapper .gform_submission_error {
  background: color-mix(in srgb, var(--status-error) 8%, var(--bg-page));
  border: var(--stroke-hair) solid var(--status-error);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  color: var(--status-error-text);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
}

/* 12. Confirmation messages -------------------------------------------- */
.gform_confirmation_wrapper,
.gform_confirmation_message {
  background: color-mix(in srgb, var(--status-success) 8%, var(--bg-page));
  border: var(--stroke-hair) solid var(--status-success);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  color: color-mix(in srgb, var(--status-success) 70%, var(--text-body));
  padding: 1.25rem 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
}

/* 13. CAPTCHA / Turnstile wrapper -------------------------------------- */
.gform_wrapper .gfield--type-captcha,
.gform_wrapper .gfield-captcha {
  padding-block: 0.25rem;
}

/* 14. Spinner (AJAX submit) -------------------------------------------- */
.gform_wrapper .gform_ajax_spinner {
  margin-inline-start: 0.75rem;
  inline-size: 18px;
  block-size: 18px;
}

/* 15. Honeypot — always hidden but keep reachable for screen readers --- */
.gform_wrapper .gform_validation_container {
  position: absolute;
  left: -10000px;
  top: auto;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}


/* Focus must never be invisible.
   Everything above is written with :where(), which contributes no specificity,
   and Gravity Forms' own Orbital stylesheet declares its outline through custom
   properties from compound selectors this file cannot reach. Measured on the
   rendered contact form, the outline came out 0px on every field and on the
   submit button - a 2.4.7 failure that source review could not see.
   Raising the whole file above Orbital is a separate job; a missing focus
   indicator is not something to leave standing while that happens, and it is
   the one case where !important is the correct tool rather than a shortcut. */
.gform_wrapper :is(input, textarea, select, button, a, .gform_button):focus-visible {
  outline-style: solid !important;
  outline-width: 2px !important;
  outline-color: var(--focus-ring-color) !important;
  outline-offset: 2px !important;
}

/* The colour is declared on its own above so a dark ground can still override
   it. Setting the `outline` shorthand !important would have swallowed
   outline-color too, and core.css's inverse opt-in carries no !important - so
   a form dropped into a dark section by an editor would have got a rust ring on
   green at 2.14:1, with no way left to correct it. "Omgekeerd, donker" is a
   block style now, so that is one click away rather than hypothetical. */
:is(.nlbs-site-footer, .is-style-nlbs-inverse, .nlbs-cta-band) .gform_wrapper
  :is(input, textarea, select, button, a, .gform_button):focus-visible {
  outline-color: var(--focus-ring-color-inverse) !important;
}


/* The submit button, through Gravity Forms' own theming API.
   Orbital paints its button from custom properties, not from declarations, so
   the earlier attempt in this file - and everything else here written with
   :where() - never touched it and the contact page shipped a #204ce5 button in
   the middle of a green and rust palette. Setting the properties is what GF
   actually offers for this, and it needs no !important and no specificity
   fight. The wider problem, that most of this file loses to Orbital, is still
   real and still in CLAUDE.md; this is the one part a visitor reads as broken
   rather than as slightly off.
   The height goes to 44px while we are here: it was 38. */
.gform_wrapper.gform-theme {
  --gf-ctrl-btn-bg-color-primary: var(--brand-primary);
  --gf-ctrl-btn-bg-color-hover-primary: var(--brand-primary-dark);
  --gf-ctrl-btn-bg-color-focus-primary: var(--brand-primary);
  --gf-ctrl-btn-border-color-primary: var(--brand-primary);
  --gf-ctrl-btn-border-color-hover-primary: var(--brand-primary-dark);
  --gf-ctrl-btn-color-primary: var(--text-on-accent);
  --gf-ctrl-btn-color-hover-primary: var(--text-on-accent);
  --gf-ctrl-btn-radius: var(--radius-pill);
  --gf-ctrl-btn-padding-x: 1.4rem;
  --gf-ctrl-btn-size: 44px;
  --gf-ctrl-btn-font-size: 0.82rem;
}

/* Orbital sets no text-transform or tracking, so a plain rule carries the rest
   of the house style without having to outrank anything. */
.gform_wrapper .gform_footer :is(input[type="submit"], .gform_button, button[type="submit"]),
.gform_wrapper .gform_page_footer :is(input[type="submit"], .gform_button, .gform_next_button) {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: var(--font-sans);
}