/* ===========================================================================
   Maatwerk — bewegings- en terugkoppelingslaag
   ---------------------------------------------------------------------------
   Eén regel: er is op deze site geen klik waarna het scherm stil blijft staan.
   Wie klikt ziet binnen een oogwenk dat het is aangekomen.

   De maatvoering is overal hetzelfde en bewust klein:
     indrukken     70 ms   (moet direct voelen)
     terugveren   150 ms
     open/dicht   200–260 ms, met een curve die aan het eind afremt
     verplaatsing hooguit 1 à 3 pixels

   Beweging betekent hier iets: indrukken, openen, laden, klaar. Nooit sfeer.
   En nooit twee dingen tegelijk die om aandacht vragen.

   Wie in zijn systeem "verminder beweging" aan heeft staan krijgt onderaan dit
   bestand alles uitgezet — maar houdt élke toestand, dan in kleur en rand in
   plaats van in verschuiving.
   =========================================================================== */

:root{
  --mw-uit: cubic-bezier(.2,.7,.3,1);   /* remt af aan het eind, zoals de rest van het thema */
  --mw-druk: 70ms;
  --mw-kort: 150ms;
  --mw-mid: 200ms;
  --mw-lang: 260ms;
  --mw-goed: #5F9463;                    /* alleen voor "dit veld is goed ingevuld" */
  --mw-mis: #C4553F;                     /* alleen voor "hier klopt iets niet" */
}

/* ---------------------------------------------------------------------------
   1. Indrukken
   Elk klikbaar ding krijgt een zichtbare drukstand. Het attribuut wordt door
   beweging.js gezet bij muis, aanraking én toetsenbord (spatie/enter), zodat
   het overal hetzelfde voelt.
   --------------------------------------------------------------------------- */

/* de vangnetregel: iets dat we niet apart benoemd hebben, dooft even */
[data-mw-druk]{opacity:.74;transition:opacity var(--mw-druk) ease-out}

/* knoppen: één pixel naar beneden, alsof je hem werkelijk indrukt */
.btn,.mwf-knop,.kc-verder,.cfg-verder,.hamburger,.mega-knop{
  transition:transform .12s ease,background-color .18s ease,color .18s ease,border-color .18s ease}
.btn[data-mw-druk],.mwf-knop[data-mw-druk],.kc-verder[data-mw-druk],.cfg-verder[data-mw-druk]{
  opacity:1;transform:translateY(1px) scale(.994);transition-duration:var(--mw-druk)}
.btn-a[data-mw-druk],.mwf-knop[data-mw-druk],.kc-verder[data-mw-druk]{background:var(--amber-d)}
.btn-b[data-mw-druk]{background:rgba(237,163,27,.12);border-color:var(--amber);color:var(--amber)}
.hamburger[data-mw-druk],.mega-knop[data-mw-druk]{opacity:1;transform:scale(.94)}

/* vervolgstappen onderaan de pagina (bellen, appen, offerte) */
.ft-actie{transition:background .18s ease,padding-left .18s ease,transform .16s var(--mw-uit)}
.ft-actie[data-mw-druk]{opacity:1;transform:translateY(1px);background:var(--ink-3);transition-duration:var(--mw-druk)}
.ft-actie.prim[data-mw-druk]{background:var(--amber-d)}

/* de vaste balk onderaan op de telefoon */
.mob-cta a{transition:background .16s ease,transform .16s var(--mw-uit)}
.mob-cta a[data-mw-druk]{opacity:1;transform:translateY(1px);background:var(--ink-3)}
.mob-cta a.prim[data-mw-druk]{background:var(--amber-d)}

/* kaarten en tegels: heel licht indrukken, niet stuiteren */
.dienst[data-mw-druk],.route[data-mw-druk],.std-kaart[data-mw-druk],.voorb-kaart[data-mw-druk],
.zij-kaart[data-mw-druk],.mega-uitgelicht[data-mw-druk],.w[data-mw-druk],.fs-g figure[data-mw-druk],
.kc-kaart[data-mw-druk],.mwf-dag[data-mw-druk]{
  opacity:1;transform:scale(.993);transition:transform var(--mw-druk) ease-out}

/* omrande knopjes: plaatsen, buurplaatsen, dagen in de belagenda */
.plaats,.buur-lijst a{transition:border-color .18s ease,color .18s ease,background .18s ease,transform .18s var(--mw-uit)}
.plaats[data-mw-druk],.buur-lijst a[data-mw-druk],.kc-kaart[data-mw-druk],.mwf-dag[data-mw-druk]{
  border-color:var(--amber);background:rgba(237,163,27,.10)}

/* tekstlinks: even dimmen is genoeg, verschuiven zou de regel laten dansen */
.menu a[data-mw-druk],.mega-kol a[data-mw-druk],.ft a[data-mw-druk],.mob-link[data-mw-druk],
.inhoud a[data-mw-druk],.zij-links a[data-mw-druk],.vt-rechts a[data-mw-druk],.ft-plaatsen a[data-mw-druk]{
  opacity:.6;transition:opacity var(--mw-druk) ease-out}

/* de kaart van het werkgebied is svg: daar werkt alleen kleur en dekking */
.kaart-plek[data-mw-druk]{opacity:.72}

/* ---------------------------------------------------------------------------
   2. Toetsenbord
   Alles wat met de muis kan, kan met het toetsenbord — en je ziet waar je bent.
   --------------------------------------------------------------------------- */
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
.mw-vraag:focus-visible,.mw-licht-knop:focus-visible{outline-offset:2px}
/* op de amberkleurige vlakken is een amberen rand onzichtbaar: daar donker */
.btn-a:focus-visible,.ft-actie.prim:focus-visible,.mob-cta a.prim:focus-visible,
.mwf-knop:focus-visible,.kc-verder:focus-visible{outline-color:#1A1200}

/* ---------------------------------------------------------------------------
   3. De menubalk: waar sta je, en waar wijs je
   De onderstreping schuift open vanuit het midden in plaats van te verschijnen.
   --------------------------------------------------------------------------- */
.menu a,.mega-knop{position:relative}
.menu a::after,.mega-knop::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--amber);
  transform:scaleX(0);transition:transform var(--mw-mid) var(--mw-uit)}
.menu a:hover::after,.mega-knop:hover::after,
.mega-knop[aria-expanded="true"]::after,.menu a[data-mw-hier]::after{transform:scaleX(1)}
/* de bestaande rand mag weg nu de streep dit doet, anders staan er twee */
.menu a:hover,.mega-knop:hover,.mega-knop[aria-expanded="true"]{border-bottom-color:transparent}
.menu a[data-mw-hier]{color:var(--bone)}

/* ---------------------------------------------------------------------------
   4. Onderweg: de pagina is opgevraagd
   Een link aanklikken gaf niets te zien zolang de volgende pagina laadde. Deze
   balk komt pas na 400 ms in beeld, zodat een snelle pagina niet flikkert.
   --------------------------------------------------------------------------- */
.mw-bezig{position:fixed;top:0;left:0;right:0;height:3px;z-index:210;pointer-events:none;overflow:hidden}
.mw-bezig::before{
  content:"";position:absolute;top:0;bottom:0;width:45%;
  background:linear-gradient(90deg,transparent,var(--amber),transparent);
  animation:mwSchuif 1s cubic-bezier(.5,0,.5,1) infinite}
@keyframes mwSchuif{from{transform:translateX(-100%)}to{transform:translateX(322%)}}

/* het aangeklikte ding houdt zijn drukstand vast tot de pagina wisselt */
[data-mw-onderweg]{opacity:.72}

/* ---------------------------------------------------------------------------
   5. Wachten op de plek zelf
   Duurt iets langer dan een halve seconde, dan draait het rondje dáár waar de
   bezoeker net klikte — niet ergens boven in beeld.
   --------------------------------------------------------------------------- */
.mw-wacht{
  display:inline-block;width:15px;height:15px;flex:none;vertical-align:-2px;
  border:2px solid rgba(243,241,236,.28);border-top-color:var(--amber);border-radius:50%;
  animation:mwDraai .7s linear infinite}
.mwf-knop .mw-wacht{border-color:rgba(26,18,0,.3);border-top-color:#1A1200;margin-right:9px}
@keyframes mwDraai{to{transform:rotate(360deg)}}

/* het formulier zet zijn eigen knop uit zodra hij verstuurt; dat maken we zichtbaar */
.mwf-knop[disabled]{opacity:.82;cursor:progress}

/* ---------------------------------------------------------------------------
   6. Korte melding
   Eén tegelijk, onderin, verdwijnt vanzelf. Alleen voor dingen die anders
   onzichtbaar blijven — zoals een nummer dat op de computer niet belt.
   --------------------------------------------------------------------------- */
.mw-melding{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,10px);z-index:260;
  max-width:min(92vw,420px);display:flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:3px;background:var(--ink-3);border:1px solid var(--line);
  color:var(--bone);font-size:.94rem;box-shadow:0 18px 40px -22px rgba(0,0,0,.95);
  opacity:0;transition:opacity var(--mw-mid) ease,transform var(--mw-mid) var(--mw-uit)}
.mw-melding.aan{opacity:1;transform:translate(-50%,0)}
.mw-melding b{font-family:Archivo,sans-serif;font-weight:700;color:var(--amber)}
@media(max-width:700px){.mw-melding{bottom:76px}}   /* boven de vaste balk */

/* ---------------------------------------------------------------------------
   7. Veelgestelde vragen: open- en dichtschuiven
   Ze stonden allemaal open en waren nergens aanklikbaar. Nu is de vraag een
   knop, schuift het antwoord open, en draait het plusje mee.
   --------------------------------------------------------------------------- */
.qa.mw-uitklap{padding:0;border-top:1px solid var(--line)}
.qa.mw-uitklap h3{margin:0}
.mw-vraag{
  display:flex;align-items:flex-start;gap:14px;width:100%;
  background:none;border:0;padding:20px 2px;cursor:pointer;text-align:left;
  font:inherit;color:var(--bone);letter-spacing:-.015em;
  transition:color var(--mw-kort) ease}
.mw-vraag:hover{color:var(--amber)}
.mw-vraag[data-mw-druk]{opacity:1;color:var(--amber)}
.mw-vraag span{flex:1}
.mw-teken{
  position:relative;flex:none;width:20px;height:20px;margin-top:3px;
  border:1px solid var(--line);border-radius:50%;
  transition:border-color var(--mw-kort) ease,transform var(--mw-lang) var(--mw-uit)}
.mw-teken::before,.mw-teken::after{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:1.5px;background:var(--amber);
  transform:translate(-50%,-50%);transition:transform var(--mw-lang) var(--mw-uit),opacity var(--mw-kort) ease}
.mw-teken::after{transform:translate(-50%,-50%) rotate(90deg)}
.mw-vraag:hover .mw-teken{border-color:var(--amber)}
.mw-vraag[aria-expanded="true"] .mw-teken{border-color:var(--amber)}
.mw-vraag[aria-expanded="true"] .mw-teken::after{transform:translate(-50%,-50%) rotate(0deg)}
.mw-antwoord{
  overflow:hidden;height:0;
  transition:height var(--mw-lang) var(--mw-uit),opacity var(--mw-mid) ease;opacity:0}
.mw-antwoord[data-open]{opacity:1}
.mw-antwoord-in{padding:0 34px 22px 2px}
.mw-antwoord-in > :last-child{margin-bottom:0}

/* ---------------------------------------------------------------------------
   8. Foto's van groot dichtbij
   De foto's van eigen werk waren niet aan te klikken. Nu openen ze, met hun
   bijschrift, en met de pijltjestoetsen erlangs.
   --------------------------------------------------------------------------- */
.w,.fs-g figure{cursor:zoom-in}
.mw-licht{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,4vw,52px);background:rgba(12,11,10,.94);
  opacity:0;transition:opacity var(--mw-mid) ease}
.mw-licht.aan{opacity:1}
.mw-licht figure{margin:0;max-width:min(1180px,100%);max-height:100%;display:flex;flex-direction:column;gap:12px;
  transform:scale(.985);transition:transform var(--mw-lang) var(--mw-uit)}
.mw-licht.aan figure{transform:none}
.mw-licht img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:3px;margin:0 auto}
.mw-licht figcaption{color:#C6C0B6;font-size:.92rem;text-align:center}
.mw-licht figcaption i{font-style:normal;color:var(--grey-2);margin-left:8px}
.mw-licht-knop{
  position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
  display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;
  background:rgba(16,15,14,.72);color:var(--bone);cursor:pointer;
  transition:border-color var(--mw-kort) ease,background var(--mw-kort) ease}
.mw-licht-knop:hover{border-color:var(--amber);color:var(--amber)}
.mw-licht-knop[data-mw-druk]{opacity:1;background:rgba(237,163,27,.14)}
.mw-licht-vorig{left:clamp(8px,2vw,26px)}
.mw-licht-volgend{right:clamp(8px,2vw,26px)}
.mw-licht-dicht{top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);transform:none}
.mw-licht-knop svg{width:18px;height:18px}
.mw-licht-laden{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
@media(max-width:700px){
  .mw-licht-vorig{left:8px}.mw-licht-volgend{right:8px}
  .mw-licht-knop{width:40px;height:40px}
  .mw-licht img{max-height:68vh}
}

/* ---------------------------------------------------------------------------
   9. Formulieren
   Het formulier komt uit de DESK en brengt zijn eigen stijl mee. Hier komt er
   alleen terugkoppeling bij: oplichten bij focus, meteen zeggen of het goed
   staat, en een bevestiging die je niet kunt missen.
   --------------------------------------------------------------------------- */
.mwf input,.mwf textarea{transition:border-color var(--mw-kort) ease,box-shadow var(--mw-kort) ease,background var(--mw-kort) ease}
.mwf input:focus,.mwf textarea:focus{
  outline:2px solid var(--amber);outline-offset:1px;border-color:transparent;
  box-shadow:0 0 0 4px rgba(237,163,27,.10)}
.mwf-rij:focus-within label{color:var(--bone)}

.mwf input.mw-goed,.mwf textarea.mw-goed{border-color:rgba(95,148,99,.55)}
.mwf input.mw-mis,.mwf textarea.mw-mis{border-color:var(--mw-mis);background:rgba(196,85,63,.07)}

/* Het vinkje hangt aan de onderkant van de rij: daar staat het invoerveld,
   ongeacht hoe hoog het label erboven is. Twee velden naast elkaar mogen
   daarvoor niet meer met elkaar meegroeien — anders zakt het vinkje mee als
   het buurveld een melding krijgt. */
.mwf-2 > .mwf-rij{align-self:start}
.mw-veldrij{position:relative}
.mw-vink{
  position:absolute;right:12px;bottom:15px;transform:scale(.55);width:16px;height:16px;
  pointer-events:none;color:var(--mw-goed);opacity:0;
  transition:opacity var(--mw-kort) ease,transform var(--mw-kort) var(--mw-uit)}
.mw-veldrij.mw-toont-vink .mw-vink{opacity:1;transform:scale(1)}
.mw-veldrij.mw-toont-vink input{padding-right:36px}
.mw-veldmelding{
  display:block;margin-top:5px;font-size:.82rem;color:var(--mw-mis);
  opacity:0;transform:translateY(-3px);transition:opacity var(--mw-kort) ease,transform var(--mw-kort) var(--mw-uit)}
.mw-veldmelding[data-aan]{opacity:1;transform:none}

/* de bevestiging na versturen: hij schuift in beeld en licht één keer op */
.mwf-klaar{animation:mwKlaar var(--mw-lang) var(--mw-uit) both}
@keyframes mwKlaar{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mwf-klaar .vink{animation:mwVink 420ms var(--mw-uit) both}
@keyframes mwVink{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.mw-klaar-rand{box-shadow:0 0 0 0 rgba(237,163,27,.55);animation:mwRand 900ms var(--mw-uit) both}
@keyframes mwRand{from{box-shadow:0 0 0 0 rgba(237,163,27,.5)}to{box-shadow:0 0 0 14px rgba(237,163,27,0)}}

/* ---------------------------------------------------------------------------
   10. Waar ben ik geland?
   Een sprong binnen de pagina (een anker, "terug naar boven") laat kort zien
   waar je terechtkwam.
   --------------------------------------------------------------------------- */
.mw-aangewezen{animation:mwAanwijzen 1.1s var(--mw-uit) both}
@keyframes mwAanwijzen{
  from{box-shadow:-14px 0 0 -11px var(--amber)}
  60%{box-shadow:-14px 0 0 -11px var(--amber)}
  to{box-shadow:-14px 0 0 -11px rgba(237,163,27,0)}}

/* ---------------------------------------------------------------------------
   11. "Verminder beweging"
   Alles wat schuift, draait of veert gaat uit. Elke toestand blijft zichtbaar,
   maar dan in kleur, rand en dekking. Niemand mist informatie.
   --------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  [data-mw-druk],.btn[data-mw-druk],.mwf-knop[data-mw-druk],.ft-actie[data-mw-druk],
  .mob-cta a[data-mw-druk],.dienst[data-mw-druk],.route[data-mw-druk],.std-kaart[data-mw-druk],
  .voorb-kaart[data-mw-druk],.zij-kaart[data-mw-druk],.mega-uitgelicht[data-mw-druk],
  .w[data-mw-druk],.fs-g figure[data-mw-druk],.kc-kaart[data-mw-druk],.mwf-dag[data-mw-druk],
  .hamburger[data-mw-druk],.mega-knop[data-mw-druk],.kc-verder[data-mw-druk],.cfg-verder[data-mw-druk]{
    transform:none;transition:none}
  /* in plaats van indrukken: een duidelijke amberen rand zolang je drukt */
  [data-mw-druk]{outline:2px solid var(--amber);outline-offset:2px;opacity:1}

  .menu a::after,.mega-knop::after{transition:none}
  .mw-antwoord{transition:none}
  .mw-teken,.mw-teken::before,.mw-teken::after{transition:none}
  .mw-melding{transition:none;opacity:1;transform:translate(-50%,0)}
  .mw-melding:not(.aan){display:none}
  .mw-licht,.mw-licht figure{transition:none;opacity:1;transform:none}
  .mw-licht:not(.aan){display:none}
  .mwf-klaar,.mwf-klaar .vink,.mw-klaar-rand{animation:none}
  .mwf-klaar{outline:2px solid var(--amber);outline-offset:10px}
  .mw-aangewezen{animation:none;box-shadow:-14px 0 0 -11px var(--amber)}
  .mw-wacht{animation:none;border-top-color:var(--amber);border-right-color:var(--amber)}
  .mw-bezig::before{animation:none;width:100%;background:var(--amber);opacity:.55}
  .mw-vink,.mw-veldmelding{transition:none}
}