/* ════════════════════════════════════════════════════════════════
   CARDNAV — de zwevende balk

   Dit bestand is de ORIGINELE component-CSS, letterlijk overgenomen.
   Alle maten, radii, paddings, transitions en de hamburger-animatie staan
   exact zoals in het origineel. Er zijn precies vier soorten afwijkingen,
   en elke afwijking staat hieronder bij de regel zelf gemotiveerd:

     1. KLEUR   — het origineel is een WITTE balk met een zwarte knop
                  (#111 / #333). Hier komen de huisstijl-tokens: de balk
                  wordt var(--ink), de knop var(--signal).
     2. LOGO    — het origineel centreert het logo absoluut; hier staat het
                  links (order: -1), zoals afgesproken.
     3. UITKLAP — .card-nav-content en .nav-card* zijn eruit. De balk klapt
                  niet meer open; de vier links staan direct op de balk
                  (die krijgen hun stijl van .nav__links in styles.css).
     4. <a> i.p.v. <button> — het origineel rekende op een echte <button>;
                  onze CTA is een link, dus die heeft display: inline-flex
                  nodig om height: 100% en het centreren te laten werken.

   Alles wat het origineel niet had maar wij wel gebruiken (de taalwissel,
   de actie-groep, focus-ringen) staat onderaan apart, zodat het origineel
   hierboven onvermengd te lezen blijft.

   VOLGORDE: basisregels boven, mediaquery's ONDERAAN. Gelijke specificiteit,
   dus andersom zouden ze niets doen — dat ging hier eerder mis.
   ════════════════════════════════════════════════════════════════ */

/* AFWIJKING 5 — origineel: width 90%, max-width 800px. De balk draagt nu ook
   de taalwissel én vier links, dus hij is breder: 94% en tot 1040px. Op tablet
   telt vooral de 94% (94% van 820 = 771px, was 738px). */
/* AFWIJKING 7 — origineel: position: absolute. Daarmee scrolde de balk gewoon
   mee de pagina uit. fixed houdt hem in beeld; verder verandert er niets, want
   absolute stond ook al buiten de flow (dus geen enkel element eronder
   verspringt) en top/left/transform/breedte blijven precies gelijk. */
.card-nav-container {
  position: fixed;
  top: 2em;
  left: 50%;
  transform: translateX(-50%);
  width: 94%;
  max-width: 1040px;
  z-index: 99;
  box-sizing: border-box;
}

.card-nav {
  display: block;
  height: 60px;
  padding: 0;
  /* AFWIJKING 1 — origineel: background-color: white. De site heeft een
     donkere balk, dus var(--ink). De tekstkleur moet dan mee: het origineel
     zette die niet en erfde zwart van de pagina, wat op deze balk 1,02:1
     geeft (letterlijk onzichtbaar). #ecedea op --ink is 13,9:1. currentColor
     voedt ook de hamburgerlijnen hieronder. */
  background-color: var(--ink);
  color: #ecedea;
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  will-change: height;
}

.card-nav-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.45rem 0.55rem 1.1rem;
  z-index: 2;
}

.hamburger-menu {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 6px;
}

.hamburger-menu:hover .hamburger-line {
  opacity: 0.75;
}

.hamburger-line {
  width: 30px;
  height: 2px;
  background-color: currentColor;
  transition:
    transform 0.25s ease,
    opacity 0.2s ease,
    margin 0.3s ease;
  transform-origin: 50% 50%;
}

.hamburger-menu.open .hamburger-line:first-child {
  transform: translateY(4px) rotate(45deg);
}

.hamburger-menu.open .hamburger-line:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

/* AFWIJKING 2 — origineel:
     position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
   Dat centreert het logo midden op de balk. Afgesproken is logo LINKS;
   order: -1 zet het vooraan zonder de HTML-volgorde te veranderen. */
.logo-container {
  display: flex;
  align-items: center;
  order: -1;
}

.logo {
  height: 28px;
}

.card-nav-cta-button {
  /* AFWIJKING 1 — origineel: background-color #111, color white, hover #333.
     Huisstijl: signaal-amber met inkt erop (8,0:1), hover --accent-hover. */
  background-color: var(--signal);
  color: var(--ink);
  border: none;
  border-radius: calc(0.75rem - 0.35rem);
  padding: 0 1rem;
  height: 100%;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
  align-items: center;
  /* AFWIJKING 4 — het origineel was een <button> (inline-block); de onze is
     een <a> en die is inline, waardoor height: 100% én het align-items
     hierboven niets zouden doen. inline-flex maakt beide weer werkzaam. */
  display: inline-flex;
  justify-content: center;
}

.card-nav-cta-button:hover {
  background-color: var(--accent-hover);
}

/* ── Aanvullingen: dit stond NIET in het origineel ──────────────────
   Het origineel had alleen hamburger · logo · CTA op de balk. Wij hebben
   er een taalwissel bij, en de vier links (die stylet .nav__links in
   styles.css). Geen maten uit het origineel worden hier aangeraakt. */

.card-nav-container { font-family: var(--font-body); }

.card-nav-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
}

/* De taalwissel staat LINKS, direct naast het logo, met een wereldbol ervoor.
   margin-right: auto duwt alles ná de taalwissel (de vier links, de CTA, de
   hamburger) naar rechts — dat is meteen het "links iets verder naar rechts". */
.card-nav-lang {
  display: inline-flex; align-items: center; gap: 6px;
  /* margin-left houdt de chip los van het logo — zonder deze regel plakten ze
     tegen elkaar. margin-right: auto duwt de rest van de balk naar rechts. */
  order: -1; margin-left: 20px; margin-right: auto;
  height: 32px; padding: 0 10px;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em;
  color: #b7bcc2; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-chip);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.card-nav-lang:hover { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.card-nav-lang__globe { width: 14px; height: 14px; flex: none; }

/* Bel-icoon: op mobiel vervangt dit de verdwenen onderbalk, op desktop staat
   de CTA-knop er al, dus daar is hij overbodig. */
.card-nav-tel {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 32px;
  color: #ecedea; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-chip);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.card-nav-tel .ph { font-size: 17px; }
.card-nav-tel:hover { color: #fff; border-color: rgba(255, 255, 255, 0.5); }

/* Het origineel had geen focus-ringen; zonder deze zakt de Lighthouse-gate
   (accessibility >= 0.95) en is de balk niet met toetsenbord te bedienen. */
.hamburger-menu:focus-visible,
.card-nav-cta-button:focus-visible,
.card-nav .logo-container:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 3px;
}

/* AFWIJKING 6 — de knop staat in het rijtje navigatie-items, dus hij krijgt
   exact hun typografie en spacing: .93rem, weight 500, padding 9px 13px
   (zie .nav__links > a in styles.css). Alleen de kleur blijft die van een
   knop, zodat hij herkenbaar dé actie is zonder eruit te springen.
   height: auto overschrijft de height: 100% uit het origineel, anders zou de
   padding niets doen. */
.card-nav-cta-button {
  font-family: var(--font-body);
  font-size: .93rem;
  font-weight: 500;
  white-space: nowrap;
  height: auto;
  padding: 9px 13px;
  /* Optische correctie: de knop heeft een achtergrondvlak, dus zijn rand
     begint waar de witruimte ophoudt, terwijl bij tekstlinks de witruimte
     doorloopt. Extra ruimte links = zijn eigen horizontale padding (13px),
     zodat hij optisch even ver van "Zo werkt het" staat als de links
     onderling. Alleen deze knop; de nav-link-gap (4px) blijft. De knop is
     display:none <=768, dus het uitgeklapte mobiele menu loopt niet mee. */
  margin-left: 13px;
}

/* ── Hamburger alleen op smal scherm ────────────────────────────────
   In het origineel stond de hamburger ALTIJD, want hij opende de kaarten.
   Die kaarten zijn er niet meer en de vier links staan op de balk, dus op
   desktop heeft hij geen functie. 800px is bewust hetzelfde punt waarop
   styles.css .nav__links verbergt — anders valt er een gat waarin geen van
   beide zichtbaar is. */
.hamburger-menu { display: none; }
@media (max-width: 800px) {
  .hamburger-menu { display: flex; }
}

/* ── Mobiel — letterlijk uit het origineel ──────────────────────────
   Staat bewust ONDERAAN: gelijke specificiteit, dus deze regels moeten ná
   de basisregels komen om ze te kunnen overrulen. */
@media (max-width: 768px) {
  .card-nav-container {
    width: 90%;
    top: 1.2em;
  }

  .card-nav-top {
    padding: 0.5rem 1rem;
    justify-content: space-between;
  }

  .hamburger-menu {
    order: 2;
  }

  .logo-container {
    position: static;
    transform: none;
    order: 1;
  }

  /* Origineel: .card-nav-cta-button { display: none } — die blijft weg, want
     hij past niet naast logo + taalwissel + hamburger. In plaats daarvan komt
     hier het bel-icoon: dezelfde directe actie, maar klein en in de balk in
     plaats van als vastgeplakte onderbalk. */
  .card-nav-cta-button { display: none; }
  .card-nav-tel { display: inline-flex; }

  /* logo (1) · taalwissel (1, daarna in de HTML) · bel (2) · hamburger (3);
     de margin-right: auto op de taalwissel houdt de rechterkant rechts. */
  /* Op mobiel zorgt de gap van .card-nav-top al voor lucht; daarbovenop een
     kleinere marge dan op desktop, anders wordt het te krap op 320px. */
  .card-nav-lang { order: 1; height: 30px; padding: 0 8px; margin-left: 6px; }
  .card-nav-actions { order: 2; }
  .hamburger-menu { order: 3; }
  .card-nav-tel { width: 34px; height: 30px; }

  /* Vier elementen op 375px past niet met de volle merknaam erbij: die brak
     over twee regels in een balk van 60px. Op mobiel dus alleen het merkteken
     — de naam staat direct daaronder in de hero en in de paginatitel. */
  .card-nav .brand__text { display: none; }
  .card-nav-top { gap: 8px; }
}