/* frame.css — de gedeelde koptekst en voettekst van beeldsensatie.nl.
   ============================================================================
   BELANGRIJK: dit bestand wordt óók geladen op /bestellen/ (het HostFact-
   bestelformulier), en daar wordt base.css NIET geladen. Reden: base.css
   bevat generieke element-selectors (img, p, label, h1-h3, *) die de opmaak
   van het bestelformulier stukmaken.

   Regel voor dit bestand: geen enkele generieke element-selector, behalve de
   ene bewuste uitzondering op `body` hieronder. Alles wat de koptekst en de
   voettekst nodig hebben staat hier scoped binnen .site-header / .site-footer,
   ook de dingen die base.css normaal globaal regelt.

   Dat geldt ook voor de knop "Offerte aanvragen" in de koptekst: die kan NIET
   op .btn uit components.css leunen, want components.css wordt op /bestellen/
   niet geladen. Vandaar de eigen klasse .header-cta hieronder.
   ============================================================================ */


/* --------------------------------------------------------------------------
   1. Webfont. Verhuisd uit base.css, omdat het bestelformulier het nodig heeft
   en base.css daar niet geladen wordt. Paden zijn root-relatief, in lijn met
   de rest van het project.

   Eén variabel font voor de hele site: Instrument Sans, gewicht 400 t/m 700,
   recht en cursief. De unicode-range is de latijnse basissubset; tekens
   daarbuiten vallen terug op Segoe UI / system-ui.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Instrument Sans";
  src:url("/fonts/instrumentsans-variable.woff2") format("woff2-variations");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Sans";
  src:url("/fonts/instrumentsans-variable-italic.woff2") format("woff2-variations");
  font-weight:400 700;
  font-style:italic;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* --------------------------------------------------------------------------
   2. De enige bewuste globale regel.
   Zonder `margin:0` staat de koptekst 8 px van de rand op /bestellen/, waar
   base.css niet geladen wordt. Achtergrond en tekstkleur horen erbij: anders
   is het vlak rond het bestelformulier wit in plaats van papier.
   Dit overschrijft `body{margin:0.2rem}` uit orderform.css binnen diens
   mobiele mediaquery. Dat is geen verlies: .o_form_container heeft daar zelf
   al `padding:0 5px`.
   -------------------------------------------------------------------------- */
body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
}


/* --------------------------------------------------------------------------
   3. Zelfstandigheid. base.css is op /bestellen/ niet geladen, dus de resets
   die de koptekst en voettekst nodig hebben staan hier scoped herhaald.
   -------------------------------------------------------------------------- */
.site-header,
.site-footer,
.site-header *,
.site-footer * {
  box-sizing: border-box;
}

.site-header img,
.site-footer img {
  display: block;
  max-width: 100%;
  height: auto;
}

.site-header p,
.site-footer p,
.site-header h2,
.site-footer h2 {
  margin: 0;
}

/* Het submenu is een <ul>. Zonder base.css — en die ontbreekt op /bestellen/ —
   zet de browser daar zijn eigen bolletjes en inspringing op. */
.site-header ul,
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Focus op papier: koper (4,60:1). Focus op navy: papierwit — koper zou daar
   maar 3,11:1 halen en dat is voor een focusring te mager. */
.site-header :focus-visible {
  outline: 3px solid var(--koper);
  outline-offset: 3px;
}
.site-footer :focus-visible {
  outline: 3px solid var(--op-navy);
  outline-offset: 3px;
}

.site-header {
  font-family: var(--font);
  font-size: var(--maat-m);
  line-height: 1.6;
  color: var(--navy);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

.site-footer {
  font-family: var(--font);
  font-size: var(--maat-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.site-header a {
  color: var(--navy);
}


/* --------------------------------------------------------------------------
   4. De omlijsting zelf.
   -------------------------------------------------------------------------- */
.wrap {
  max-width: var(--breedte);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.site-header {
  border-bottom: 1px solid var(--rand);
}
/* padding-block was 1rem toen het compacte logo (34,6px hoog op 180px) hier
   stond en de knop met 44px de regelhoogte bepaalde. Het volledige logo is op
   250px 68,7px hoog; met 1rem eromheen werd de kopregel 101px in plaats van
   77px. Op 0,75rem blijft dat 93,7px — de kop groeit dus mee met het logo,
   maar houdt zijn verhouding. */
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1rem 1.75rem;
  padding-block: 0.75rem;
  flex-wrap: wrap;
}

/* Het logo is overal het woordmerk alleen — geen lockup, geen los beeldmerk
   ernaast, op geen enkele breedte.

   Standaard staat hier het VOLLEDIGE logo (logo-duo.svg): navy en koper, met
   de s-vormige snede door de B en de tagline eronder. De huisstijl zet dat
   logo op minimaal 240px breed; daaronder valt de snede dicht. 250px is de
   gekozen maat: op 1440px houdt de kopregel dan nog 263,6px ruimte over voor
   het logo (1136px binnenmaat − 650,5 menu − 165,9 knop − 2×28 tussenruimte),
   dus 250px past er nog net op één regel.

   Dat het overal op één regel past, hangt aan het KORTE menu: drie takken
   (Producten, Werk, Contact) meten samen ongeveer 270px. Met het oude menu van
   acht items (650px) paste dit logo tussen 961px en 1219px niet meer naast de
   menurij, en viel de knop "Offerte aanvragen" daar naar een tweede regel.
   Groeit het menu weer, meet die grens dan opnieuw.

   Onder 600px past dat niet meer naast "Offerte aanvragen" en schakelt de
   <picture> in inc/navigatie.php over op logo-compact.svg — de variant die de
   huisstijl juist zónder snede tekent, met 90px als ondergrens. Zie de
   mediaquery onderaan voor de meting achter dat omslagpunt.

   aspect-ratio staat er expliciet bij omdat de twee varianten een andere
   verhouding hebben (88,56 vs 62 eenheden hoog): zo staat de hoogte al vast
   vóórdat het bestand binnen is, ook in browsers die width/height op <source>
   negeren.

   De selector heeft bewust .site-header ervoor: `.site-header img
   {display:block}` uit blok 3 is specifieker dan een losse klasse. */
.site-header .header-logo {
  width: 250px;
  aspect-ratio: 322.176 / 88.56;
}

/* <picture> is van zichzelf inline; als blokelement kan het geen regelhoogte
   onder het logo toevoegen. */
.site-header picture {
  display: block;
}

/* Het menu zit in een <details class="menu">; de <nav> erbinnen is de menurij
   zelf. De menurij sluit links aan op het logo — niet ergens in het midden
   zwevend. Daarvoor staat de auto-marge op de KNOP hieronder en niet hier: die
   duwt alleen de knop naar rechts en laat de vrije ruimte dus tussen menu en
   knop vallen in plaats van tussen logo en menu.

   De 1rem hier komt boven op de 1.75rem tussenruimte van .wrap: samen 44px
   tussen logo en het eerste menu-item. Met alleen die 28px gaat het menu aan
   het logo plakken, want 28px is ook precies de afstand tússen de menu-items
   onderling. */
.site-header .menu {
  margin-left: 1rem;
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 28px;
  font-size: 0.9375rem;
  font-weight: 500;
}
.site-header nav a {
  text-decoration: none;
  padding: 0.5rem 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
}
.site-header nav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--koper);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
/* Zowel aria-current="page" (de pagina zelf) als aria-current="true"
   (een rubriek, zoals /bestellen/ onder Hosting) krijgt de koperen streep. */
.site-header nav a[aria-current] {
  border-bottom-color: var(--koper);
  font-weight: 700;
}

/* Knop "Offerte aanvragen" — primaire knopstijl, maar zelfstandig gedefinieerd
   omdat components.css op /bestellen/ ontbreekt. */
.header-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  background: var(--koper);
  color: var(--paper);
  border: 2px solid var(--koper);
  border-radius: var(--radius-knop);
  font-weight: 700;
  font-size: var(--maat-s);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.site-header a.header-cta {
  color: var(--paper);
}
.header-cta:hover,
.header-cta:focus-visible,
.site-header a.header-cta:hover,
.site-header a.header-cta:focus-visible {
  background: var(--paper);
  color: var(--koper);
}

/* --------------------------------------------------------------------------
   4b. De menuknop — <details>/<summary>, zonder JavaScript.

   De standaardstand hieronder is de DESKTOP-stand, niet de mobiele. Dat is
   bewust: zo valt een viewport van 960,5 px (fractionele breedtes bestaan
   echt) terug op de menurij en niet in een gat tussen twee mediaqueries.
   Alleen de query onderaan, onder 960px, maakt er een uitklapper van.

   Een <details> zonder `open` verbergt zijn inhoud. Op desktop moet het menu
   juist altijd zichtbaar zijn, dus dat wordt hier expliciet teruggedraaid —
   en op TWEE manieren, omdat browsers het op twee manieren doen:
     - ouder: een UA-regel in de trant van `details:not([open]) > *:not(summary)
       {display:none}` → vandaar de display:flex hieronder;
     - nieuwer (Chromium): `::details-content {content-visibility:hidden}` →
       vandaar de tweede regel. Browsers die die pseudo niet kennen negeren
       hem gewoon, en houden het aan de eerste.
   -------------------------------------------------------------------------- */
.site-header .menu:not([open]) > nav {
  display: flex;
}
.site-header .menu::details-content {
  content-visibility: visible;
}

/* De knop zelf staat op desktop uit. Het driehoekje van de browser gaat er
   overal af: `list-style:none` voor Firefox en de moderne Chromium/Safari,
   `::-webkit-details-marker` voor de oudere WebKit-versies. */
.site-header .menu-knop {
  display: none;
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.site-header .menu-knop::-webkit-details-marker {
  display: none;
}

/* Drie streepjes, exact de maten uit de huisstijl (22 x 2 px, 4 px ertussen). */
.site-header .menu-streepjes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 22px;
  flex: none;
}
.site-header .menu-streepjes span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
}

/* Open: de streepjes worden een kruis. De middelste (op y=6) valt weg, de
   buitenste (y=0 en y=12) schuiven naar dat midden en draaien. Puur visueel;
   de stand zelf meldt de browser al via aria-expanded op de <summary>. */
.site-header .menu[open] .menu-streepjes span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.site-header .menu[open] .menu-streepjes span:nth-child(2) {
  opacity: 0;
}
.site-header .menu[open] .menu-streepjes span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Focus op de menuknop: koper op papier, maar naar BINNEN. De knop is een
   balk over de volle breedte; een outline van 3px eromheen zou buiten .wrap
   vallen en een horizontale schuifbalk opleveren. */
.site-header .menu-knop:focus-visible {
  outline: 3px solid var(--koper);
  outline-offset: -3px;
}


/* --------------------------------------------------------------------------
   4c. De tak "Producten" met haar submenu — zonder JavaScript.

   "Producten" is geen pagina; /producten bestaat niet. Er hoort dus geen <a>
   te staan. Het is een GENESTE <details>/<summary>: dezelfde vorm als het
   buitenste menu in blok 4b, en om dezelfde reden — de browser regelt het
   open- en dichtklappen zelf, inclusief de knoprol, aria-expanded en de
   bediening met Enter en spatie, zonder één regel JavaScript.

   Hier stond eerder een <button type="button"> zonder handler. Die knop
   bestond alleen om gefocust te kunnen worden, zodat het paneel op
   :focus-within kon openen. Voor schermlezers werkte dat niet: NVDA en JAWS
   lezen in browse mode met een virtuele cursor die de DOM-focus niet
   verplaatst, dus :focus-within vuurde daar nooit, en Enter op een <button>
   zonder handler doet niets. De vijf productpagina's waren daarmee vanuit de
   kop onbereikbaar.

   Openen op :hover en op :focus-within blijft er náást staan, want een dichte
   <details> verbergt zijn inhoud en die inhoud is dan ook niet aan te tabben.
   Zodra de muis of de focus de tak verlaat sluit het paneel weer vanzelf.
   Openen dóór te klikken of met Enter zet het attribuut `open`, en dan blijft
   het paneel staan tot dezelfde knop het weer sluit — dat is het gedrag van
   <details> en het is precies wat een schermlezer nodig heeft.

   Verbergen doen we NIET zelf met display:none op .submenu: dan zou de open
   stand van <details> er niet doorheen komen. De browser verbergt de inhoud
   van een dichte <details> al, en doet dat op TWEE manieren — zie blok 4b.
   Vandaar dat de hover-/focus-uitzondering hieronder óók dubbel is: de
   display-route én de ::details-content-route.

   Het paneel begint op top:100%, exact tegen de onderkant van de knop. Bewust
   geen tussenruimte: een gat tussen knop en paneel is precies waar de muis
   doorheen valt en het menu onder je cursor dichtklapt. De lucht rondom de
   items komt van de padding ván het paneel, niet van een gat ervoor.

   De negatieve left compenseert die padding, zodat de tekst in het paneel
   links uitlijnt met het woord "Producten" erboven.
   -------------------------------------------------------------------------- */
.site-header .menu-tak {
  position: relative;
  display: flex;
  align-items: center;
}

/* Het driehoekje van de browser gaat er overal af — we tekenen het pijltje
   zelf. `list-style:none` voor Firefox en de moderne Chromium/Safari,
   `::-webkit-details-marker` voor de oudere WebKit-versies. Zelfde dubbelslag
   als bij .menu-knop in blok 4b. */
.site-header .menu-tak-knop {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.5rem 0;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.site-header .menu-tak-knop::-webkit-details-marker {
  display: none;
}

/* Het pijltje: een vierkantje met twee zijden, 45 graden gedraaid. */
.site-header .menu-tak-knop::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
}

/* Staat het paneel open, dan wijst het pijltje omhoog. Het draait op alle
   drie de manieren waarop het paneel open kan staan, zodat het pijltje nooit
   iets anders vertelt dan wat je ziet. */
.site-header .menu-tak[open] > .menu-tak-knop::after,
.site-header .menu-tak:hover > .menu-tak-knop::after,
.site-header .menu-tak:focus-within > .menu-tak-knop::after {
  transform: translateY(0.1em) rotate(-135deg);
}

.site-header .menu-tak-knop:hover {
  text-decoration: underline;
  text-decoration-color: var(--koper);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* De actieve tak: dezelfde koperen streep als een actief menu-item. Een klasse
   en geen aria-current — de <summary> is een uitklapknop, geen item uit de
   reeks links eronder. Het item ín het paneel draagt zijn eigen aria-current;
   die stond hier alleen maar dubbel. */
.site-header .menu-tak-knop.is-actief {
  border-bottom-color: var(--koper);
  font-weight: 700;
}

.site-header .submenu {
  position: absolute;
  top: 100%;
  left: -1.25rem;
  z-index: 5;
  min-width: 12rem;
  padding: 0.5rem;
  background: var(--paper);
  border: 1px solid var(--rand);
  border-radius: var(--radius-kaart);
  box-shadow: 0 10px 24px rgb(22 35 78 / 12%);
}

/* Openen met de muis en met Tab. Beide routes waarlangs de browser de inhoud
   van een dichte <details> verbergt worden hier teruggedraaid; welke van de
   twee dienst doet hangt van de browser af, dus staan ze er allebei. */
.site-header .menu-tak:hover > .submenu,
.site-header .menu-tak:focus-within > .submenu {
  display: block;
}
.site-header .menu-tak:hover::details-content,
.site-header .menu-tak:focus-within::details-content {
  content-visibility: visible;
}

/* De items in het paneel: verticale lijst, dus geen onderstreping als
   markering — die is daar niet te onderscheiden van een scheidingslijn.
   Elk item is minstens 44px hoog en over de volle paneelbreedte aantikbaar. */
.site-header .submenu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0.75rem;
  border-bottom: 0;
  border-left: 3px solid transparent;
  border-radius: var(--radius-knop);
  white-space: nowrap;
}
.site-header .submenu a:hover {
  background: var(--paper-diep);
  text-decoration: none;
}
.site-header .submenu a[aria-current] {
  border-left-color: var(--koper);
  font-weight: 700;
}


/* Onder 960px verlaat de menurij de kopregel. Logo en de knop "Offerte
   aanvragen" blijven bovenin staan — die knop is de belangrijkste actie van
   de site en hoort niet achter een tik verstopt te zitten. Daaronder komt de
   menuknop als eigen balk over de volle breedte; uitgeklapt staan de items
   daar onder elkaar, met de vijf productpagina's ingesprongen onder
   "Producten". */
@media (max-width: 960px) {
  .site-header .wrap {
    column-gap: 1rem;
  }

  /* De <details> is nu de volle-breedte-rij onder logo en knop. */
  .site-header .menu {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    margin-top: 0.5rem;
    border-top: 1px solid var(--rand);
  }

  /* De auto-marge van de desktopregel eraf: op de bovenste regel staan alleen
     nog het logo en de knop, en die hoort daar naast het logo te blijven
     staan — niet tegen de rechterrand geduwd. */
  .header-cta {
    margin-left: 0;
  }

  /* Hier telt de dichte stand van <details> juist wél — beide kanten van de
     desktop-uitzondering hierboven worden dus expliciet teruggezet. */
  .site-header .menu:not([open]) > nav {
    display: none;
  }
  .site-header .menu:not([open])::details-content {
    content-visibility: hidden;
  }

  .site-header .menu-knop {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.5rem 0;
    font-size: var(--maat-s);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* De menu-items onder elkaar. Elk item is minstens 44px hoog en beslaat de
     volle breedte, zodat het ruim aantikbaar is. */
  .site-header nav {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding-bottom: 0.5rem;
    border-top: 1px solid var(--rand);
  }
  .site-header nav a {
    min-height: 44px;
    padding: 0.5rem 0 0.5rem 0.75rem;
    /* De koperen markering van de actieve pagina staat op mobiel links van
       het item in plaats van eronder: een onderstreping is in een verticale
       lijst niet te onderscheiden van een scheidingslijn. */
    border-bottom: 0;
    border-left: 3px solid transparent;
  }
  .site-header nav a[aria-current] {
    border-left-color: var(--koper);
  }

  /* De tak Producten in de uitklapper. Hier is het submenu GEEN uitklapper:
     een tweede niveau open te moeten tikken binnen een menu dat zelf al
     uitgeklapt moet worden, is op een telefoon onwerkbaar. De vijf pagina's
     staan er dus gewoon onder, ingesprongen. De <summary> "Producten" is
     daarmee alleen nog het kopje boven die vijf. */
  .site-header .menu-tak {
    display: block;
  }
  .site-header .menu-tak-knop {
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0 0.5rem 0.75rem;
    border-bottom: 0;
    border-left: 3px solid transparent;
  }
  .site-header .menu-tak-knop.is-actief {
    border-left-color: var(--koper);
  }
  /* Het pijltje gaat eraf: hier valt niets uit te klappen — de vijf items
     staan er al onder. Een pijltje zou een tik uitlokken die niets doet. */
  .site-header .menu-tak-knop::after {
    display: none;
  }

  /* Het paneel staat hier altijd open, ook als de <details> dicht is. Dat
     vraagt dezelfde dubbelslag als bij het buitenste menu hierboven: de
     display-route én de ::details-content-route. */
  .site-header .menu-tak:not([open]) > .submenu {
    display: block;
  }
  .site-header .menu-tak::details-content {
    content-visibility: visible;
  }

  .site-header .submenu {
    display: block;
    position: static;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .site-header .submenu a {
    padding: 0.5rem 0 0.5rem 2rem;
    border-radius: 0;
  }
}

/* Onder 600px is er geen ruimte meer voor het volledige logo naast de knop
   "Offerte aanvragen", en schakelt de <picture> over op logo-compact.svg.

   Het omslagpunt is gemeten, niet gegokt. Onder 960px staat het menu op een
   eigen regel; de bovenste regel is dan alleen logo + knop, met 1rem ertussen:
     benodigd = 250 (logo) + 16 (tussenruimte) + 165,9 (knop) = 431,9px
     binnenmaat .wrap = 0,92 × vensterbreedte  (marge = clamp(1.25rem,4vw,3.5rem))
   Bij 480px is de binnenmaat 440px: het pást daar nog, maar met 8px over —
   en onder ±470px valt de knop naar een eigen regel. Bij 600px is de
   binnenmaat 552px en blijft er 120px lucht tussen logo en knop. Daar ligt dus
   de grens: 600px, ruim voor de plek waar het werkelijk stukloopt.

   Let op: dezelfde 599px staat in het media-attribuut van de <source> in
   inc/navigatie.php. Wijk je hier af, dan krijg je het compacte bestand in de
   verhouding van het volledige logo (of andersom). Verander ze samen. */
@media (max-width: 599px) {
  .site-header .header-logo {
    width: 180px;
    aspect-ratio: 322.176 / 62;
  }
}

/* Onder 480px blijft het compacte woordmerk staan en schaalt het naar 130px —
   ruim boven het minimum van 90px uit de huisstijl. */
@media (max-width: 480px) {
  .site-header .header-logo {
    width: 130px;
  }
  .header-cta {
    padding: 10px 14px;
  }
}

/* Onder 360px staat de knop "Offerte aanvragen" niet meer naast het logo en
   valt naar een eigen regel (kopregel werd 179px in plaats van 138px).

   Gemeten op 320px: binnenmaat .wrap is daar 280px (viewport 320 − 2×20px
   marge, want --marge zit onder 500px vast op zijn minimum van 1,25rem). De
   knop meet ongewijzigd 153,86px, plus 16px tussenruimte (column-gap onder
   960px) = 169,86px. Blijft over voor het logo: 110,14px — maar dat is
   krapper dan het lijkt zodra er ook een scrollbar in het spel is. Het logo
   gaat daarom naar 90px: de ondergrens uit de huisstijl, en tegelijk de
   waarde die op 320px de meeste lucht overlaat (± 20px). De knop zelf blijft
   ongemoeid: 44px hoog, tekst en padding onveranderd. */
@media (max-width: 359px) {
  .site-header .header-logo {
    width: 90px;
  }
}


/* --------------------------------------------------------------------------
   5. Voettekst — navy vlak. Tekst is altijd papierwit of papierwit-zacht;
   koper komt hier uitsluitend voor als grafisch element (de streep bovenaan
   en de onderlijn van links), nooit als tekstkleur.
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy);
  color: var(--op-navy);
  border-top: 3px solid var(--koper);
  padding-block: clamp(3rem, 7vw, 5rem);
  margin-top: clamp(4rem, 10vw, 8rem);
}

/* Links in de voettekst blijven altijd herkenbaar: een blijvende koperen
   onderlijn (grafisch element, mag op navy). Bij hover wordt de lijn
   papierwit en dikker, zodat het verschil niet alleen op kleur berust. */
.site-footer a {
  color: var(--op-navy);
  text-decoration: underline;
  text-decoration-color: var(--koper);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.site-footer a:hover {
  text-decoration-color: var(--op-navy);
  text-decoration-thickness: 3px;
}

/* In de voettekst staat het volledige logo MET snede, in wit
   (logo-mono-wit.svg) — niet de duo-versie: "sensatie" is daar koper, en koper
   als tekstkleur op navy mag niet (zie de kop van dit blok). 240px is de
   ondergrens uit de huisstijl waaronder de snede dichtvalt. */
.footer-logo {
  width: 240px;
  aspect-ratio: 322.176 / 88.56;
}

/* minmax was 220px. Met een logo van 240px in de eerste kolom is dat te smal:
   bij een venster van 560px werd een kolom 237,6px breed en zou het logo
   moeten krimpen tot onder zijn minimum. Op 240px klapt de rij daar een kolom
   eerder terug en is elke kolom dus altijd minstens zo breed als het logo. */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.5rem;
}

.footer-blok { }

.footer-kop {
  font-family: var(--font);
  font-size: var(--maat-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* De selectors hieronder zijn bewust met .site-footer ervoor geschreven.
   Zonder die extra klasse wint `.site-footer p {margin:0}` uit blok 3 en komt
   er geen enkele witruimte tussen de kopjes en de tekst eronder. */
.site-footer .footer-intro {
  margin-top: 1.25rem;
  color: var(--op-navy-zacht);
  max-width: var(--regel);
}

.site-footer .footer-tekst {
  margin-top: 0.85rem;
  color: var(--op-navy-zacht);
}

/* max-width:none: base.css kapt elke <p> af op var(--regel). Voor de
   slotregel is dat ongewenst — de scheidingslijn erboven hoort over de volle
   breedte te lopen. Bijkomend voordeel: op /bestellen/, waar base.css niet
   geladen wordt, ziet de voettekst er nu hetzelfde uit. */
.site-footer .footer-legal {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--op-navy-rand);
  font-size: var(--maat-s);
  color: var(--op-navy-zacht);
  max-width: none;
}

.footer-voorwaarden {
  color: var(--op-navy);
}