/* ============================================================
   OVAS Solutions: toegankelijkheid (WCAG 2.2 AA)
   Wordt op elke pagina als laatste stylesheet geladen.
   De :root prefix geeft voorrang op de Tailwind CDN klassen.
   ============================================================ */

:root{
  --a11y-blue:#0072a8;        /* OVAS blauw voor tekst, 5,3:1 op wit */
  --a11y-blue-hover:#005f8c;
  --a11y-gray:#666b70;        /* OVAS grijs voor tekst, 5,4:1 op wit */
  --a11y-focus:#0072a8;
}

/* ---------- Direct naar de inhoud ---------- */
.skip-link{
  position:fixed; left:16px; top:-100px; z-index:1000;
  background:#101114; color:#fff; padding:12px 20px; border-radius:12px;
  font-weight:700; font-size:15px; text-decoration:none;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5);
}
.skip-link:focus{ top:14px; outline:3px solid #fff; outline-offset:2px; }
main:focus{ outline:none; }

/* ---------- Zichtbare toetsenbordfocus ---------- */
:focus-visible{ outline:3px solid var(--a11y-focus); outline-offset:3px; border-radius:6px; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--a11y-focus); outline-offset:3px;
}
.bg-ink :focus-visible, footer :focus-visible, .glass-dark :focus-visible{ outline-color:#fff; }
.field:focus-visible{ outline:3px solid var(--a11y-focus); outline-offset:1px; }
/* Schakelaars op /tarieven/: focus zichtbaar op het zichtbare bolletje */
.module-toggle:focus-visible + span{ outline:3px solid var(--a11y-focus); outline-offset:3px; }

/* ---------- Kleurcontrast ---------- */
:root .text-ovas-blue{ color:var(--a11y-blue); }
:root .hover\:text-\[\#0086c4\]:hover{ color:var(--a11y-blue-hover); }
:root .text-ovas-gray{ color:var(--a11y-gray); }
:root .bg-ovas-blue.text-white{ background-color:var(--a11y-blue); }
:root .btn-ghost-blue{ color:var(--a11y-blue); }
:root .bg-ink .text-ovas-blue, :root footer .text-ovas-blue, :root .glass-dark .text-ovas-blue{ color:#4dbbeb; }
:root .bg-ovas-red\/10.text-ovas-red{ color:#b81d25; }
/* Primaire knoppen: witte tekst haalt nu 4,5:1 */
:root .btn-red, :root .btn-blue{ background:linear-gradient(180deg,#0077b0,#00649a); }
:root .btn-red:hover, :root .btn-blue:hover{ filter:brightness(1.08); }

/* Losse nieuwsartikelen met eigen opmaak */
:root .wm-sub, :root .hero .meta, :root .back, :root .foot-col h3{ color:var(--a11y-gray); }
:root .foot-bottom, :root .foot-bottom a{ color:var(--a11y-gray); }
:root .eyebrow{ color:var(--a11y-blue); }
:root .article a{ color:var(--a11y-blue); }

/* Links in lopende tekst herkenbaar zonder kleur */
main p a.text-ovas-blue, main li a.text-ovas-blue, main td a.text-ovas-blue{
  text-decoration:underline; text-underline-offset:2px;
}

/* ---------- Tekst en zoom (reflow bij 400%) ---------- */
h1, h2, h3{ overflow-wrap:break-word; hyphens:auto; }
main p, main li, main td{ overflow-wrap:anywhere; }

/* ---------- Verminderde beweging ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto !important; }
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .float, .floatB, .marquee{ animation:none !important; }
  .card-hover:hover{ transform:none; }
}

/* ---------- Hoog contrast (systeeminstelling) ---------- */
@media (prefers-contrast: more){
  :root{ --a11y-blue:#005a86; --a11y-gray:#3f4448; }
  body{ color:#000; }
  :root [class*="text-ink/"]{ color:#1d1f23 !important; }
  :root [class*="text-white/"]{ color:#fff !important; }
  :root [class*="border-black/"]{ border-color:rgba(0,0,0,.55) !important; }
  :root [class*="border-white/"]{ border-color:rgba(255,255,255,.6) !important; }
  .glass{ background:#fff !important; backdrop-filter:none !important; }
  .grain::before, .mesh, .mesh-blue{ background:none !important; }
  .text-gradient, .text-gradient-blue{ background:none !important; color:#101114 !important; -webkit-text-fill-color:#101114; }
  main a:not([class*="btn"]){ text-decoration:underline; text-underline-offset:2px; }
  :root .btn-red, :root .btn-blue{ background:#005a86 !important; box-shadow:none; }
  .field{ border-color:#000 !important; }
  :focus-visible{ outline-width:4px !important; }
}

/* ---------- Geforceerde kleuren (Windows hoog contrast) ---------- */
@media (forced-colors: active){
  .btn-red, .btn-blue, .btn-ghost-blue{ border:2px solid ButtonText; }
  .module-toggle + span{ border:2px solid ButtonText; }
  .module-toggle:checked + span{ background:Highlight; }
  :focus-visible{ outline:3px solid Highlight !important; }
  .text-gradient, .text-gradient-blue{ background:none; color:CanvasText; -webkit-text-fill-color:CanvasText; }
}

/* ---------- Toegankelijkheidspagina ---------- */
.a11y-page h2{ font-family:'Michroma',sans-serif; font-size:1.3rem; line-height:1.3; color:#101114; margin-top:2.4rem; }
.a11y-page h3{ font-weight:700; font-size:1.08rem; color:#101114; margin-top:1.6rem; }
.a11y-page p, .a11y-page li{ color:rgba(16,17,20,.8); font-size:16px; line-height:1.75; }
.a11y-page p + p, .a11y-page p + ul, .a11y-page ul + p{ margin-top:.9rem; }
.a11y-page ul{ list-style:disc; padding-left:1.35rem; margin-top:.6rem; }
.a11y-page li{ margin-top:.35rem; }
.a11y-page li::marker{ color:var(--a11y-blue); }
.a11y-page a{ color:var(--a11y-blue); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.a11y-page kbd{ font-family:ui-monospace,monospace; font-size:.85em; background:#f1f2f4; border:1px solid rgba(16,17,20,.2); border-bottom-width:2px; border-radius:6px; padding:.05rem .4rem; }
.article h2.kop-klein{ font-family:inherit; font-weight:700; font-size:1.18rem; letter-spacing:normal; margin-top:1.9rem; }