/* C-ERP toegankelijkheid (h92, Q19). Alleen bestaande tokens, geen nieuwe kleuren. */

/* Tekst die alleen voor schermlezers is (bijvoorbeeld de kop h1 van een projectscherm). */
.a11y-verborgen {
  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;
}

/* "Naar de inhoud": eerste tabstop van de pagina, alleen zichtbaar zodra hij focus heeft. */
.a11y-overslaan {
  position: fixed; top: 8px; left: 8px; z-index: 5000; transform: translateY(-200%);
  padding: 10px 14px; border-radius: 10px; background: var(--surface); color: var(--text);
  font: 500 14px var(--f); text-decoration: none; box-shadow: var(--shadow-lg);
}
.a11y-overslaan:focus { transform: none; }

/* Het werkvlak is nu een <main>; als doel van "Naar de inhoud" geen eigen rand tonen. */
main.main__scroll:focus { outline: none; }

/* Zichtbare focus als vangnet voor elk bedieningselement zonder eigen focusstijl.
   :where() houdt de specificiteit op nul: een component met een eigen focusstijl gaat voor. */
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="tab"], [role="option"], [role="menuitem"], [contenteditable="true"]):focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
[data-theme="dark"] :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="tab"], [role="option"], [role="menuitem"], [contenteditable="true"]):focus-visible {
  outline-color: var(--steel);
}
/* Een venster dat zelf de focus krijgt (omdat er niets bedienbaars in staat) geen rand. */
[role="dialog"][tabindex="-1"]:focus { outline: none; }

/* Zoekvelden waarvan het invoerveld zelf geen focusrand heeft: de omlijsting toont de focus,
   zoals .wl-zoek en .ikn-zoek al doen. */
.tk-search:focus-within, .ag-search:focus-within, .dbib__ai:focus-within, .hb-rolesel:focus-within { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
[data-theme="dark"] .tk-search:focus-within, [data-theme="dark"] .ag-search:focus-within, [data-theme="dark"] .dbib__ai:focus-within, [data-theme="dark"] .hb-rolesel:focus-within { border-color: var(--steel); box-shadow: 0 0 0 1px var(--steel); }
/* h153 (Q116): de zoekvelden van Postbus en Meldingen staan zonder eigen omlijsting in hun balk en zetten
   de focusrand van het invoerveld uit; ze krijgen dezelfde rand als het vangnet hierboven. */
.gm__search input:focus-visible, .mi-search input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
[data-theme="dark"] .gm__search input:focus-visible, [data-theme="dark"] .mi-search input:focus-visible { outline-color: var(--steel); }