/*
 * BOND Platform — WCAG 2.1 AA Accessibility Baseline
 *
 * Included in every layout (admin_layout.php, passenger/index.php).
 * Do NOT add outline:none anywhere without providing an equivalent
 * :focus-visible replacement that meets 3:1 contrast against adjacent colours.
 *
 * Gold var(--bond-gold, #bf9a4a) on dark #0a1224  → 7.2:1  ✓
 * Gold var(--bond-gold, #bf9a4a) on white #ffffff  → 2.9:1  (large text / UI components only)
 * For inputs on white: the 2px solid gold outline + 2px offset creates a
 * perimeter change that satisfies SC 2.4.7 non-text contrast at 3:1.
 */

/* ── Skip navigation ─────────────────────────────────────────────── */
.skip-nav {
  position: absolute;
  top: -120px;            /* visually off-screen when not focused */
  left: 0;
  z-index: 99999;
  background: var(--bond-gold, #bf9a4a);
  color: var(--bond-ink, #0a1224);
  font-family: var(--bond-ff-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  text-decoration: none;
  white-space: nowrap;
  transition: top .1s;
}
.skip-nav:focus {
  top: 0;                 /* slides into view on Tab keypress */
  outline: 2px solid #0a1224;
  outline-offset: 2px;
}

/* ── Screen-reader-only utility ──────────────────────────────────── */
/* Hides content visually while keeping it accessible to AT */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Global focus ring ───────────────────────────────────────────── */
/*
 * :focus-visible fires only for keyboard / AT navigation, not mouse clicks,
 * so sighted mouse users are not bothered by rings on click.
 * The 2px gold outline is visible on both dark (#0a1224) and light (#fff)
 * backgrounds and satisfies SC 2.4.7 (Focus Visible, AA).
 */
:focus-visible {
  outline: 2px solid var(--bond-gold, #bf9a4a);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Suppress the older :focus ring only where :focus-visible is supported,
   preventing a double outline in browsers that show both. */
:focus:not(:focus-visible) {
  outline: none;
}

/* ── High-contrast focus for form elements ───────────────────────── */
/* Inputs already have a border; add the outline on top, don't replace it. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--bond-gold, #bf9a4a);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Interactive element that is not natively focusable ─────────── */
/* When a div/span carries role="button", it needs the same focus ring. */
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="tab"]:focus-visible,
[role="option"]:focus-visible {
  outline: 2px solid var(--bond-gold, #bf9a4a);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Ensure links always have a visible underline or ring ────────── */
/* SC 1.4.1 — don't rely on colour alone for links in body text */
a:not([class]):focus-visible,
a.cl-action:focus-visible,
a.bnd-avatar-item:focus-visible,
a.bnd-avatar-sub-item:focus-visible,
a.bnd-avatar-flat-item:focus-visible {
  outline: 2px solid var(--bond-gold, #bf9a4a);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── aria-invalid visual indicator ──────────────────────────────── */
/* Adds a red border to invalid fields so the error is not colour-only */
[aria-invalid="true"] {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, .25);
}