/**
 * Mymmo Forms — de stylesheet van het formulier.
 *
 * DIT IS DE ENIGE BRON. Het bestand staat in public/ omdat de Operations
 * Manager het nodig heeft voor het voorbeeld in de formulierbouwer: dat
 * voorbeeld staat in een iframe met precies deze CSS, zodat wat je in de OM
 * ziet hetzelfde is als wat een bezoeker ziet.
 *
 * wp-plugin/mymmo-forms/assets/css/mymmo-forms.css is een KOPIE die bij het
 * bouwen van de zip hiervandaan gehaald wordt. Bewerk die nooit rechtstreeks;
 * wijzig dit bestand en bouw de plugin opnieuw.
 *
 * Mymmo Forms
 *
 * Alles hangt aan CSS-variabelen op .mymmo-form-wrap. Twee redenen:
 *   1. de OM kan er per formulier een paar van overschrijven (theme in het
 *      schema, via een style-attribuut -- zie mymmo_forms_theme_style());
 *   2. een site kan haar eigen thema laten winnen door dezelfde variabelen
 *      in haar stylesheet te zetten, zonder ook maar een selector uit dit
 *      bestand te moeten overrulen.
 *
 * Geen !important, nergens. Dat is precies wat het overschrijven kapotmaakt.
 */

.mymmo-form-wrap {
  --mf-accent: #2563eb;
  --mf-accent-text: #ffffff;
  --mf-text: #1f2430;
  --mf-muted: #6b7280;
  --mf-border: #d7dbe2;
  --mf-border-focus: var(--mf-accent);
  --mf-bg: transparent;
  --mf-field-bg: #ffffff;
  --mf-error: #b42318;
  --mf-error-bg: #fef3f2;
  --mf-success: #067647;
  --mf-success-bg: #ecfdf3;
  --mf-radius: 10px;
  --mf-gap: 18px;
  --mf-max-width: 720px;

  /* GEEN opvulling, en die is met opzet niet instelbaar. Een formulier in een
     pagina hoort op de tekstbreedte te staan, niet ingesprongen -- daar levert
     het blok eromheen de ruimte. In de pop-up levert het paneel ze
     (mymmo-forms-modal.css), voor een formulier en een stappenreeks dezelfde.
     Er stonden hier tot 1.15.4 --mf-pad-x/y, te zetten via padding_x/padding_y
     op de shortcode of via het thema uit de OM. Die telden in het venster OP bij
     de opvulling van het paneel -- maar alleen bij een stappenreeks, want voor
     het formulier haalde het venster ze er weer af. Dezelfde inhoud stond
     daardoor op het ene tabblad verder van de rand dan op het andere. */
  max-width: var(--mf-max-width);
  background: var(--mf-bg);
  color: var(--mf-text);
  font-size: 16px;
  line-height: 1.5;
  /* Draagvlak voor .mymmo-form-bezig (position: absolute) hieronder. */
  position: relative;
}

.mymmo-form-title {
  margin: 0 0 8px;
  font-size: 1.5rem;
  line-height: 1.25;
}

.mymmo-form-intro {
  margin: 0 0 20px;
  color: var(--mf-muted);
}

/* ── Meldingen ───────────────────────────────────────────────────────────── */

.mymmo-form-notice {
  padding: 14px 16px;
  border-radius: var(--mf-radius);
  border: 1px solid var(--mf-border);
  margin-bottom: 20px;
  font-size: 0.95rem;
}

.mymmo-form-notice:focus {
  outline: 2px solid var(--mf-accent);
  outline-offset: 2px;
}

.mymmo-form-notice--error {
  border-color: var(--mf-error);
  background: var(--mf-error-bg);
  color: var(--mf-error);
}

.mymmo-form-notice--success {
  border-color: var(--mf-success);
  background: var(--mf-success-bg);
  color: var(--mf-success);
}

/* ── "Bezig met versturen" ──────────────────────────────────────────────────
   Overlay tijdens verstuurInVenster() in mymmo-forms.js. Een indiening kan
   enkele seconden duren (bv. een koppeling met een pdf-stap die een offerte
   rendert) -- de knoptekst alleen is dan te onopvallend. Dynamisch aangemaakt
   door JS, dus geen data-attribuut/markup hier nodig, enkel de stijl. */
.mymmo-form-bezig {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: color-mix(in srgb, var(--mf-bg, #fff) 85%, transparent);
  border-radius: var(--mf-radius);
  z-index: 5;
  font-size: 0.95rem;
  color: var(--mf-text);
}

.mymmo-form-bezig[hidden] { display: none; }

.mymmo-form-bezig-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--mf-border);
  border-top-color: var(--mf-accent);
  border-radius: 50%;
  animation: mymmo-form-bezig-draai 0.7s linear infinite;
}

@keyframes mymmo-form-bezig-draai {
  to { transform: rotate(360deg); }
}

/* Alleen zichtbaar voor beheerders — bewust opvallend en lelijk, want het
   hoort niet op een gewone pagina te staan. */
.mymmo-form-notice--admin {
  border-color: #b54708;
  background: #fffaeb;
  color: #b54708;
}

/* ── Raster ──────────────────────────────────────────────────────────────── */

.mymmo-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mf-gap);
}

.mymmo-form-field--full {
  grid-column: 1 / -1;
}

.mymmo-form-field--half {
  grid-column: span 1;
}

/* Onder 540px staat alles onder elkaar. Twee kolommen op een telefoon maakt
   elk veld te smal om nog fatsoenlijk in te typen. */
@media (max-width: 540px) {
  .mymmo-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .mymmo-form-field--half {
    grid-column: 1 / -1;
  }
}

/* ── Velden ──────────────────────────────────────────────────────────────── */

.mymmo-form-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.925rem;
}

.mymmo-form-req {
  color: var(--mf-error);
  margin-left: 2px;
}

/*
 * TWEE KLASSEN, en dat is geen sierselector.
 *
 * Een blokthema styleert elk invoerveld op de site met een selector in deze
 * vorm:
 *
 *   select, textarea,
 *   input:not([type=checkbox], [type=submit], [type=reset], [type=button], [type=radio])
 *
 * `:not()` telt mee voor de specificiteit, dus die input-tak is (0,1,1) en een
 * losse klassenaam (0,1,0) verliest ervan. Op syndicoach.be kwamen daardoor de
 * opvulling (9px 10px in plaats van 11px 13px) en de LETTERGROOTTE (14px in
 * plaats van de 16px van het formulier) uit het thema, terwijl een <textarea>
 * -- daar is de selector maar (0,0,1) -- wel onze maat hield. Twee maten in
 * hetzelfde formulier, zonder dat er iets misging.
 *
 * `.mymmo-form-wrap` ervoor maakt er (0,2,0) van. Nog steeds geen !important:
 * wie onze velden echt anders wil, wint met een eigen regel of met de
 * --mf-variabelen.
 */
.mymmo-form-wrap .mymmo-form-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  /* `font` als shorthand: neemt ook line-height mee, zodat een thema dat er een
     eigen regelafstand op zet het veld niet hoger of lager maakt dan de rest. */
  font: inherit;
  /* Een thema zet `height: auto` of een vaste hoogte op zijn velden. Expliciet,
     zodat de opvulling hierboven de hoogte bepaalt. */
  height: auto;
  color: var(--mf-text);
  background: var(--mf-field-bg);
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.mymmo-form-input:focus {
  outline: none;
  border-color: var(--mf-border-focus);
  /* color-mix laat de focusring de accentkleur volgen zonder dat er een tweede
     variabele ingesteld moet worden. Browsers zonder ondersteuning krijgen de
     border-color hierboven, wat op zich al genoeg contrast geeft. */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mf-accent) 22%, transparent);
}

.mymmo-form-input:disabled {
  opacity: 0.6;
}

textarea.mymmo-form-input {
  resize: vertical;
  min-height: 120px;
}

.mymmo-form-help {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--mf-muted);
}

/* ── Keuzevelden ─────────────────────────────────────────────────────────── */

.mymmo-form-group {
  margin: 0;
  padding: 0;
  border: 0;
}

.mymmo-form-group .mymmo-form-label {
  padding: 0;
  /* WordPress-blokthema's zetten vaak `legend { float: left; width: 100%; }`
     in hun globale stijlen (Gutenberg-typografie-CSS) om een legend als kop
     te laten ogen. Zo'n float haalt de legend uit de normale flow en laat de
     EERSTE optie ernaast proppen in wat rest van de regelbreedte (vaak 0px),
     waardoor die optie buiten het veld springt terwijl de overige opties
     wél gewoon eronder staan -- precies zo'n float was de oorzaak op
     openvme.be. Twee klassen (0,2,0) wint hier zonder !important nodig te
     hebben van een kale `legend`-selector (0,0,1). */
  float: none;
}

.mymmo-form-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 7px;
}

.mymmo-form-check input {
  /* Iets omlaag zodat het vakje op de eerste regel tekst uitlijnt in plaats
     van op het midden van een label dat over twee regels loopt. */
  margin-top: 3px;
  flex: 0 0 auto;
  accent-color: var(--mf-accent);
  width: 17px;
  height: 17px;
}

.mymmo-form-check label {
  font-size: 0.95rem;
  cursor: pointer;
}

/* ── Opmaakblokken ───────────────────────────────────────────────────────── */

.mymmo-form-heading {
  margin: 10px 0 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.mymmo-form-paragraph {
  color: var(--mf-muted);
  font-size: 0.95rem;
}

.mymmo-form-paragraph p {
  margin: 0 0 8px;
}

/* ── Verzenden ───────────────────────────────────────────────────────────── */

.mymmo-form-actions {
  display: flex;
  /* De verzendknop staat rechtsonder, aan het einde van het formulier -- daar
     waar je uitkomt als je van boven naar beneden invult, en waar de knop
     "volgende" in elke wizard staat. Op een telefoon vult hij de breedte, want
     daar is uitlijnen geen keuze maar een obstakel. */
  justify-content: flex-end;
  margin-top: 22px;
}

@media (max-width: 540px) {
  .mymmo-form-actions {
    justify-content: stretch;
  }

  .mymmo-form-submit {
    width: 100%;
  }
}

/*
 * Ook twee klassen, en om dezelfde reden -- maar deze deed pijn op een andere
 * plek. Een blokthema styleert zijn knoppen zo:
 *
 *   .wp-element-button, .is-style-button, .button:not(.components-button), [type="submit"]
 *
 * `[type="submit"]` is (0,1,0): even zwaar als `.mymmo-form-submit`. Bij gelijk
 * gewicht wint wat LATER staat, en WordPress drukt de stijlen van het thema
 * inline in de <head> af -- dus ná de stylesheet van deze plugin. Het thema won
 * daardoor altijd, op elke site.
 *
 * Gevolg op syndicoach.be: de verzendknop stond op 14px/700 met een opvulling
 * van 10px 16px en een radius van 6px, terwijl de "Volgende" van een stap --
 * een <button type="button">, die de selector dus niet raakt -- op 16px/600 met
 * 12px 26px en radius 10px stond. Twee knoppen in hetzelfde venster, verschillend
 * van hoogte en lettergrootte, zonder dat er iets aan onze kant fout was.
 *
 * Deze regel en .mymmo-stap-knop in mymmo-forms-steps.css horen DEZELFDE
 * waarden te hebben. Wijzig je er een, wijzig ze allebei.
 */
.mymmo-form-wrap .mymmo-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Ruim genoeg om op een telefoon met een duim te raken (44px hoog). */
  min-height: 46px;
  height: auto;
  padding: 12px 26px;
  font: inherit;
  font-weight: 600;
  color: var(--mf-accent-text);
  background: var(--mf-accent);
  border: 1px solid transparent;
  border-radius: var(--mf-radius);
  cursor: pointer;
  transition: filter 0.12s ease;
}

/* Het thema zet op zijn knoppen `opacity: .82` bij hover. Die staat hier
   expliciet terug op 1, anders voelt dezelfde beweging anders aan dan bij de
   knoppen van een stap -- die vervagen niet, ze worden een tik donkerder. */
.mymmo-form-wrap .mymmo-form-submit:hover {
  opacity: 1;
  filter: brightness(0.93);
}

.mymmo-form-submit:focus-visible {
  outline: 2px solid var(--mf-text);
  outline-offset: 2px;
}

.mymmo-form-submit[aria-disabled="true"] {
  opacity: 0.65;
  cursor: progress;
}

/* ── Ruimte die van het thema komt ───────────────────────────────────────── */

/*
 * Een thema zet vaak een marge onder ELK invoerveld op de site -- bij een
 * blokthema is dat `margin-block-end: var(--wp--style--block-gap)`. Die regel is
 * specifieker dan een losse klassenaam en wint dus van de onze; onder elk veld
 * komt er dan ruimte bij, bovenop de afstand die het raster hierboven al zet.
 * Twee keer ruimte, en dat valt het meest op waar de velden onder elkaar staan.
 *
 * Dat is geen keuze van dat thema over ONS formulier -- het is een regel voor de
 * invoervelden van de site die de onze toevallig ook raakt. Daarom hier een
 * gerichte reset met net genoeg specificiteit (twee klassen), en nog steeds
 * zonder !important: wie onze velden écht anders wil, wint nog altijd met een
 * eigen regel of met de --mf-variabelen.
 *
 * ALLEEN de verticale marges, want die bepalen de indeling. Kleur, lettertype en
 * randen laten we met rust: daar mag een thema gerust in meespreken.
 */
.mymmo-form-wrap .mymmo-form-input,
.mymmo-form-wrap .mymmo-form-check,
.mymmo-form-wrap .mymmo-form-group,
.mymmo-form-wrap .mymmo-form-field {
  margin-block-start: 0;
  margin-block-end: 0;
}

.mymmo-form-wrap .mymmo-form-label {
  margin-block-start: 0;
  margin-block-end: 6px;
}

/* ── Honeypot ────────────────────────────────────────────────────────────── */

/* Buiten beeld in plaats van display:none: sommige bots slaan velden met
   display:none juist over, en dan werkt de val niet. */
.mymmo-form-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Foutmarkering ───────────────────────────────────────────────────────── */

/* Alleen na een verzendpoging, want :invalid kleurt anders elk leeg verplicht
   veld rood zodra de pagina laadt. De klasse wordt door de JS gezet. */
.mymmo-form--validated .mymmo-form-input:invalid {
  border-color: var(--mf-error);
}

/* aria-invalid is de bron van waarheid zodra JavaScript gevalideerd heeft: die
   staat ook op een <select> of een groep, waar :invalid niet altijd volstaat. */
.mymmo-form-input[aria-invalid="true"] {
  border-color: var(--mf-error);
}

/* De eigen foutmelding onder een veld. Ze vervangt de ballon van de browser --
   die staat in de taal van de BROWSER en niet van de pagina, en is niet te
   stylen. Zolang er geen fout is staat dit element er wel, maar met [hidden]. */
.mymmo-form-error {
  margin: 6px 0 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--mf-error);
}

.mymmo-form-error[hidden] {
  display: none;
}

/* Nog steeds gebruikt door oudere gerenderde pagina's uit de cache. */
.mymmo-form-fout {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--mf-error);
}

@media (prefers-reduced-motion: reduce) {
  .mymmo-form-input,
  .mymmo-form-submit {
    transition: none;
  }
}