/* ===========================================================================
   ESTILO HAIRFASHION
   Stijlrecept: licht-en-luchtig. Structuur: blijvende kop.
   Alle waarden komen uit de tokentabel van het recept; de accentkleur is het
   paars uit hun eigen salon (#5c3895, geoogst uit hun huidige site en terug te
   zien op de muur achter de toonbank).
   =========================================================================== */

:root {
  /* Kleur, uit het recept */
  --canvas: #fdfcfa;
  --vlak: #ffffff;
  --inkt: #2a2e35;
  /* Donkerder dan de #6b7280 waar dit mee begon: op het zachte lila vlak
     haalde die maar 4,15:1 en dat is onder de grens voor kleine tekst. */
  --inkt-zacht: #4b5563;
  --lijn: #ece9e4;
  --accent: #5c3895;
  /* Het recept vraagt de accentkleur op 8 procent als zacht vlak. */
  --vlak-zacht: rgba(92, 56, 149, 0.08);
  /* Donkerder variant voor tekst op licht: het accent zelf haalt op #fdfcfa
     net geen 4.5:1 voor kleine tekst. */
  --accent-tekst: #4a2c7a;

  /* Typografie, uit het recept */
  --tekst-display: 44px;
  --tekst-h1: 34px;
  --tekst-h2: 25px;
  --tekst-h3: 19px;
  --tekst-tekst: 17px;
  --tekst-klein: 14px;

  /* Ruimte: basiseenheid 8px */
  --ruimte-1: 8px;
  --ruimte-2: 16px;
  --ruimte-3: 24px;
  --ruimte-4: 32px;
  --ruimte-6: 48px;
  --ruimte-8: 64px;
  --ruimte-12: 96px;

  --radius: 16px;
  --rand: 1px;
  --schaduw: 0 12px 32px rgba(0, 0, 0, 0.06);

  --breedte: 1120px;
  --leesbreedte: 34rem;
  /* De kop ligt over de hero heen, dus de hero moet er precies zoveel onder
     getrokken worden. Een vaste hoogte is hier eerlijker dan raden. */
  --kop-hoogte: 68px;

  --letter: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system,
    'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--inkt);
  font-family: var(--letter);
  font-size: var(--tekst-tekst);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  /* De balk van Gryd ligt vast onderaan het scherm en zou anders de laatste
     regels van de voet afdekken. */
  padding-bottom: var(--ruimte-12);
}

h1, h2, h3 { font-weight: 600; margin: 0 0 var(--ruimte-2); }
h1 { font-size: var(--tekst-h1); line-height: 1.2; letter-spacing: -0.01em; }
h2 { font-size: var(--tekst-h2); line-height: 1.3; }
h3 { font-size: var(--tekst-h3); line-height: 1.4; }
p { margin: 0 0 var(--ruimte-2); }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-tekst); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.baan { max-width: var(--breedte); margin: 0 auto; padding: 0 var(--ruimte-3); }
.lees { max-width: var(--leesbreedte); }

/* ======================= blijvende kop ================================== */

.kaplijst {
  position: sticky;
  top: 0;
  z-index: 20;
  transition: background-color 200ms ease, box-shadow 200ms ease;
  background: transparent;
}
/* kenmerken.js zet is-solid zodra er gescrold is. */
.kaplijst.is-solid {
  background: rgba(253, 252, 250, 0.94);
  box-shadow: 0 1px 0 var(--lijn);
}
/* De binnenpagina's beginnen niet met een beeld, dus daar staat de kop meteen
   dicht. De klasse nav--vast erbij vertelt kenmerken.js dat er geen
   scrollluisteraar nodig is die toch niets zou doen. */
.kaplijst--vast {
  background: var(--canvas);
  box-shadow: 0 1px 0 var(--lijn);
}
.kaplijst__baan {
  max-width: var(--breedte);
  margin: 0 auto;
  min-height: var(--kop-hoogte);
  padding: var(--ruimte-2) var(--ruimte-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-2);
}
.merknaam {
  font-size: var(--tekst-h3);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--inkt);
}
.merknaam span { color: var(--accent-tekst); }

.knop-lade {
  display: none;
  background: var(--vlak);
  border: var(--rand) solid var(--lijn);
  border-radius: 999px;
  padding: var(--ruimte-1) var(--ruimte-2);
  font: inherit;
  font-size: var(--tekst-klein);
  color: var(--inkt);
  cursor: pointer;
}

.wegwijzer { display: flex; gap: var(--ruimte-3); align-items: center; }
.wegwijzer a {
  text-decoration: none;
  color: var(--inkt);
  font-size: var(--tekst-klein);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--ruimte-1) 0;
  border-bottom: 2px solid transparent;
}
.wegwijzer a:hover { border-bottom-color: var(--accent); }
.wegwijzer a[aria-current='page'] {
  border-bottom-color: var(--accent);
  color: var(--accent-tekst);
}
.wegwijzer__sluit { display: none; }

/* Alleen op de startpagina ligt de kop over het beeld. Zolang er niet gescrold
   is staat hij daar in wit; zodra kenmerken.js is-solid zet, valt hij terug op
   de gewone inktkleur. */
.kaplijst--overbeeld:not(.is-solid) .merknaam,
.kaplijst--overbeeld:not(.is-solid) .merknaam span {
  color: #ffffff;
}
@media (min-width: 841px) {
  .kaplijst--overbeeld:not(.is-solid) .wegwijzer a { color: #ffffff; }
  .kaplijst--overbeeld:not(.is-solid) .wegwijzer a:hover,
  .kaplijst--overbeeld:not(.is-solid) .wegwijzer a[aria-current='page'] {
    border-bottom-color: #ffffff;
    color: #ffffff;
  }
}

/* ======================= hero =========================================== */

/* De kop is in de praktijk iets hoger dan de min-height (de knop en de
   regelhoogte tellen mee), en een tekort liet een lichte strook boven de foto
   staan. Ruim overlappen kost niets: de kop is daar toch doorzichtig. */
.onthaal { position: relative; margin-top: calc((var(--kop-hoogte) + var(--ruimte-2)) * -1); }
.onthaal__beeld {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.onthaal__beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.onthaal__sluier {
  position: absolute;
  inset: 0;
  /* Donker onderaan voor de kop en de tekst, en ook een beetje bovenaan: daar
     ligt de navigatie overheen, en die viel weg tegen het lichte deel van de
     foto (de schappen achter de toonbank). */
  background: linear-gradient(to top,
    rgba(20, 12, 30, 0.74) 0%,
    rgba(20, 12, 30, 0.30) 45%,
    rgba(20, 12, 30, 0.20) 82%,
    rgba(20, 12, 30, 0.46) 100%);
}
.onthaal__woord {
  position: relative;
  max-width: var(--breedte);
  margin: 0 auto;
  /* De kop ligt over de hero heen, dus de tekst begint eronder in plaats van
     ertegenaan. */
  padding: calc(var(--kop-hoogte) + var(--ruimte-6)) var(--ruimte-3) var(--ruimte-6);
  width: 100%;
  color: #ffffff;
}
.onthaal__opmaat {
  font-size: var(--tekst-klein);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 var(--ruimte-2);
  color: rgba(255, 255, 255, 0.88);
}
.onthaal__titel {
  font-size: var(--tekst-display);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--ruimte-2);
  max-width: 18ch;
}
.onthaal__zin { max-width: 42ch; color: rgba(255, 255, 255, 0.92); margin-bottom: var(--ruimte-3); }

.belknop {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-1);
  background: var(--accent);
  color: #ffffff;
  text-decoration: none;
  padding: var(--ruimte-2) var(--ruimte-3);
  border-radius: 999px;
  font-weight: 600;
  box-shadow: var(--schaduw);
}
.belknop:hover { background: var(--accent-tekst); }
.belknop--stil {
  background: var(--vlak);
  color: var(--accent-tekst);
  border: var(--rand) solid var(--lijn);
  box-shadow: none;
}
.belknop--stil:hover { background: var(--vlak-zacht); }

/* ======================= onthulling bij scroll =========================== */
/* Zie KENMERKEN.md, kenmerk 6. Zonder de klasse js op html blijft alles gewoon
   zichtbaar (kenmerken.css garandeert dat), dus deze ruststand mag alleen onder
   html.js gelden. */
html.js [data-onthul]:not(.is-onthuld) {
  opacity: 0;
  transform: translateY(28px);
}
[data-onthul].is-onthuld {
  opacity: 1;
  transform: none;
  transition: opacity 600ms ease, transform 600ms ease;
}

/* ======================= secties ======================================== */

.strook { padding: var(--ruimte-12) 0; }
.strook--zacht { background: var(--vlak-zacht); }
.strook--vlak { background: var(--vlak); }
.strook__kop { margin-bottom: var(--ruimte-6); }
.strook__opmaat {
  font-size: var(--tekst-klein);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-tekst);
  margin: 0 0 var(--ruimte-1);
}

.handen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ruimte-3);
}
.hand {
  background: var(--vlak);
  border: var(--rand) solid var(--lijn);
  border-radius: var(--radius);
  padding: var(--ruimte-4);
}
.hand h3 { margin-bottom: var(--ruimte-1); }
.hand p { color: var(--inkt-zacht); margin: 0; }

.tweeluik {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--ruimte-6);
  align-items: center;
}
.tweeluik img { border-radius: var(--radius); box-shadow: var(--schaduw); }

.spiegelrij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ruimte-3);
}
.spiegelrij figure { margin: 0; }
.spiegelrij img { border-radius: var(--radius); box-shadow: var(--schaduw); }
.spiegelrij figcaption {
  font-size: var(--tekst-klein);
  color: var(--inkt-zacht);
  padding-top: var(--ruimte-1);
}
.spiegelrij--hoog img { aspect-ratio: 3 / 4; object-fit: cover; }
.spiegelrij--vierkant img { aspect-ratio: 1 / 1; object-fit: cover; }

.uitspraak {
  border-left: 3px solid var(--accent);
  padding-left: var(--ruimte-3);
  font-size: var(--tekst-h3);
  line-height: 1.6;
  color: var(--inkt);
  margin: 0;
}
.uitspraak footer { font-size: var(--tekst-klein); color: var(--inkt-zacht); margin-top: var(--ruimte-1); }

.sterren { display: flex; gap: 6px; margin: var(--ruimte-2) 0 var(--ruimte-1); }
.sterren svg { width: 22px; height: 22px; fill: var(--accent); flex-shrink: 0; }
.waardering__zin { color: var(--inkt-zacht); margin-bottom: var(--ruimte-2); }

/* ======================= gegevens ======================================= */

.gegevens { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ruimte-4); }
.gegevens dt {
  font-size: var(--tekst-klein);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  margin-bottom: var(--ruimte-1);
}
.gegevens dd { margin: 0 0 var(--ruimte-3); font-size: var(--tekst-h3); }
.gegevens a { text-decoration: none; }
.gegevens a:hover { text-decoration: underline; }

.tijdenlijst { list-style: none; margin: 0; padding: 0; max-width: 24rem; }
.tijdenlijst li {
  display: flex;
  justify-content: space-between;
  gap: var(--ruimte-2);
  padding: var(--ruimte-1) 0;
  border-bottom: var(--rand) solid var(--lijn);
}
.tijdenlijst li:last-child { border-bottom: 0; }
.tijdenlijst span:last-child { color: var(--inkt-zacht); }

/* Kaart op verzoek: het kenmerk vervangt de plek door het iframe. */
.plattegrond { margin-top: var(--ruimte-3); }
.plattegrond iframe {
  width: 100%;
  height: 380px;
  border: 0;
  border-radius: var(--radius);
}
.plattegrond__plek {
  background: var(--vlak-zacht);
  border: var(--rand) dashed var(--lijn);
  border-radius: var(--radius);
  padding: var(--ruimte-4);
  text-align: center;
  color: var(--inkt-zacht);
  font-size: var(--tekst-klein);
}

/* ======================= voet =========================================== */

.voet {
  background: var(--vlak);
  border-top: var(--rand) solid var(--lijn);
  padding: var(--ruimte-8) 0 var(--ruimte-12);
  font-size: var(--tekst-klein);
}
.voet__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--ruimte-4); }
.voet h2 {
  font-size: var(--tekst-klein);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  margin-bottom: var(--ruimte-2);
}
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { margin-bottom: var(--ruimte-1); }
.voet a { color: var(--inkt); text-decoration: none; }
.voet a:hover { color: var(--accent-tekst); text-decoration: underline; }
.voet address { font-style: normal; color: var(--inkt-zacht); }

/* ======================= de balk van Gryd =============================== */

.gryd {
  position: fixed;
  left: 50%;
  bottom: var(--ruimte-2);
  transform: translateX(-50%);
  z-index: 40;
  width: calc(100% - var(--ruimte-4));
  max-width: 640px;
  background: var(--inkt);
  color: #ffffff;
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  padding: var(--ruimte-2) var(--ruimte-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-2);
  font-size: var(--tekst-klein);
  line-height: 1.5;
}
.gryd__tekst { flex: 1; min-width: 0; }
.gryd__knoppen { display: flex; gap: var(--ruimte-1); flex-shrink: 0; }
.gryd__knop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 8px 14px;
}
.gryd__knop:hover { background: rgba(255, 255, 255, 0.24); }
.gryd__knop svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ======================= smal scherm ==================================== */

@media (max-width: 840px) {
  :root {
    --tekst-display: 32px;
    --tekst-h1: 27px;
    --tekst-h2: 22px;
    --ruimte-12: 64px;
    --ruimte-8: 48px;
  }

  .knop-lade { display: block; }

  .wegwijzer {
    position: fixed;
    inset: 0;
    background: var(--canvas);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--ruimte-3);
    padding: var(--ruimte-8) var(--ruimte-4);
    transform: translateX(100%);
    /* visibility, niet alleen transform: een lade die alleen weggeschoven is
       staat nog buiten het scherm (waar de controle terecht over valt) en de
       links erin blijven bereikbaar met de tabtoets. Zo is hij echt dicht, en
       de vertraging op visibility laat de schuifbeweging nog wel zien. */
    visibility: hidden;
    transition: transform 220ms ease, visibility 0s linear 220ms;
    z-index: 30;
  }
  /* kenmerken.js zet is-open op de lade. */
  .wegwijzer.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 220ms ease, visibility 0s;
  }
  .wegwijzer a { font-size: var(--tekst-h2); text-transform: none; letter-spacing: 0; }
  .wegwijzer__sluit {
    display: block;
    position: absolute;
    top: var(--ruimte-3);
    right: var(--ruimte-3);
    background: none;
    border: 0;
    font: inherit;
    font-size: var(--tekst-h3);
    color: var(--inkt);
    cursor: pointer;
    padding: var(--ruimte-1) var(--ruimte-2);
  }

  .tweeluik { grid-template-columns: 1fr; gap: var(--ruimte-4); }
  .onthaal__beeld { min-height: 62vh; }
  .gryd { flex-direction: column; align-items: flex-start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}