/* ==========================================================================
   Basis: fonts, reset, typografie, layout, toegankelijkheid
   ========================================================================== */

/* Fonts, zelf gehost, variabel, alleen latin subset */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/playfair-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}

/* Alleen geladen op de Arabische pagina's */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/cairo-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/cairo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}

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

* { margin: 0; }

/* Elementen met display in hun eigen css (zoals de artikelkaarten) zouden
   het hidden-attribuut anders negeren */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  font-family: var(--font-tekst);
  font-size: var(--tekst-md);
  line-height: var(--regelhoogte-tekst);
  color: var(--kleur-inkt);
  background: var(--kleur-papier);
  -webkit-font-smoothing: antialiased;
  /* Lange woorden zoals exploitatievergunning mogen afbreken in plaats
     van op smalle schermen buiten beeld te lopen */
  overflow-wrap: break-word;
}

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

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

/* Typografie */
h1, h2, h3, h4 {
  font-family: var(--font-kop);
  font-weight: 600;
  line-height: var(--regelhoogte-kop);
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

h1 { font-size: var(--tekst-2xl); }
h2 { font-size: var(--tekst-xl); }
h3 { font-size: var(--tekst-lg); }
h4 { font-size: var(--tekst-md); font-family: var(--font-tekst); font-weight: 600; letter-spacing: 0; }

p, ul, ol { max-width: 68ch; }

/* Vuur-donker in plaats van vuur: haalt ook op zand en vuur-zacht 4.5 op 1 */
a { color: var(--kleur-vuur-donker); text-underline-offset: 3px; }
a:hover { color: var(--kleur-inkt); }

strong { font-weight: 600; }

::selection { background: var(--kleur-vuur-zacht); }

/* Kleine labels boven secties, de enige toegestane hoofdletters */
.sectielabel {
  display: inline-block;
  font-size: var(--tekst-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--kleur-vuur-donker);
  margin-bottom: var(--ruimte-4);
}

.donker .sectielabel { color: var(--kleur-goud); }

/* Sectiekoppen die op een label volgen krijgen een korte gouden streep,
   het kleine warme detail dat het segment mist */
.sectielabel + h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  border-radius: var(--rond-vol);
  background: var(--kleur-goud);
  margin-top: var(--ruimte-4);
}

/* Layout */
.omtrek {
  max-width: var(--breedte-content);
  margin-inline: auto;
  padding-inline: var(--marge-zijkant);
}

.omtrek--smal { max-width: var(--breedte-tekst); }

.sectie { padding-block: 80px; }

.sectie--statement { padding-block: 96px; }

@media (min-width: 1024px) {
  .sectie { padding-block: var(--ruimte-10); }
  .sectie--statement { padding-block: var(--ruimte-11); }
}

.sectie--zand { background: var(--kleur-zand); }

.donker {
  background: var(--kleur-diep);
  color: var(--kleur-papier);
}

.donker a { color: var(--kleur-goud); }
.donker a:hover { color: var(--kleur-papier); }

/* Toegankelijkheid */
:focus-visible {
  outline: 3px solid var(--kleur-vuur);
  outline-offset: 3px;
  border-radius: var(--rond-sm);
}

.donker :focus-visible { outline-color: var(--kleur-goud); }

.skiplink {
  position: absolute;
  inset-inline-start: var(--ruimte-4);
  top: var(--ruimte-4);
  z-index: 100;
  padding: var(--ruimte-3) var(--ruimte-5);
  background: var(--kleur-inkt);
  color: var(--kleur-papier);
  border-radius: var(--rond-vol);
  text-decoration: none;
  transform: translateY(-200%);
}

.skiplink:focus { transform: none; color: var(--kleur-papier); }

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

/* Alleen op brede schermen tonen (bijv. de knop in de header) */
.alleen-desktop { display: none; }

@media (min-width: 1366px) { .alleen-desktop { display: inline-flex; } }

/* Scroll-animatie: standaard zichtbaar, JS zet de beginstand.
   Zo blijft alles leesbaar zonder JavaScript. */
.verschijn { opacity: 1; transform: none; }

.js .verschijn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms cubic-bezier(.2,.7,.3,1), transform 500ms cubic-bezier(.2,.7,.3,1);
}

.js .verschijn.is-zichtbaar { opacity: 1; transform: none; }

/* Rechts-naar-links (Arabisch): pijlen spiegelen, spatiëring neutraal */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; }
[dir="rtl"] .sectielabel { letter-spacing: 0; }
[dir="rtl"] .tweepad__pijl,
[dir="rtl"] .dienstkaart__pijl { transform: scaleX(-1); }
[dir="rtl"] .tweepad__vlak:hover .tweepad__pijl { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .dienstkaart:hover .dienstkaart__pijl { transform: scaleX(-1) translateX(4px); }

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