/* ============================================================
   Elka Schildersbedrijf, Middelburg
   base.css :: fonts, reset, gedeelde utilities, versiewisselaar
   Geen enkele art direction hier. Die zit in v1.css en v2.css.
   ============================================================ */

/* ---------- fonts, lokaal gehost, nul verzoeken naar derden ---------- */

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

@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/SpaceGrotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../fonts/SpaceGrotesk-700.woff2") format("woff2"); }

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

/* ---------- reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* LES 10: nooit overflow-x hidden op html of body. Dat schakelt de
     overflowcontrole van de audit stil uit in plaats van de fout te tonen. */
}

body {
  margin: 0;
  background: #14161A;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }   /* zonder dit bepaalt het height attribuut de hoogte en rekt het beeld */

button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul, fieldset, legend {
  margin: 0; padding: 0; border: 0;
}
ol, ul { list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* ---------- utilities ---------- */

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

.skip-link {
  position: fixed; top: 0; left: 50%;
  transform: translate(-50%, -140%);
  z-index: 999;
  padding: 12px 22px;
  background: #00543C; color: #fff;
  font: 600 14px/1 "Inter", sans-serif;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: transform .2s ease;
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

.version[hidden] { display: none !important; }

/* ---------- versiewisselaar, buiten beide composities ---------- */

.vswitch {
  position: fixed;
  right: 14px; bottom: 14px;
  z-index: 900;
  display: flex; align-items: center; gap: 4px;
  padding: 5px 6px 5px 12px;
  border-radius: 999px;
  background: rgba(18,20,23,.88);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 8px 26px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.vswitch__lbl {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.72);   /* 4,5:1+ op de pilachtergrond */
  padding-right: 4px;
}
.vswitch__btn {
  appearance: none; border: 0; cursor: pointer;
  background: transparent;
  color: rgba(255,255,255,.78);
  font-size: 12px; font-weight: 500; letter-spacing: .06em;
  padding: 7px 13px; border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}
.vswitch__btn:hover { color: #fff; }
.vswitch__btn[aria-pressed="true"] { background: #F4F5F0; color: #14161A; }

/* LES 19: outline-offset tekent de ring op het vlak van de OUDER, dus een
   currentColor ring verdwijnt juist op een gevulde knop. Daarom overal een
   dubbele ring: donkere outline plus lichte box-shadow eromheen. Die leest
   op elk vlak, licht of donker. */
.vswitch__btn:focus-visible,
.skip-link:focus-visible {
  outline: 2px solid #14161A;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #F4F5F0;
}

@media (max-width: 560px) {
  .vswitch { right: 10px; bottom: 10px; padding: 4px 5px 4px 10px; }
  .vswitch__lbl { display: none; }
}

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