/* ============================================================
   WCAG AA Accessibility Mode — Angel Marie Monachelli
   Shared across every page. Toggled via accessibility.js,
   preference persisted in localStorage.
   ============================================================ */

/* Skip link — hidden until keyboard focus */
.skip-link.a11y-exempt {
  position: absolute;
  top: -999px;
  left: 0;
  z-index: 100000;
  background: #ffffff;
  color: #111111;
  padding: 0.85rem 1.4rem;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  border: 2px solid #0057b8;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  top: 0;
  left: 0;
}

/* Visible focus outline on every interactive element, everywhere,
   not just inside accessibility mode */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #0057b8 !important;
  outline-offset: 2px !important;
}

/* AA mode restores the normal system cursor and hides the custom
   dot/ring cursor entirely */
html.wcag-mode,
html.wcag-mode * {
  cursor: auto !important;
}
html.wcag-mode a,
html.wcag-mode button,
html.wcag-mode [role="button"],
html.wcag-mode .btn,
html.wcag-mode .nav-dropdown-toggle {
  cursor: pointer !important;
}
html.wcag-mode .cursor,
html.wcag-mode .cursor-ring {
  display: none !important;
}

/* Global — always honor reduced-motion, regardless of AA mode */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Accessibility toggle button — fixed bottom-right, every page
   ============================================================ */
#a11y-toggle.a11y-exempt {
  position: fixed;
  bottom: 1.4rem;
  right: 1.4rem;
  z-index: 99999;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--border-earth, rgba(201,168,110,0.4));
  background: var(--earth-surface, #1e2b21);
  color: var(--gilded-gold, #C9A86E);
  font-family: var(--font-sans, sans-serif);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
#a11y-toggle:hover {
  background: var(--gilded-gold, #C9A86E);
  color: var(--earth-dark, #162018);
  transform: translateY(-2px);
}
#a11y-toggle.active {
  background: var(--gilded-gold, #C9A86E);
  color: var(--earth-dark, #162018);
  border-color: var(--gilded-gold, #C9A86E);
}
@media (max-width: 640px) {
  #a11y-toggle {
    width: 46px;
    height: 46px;
    bottom: 1rem;
    right: 1rem;
    font-size: 1.2rem;
  }
}

/* ============================================================
   High-contrast accessibility mode
   ============================================================ */
html.wcag-mode,
html.wcag-mode body {
  background: #ffffff !important;
  color: #111111 !important;
}

/* Universal override — every section/panel/card on this site sets its
   own dark background by its own class name, and there are 25 pages'
   worth of those we can't enumerate one by one. Force white/black
   everywhere first, then the specific overrides below win on top of it. */
html.wcag-mode *:not(.a11y-exempt) {
  animation: none !important;
  transition: none !important;
  background-color: #ffffff !important;
  color: #111111 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border-color: #111111 !important;
}

/* Overlay/gradient-tint layers (hero-overlay, card-overlay, etc.) are
   absolutely-positioned full-cover divs meant to sit semi-transparent
   on top of a photo. The universal override above turns them solid
   opaque white, which completely blocks the image underneath instead
   of tinting it — so these get transparent, not white. Real content
   images (hero-bg-image and its <img>) are untouched either way since
   they carry no background-color of their own. */
html.wcag-mode [class*="overlay"],
html.wcag-mode .hero-bg-image {
  background-color: transparent !important;
}

/* Bare icon-overlay divs (e.g. a play-button glyph centered in a
   position:absolute; inset:0 div with no class and no background of
   its own, sitting as a later sibling on top of a thumbnail <img>)
   have no class or inline background to hook an exemption onto by
   name, unlike the two cases above - the universal override still
   force-paints them opaque white, and since they stack on top of the
   image they were meant to float an icon over, that white paint hides
   the photo underneath entirely. Anything whose only children are
   SVG icons is decorative-overlay by definition, never body text, so
   it's safe to always leave transparent. */
html.wcag-mode div:has(> svg) {
  background-color: transparent !important;
}

/* Video/media letterbox wrappers (the inline background:#000 pattern
   used behind thumbnail <img>s while they load) turn opaque white from
   the universal override same as the hero overlay above, making a
   loading/broken thumbnail read as a jarring blank white box instead
   of the intended black letterbox. Restore to transparent. */
html.wcag-mode [style*="background: #000"],
html.wcag-mode [style*="background:#000"],
html.wcag-mode [style*="background: black"] {
  background-color: transparent !important;
}

/* Links — distinct, underlined, accessible blue */
html.wcag-mode a {
  color: #0057b8 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Buttons and CTAs stay legible against white */
html.wcag-mode .btn,
html.wcag-mode .btn-gold,
html.wcag-mode .btn-outline,
html.wcag-mode .btn-outline-dark,
html.wcag-mode .btn-outline-gold,
html.wcag-mode .btn-purple,
html.wcag-mode .nav-mobile-cta {
  background: #111111 !important;
  color: #ffffff !important;
  border: 2px solid #111111 !important;
}
html.wcag-mode .btn:hover,
html.wcag-mode .btn-gold:hover,
html.wcag-mode .btn-outline:hover,
html.wcag-mode .btn-outline-dark:hover,
html.wcag-mode .btn-outline-gold:hover,
html.wcag-mode .btn-purple:hover {
  background: #ffffff !important;
  color: #111111 !important;
}

/* Nav */
html.wcag-mode #nav,
html.wcag-mode nav {
  background: #ffffff !important;
  border-bottom: 2px solid #111111 !important;
}
html.wcag-mode .nav-brand,
html.wcag-mode .nav-links a,
html.wcag-mode .nav-dropdown-toggle,
html.wcag-mode .nav-dropdown-menu a {
  color: #111111 !important;
}

/* Footer */
html.wcag-mode footer,
html.wcag-mode .footer-banner,
html.wcag-mode .footer-grid,
html.wcag-mode .footer-copy {
  background: #ffffff !important;
  color: #111111 !important;
  border-top: 2px solid #111111 !important;
}

/* Bump every small tracked-caps label up to a legible floor. Only
   elements that are genuinely tiny by default belong here — .ticker-num
   (2.4rem), .faq-question (1.35rem) and .faq-answer (1.05rem) are
   already above the floor and were previously getting SHRUNK to
   0.95rem by this same rule, the opposite of the intent. */
html.wcag-mode .eyebrow,
html.wcag-mode .nav-links a,
html.wcag-mode .nav-brand,
html.wcag-mode .ticker-label,
html.wcag-mode .footer-copy,
html.wcag-mode .footer-grid a,
html.wcag-mode small,
html.wcag-mode .meta,
html.wcag-mode label,
html.wcag-mode .btn,
html.wcag-mode .btn-gold,
html.wcag-mode .btn-outline,
html.wcag-mode .btn-outline-dark,
html.wcag-mode .btn-outline-gold,
html.wcag-mode .btn-purple {
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
}

/* Already-large elements just get the line-height/legibility bump,
   not a font-size floor that would shrink them */
html.wcag-mode .ticker-item,
html.wcag-mode .faq-question,
html.wcag-mode .faq-answer {
  line-height: 1.5 !important;
}

/* Body copy stays comfortably readable */
html.wcag-mode p,
html.wcag-mode li,
html.wcag-mode span,
html.wcag-mode div {
  color: #111111;
}
html.wcag-mode h1, html.wcag-mode h2, html.wcag-mode h3,
html.wcag-mode h4, html.wcag-mode h5 {
  color: #111111 !important;
}

/* Thin display serifs bumped to a legible weight */
html.wcag-mode h1, html.wcag-mode h2, html.wcag-mode h3,
html.wcag-mode h4, html.wcag-mode em, html.wcag-mode i {
  font-weight: 500 !important;
}

/* Tap targets — every interactive element at least 44px */
html.wcag-mode a,
html.wcag-mode button,
html.wcag-mode input,
html.wcag-mode select,
html.wcag-mode .btn,
html.wcag-mode .btn-gold,
html.wcag-mode .btn-outline,
html.wcag-mode .btn-outline-dark,
html.wcag-mode .btn-outline-gold,
html.wcag-mode .btn-purple,
html.wcag-mode .nav-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* .faq-question already clears 44px via its own 1.5rem/2rem padding and
   uses display:flex + a margin-left:auto icon to keep the +/- glyph
   pinned to the far edge - forcing inline-flex/justify-content:center
   here would re-center that icon and break the layout, so it's left
   alone; only the min-height floor is worth adding, as a safety net. */
html.wcag-mode .faq-question {
  min-height: 44px;
}
html.wcag-mode .footer-grid a,
html.wcag-mode .nav-dropdown-menu a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* All motion calmed further while in AA mode, belt and suspenders
   alongside the global prefers-reduced-motion rule above */
html.wcag-mode *,
html.wcag-mode *::before,
html.wcag-mode *::after {
  animation-duration: 0.001ms !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* Text sitting over photography gets a solid panel behind it in AA mode,
   since overlay-on-image contrast can't be guaranteed to hold at AA */
html.wcag-mode .hero-content,
html.wcag-mode .hero-text,
html.wcag-mode .card-glyph,
html.wcag-mode .card-title,
html.wcag-mode .card-desc {
  background: #ffffff !important;
  color: #111111 !important;
  padding: 0.5rem 0.75rem;
  display: inline-block;
}

/* Meaningful images keep real alt text (see markup); decorative images
   are marked alt="" upstream so screen readers skip them correctly */