/* ============================================================
   a11y.css — site-wide accessibility styles for speakeasyvaporium.com
   Loaded on every page. Three jobs:
     1. Skip-to-content link (hidden until keyboard focus)
     2. Global :focus-visible ring (keyboard users only — never on click)
     3. Footer legal line contrast lift to WCAG AA
   Added 2026-05-14 per ADA Title III / WCAG 2.1 AA remediation.
   ============================================================ */

/* ---- 1. Skip-to-content link ---- */
/* Off-screen until a keyboard user tabs to it; then it slides into view.
   z-index sits above the age gate (10000) and nav (1000). */
.sv-skip-link {
  position: fixed;
  top: -80px;
  left: 8px;
  z-index: 100001;
  display: inline-block;
  padding: 14px 24px;
  background: #C9A96E;
  color: #1A1A1A;
  font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
  transition: top 0.2s ease;
}
.sv-skip-link:focus {
  top: 0;
  outline: 3px solid #1A1A1A;
  outline-offset: -6px;
}

/* The skip-link target is a structural marker — never show a ring on it. */
#sv-main:focus,
#sv-main:focus-visible {
  outline: none;
}

/* ---- 2. Global keyboard focus indicator ---- */
/* :focus-visible only matches keyboard/AT focus, never mouse clicks, so
   this is invisible to mouse users. Gold ring matches the brand. */
:focus-visible {
  outline: 2px solid var(--gold, #C9A96E);
  outline-offset: 2px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
details:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--gold, #C9A96E);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- 3. Footer legal line contrast ---- */
/* The copyright + Privacy / Terms / Accessibility links live in
   .footer-bottom. The original rgba(138,138,138,0.5) computed to ~2.2:1
   on the charcoal background — well below the 4.5:1 AA minimum.
   #9E9E9E on #1A1A1A is ~6.5:1. */
.footer-bottom,
.footer-bottom a,
.footer-bottom span {
  color: #9E9E9E;
}
.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  color: var(--gold, #C9A96E);
}

/* ---- 4. Links inside text blocks (WCAG 1.4.1 Use of Color) ---- */
/* Breadcrumb links, footer legal/copyright-line links, and links inside
   blog article prose sit in a run of plain text where color alone was
   the only cue. Underline them so they are distinguishable without color. */
.breadcrumb a,
.footer-legal a,
.footer-bottom a,
.article-body a {
  text-decoration: underline;
}

/* ---- 5. Glossary auto-link colour ---- */
/* The glossary tooltip stylesheet is loaded with a print-media deferral
   trick; if it is slow to apply, auto-linked terms briefly fall back to
   the browser-default link blue (#0000EE), which fails contrast on the
   dark pages. Pinning color:inherit here (a11y.css loads normally) makes
   the term blend with its surrounding text in every context. */
a.glossary-link {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .sv-skip-link { transition: none; }
}