/* Reset en basisstijlen */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; background: var(--grond); }

body {
  font-family: var(--font-tekst);
  font-size: 15px;
  line-height: 1.5;
  background: var(--grond);
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* Bij het wisselen van huisstijl vloeien de kleuren even in elkaar over. */
.stijl-wissel, .stijl-wissel * { transition: background-color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease !important; }

[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--font-kop); font-weight: 500; line-height: 1.15; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--navy); }

/* Zichtbare focus voor toetsenbordgebruikers */
:focus-visible { outline: 2.5px solid var(--navy); outline-offset: 2px; border-radius: 6px; }
.paneel--navy :focus-visible, .winkelmodus :focus-visible { outline-color: var(--op-grond); }

/* Alleen voor schermlezers */
.verborgen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

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