/* ==========================================================================
   Header — gemeten op de live site op twee schermbreedtes (1425 en 1905 px).

   De balk loopt over de volle breedte en bestaat uit drie kolommen met een
   PROCENTUELE breedte, niet een vaste: 18% logo, 53% menu, 29% knoppen. Het
   logo is 33% van zijn eigen kolom en staat daarin gecentreerd. Daardoor
   schaalt de header mee met het scherm en houdt hij aan beide randen lucht.

     breedte   logo-kolom   logo-afbeelding   menu    knoppen
      1425 px     257 px        85 px (@86)   755 px   413 px
      1905 px     343 px       113 px (@115)  1010 px  552 px

   Een vaste logobreedte plakte het logo tegen de linkerrand en duwde de
   telefoonknop tegen de rechterrand — op een breed scherm meteen zichtbaar.
   Onder 1025px wisselt de balk naar de hamburger.
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--kleur-wit);
}

.header__balk {
  display: flex;
  align-items: center;
  min-height: var(--header-h);
  padding: 10px 0 5px;
}

.header__logo {
  flex: 0 0 18%;
  display: flex;
  justify-content: center;
}
.header__logo img { width: 33%; height: auto; }

.header__nav {
  flex: 0 0 53%;
  display: flex;
  justify-content: center;
  padding-inline: 1%;
}

.nav__lijst { display: flex; align-items: center; }

/* Gemeten: Nunito 17/600, padding 13px 20px, zwart */
.nav__link {
  display: block;
  padding: 13px 20px;
  font-family: var(--font-body);
  font-size: var(--tekst-body);
  font-weight: 600;
  line-height: 20px;
  color: var(--kleur-zwart);
  text-decoration: none;
  transition: color var(--transitie);
}

/* Het origineel markeert de huidige pagina niet. De rebuild doet dat wel, via
   aria-current zodat de markering ook voor screenreaders bestaat — met een
   onderstreping en niet met een zwaarder lettergewicht, zodat het gewicht in
   het menu gelijk blijft aan het origineel (600). */
.nav__link[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--kleur-bruin);
}

/* Uitgelicht menu-item — nu alleen Vacatures. De salon zoekt personeel, dus dat
   item krijgt als enige een vlak en springt eruit tussen de kale links. Crème
   vlak met bruine tekst: dezelfde twee kleuren als de vacaturebanner op de
   homepage, zodat er geen kleur bijkomt die de kit niet kent. */
.nav__link--uitgelicht {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 16px;
  background: var(--kleur-creme);
  transition: background var(--transitie);
}
/* Bruin stipje vóór het label: leest als "hier staat iets nieuws" en zet het
   accentbruin in zonder het in de tekst te gebruiken — bruin op crème haalt
   bij deze tekstgrootte (17px/600) net geen contrastverhouding van 4,5:1. */
.nav__link--uitgelicht::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kleur-bruin);
}
/* De bruine onderstreping van de huidige pagina valt weg tegen het crème vlak;
   op dit item markeren we de huidige pagina daarom met zwart. */
.nav__link--uitgelicht[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--kleur-zwart);
}

@media (hover: hover) and (min-width: 1025px) {
  .nav__link:hover { color: var(--kleur-bruin); }
  .nav__link--uitgelicht:hover { background: var(--kleur-taupe); color: var(--kleur-zwart); }
}

/* Gemeten: 29% breed met 1% binnenruimte; de knoppen staan links in die kolom,
   niet tegen de rechterrand. Daardoor eindigt de telefoonknop op 1720px bij een
   venster van 1905px — er blijft bewust ruimte over. */
.header__acties {
  flex: 0 0 29%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ruimte-md);
  padding-inline: 1%;
}

/* --- Hamburger --------------------------------------------------------- */
.header__toggle {
  display: none;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 12px;
  margin-inline-start: auto;
}
.header__toggle-streep {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--kleur-zwart);
  transition: transform var(--transitie), opacity var(--transitie);
}
.header__toggle-streep + .header__toggle-streep { margin-top: 5px; }

.header__toggle[aria-expanded="true"] .header__toggle-streep:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__toggle[aria-expanded="true"] .header__toggle-streep:nth-child(2) { opacity: 0; }
.header__toggle[aria-expanded="true"] .header__toggle-streep:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mobiel paneel ----------------------------------------------------- */
.header__mobiel {
  border-top: 1px solid var(--kleur-lijn);
  padding: var(--ruimte-md) var(--rand-zij) var(--ruimte-lg);
  background: var(--kleur-wit);
}
.header__mobiel .nav__lijst { flex-direction: column; align-items: stretch; }
.header__mobiel .nav__link { padding: 14px 0; font-size: 18px; }
/* In het paneel staan de links tegen de linkerrand; het uitgelichte vlak krijgt
   binnenruimte terug en een beetje lucht erboven zodat het losstaat van de rij. */
.header__mobiel .nav__link--uitgelicht {
  padding: 14px 16px;
  margin-top: var(--ruimte-sm);
}
.header__mobiel-acties {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-sm);
  margin-top: var(--ruimte-md);
}

/* Tussen de hamburger-breakpoint en de smalste gemeten breedte (1425px) is het
   menu met vijf items te krap: "Behandelingen & Prijzen" en "Over Ons" braken
   over twee regels en maakten de balk hoger. Daar krijgt de menukolom ruimte
   van de logokolom en staan de links dichter op elkaar. Het logo houdt zijn
   maat doordat het percentage binnen zijn kolom meegroeit (18%x33% = 14%x42%).
   De gemeten verhoudingen vanaf 1425px blijven ongemoeid. */
@media (min-width: 1025px) and (max-width: 1424px) {
  .header__logo { flex: 0 0 14%; }
  .header__logo img { width: 42%; }
  .header__nav { flex: 0 0 60%; }
  .header__acties { flex: 0 0 26%; gap: var(--ruimte-sm); }
  .nav__link { padding-inline: 12px; white-space: nowrap; }
  .nav__link--uitgelicht { padding-inline: 12px; }
}

/* Onder de Elementor-breakpoint van 1024px wisselt het origineel naar de
   hamburger; dat nemen we 1-op-1 over. */
@media (max-width: 1024px) {
  .header__nav { display: none; }
  .header__toggle { display: block; }
  .header__balk {
    padding: 3px var(--rand-zij);      /* gemeten: balk 68px hoog bij een logo van 62px */
    min-height: 68px;
    gap: var(--ruimte-sm);
  }

  /* Gemeten op het origineel: op mobiel blijft de boekknop zichtbaar naast
     de hamburger (169x41); het telefoonnummer verhuist naar het paneel.
     De procentuele kolommen van de brede balk gelden hier niet meer. */
  .header__logo { flex: 0 0 auto; }
  .header__logo img { width: 76px; }
  .header__acties { flex: 1 1 auto; justify-content: flex-end; padding-inline: 0; }
  .header__tel { display: none; }
  .header__toggle { margin-inline-start: 0; }
}

@media (max-width: 360px) {
  /* Pas op de smalste toestellen wordt de knop compacter; op 375px past
     de originele maat (169x41) nog gewoon naast de hamburger. */
  .header__boek { padding: 10px 12px; font-size: 12px; }
}
@media (min-width: 1025px) {
  .header__mobiel { display: none !important; }
}