/* Laag boven het broadsheet-ontwerpsysteem.
   Vervangt het gedrag dat op het canvas door JavaScript werd geregeld:
   de kolomindeling per schermbreedte en het rustig verschijnen van blokken. */

/* Kolommen: op het canvas zette een script grid-template-columns per breedte.
   Hier doen media queries dat, zodat de pagina ook zonder JavaScript klopt. */
@media (max-width: 1040px) {
  [data-cols] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 860px) {
  [data-split] { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
  [data-cols] { grid-template-columns: 1fr !important; }
  [data-index] { grid-template-columns: 1fr !important; }
}

/* Navigatie: blijft leesbaar op een smal scherm. */
.nav { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 28px); flex-wrap: wrap; padding-block: 14px; }
.nav .nav-brand { margin-right: auto; font-weight: 600; }
@media (max-width: 640px) {
  /* Merknaam op een eigen regel, de links eronder in één rij en de knop
     rechts daarvan, zodat de kop van de pagina niet volloopt. */
  .nav { gap: 10px 16px; padding-block: 12px; }
  .nav .nav-brand { flex: 1 0 100%; margin-right: 0; }
  .nav a:not(.btn) { font-size: 15px; }
  .nav .btn { margin-left: auto; padding-inline: 14px; }
  /* De verwijzing naar het blok Structure valt weg op een smal scherm;
     dat blok staat verderop op dezelfde pagina. */
  .nav a[href$="#structure"] { display: none; }
}

/* Afbeeldingen schalen mee en lopen nooit buiten hun kader. */
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

/* Blokken komen bij het laden rustig op. Dit is puur CSS: er is geen staat
   waarin inhoud verborgen kan blijven hangen als er iets misgaat. */
@keyframes c3br-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
/* Geen fill-mode: draait de animatie niet, bijvoorbeeld in een tabblad op de
   achtergrond of bij afdrukken, dan staat het blok gewoon zichtbaar. */
[data-reveal] { animation: c3br-in .5s cubic-bezier(.22, .9, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { animation: none; }
}

/* Overslaan-link voor wie met het toetsenbord werkt. */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-text); color: var(--color-bg); padding: 10px 16px; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; }

/* Brede tabellen schuiven binnen hun eigen kader in plaats van de pagina te rekken. */
.table-scroll { overflow-x: auto; }

/* Knoppen.
   Twee dingen zaten de leesbaarheid in de weg. De algemene linkregel kleurde bij
   hover ook het label van een knop, en in de navigatiebalk wint ".nav a" het van
   ".btn-primary", waardoor het label daar de tekstkleur van de pagina kreeg en
   bij hover accentblauw werd, dus dezelfde kleur als de knop zelf.
   Daarom staan de knopregels hieronder op "a.btn-...", waarmee ze even zwaar
   wegen als ".nav a" en later in de cascade staan.
   De kleuren zijn op contrast gekozen, met tekst #f3f2f2: accent-700 in rust
   geeft 5,7:1 en accent-800 bij hover 8,8:1. Aanwijzen maakt een knop dus
   donkerder en beter leesbaar, nooit lichter. */
a.btn { transition: background-color 140ms ease-out, color 140ms ease-out, transform 100ms ease-out; }

a.btn-primary,
.nav a.btn-primary { background: var(--color-accent-700); color: var(--color-bg); }
a.btn-primary:hover,
a.btn-primary:focus-visible,
.nav a.btn-primary:hover { background: var(--color-accent-800); color: var(--color-bg); }
a.btn-primary:active,
.nav a.btn-primary:active { background: var(--color-accent-900); color: var(--color-bg); }

a.btn-ghost,
.nav a.btn-ghost { color: var(--color-accent-700); background: transparent; }
a.btn-ghost:hover,
a.btn-ghost:focus-visible,
.nav a.btn-ghost:hover { color: var(--color-accent-800); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
a.btn-ghost:active,
.nav a.btn-ghost:active { color: var(--color-accent-900); background: color-mix(in srgb, var(--color-accent) 20%, transparent); }

/* De gewone links in de balk kregen bij hover het lichte accent (3,6:1 op de
   balk). Ook die gaan nu de donkere kant op, met een onderstreping erbij. */
.nav a:not(.btn):hover,
.nav a:not(.btn):focus-visible { color: var(--color-accent-800); text-decoration: underline; text-underline-offset: 3px; }

/* Reactie op het indrukken zelf, niet pas bij loslaten. */
a.btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  a.btn { transition: background-color 140ms ease-out, color 140ms ease-out; }
  a.btn:active { transform: none; }
}