/* ═══════════════════════════════════════════════════════
   SEFIRA — Accessibility (WCAG 2.1 AA)
   ═══════════════════════════════════════════════════════ */

/* ── Focus Visible Styles ──
   Visible focus ring for keyboard navigation.
   Uses :focus-visible so mouse clicks don't show the ring. */

*:focus-visible {
    outline: 2px solid #B8860B;
    outline-offset: 2px;
}

/* Remove default outline on mouse focus */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Dark backgrounds: lighter focus ring */
.section-dark *:focus-visible,
.bg-near-black *:focus-visible,
footer *:focus-visible {
    outline-color: #D4AF37;
}

/* ── Skip to Content Link ──
   Hidden until focused via keyboard */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    background: #1A1A1A;
    color: #FAF7F2;
    padding: 10px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    text-decoration: none;
    transition: top 200ms ease;
}
.skip-to-content:focus {
    top: 8px;
}

/* ── Color Contrast Fixes ──
   Gold-champagne (#C9A961) on white has ~2.6:1 contrast ratio.
   Upgrade interactive text (links, labels) to gold-dark (#8B6914) = ~4.6:1 on white. */

/* Footer link opacity fix (opacity-30 on light text = very low contrast) */
/* These are fine on dark footer background, no change needed there */

/* Small UI text that uses opacity needs higher contrast base */
.font-ui[style*="opacity:0.35"],
.font-ui[style*="opacity: 0.35"] {
    opacity: 0.45 !important;
}