/* Kapsalon Mus'ab — optie E, "de vertrekstaat".
   ---------------------------------------------------------------------------
   De wereld is Nederlandse reisinformatie: vertrekstaten en bewegwijzering.
   Systemen die in één blik antwoord geven op "waar kan ik heen en kan het nu".
   Dat past bij zeven zaken waar je zonder afspraak binnenloopt.

   De gebruikssituatie stuurt alles: iemand staat buiten of in de auto, bij
   daglicht, telefoon op armlengte, tien seconden aandacht. Dat vraagt hoog
   contrast en grote letters, geen sfeerpagina.
   --------------------------------------------------------------------------- */

:root{
  /* Hun eigen rood is #ED1F25, maar wit daarop haalt 4,35:1 en dat is onder
     de norm. Als paginavlak dus een dieper rood met 7,60:1, en het felle rood
     blijft over voor het signaal "nu open". */
  --veld:#A81217;
  --veld-diep:#7A0C10;
  --sein:#ED1F25;
  --wit:#ffffff;
  --wit-zacht:#f6e7e6;      /* getint uit het veld, nooit grijs op kleur */
  --wit-stil:#e2c3c1;
  --roet:#14100F;
  --roet-2:#231b1a;
  --lijn:rgba(255,255,255,.22);

  --kop:"Overpass",system-ui,sans-serif;
  --data:"Overpass Mono",ui-monospace,monospace;
  --breed:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{margin:0;background:var(--veld);color:var(--wit);font-family:var(--kop);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}

/* De onderdelen die je niet zelf tekent dragen ook het ontwerp mee.
   Selectie, cursor, schuifbalk en focusrand staan standaard in kleuren die
   bij geen enkel ontwerp horen. */
::selection{background:var(--roet);color:var(--wit)}
:focus-visible{outline:3px solid var(--wit);outline-offset:3px}
html{scrollbar-color:var(--veld-diep) var(--veld)}
input,textarea{caret-color:var(--sein)}

.wrap{width:min(100% - 2.2rem,var(--breed));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.overslaan{position:absolute;left:1rem;top:-4rem;z-index:90;background:var(--roet);
  color:var(--wit);padding:.8rem 1.4rem;text-decoration:none;font-weight:700;
  transition:top .18s ease}
.overslaan:focus{top:.6rem}

/* ---------------------------------------------------------------- koptekst */
.balk{border-bottom:2px solid var(--lijn)}
.balk__in{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.9rem 0;flex-wrap:wrap}
/* Hun logo is rood met zwart. Op een rood vlak valt het weg, dus het krijgt
   een wit plaatje eronder, zoals een echt bord ook een eigen vlak heeft. */
.balk__logo{display:inline-flex;background:var(--wit);padding:.5rem .8rem;
  box-shadow:0 2px 6px rgba(0,0,0,.22),0 10px 24px rgba(0,0,0,.16)}
.balk__logo img{height:44px;width:auto;display:block}
.balk__feit{font-family:var(--data);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wit-zacht)}

/* ------------------------------------------------------------------ aanhef */
.aanhef{padding:clamp(2.4rem,7vw,4.6rem) 0 clamp(1.6rem,4vw,2.6rem)}
.aanhef h1{font-family:var(--kop);font-weight:800;margin:0 0 1rem;
  font-size:clamp(2.5rem,7.4vw,5.2rem);line-height:.94;letter-spacing:-.03em;
  text-wrap:balance;max-width:16ch}
.aanhef h1 em{font-style:normal;color:var(--wit-stil)}
.aanhef__uitleg{max-width:52ch;color:var(--wit-zacht);margin:0;font-size:1.05rem}

/* ------------------------------------------------------------------- bord */
.bord{padding-bottom:clamp(3rem,7vw,5rem)}

.bord__klok{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding:.7rem 0;border-top:2px solid var(--wit);
  border-bottom:1px solid var(--lijn);font-family:var(--data);
  font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}
.bord__nu{font-variant-numeric:tabular-nums}

/* Elke groep is een strook van het bord, niet een kaart. Kaarten zouden de
   rangorde platslaan; hier is de volgorde juist de informatie. */
.groep{margin-top:2.2rem}
.groep__kop{display:flex;align-items:center;gap:.9rem;margin:0 0 .2rem;
  font-family:var(--data);font-size:.82rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--wit)}
.groep__kop::after{content:"";flex:1;height:1px;background:var(--lijn)}
.groep--dicht .groep__kop{color:var(--wit-stil)}

.regel{display:grid;gap:.15rem 1.2rem;align-items:baseline;
  grid-template-columns:1fr auto;
  padding:1.05rem 0;border-bottom:1px solid var(--lijn);
  text-decoration:none;color:inherit;position:relative;
  transition:background .14s ease,padding-left .14s ease}
.regel:hover,.regel:focus-visible{background:rgba(0,0,0,.16);padding-left:.7rem}
.regel:active{background:rgba(0,0,0,.26)}

.regel__stad{font-size:clamp(1.5rem,3.6vw,2.2rem);font-weight:800;
  letter-spacing:-.02em;line-height:1.05}
.regel__adres{grid-column:1;font-size:.95rem;color:var(--wit-zacht)}
.regel__staat{grid-column:2;grid-row:1;text-align:right;font-family:var(--data);
  font-size:.95rem;font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.regel__tel{grid-column:2;grid-row:2;text-align:right;font-family:var(--data);
  font-size:.85rem;color:var(--wit-zacht);font-variant-numeric:tabular-nums}

/* Het felle rood is gereserveerd voor precies één ding: nu open. Daardoor
   betekent die kleur iets in plaats van dat hij versiert. */
.regel--open .regel__staat{color:var(--wit)}
.regel--open .regel__stad::before{content:"";display:inline-block;width:.62em;
  height:.62em;border-radius:50%;background:var(--sein);margin-right:.5em;
  vertical-align:.06em;box-shadow:0 0 0 3px rgba(237,31,37,.28)}
.regel--bijna .regel__staat{color:#ffd9a8}
.groep--dicht .regel{opacity:.66}
.groep--dicht .regel:hover{opacity:1}

/* Zonder JavaScript is er geen klok, dus dan geen half bord maar een eerlijke
   volledige lijst met de tijden erbij. */
.geen-js .bord__klok,.geen-js .groep__kop{display:none}

/* ------------------------------------------------------------- knoppenrij */
.acties{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.4rem}
.knop{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--kop);font-weight:700;font-size:1rem;letter-spacing:.02em;
  text-decoration:none;padding:1rem 1.6rem;min-height:52px;border:2px solid var(--wit);
  transition:background .16s ease,color .16s ease,transform .1s ease}
.knop--vol{background:var(--wit);color:var(--veld-diep)}
.knop--vol:hover{background:var(--wit-zacht)}
.knop--leeg{color:var(--wit)}
.knop--leeg:hover{background:var(--wit);color:var(--veld-diep)}
.knop:active{transform:translateY(1px)}

/* ----------------------------------------------------------------- verhaal */
.verhaal{background:var(--roet);color:var(--wit);padding:clamp(3rem,8vw,5.4rem) 0
  clamp(3.6rem,9vw,6.2rem)}
.verhaal h2{font-size:clamp(1.8rem,4.4vw,3rem);font-weight:800;letter-spacing:-.025em;
  margin:0 0 1rem;text-wrap:balance;max-width:18ch}
.verhaal p{max-width:66ch;color:#e8dedd}
.verhaal__raster{display:grid;gap:2.6rem;margin-top:2.6rem}
@media(min-width:860px){.verhaal__raster{grid-template-columns:1.15fr .85fr;gap:3.4rem}}
.feiten{margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.16)}
.feiten div{display:flex;justify-content:space-between;gap:1.2rem;padding:.95rem 0;
  border-bottom:1px solid rgba(255,255,255,.16)}
.feiten dt{color:#c9bcbb;font-size:.95rem}
.feiten dd{margin:0;font-family:var(--data);font-weight:700;
  font-variant-numeric:tabular-nums;text-align:right}

/* -------------------------------------------------------------------- voet */
.voet{background:var(--veld-diep);padding:2.4rem 0 3rem;font-size:.92rem}
.voet__in{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between}
.voet a{color:var(--wit-zacht)}
.voet a:hover{color:var(--wit)}

/* ------------------------------------------------------------------ beweging
   Eén bedacht moment: de regels komen als een omslaand bord binnen, van boven
   naar beneden, ieder net iets later. Niet elke sectie een fade. */
@media(prefers-reduced-motion:no-preference){
  .regel{animation:omslaan .5s cubic-bezier(.2,.9,.25,1) backwards}
}
@keyframes omslaan{
  from{opacity:0;transform:translateY(-.5rem)}
  to{opacity:1;transform:none}
}