/**
 * Mymmo Forms — de omlijsting van een stappenreeks.
 *
 * Alleen de CHROME: de voortgangsbolletjes, de teller, de knoppenrij en de
 * ruimte rond een stap. Wat IN een stap staat maakt de stap zelf; die brengt
 * zijn eigen CSS mee.
 *
 * Dit bestand staat bewust NIET in public/mymmo-forms.css. Dat bestand is de
 * gedeelde bron van de FORMULIER-stijl en het voorbeeld in de bouwer van de
 * Operations Manager draait erop — daar bestaat geen stappenreeks, dus daar zou
 * dit dode CSS zijn. Zelfde afweging als bij mymmo-forms-modal.css.
 *
 * Geen !important, nergens: dat is precies wat het overschrijven door een
 * sitethema kapotmaakt. De enige uitzondering staat in de <noscript> in
 * templates/steps.php, en die moet het `hidden`-attribuut van de browser
 * overrulen.
 */

.mymmo-stappen {
  /* Dezelfde variabelen als het formulier. Ze worden hier opnieuw gedeclareerd
     omdat .mymmo-form-wrap een KIND van deze wikkel is: de knoppen van de
     reeks staan erbuiten en zouden anders niets erven. De shortcode zet er het
     thema van het formulier en van deze plaatsing achter. */
  --mf-accent: #2563eb;
  --mf-accent-text: #ffffff;
  --mf-text: #1f2430;
  --mf-muted: #6b7280;
  --mf-border: #d7dbe2;
  --mf-radius: 10px;
  --mf-gap: 18px;
  --mf-max-width: 720px;

  /* GEEN eigen opvulling. In een pagina hoort een reeks op de tekstbreedte te
     staan, net als het formulier; in de pop-up levert het paneel ze al. Ze hier
     ooit bij zetten betekent dat een stap verder van de rand staat dan het
     formulier op het tabblad ernaast -- precies de fout die tot 1.15.3 in dit
     bestand zat. */
  max-width: var(--mf-max-width);
  color: var(--mf-text);
  font-size: 16px;
  line-height: 1.5;
}

/* De wikkel van het formulier staat al in de reeks en hoeft zijn eigen breedte
   niet nog eens te zetten -- anders staat de laatste stap smaller dan de stap
   ervoor. Opvulling heeft hij niet meer; die staat op het paneel. */
.mymmo-stappen .mymmo-form-wrap {
  max-width: none;
}

.mymmo-stap:focus {
  /* De focus springt bij elke wissel naar de stap. Zichtbaar omlijnen zou een
     kader om de halve pagina zetten; de bolletjes en de teller tonen al dat er
     iets veranderde. */
  outline: none;
}

/* ── Voortgang ───────────────────────────────────────────────────────────── */

/* Alleen de teller ("Stap 1 van 3"). De streepjesbalk die hier boven stond is
   weg sinds 1.15.10, op vraag. mymmo-forms-steps.js zoekt nog naar
   [data-mymmo-bol], vindt er geen en slaat die stap gewoon over. */

.mymmo-stappen-teller {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: var(--mf-muted);
}

/* ── De stap vult het vlak ───────────────────────────────────────────────── */

/*
 * In een PAGINA doet dit niets: de reeks groeit daar gewoon met haar inhoud mee,
 * dus er is geen vrije ruimte om te verdelen en alles staat waar het stond.
 *
 * In de POP-UP heeft het paneel wel een opgelegde hoogte, en daar hoort de
 * knoppenrij tegen de onderrand te staan in plaats van halverwege een half leeg
 * vlak -- met de stap eronder die gewoon ophoudt. Dat is wat deze ketting doet:
 * wikkel → stap → inhoud, elk een kolom die de ruimte van zijn ouder inneemt.
 *
 * flex-shrink is overal 0. Past de stap niet, dan hoort het paneel te SCROLLEN
 * (het heeft overflow-y:auto); de inhoud samenpersen tot ze niet meer leesbaar
 * is, is geen oplossing.
 */
.mymmo-stappen {
  display: flex;
  flex-direction: column;
}

/* :not([hidden]) is hier geen sierselector maar noodzaak: `display: none` op
   een element met het hidden-attribuut komt uit de stylesheet van de BROWSER, en
   elke display uit een stylesheet van de pagina wint daarvan -- ongeacht
   specificiteit. Zonder deze uitzondering staan alle stappen tegelijk op het
   scherm, met het formulier onder de eerste vraag. */
.mymmo-stap:not([hidden]) {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.mymmo-stap-inhoud {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/*
 * EEN STAP IS NOOIT BREDER DAN DE KOLOM WAARIN ZE STAAT.
 *
 * Een stap brengt haar eigen HTML en CSS mee, en die is geschreven met het
 * scherm in gedachten waarop ze gemaakt is. Staat er ergens een vaste maat, een
 * `vw`-waarde of een absoluut geplaatst element, dan steekt ze in een smallere
 * kolom (een callout, een pop-up op een telefoon) buiten haar vak -- en dan
 * wordt de PAGINA breder dan de viewport en kan je opzij vegen. Dat is niet te
 * zien in het voorbeeld van de bouwer, want daar is de kolom breed.
 *
 * `min-width: 0` is het echte werk: een flexitem mag standaard niet kleiner
 * worden dan zijn eigen inhoud, en dan wint die inhoud van de kolom. Verticaal
 * blijft alles zoals het was -- dit raakt enkel de breedte.
 */
.mymmo-stap,
.mymmo-stap-inhoud,
.mymmo-stap-inhoud > * {
  min-width: 0;
  max-width: 100%;
}

/*
 * EEN LETTERTYPE IN HET HELE VENSTER.
 *
 * De wikkel die een stap meebrengt zet vaak zijn eigen `font-family` -- de
 * voorbeeldstap kwam uit een losstaande rekenmodule en had een systeemstack
 * (`-apple-system, ... "Segoe UI", ...`) staan. Naast een formulier dat de
 * letter van de site erft, is dat zichtbaar: op syndicoach.be stond de tekst
 * van stap 1 in Segoe UI en die van het formulier in Rethink Sans.
 *
 * (0,2,0) tegen de (0,1,0) van zo'n wikkel, dus dit wint ook al staat de
 * <style> van de stap later in het document. Alleen de BUITENSTE wikkel wordt
 * geraakt; alles eronder erft gewoon. Wil een stap ergens echt een andere
 * letter (een stukje code, een icoonfont), dan wint ze met twee klassen --
 * `.sc-stap .sc-code` -- en dat is precies het soort bewuste keuze dat wel mag.
 */
.mymmo-stappen .mymmo-stap-inhoud > * {
  font-family: inherit;
}

/*
 * De wikkel die de stap ZELF meebrengt groeit mee. Daardoor kan een stap zijn
 * bedieningselement onderaan zetten -- `margin-top: auto` op het blok dat naar
 * beneden moet, zoals in voorbeelden/gebouwgrootte.html -- terwijl de vraag
 * bovenaan bij de titel blijft staan.
 *
 * De <link>, <style> en <script> van een stap staan hier ook tussen; die zijn
 * display:none en dus geen flexitem, ze krijgen niets. Brengt een stap meerdere
 * ZICHTBARE blokken mee, dan verdelen die de vrije ruimte onder elkaar.
 */
.mymmo-stap-inhoud > * {
  flex: 1 0 auto;
}

/* De laatste stap IS het formulier: dezelfde ketting door tot de knoppenrij,
   zodat de verzendknop even laag staat als de "Volgende" van de stap ervoor. */
.mymmo-stap--formulier:not([hidden]) > .mymmo-form-wrap,
.mymmo-stap--formulier:not([hidden]) > .mymmo-form-wrap > .mymmo-form {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.mymmo-stappen .mymmo-form-actions {
  margin-top: auto;
  padding-top: 22px;
}

/* ── Een stap ────────────────────────────────────────────────────────────── */

.mymmo-stap-titel {
  margin: 0 0 14px;
  font-size: 1.3rem;
  line-height: 1.25;
}

/* Staat er een regel uitleg onder de titel, dan hoort die bij de titel en niet
   bij wat erna komt -- vandaar minder ruimte ertussen. Een modifier-klasse en
   geen `:has(+ .mymmo-stap-tekst)`: die valt op een oudere browser stil weg, en
   dan is het verschil onzichtbaar tot iemand het meldt. */
.mymmo-stap-titel--met-tekst {
  margin-bottom: 6px;
}

/*
 * De regel onder de titel van een stap. Hij staat HIER en niet in de CSS van
 * een stap, zodat elke stap dezelfde regel krijgt -- ook de laatste, die het
 * formulier is en dus geen eigen HTML meebrengt. Dat is de hele reden dat deze
 * klasse bestaat: stap 1 en stap 2 horen er hetzelfde uit te zien.
 */
.mymmo-stap-tekst {
  margin: 0 0 14px;
  /* Exact dezelfde maat en kleur als .mymmo-form-help in mymmo-forms.css: dit
     is dezelfde soort zin, alleen boven een stap in plaats van onder een veld.
     Twee maten die een paar tienden van elkaar liggen, lezen als een slordige
     kopie -- niet als een keuze. */
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--mf-muted);
}

/* Een stap die net in beeld kwam, komt van onder. Kort: dit is navigatie, geen
   voorstelling. Wie bewegingen liever niet heeft, krijgt ze niet. */
.mymmo-stap:not([hidden]) {
  animation: mymmo-stap-in 0.22s ease-out;
}

@keyframes mymmo-stap-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* "Volgende" terwijl de stap nog niets opleverde: even schudden en de aandacht
   naar het veld. Een foutmelding in rood zou beweren dat er iets fout is, en
   dat is het niet — er is alleen nog niets ingevuld. */
.mymmo-stap--wacht {
  animation: mymmo-stap-wacht 0.4s ease;
}

@keyframes mymmo-stap-wacht {
  0%, 100% { transform: none; }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .mymmo-stap:not([hidden]),
  .mymmo-stap--wacht {
    animation: none;
  }

}

/* ── Wat een thema aan de bediening van een stap doet ────────────────────── */

/*
 * 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])
 *
 * Een schuifbalk staat NIET in dat rijtje uitzonderingen. Ze krijgt daardoor de
 * opvulling en de rand van een tekstveld, en omdat alles hier border-box is
 * wordt haar hoogte van 4px opgeblazen tot padding + rand: op syndicoach.be
 * 20px, wat leest als een langgerekte schakelaar in plaats van als een
 * schuifbalk. De stap zelf zet wel `height` en `appearance`, maar niet de
 * opvulling -- die staat daar nergens, dus er valt niets te overschrijven.
 *
 * Dit is geen keuze van dat thema over ONZE stap; het is een regel voor de
 * velden van de site die de onze toevallig ook raakt. Vandaar hier de reset, en
 * niet in elke stap apart: een stap-auteur kan niet elk thema kennen.
 * (0,2,1) tegen hun (0,1,1). Alleen wat de indeling kapotmaakt -- kleur, vorm en
 * de knop blijven van de stap.
 */
.mymmo-stappen input[type="range"] {
  padding: 0;
  border: 0;
  /* Een thema zet vaak `margin: 0 0 1em` op elk veld. De stap bepaalt zelf
     hoeveel ruimte er onder haar schuifbalk hoort. */
  margin-block-end: 0;
}

/* ── De knoppenrij ───────────────────────────────────────────────────────── */

.mymmo-stap-nav {
  display: flex;
  gap: 12px;
  /* De eerste stap heeft geen "Vorige"; dan hoort "Volgende" nog steeds rechts
     te staan, op dezelfde plek als in elke volgende stap. */
  justify-content: flex-end;
  /* `auto` duwt de rij naar de onderrand van de stap; de padding houdt de
     afstand tot de inhoud als er niets te verdelen valt (een laag venster, of
     een stap in een pagina). */
  margin-top: auto;
  padding-top: 22px;
}

.mymmo-stap-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Ruim genoeg voor een duim op een telefoon. */
  min-height: 46px;
  padding: 12px 26px;
  font: inherit;
  font-weight: 600;
  border-radius: var(--mf-radius);
  cursor: pointer;
  transition: filter 0.12s ease, opacity 0.12s ease;
}

.mymmo-stap-knop--verder {
  color: var(--mf-accent-text);
  background: var(--mf-accent);
  border: 1px solid transparent;
  /* De belangrijkste knop staat rechts en vult als eerste de ruimte op een
     smal scherm. */
  margin-left: auto;
}

.mymmo-stap-knop--terug,
.mymmo-form-back {
  color: var(--mf-muted);
  background: transparent;
  border: 1px solid var(--mf-border);
}

.mymmo-stap-knop:hover {
  filter: brightness(0.95);
}

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

/* Niet `disabled`: een uitgeschakelde knop is voor een schermlezer niet aan te
   wijzen en kan dus nooit vertellen waarom je niet verder kan. Hij blijft
   klikbaar en de klik wijst naar het veld dat nog leeg is. */
.mymmo-stap-knop.is-uit {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── De "Vorige" in het formulier zelf ───────────────────────────────────── */

/*
 * De laatste stap IS het formulier, en dat heeft al een knoppenrij met de
 * verzendknop. Daar een tweede rij onder zetten zou de belangrijkste knop niet
 * de onderste maken; de terugknop schuift dus in die bestaande rij, links.
 */
.mymmo-form-actions:has(.mymmo-form-back) {
  justify-content: space-between;
}

.mymmo-form-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 22px;
  font: inherit;
  font-weight: 600;
  border-radius: var(--mf-radius);
  cursor: pointer;
}

@media (max-width: 540px) {
  /* Naast elkaar, ook op een telefoon (2026-09-20, expliciete keuze) -- dit
     was column-reverse (elk op zijn eigen rij) om per ongeluk raken te
     voorkomen; de gebruiker wil ze bewust naast elkaar. */
  .mymmo-stap-nav {
    flex-direction: row;
  }

  .mymmo-stap-knop {
    /* Geen volle breedte meer: de twee knoppen delen de rij. */
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }

  .mymmo-stap-knop--verder {
    /* Op de eerste stap (geen "Vorige") duwde margin-left:auto de knop naar
       rechts; met flex:1 1 0 op beide knoppen zou dat de vrije ruimte
       opeisen voor deze knop alleen. justify-content:flex-end op
       .mymmo-stap-nav houdt een ALLEENSTAANDE knop nog steeds rechts. */
    margin-left: 0;
  }

  .mymmo-form-actions:has(.mymmo-form-back) {
    flex-direction: row;
    gap: 12px;
  }

  .mymmo-form-back {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }

  /*
   * En de verzendknop krijgt DEZELFDE verdeling.
   *
   * Die staat in mymmo-forms.css op `width: 100%` (ook onder 540px), want een
   * formulier zonder stappen heeft daar maar een knop. Naast een "Vorige" die
   * de helft van de rij opeist gaf dat twee knoppen van een rare, ongelijke
   * breedte: een smalle Vorige en een Versturen die al de rest neemt. Op de
   * stap ervoor staan Vorige/Volgende wel half-om-half, dus bij de laatste
   * stap verspringen ze -- en dat leest als een fout.
   *
   * Enkel binnen een stappenreeks en enkel als er echt een "Vorige" naast
   * staat; een formulier met alleen een verzendknop houdt zijn volle breedte.
   */
  .mymmo-stappen .mymmo-form-actions:has(.mymmo-form-back) .mymmo-form-submit {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }
}