/* =============================================================================
   i-Reserve redesign 2026 — basislaag
   -----------------------------------------------------------------------------
   Alleen elementen en layoutprimitieven. Componenten (knoppen, kaarten, nav)
   krijgen elk hun eigen bestand. Leest uitsluitend tokens.css.
   Geen Bootstrap, geen jQuery, geen buildstap.
   ============================================================================= */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-page);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- typografie ----------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--c-ink-strong);
  text-wrap: balance;
  letter-spacing: var(--tracking-tight);
}
h1 { font-size: var(--text-3xl); line-height: var(--lh-tight);  font-weight: var(--fw-semi); }
h2 { font-size: var(--text-2xl); line-height: var(--lh-tight);  font-weight: var(--fw-semi); }
h3 { font-size: var(--text-lg);  line-height: var(--lh-snug);   font-weight: var(--fw-medium); letter-spacing: normal; }
h4 { font-size: var(--text-md);  line-height: var(--lh-snug);   font-weight: var(--fw-medium); letter-spacing: normal; }

p { margin: 0; }
p, li { max-width: var(--width-prose); text-wrap: pretty; }

.lead {
  font-size: var(--text-md);
  color: var(--c-ink-muted);
  line-height: 1.55;
}

.label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

small { font-size: var(--text-sm); }

strong, b { font-weight: var(--fw-bold); }

/* Huisstijl Horizon v4: link = primair 500 (#1667B5), hover = primair 600 (#0E4E93), dus donkerder bij
   hover (Jacq, 29-09-2026; was omgedraaid). In de donkere modus volgen dezelfde tokens hun eigen waarden. */
a {
  color: var(--c-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--c-accent-ink); }

/* Telefoonnummers (link gemaakt door _tel.php). Op licht de gewone link; nooit afbreken. */
a.tel { white-space: nowrap; }
.nobr { white-space: nowrap; }   /* merknaam i-Reserve blijft heel, zie $shy in _sections.php */
/* Op diepzee zoals de links in de footer: tekstkleur op donker, hover wit met onderstreping. */
:is(.on-dark, .site-footer) a.tel { color: var(--c-ink-invert); text-decoration: none; }
:is(.on-dark, .site-footer) a.tel:hover { color: var(--c-ink-invert-strong); text-decoration: underline; text-underline-offset: 2px; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Op donkere vlakken haalt blauw 500 als focusring maar 2,58:1; daar blauw 400 (6,69:1). */
:is(.on-dark, .site-footer) { --c-focus: var(--c-accent-on-dark); }

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
}

hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin-block: var(--space-6);
}

/* Lijsten: standaard geen bullets in layoutcontexten; `.prose ul` zet ze terug. */
ul, ol { margin: 0; padding: 0; list-style: none; }

/* --- media ---------------------------------------------------------------- */

img, svg, video, canvas, picture {
  display: block;
  max-width: 100%;
  height: auto;
}

figure { margin: 0; }

/* --- formulieren ---------------------------------------------------------- */

input, select, textarea, button {
  font: inherit;
  color: inherit;
}

/* --- paginawrapper ---------------------------------------------------------
   EXPERIMENT: het "vel op grijze grond" (wireframe v5) was een verkeerde lezing
   van de wireframe-viewer — .frame daar is het kader van de viewer om één scherm
   te tonen, geen ontwerp voor de site. Secties zijn hieronder al full-width met
   hun eigen achtergrond (zie .container voor de leesbare content-breedte
   erbinnen); deze wrapper doet nu niets meer dan de minimale paginahoogte. */

.sheet {
  min-height: 100vh;
}

/* --- layoutprimitieven ---------------------------------------------------- */

/* Eén zijmarge voor de hele pagina, minimaal 16px op elk schermformaat. */
.container {
  width: 100%;
  max-width: var(--width-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide  { max-width: var(--width-wide); }
.container--prose { max-width: calc(var(--width-prose) + 2 * var(--gutter)); }

/* Verticale ritmiek: elke sectie krijgt haar eigen volledige boven- én
   onderruimte (zoals in de wireframe) — behalve --tight, die per definitie
   vastgeplakt zit aan wat erboven staat (zelfde achtergrond, één visueel
   blok), en dus geen eigen bovenruimte krijgt. Geen generieke "opeenvolgende
   secties"-regel meer: die haalde de bovenruimte ook weg tussen secties die
   wél van kleur wisselen, en dat hoort juist zichtbaar te blijven. */
.section { padding-block: var(--section-gap); }
.section--tight { padding-block: var(--space-6); padding-top: 0; }
/* Laatste sectie vóór de footer houdt altijd de volle onderruimte; de footer heeft geen marge meer (Jacq, 03-10-2026). */
main > .section:last-child { padding-bottom: var(--section-gap); }

/* Sectie-eigen vlakkleur (rd_options: grey) — zoals de .grey-secties in de
   wireframe. Section is al full-width (zie .sheet), dus dit loopt vanzelf
   edge-to-edge; .container erbinnen houdt de content leesbaar. */
.section--grey { background: var(--c-surface-2); }

/* Sectie-eigen vlag (rd_options: glue-next): geen onderruimte, voor wanneer de
   volgende sectie (bijv. een donkere CTA-band) er direct op moet aansluiten. */
.section--glue-next { padding-bottom: 0; }

/* rd_options: flush-top: geen bovenruimte, zodat de sectie aansluit op de vorige (bijv. de knop
   "Bekijk alle reviews op Trustpilot" onder de laatste review op /klanten/, Jacq 29-09-2026). */
.section--flush-top { padding-top: 0; }
/* rd_options: near-top: minder bovenruimte, bijv. de kaarten direct onder de hero op /sectoren/ (Jacq, 29-09-2026). */
.section--near-top { padding-top: var(--space-7); }

/* Stapel: afstand komt van gap, niet van marges die kunnen inklappen. */
.stack        { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--tight { gap: var(--space-2); }
.stack--loose { gap: var(--space-6); }

/* Kolomraster dat vanzelf naar één kolom valt op telefoonbreedte. */
.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.cluster--center { justify-content: center; }

/* Link of knop onder een blok. --center: gecentreerd; margin-inline: auto omdat <p> een leesmaat
   (max-width) heeft. .sec-link: onder de kop, boven de inhoud; .more-link: onder de inhoud. */
/* Link hoort bij de kop (dicht onder de intro) en staat los van de inhoud eronder, zoals de
   wireframe (Jacq, 29-09-2026). */
.sec-head:has(+ .sec-link) { margin-bottom: var(--space-3); }
.sec-link { margin-bottom: var(--space-7); }
.more-link { margin-top: var(--space-5); }
.sec-link--center { text-align: center; margin-inline: auto; }

/* Brede tabellen, code en diagrammen scrollen in hun eigen bak — nooit de pagina. */
.scroll-x { overflow-x: auto; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Overslaan-naar-inhoud, zichtbaar zodra hij focus krijgt. */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  z-index: 100;
  background: var(--c-surface);
  color: var(--c-accent-ink);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  transition: top var(--duration) var(--ease);
}
.skip-link:focus { top: var(--space-4); }

/* --- lopende tekst uit de editor ------------------------------------------ */

.prose { display: flex; flex-direction: column; gap: var(--space-4); }
.prose h2, .prose h3 { margin-top: var(--space-4); }
.prose ul, .prose ol { padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--space-2); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--c-line-soft); }

/* --- mobiele onderbalk ------------------------------------------------------
   Op een telefoon scrollt de header weg; de proefversie moet bereikbaar
   blijven. Op desktop staat hij al in de header, dus daar is deze balk weg. */

.sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: none;
  gap: var(--space-2);
  padding: var(--space-2) var(--gutter);
  background: var(--c-sheet);
  border-top: 1px solid var(--c-line);
}
.sticky-cta .btn { flex: 1; justify-content: center; }
.sticky-cta__tel { flex: 0 0 auto; }
/* Een icoon, geen ☎: dat teken tekent iOS als rode emoji. */
.sticky-cta__tel .ico { width: 1.25em; height: 1.25em; }
/* Verborgen zolang de hero-knoppen in beeld zijn (js/redesign/sticky-cta.js): de balk
   schuift naar beneden weg. visibility pas ná de schuif, zodat hij dan ook niet te tabben is. */
.sticky-cta { transition: transform .2s ease, visibility 0s; }
.sticky-cta.is-weg { transform: translateY(100%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; }
@media (prefers-reduced-motion: reduce) { .sticky-cta, .sticky-cta.is-weg { transition: none; } }

@media (max-width: 720px) {
  .sticky-cta { display: flex; }
  /* De ruimte onder de balk zit in de footer (site-footer.css), niet op de body:
     anders loopt er een strook in de paginakleur onder de donkere footer. */
}

/* --- beweging ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Ankerdoel dat de focus krijgt na een klik op een ankerlink (js/redesign/anker.js): geen focusrand
   om een hele sectie; de focus is er voor toetsenbord en schermlezer, niet om te zien. */
[tabindex="-1"]:focus { outline: none; }