/* ============================================================================
   a11y.css — shared accessibility primitives (WCAG 2.2 AA pass).
   Additive only: a skip link + a consistent keyboard focus ring. No layout
   reflow. Loaded last so the focus token wins over browser defaults but NOT
   over controls that set their own outline (lower specificity by design).
   ============================================================================ */

/* Sitewide skip link — first focusable element, hidden off-screen until focused,
   then drops in at the top-left and lands focus on #main-content. */
.skip-link {
    position: absolute;
    left: 8px;
    top: -56px;
    z-index: 100000;
    background: var(--primary, #E8780A);
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: top 0.15s ease;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* Consistent, brand-coloured keyboard focus ring. :focus-visible only matches
   keyboard focus, so mouse clicks don't draw rings. Low specificity: it adds a
   ring where a control relies on the browser default, and leaves controls that
   define their own outline/box-shadow focus style untouched. */
:focus-visible {
    outline: 2px solid var(--primary, #E8780A);
    outline-offset: 2px;
}

/* The skip-link target is a non-interactive landmark; focusing it (tabindex=-1)
   should not draw a ring around the whole content area. */
#main-content:focus {
    outline: none;
}

/* Modal containers receive programmatic focus for the focus-trap (modal-a11y.js
   adds tabindex=-1 and calls .focus() on open). They are non-interactive divs, so
   the brand focus ring on them reads as a stray orange border — suppress it, the
   same way #main-content is handled. The dialog is still announced via
   role="dialog"/aria-modal/aria-labelledby, so this is WCAG-safe. */
.modal-overlay:focus,
.modal-overlay:focus-visible,
.modal-content:focus,
.modal-content:focus-visible,
.modal:focus,
.modal:focus-visible,
.modal-box:focus,
.modal-box:focus-visible {
    outline: none;
}

/* Interactive icon-only / nav controls: the loud brand-orange ring reads as a bug
   here. Drop any mouse/programmatic-focus border and replace the keyboard ring with
   a quiet neutral one (still a visible WCAG 2.4.7 keyboard indicator). */
.btn-close-modal:focus:not(:focus-visible),
.nav-item:focus:not(:focus-visible),
.claims-wizard-step:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}
.btn-close-modal:focus-visible,
.nav-item:focus-visible,
.claims-wizard-step:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.18);
}

/* Visually-hidden utility for screen-reader-only labels (e.g. an actions-column
   header, an icon-button name). Self-contained so it's guaranteed present. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}