/**
 * UMEED — ACCESSIBILITY LAYER
 * ============================
 * Skip link · Focus rings · Contrast fixes · Landmark clarity
 * WCAG 2.1 AA targeted throughout
 */

/* ── Skip to content ─────────────────── */
.skip-link {
  position: absolute;
  top: -999px;
  left: 1rem;
  z-index: 9999;
  padding: 10px 18px;
  background: var(--gold, #E3C26F);
  color: #000;
  font-weight: 700;
  font-size: 14px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; outline: 3px solid #000; outline-offset: 2px; }

/* ── Global focus ring — visible & styled ── */
:focus-visible {
  outline: 2.5px solid #E3C26F !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* Remove outline only for mouse users */
:focus:not(:focus-visible) { outline: none !important; }

/* ── Muted text contrast fix ─────────── */
/* --muted at 0.72 opacity can fail on semi-transparent panels.
   Force a minimum readable colour in dark mode. */
[data-theme="dark"] .muted,
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] .tiny {
  color: rgba(247, 248, 252, 0.82); /* bumped from 0.72 */
}

/* Ensure card body text meets 4.5:1 on dark panels */
[data-theme="dark"] .card p,
[data-theme="dark"] .card li,
[data-theme="dark"] .notice-card p {
  color: rgba(230, 232, 240, 0.90);
}

/* ── Light theme contrast fixes ──────── */
[data-theme="light"] .muted,
[data-theme="light"] p {
  color: rgba(11, 18, 32, 0.78); /* slightly stronger than 0.68 */
}

/* ── Gold on dark: maintain ratio ───── */
/* #E3C26F on #07090D = ~8.1:1 ✓ AA/AAA */
/* #E3C26F on rgba panel: keep as-is */

/* ── Interactive element min size 44×44 ── */
.btn, button, a.login-btn, .notice-bell,
.hero-nav, .menu a {
  min-height: 44px;
  min-width: 44px;
}
.menu a { min-width: unset; } /* let text links be narrower */

/* ── Landmark clarity ─────────────────── */
/* Visually hidden helper class */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Form label + input pairing ──────── */
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--text);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2.5px solid #E3C26F !important;
  outline-offset: 2px !important;
}

/* Ensure error/required feedback is visible */
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
  border-color: #f87171 !important;
  outline-color: #f87171 !important;
}

/* ── Reduced motion: all animations off ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── High contrast mode support ──────── */
@media (forced-colors: active) {
  .btn, .btn-primary {
    border: 2px solid ButtonText;
  }
  .card {
    border: 1px solid ButtonText;
  }
}