/* =========================================================================
   G.M. Harinck Schilders- en Afwerkingsbedrijf, herontwerp · shell
   Reset, zelfgehoste fonts en cross-versie gereedschap. De compositie zelf
   woont in v1.css, gescopet onder #version-v1, zodat geen token kan lekken
   zodra er een tweede versie bij komt.
   ========================================================================= */

/* Zelfgehost, nul verzoeken naar derden (bewezen patroon 9). Archivo draagt de
   hele pagina; Roboto Mono doet uitsluitend de maatvoeringslabels langs de
   duimstok, waar cijfers en korte woorden op één breedte moeten staan. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../font/archivo-400.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../font/archivo-600.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../font/archivo-800.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../font/robotomono-500.woff2") format("woff2");
}

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

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

body {
  margin: 0;
  background: #14161a;
  color: #f2f4f7;
  font-family: "Archivo", system-ui, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

/* De width/height attributen staan er voor de beeldverhouding en dus voor een
   stabiele lay-out. Zonder deze regel blijft het height-attribuut de baas
   zodra CSS alleen de breedte zet, en rekt het beeld uit. */
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }

/* Eén focusring voor het hele document, bewust dubbel en bewust met een
   offset: een enkele currentColor-ring verdwijnt juist op een gevulde knop,
   want daar is de ringkleur de tekstkleur van die knop (LESSONS regel 19).
   Met offset 3px landt de lichte ring altijd op het donkere paneel erachter,
   nooit op de vulling zelf, en de donkere halo eromheen houdt hem leesbaar
   waar hij toevallig op een lichter vlak of op een foto valt. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #f2f4f7;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(20, 22, 26, 0.92);
  border-radius: 2px;
}

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

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  padding: 12px 18px;
  background: #7cb3ea;
  color: #14161a;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  border-radius: 4px;
  transform: translateY(-180%);
  transition: transform 0.22s ease;
}

.skip-link:focus-visible { transform: translateY(0); }

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

/* ---------- versiewisselaar ---------------------------------------------
   Gereedschap van het voorstel, geen onderdeel van het ontwerp dat de klant
   krijgt. Rechtsonder, zodat hij op 320 px niet over een primaire actie valt.
   ----------------------------------------------------------------------- */

.vswitch {
  position: fixed;
  z-index: 900;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 4px;
  background: rgba(20, 22, 26, 0.94);
  border: 1px solid #3a4049;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.vswitch__label {
  padding: 0 8px 0 10px;
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a7b0bd;
}

.vswitch__btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 9px 16px;
  border-radius: 3px;
  background: transparent;
  color: #f2f4f7;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  transition: background 0.18s ease, color 0.18s ease;
}

.vswitch__btn:hover { background: rgba(242, 244, 247, 0.14); }
.vswitch__btn[aria-pressed="true"] { background: #7cb3ea; color: #14161a; }

.vswitch__btn:focus-visible {
  outline: 3px solid #f2f4f7;
  outline-offset: 2px;
  box-shadow: none;
}

@media (max-width: 560px) {
  .vswitch { right: 10px; bottom: 10px; padding: 4px; }
  .vswitch__label { display: none; }
  .vswitch__btn { padding: 8px 13px; font-size: 11px; }
}

/* ---------- hamburger -----------------------------------------------------
   Het menu zit in een <details class="burger-nav"> die in de HTML op `open`
   staat; het script klapt hem alleen dicht onder 901 px. Andersom kan niet:
   je kunt niet in een GESLOTEN <details> tabben, ook niet wanneer CSS de
   inhoud zichtbaar maakt, en dan is het menu op desktop met het toetsenbord
   onbereikbaar. Zo werkt hij bovendien zonder JavaScript, waar een bezoeker
   anders een dode knop overhoudt.
   ------------------------------------------------------------------------- */

.burger-nav { position: relative; margin-left: auto; }

.burger-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid #3a4049;
  border-radius: 4px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.burger-toggle::-webkit-details-marker { display: none; }
.burger-toggle > span { display: inline-flex; flex-direction: column; gap: 3px; }
.burger-toggle > span i { display: block; width: 17px; height: 2px; background: currentColor; }

@media (max-width: 900px) {
  .burger-toggle { display: inline-flex; }
  .burger-nav:not([open]) > nav { display: none; }

  .burger-nav[open] > nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 6px 0;
  }

  .burger-nav[open] > nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 18px;
    white-space: nowrap;
  }

  /* Een zwevende lade hoort alleen bij een menu dat ook echt dicht kan. Zonder
     JavaScript blijft de <details> open staan, en dan zou zo'n lade de kop
     bedekken zonder dat iemand hem weg kan klikken. Daarom hangt de zwevende
     variant aan .has-js, en valt hij anders terug op een gewone gestapelde
     lijst onder de kopregel. .has-js staat los van .js: die laatste gaat
     uitsluitend over beweging (LESSONS regel 8) en is bij motion-uit afwezig
     terwijl het script wel degelijk draait. */
  .has-js .burger-nav[open] > nav {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 60;
    min-width: 232px;
    background: #1d2026;
    border: 1px solid #3a4049;
    border-radius: 6px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  }
}

/* Bewegingsveiligheid. De reveals hangen aan een .js klasse die alleen wordt
   gezet wanneer beweging gewenst is, zodat er bij motion-uit nooit een
   opacity:0 blijft staan zonder dat iets hem onthult (LESSONS regel 8). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}