/* ==========================================================================
   MIEDEMA ASSISTANCE — FORM COMPONENT
   /assets/css/ma-form.css

   Aanmeldformulier en andere formulier-secties. Gebaseerd op Gravity Forms,
   maar opgebouwd zodat het in light + dark mode goed werkt.

   Structuur
   ---------
   .ma-form-wrapper          — outer section, volledige breedte
     .ma-form-inner          — 2-koloms grid (intro links, form rechts)
       .ma-form-intro        — tekstkolom
         .ma-form-intro-h2
         .ma-form-intro-p
       .ma-form-container    — form kolom met border
         .ma-form-container-h3
         .gform_wrapper      — Gravity Forms output

   Dependencies: ma-root.css (tokens)

   Opschoning
   ----------
   Verwijder uit ma-vacature-styles.css de sectie "AANMELD FORMULIER"
   (rond regel 922 t/m ~1037) — die code wordt door dit bestand vervangen
   en is nu niet dark-mode-aware.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. WRAPPER + LAYOUT
   -------------------------------------------------------------------------- */

.ma-form-wrapper {
  max-inline-size: var(--ma-wrap-max);
  margin-inline: auto;
  margin-block-start: clamp(2rem, 1rem + 3vw, 3rem);
  padding-inline: var(--ma-wrap-gutter);
  padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
  background-color: var(--ma-surface-0);
  color: var(--ma-ink-0);
}

.ma-form-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  align-items: start;
  inline-size: 100%;
}


/* --------------------------------------------------------------------------
   2. INTRO KOLOM (links)
   -------------------------------------------------------------------------- */

.ma-form-intro {
  padding-block: clamp(1rem, 3vw, 2rem);
  padding-inline: clamp(0.5rem, 2vw, 1rem);
}

.ma-form-intro-h2 {
  display: inline-block;
  margin: 0 0 clamp(0.5rem, 1.5vw, 1rem);
  padding-block-end: 4px;
  border-block-end: 2px solid var(--ma-accent);
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.6rem);
  font-weight: var(--ma-weight-bold);
  line-height: 1.2;
  letter-spacing: var(--ma-tracking-body);
  text-wrap: balance;
  max-inline-size: 22ch;
  color: var(--ma-ink-0);
}

.ma-form-intro-p {
  margin: 0;
  font-size: var(--ma-text-sm);
  line-height: var(--ma-leading-normal);
  letter-spacing: var(--ma-tracking-body);
  text-wrap: pretty;
  max-inline-size: 55ch;
  color: var(--ma-ink-1);
}


/* --------------------------------------------------------------------------
   3. FORM KOLOM (rechts)
   -------------------------------------------------------------------------- */

.ma-form-container {
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--ma-border-strong);
  background-color: var(--ma-surface-0);
  color: var(--ma-ink-0);
}

.ma-form-container-h3 {
  display: inline-block;
  margin: 0 0 clamp(0.75rem, 2vw, 1.25rem);
  padding-block-end: 4px;
  border-block-end: 2px solid var(--ma-accent);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
  font-weight: var(--ma-weight-bold);
  letter-spacing: var(--ma-tracking-body);
  line-height: 1.25;
  color: var(--ma-ink-0);
  text-wrap: balance;
}

/* Strong binnen h3 — oude markup gebruikt <strong>; laat het gewoon op weight
   erven zodat het niet twee keer vet rendert. */
.ma-form-container-h3 strong {
  font-weight: inherit;
}


/* --------------------------------------------------------------------------
   4. GRAVITY FORMS — OVERRIDE BINNEN DE CONTAINER
   -------------------------------------------------------------------------- */

/* Input velden */
.ma-form-container .gform_wrapper input[type="text"],
.ma-form-container .gform_wrapper input[type="email"],
.ma-form-container .gform_wrapper input[type="tel"],
.ma-form-container .gform_wrapper input[type="url"],
.ma-form-container .gform_wrapper input[type="number"],
.ma-form-container .gform_wrapper input[type="password"],
.ma-form-container .gform_wrapper input[type="date"],
.ma-form-container .gform_wrapper select,
.ma-form-container .gform_wrapper textarea {
  inline-size: 100%;
  padding: clamp(0.6rem, 1.5vw, 0.85rem) clamp(0.75rem, 1.5vw, 1rem);
  font-size: var(--ma-text-base);
  font-family: inherit;
  letter-spacing: var(--ma-tracking-body);
  color: var(--ma-ink-0);
  background-color: var(--ma-surface-1);
  border: 1px solid var(--ma-border-strong);
  border-radius: 0;
  transition:
    border-color    var(--ma-duration-fast) var(--ma-ease),
    background-color var(--ma-duration-fast) var(--ma-ease);
}

.ma-form-container .gform_wrapper input::placeholder,
.ma-form-container .gform_wrapper textarea::placeholder {
  color: var(--ma-ink-2);
  opacity: 1;
}

.ma-form-container .gform_wrapper input:focus,
.ma-form-container .gform_wrapper select:focus,
.ma-form-container .gform_wrapper textarea:focus {
  border-color: var(--ma-accent);
  background-color: var(--ma-surface-0);
  outline: 2px solid var(--ma-accent);
  outline-offset: -1px;
}

/* Labels */
.ma-form-container .gform_wrapper .gfield_label {
  display: block;
  margin-block-end: clamp(0.25rem, 0.5vw, 0.4rem);
  font-size: var(--ma-text-sm);
  font-weight: var(--ma-weight-semibold);
  letter-spacing: var(--ma-tracking-body);
  color: var(--ma-ink-0);
}

/* Required asterisk */
.ma-form-container .gform_wrapper .gfield_required {
  color: var(--ma-accent);
  margin-inline-start: 0.15em;
}

/* Beschrijving / helper tekst */
.ma-form-container .gform_wrapper .gfield_description {
  margin-block-start: 0.35rem;
  font-size: var(--ma-text-xs);
  line-height: var(--ma-leading-snug);
  letter-spacing: var(--ma-tracking-body);
  color: var(--ma-ink-2);
}

/* "* geeft vereiste velden aan" top-of-form notice */
.ma-form-container .gform_wrapper .gform_required_legend {
  font-size: var(--ma-text-xs);
  color: var(--ma-ink-2);
  letter-spacing: var(--ma-tracking-body);
  margin-block-end: clamp(0.5rem, 1vw, 0.75rem);
}

/* Radio + checkbox labels */
.ma-form-container .gform_wrapper .gfield_radio label,
.ma-form-container .gform_wrapper .gfield_checkbox label {
  font-size: var(--ma-text-sm);
  color: var(--ma-ink-0);
  letter-spacing: var(--ma-tracking-body);
  cursor: pointer;
}

.ma-form-container .gform_wrapper .gfield_radio input[type="radio"],
.ma-form-container .gform_wrapper .gfield_checkbox input[type="checkbox"] {
  accent-color: var(--ma-accent);
}

/* Field wrappers */
.ma-form-container .gform_wrapper .gfield {
  margin-block-end: clamp(0.75rem, 1.5vw, 1.1rem);
}

/* Validatie errors */
.ma-form-container .gform_wrapper .gfield_error input,
.ma-form-container .gform_wrapper .gfield_error select,
.ma-form-container .gform_wrapper .gfield_error textarea {
  border-color: var(--ma-red-500);
}

.ma-form-container .gform_wrapper .gfield_validation_message,
.ma-form-container .gform_wrapper .validation_message {
  margin-block-start: 0.35rem;
  padding: 0.5rem 0.65rem;
  font-size: var(--ma-text-xs);
  color: var(--ma-red-500);
  background-color: color-mix(in srgb, var(--ma-red-500) 8%, transparent);
  border-inline-start: 2px solid var(--ma-red-500);
  letter-spacing: var(--ma-tracking-body);
}

/* Submit knop — geleverd als .gform_button of input[type=submit] */
.ma-form-container .gform_wrapper .gform_button,
.ma-form-container .gform_wrapper input[type="submit"],
.ma-form-container .gform_wrapper button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding:
    clamp(0.75rem, 0.6rem + 0.4vw, 1rem)
    clamp(1.25rem, 1rem + 1vw, 2rem);
  font-family: inherit;
  font-size: var(--ma-text-sm);
  font-weight: var(--ma-weight-semibold);
  letter-spacing: var(--ma-tracking-body);
  text-transform: uppercase;
  color: var(--ma-accent-ink);
  background-color: var(--ma-accent);
  border: 1px solid var(--ma-accent);
  border-radius: 0;
  cursor: pointer;
  transition:
    background-color var(--ma-duration-fast) var(--ma-ease),
    border-color     var(--ma-duration-fast) var(--ma-ease);
}

.ma-form-container .gform_wrapper .gform_button:is(:hover, :focus-visible),
.ma-form-container .gform_wrapper input[type="submit"]:is(:hover, :focus-visible),
.ma-form-container .gform_wrapper button[type="submit"]:is(:hover, :focus-visible) {
  background-color: var(--ma-accent-hover);
  border-color: var(--ma-accent-hover);
}

/* Submit container spacing */
.ma-form-container .gform_wrapper .gform_footer {
  padding-block-start: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-block-start: clamp(0.5rem, 1vw, 0.75rem);
  border-block-start: 1px solid var(--ma-border-subtle);
}

/* Confirmation message (na verzending) */
.ma-form-container .gform_confirmation_message {
  padding: clamp(1rem, 2vw, 1.5rem);
  background-color: color-mix(in srgb, var(--ma-accent) 10%, transparent);
  border-inline-start: 3px solid var(--ma-accent);
  color: var(--ma-ink-0);
  font-size: var(--ma-text-base);
  line-height: var(--ma-leading-normal);
}

/* Progress bar (multi-step forms) */
.ma-form-container .gform_wrapper .gf_progressbar {
  background-color: var(--ma-surface-2);
  border-radius: 0;
  overflow: hidden;
}

.ma-form-container .gform_wrapper .gf_progressbar_percentage {
  background-color: var(--ma-accent);
  color: var(--ma-accent-ink);
}


/* --------------------------------------------------------------------------
   5. HARDE RESET — scherpe hoeken binnen het formulier
   -------------------------------------------------------------------------- */

.ma-form-wrapper *,
.ma-form-wrapper *::before,
.ma-form-wrapper *::after {
  border-radius: 0 !important;
}


/* --------------------------------------------------------------------------
   6. BOOKING TIME PICKER (gpb)
   --------------------------------------------------------------------------
   Container flipt mee met dark mode; de status-chips zijn zelfstandige
   lichte vlakjes met eigen tekstkleur en blijven daardoor in beide modes
   AA-contrasterend. Contrast-fixes t.o.v. origineel:
   - beschikbaar:    groen-600 op groen-50 (~5.4:1, was ~3.9:1)
   - onbeschikbaar:  gray-600 op gray-50 (~7:1, was ~2.5:1)
   - buiten venster: gray-600 + opacity verwijderd (Lighthouse meet de
     gerenderde kleur, dus doorzichtigheid = contrast-flag)
   -------------------------------------------------------------------------- */

.gpb-booking-time-picker {
  max-width: 775px;
  background-color: var(--ma-surface-1);
  color: var(--ma-ink-0);
  padding: 0.5rem;
}

.gpb-available {
  background-color: var(--ma-green-50) !important;
  color: var(--ma-green-600) !important;
  border-radius: var(--ma-radius-md);
  font-weight: bold;
}

.gpb-booked {
  background-color: var(--ma-red-50) !important;
  color: var(--ma-red-500) !important;
  text-decoration: line-through;
}

.gpb-unavailable,
.gpb-outside-availability {
  background-color: var(--ma-gray-50) !important;
  color: var(--ma-gray-600) !important;
}

.gpb-available:hover {
  background-color: color-mix(in srgb, var(--ma-green-400) 25%, var(--ma-white)) !important;
  cursor: pointer;
}