/* ChartMate WCAG 2.2 AA accessibility overrides — see docs/superpowers/specs/2026-04-29-wcag-22-compliance-design.md */

/* SC 1.4.3 — Silicon's .text-muted resolves to var(--si-gray-600) !important.
   --si-gray-600 was #9397ad (2.89:1 on white). Promote to --si-gray-700 (#565973,
   5.07:1) for sufficient contrast. The token still feels like a muted grey,
   just darker.
   Also re-route Bootstrap's default link tokens to the brand teal #006666
   (5.74:1 on white, passes AA) so plain anchors stop falling back to
   Bootstrap's stock #6366f1 (4.46:1, fails AA). Hover darkens to #004545
   (~10:1) for additional emphasis. */
:root {
  --si-gray-600: #565973;
  --bs-secondary-color: #565973;
  --bs-link-color: #006666;
  --bs-link-hover-color: #004545;
  --chartmate-sticky-navbar-offset: 4.5rem;
}

/* SC 1.4.3 — direct anchor color override. Setting only the
   --bs-link-color CSS variable above is not enough: theme.min.css emits
   literal `color: #6366f1` declarations on plain anchors (e.g. body
   prose, TOC links on privacy.html) instead of going through the
   variable, leaving 18 axe color-contrast violations on privacy.html.
   Force the corrected brand-teal color on every anchor that doesn't
   already pick up a class-specific color (.btn, .nav-link, .dropdown-item,
   .navbar-brand, .skip-link, .btn-scroll-top). */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.skip-link):not(.btn-scroll-top) {
  color: var(--bs-link-color);
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.skip-link):not(.btn-scroll-top):hover {
  color: var(--bs-link-hover-color);
}

/* SC 1.4.3 — hero "PARTNER WITH US" eyebrow uses .text-primary on a .bg-dark
   card. Theme.min.css sets .text-primary { color: rgb(0,102,102) !important }
   which is the brand teal — only 2.82:1 on the dark card background. Override
   with a lighter teal for any .text-primary inside .bg-dark, scoped narrowly. */
.bg-dark .text-primary,
.card.bg-dark .text-primary {
  color: #3dd2c7 !important;
}

/* Note on .text-primary on light surfaces: Silicon's theme.min.css already
   pins it to #006666 !important (5.74:1 on white, passes AA). No defensive
   override needed — preserving the brand teal everywhere it appears. */

/* SC 1.4.3 — footer column titles. Task 3 demoted <h6 class="mb-2"> to
   <p class="fw-bold mb-2"> for heading-order reasons. The h6 had been styled
   white via theme rules; the new <p> inherits the (now darker) text-muted
   color, dropping contrast to 2.8:1 on the dark footer. Restore white-ish. */
footer #footer-links p.fw-bold {
  color: #fff;
}

/* SC 2.5.8 — Swiper pagination bullets must be ≥ 24×24 CSS px.
   Swiper's bundle CSS sets .swiper-pagination-bullet to 8px square via
   --swiper-pagination-bullet-size, and Silicon's theme.min.css further
   pins it to 5px via --si-carousel-pagination-bullet-{width,height}.
   Both rules have specificity (0,1,0); ours at (0,2,0) currently wins
   for inactive bullets, but the active bullet picks up an explicit
   width override from theme.min.css (1.5rem = 24px wide, 5px tall).
   Force the dimensions with !important so every bullet — active or
   inactive — clears the SC 2.5.8 24×24 hit-area minimum regardless of
   third-party rule ordering or future template changes. The visible
   dot is rendered via ::before below, so the bullet itself stays
   transparent. !important is justified here as a hard a11y override
   on third-party CSS. */
.swiper-pagination .swiper-pagination-bullet,
.swiper :where(.swiper-pagination-bullet) {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  margin: 0 6px;
  background: transparent !important;
  opacity: 1 !important;
  position: relative;
}
.swiper-pagination .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bs-secondary-color);
  transform: translate(-50%, -50%);
  transition: background 0.15s ease;
}
.swiper-pagination .swiper-pagination-bullet-active::before {
  background: var(--bs-primary);
}

/* SC 2.4.7 — explicit focus-visible indicator for keyboard users */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.swiper-pagination-bullet:focus-visible,
.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible {
  outline: 3px solid var(--bs-primary);
  outline-offset: 2px;
  box-shadow: none;
}

/* SC 2.4.1 — visible-on-focus skip link */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1080;
  padding: 0.5rem 1rem;
  background: var(--bs-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transform: translateY(-100%);
  transition: transform 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  color: #fff;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* SC 2.4.11 — keep focused/targeted elements clear of the sticky navbar
   (~71px tall once it activates position:fixed on scroll-up) */
html {
  scroll-padding-top: var(--chartmate-sticky-navbar-offset);
}
:target,
:focus-visible {
  scroll-margin-top: var(--chartmate-sticky-navbar-offset);
}

/* SC 2.5.5 AAA advisory / mobile usability — give the primary mobile
   navigation trigger a comfortable 44×44 CSS px hit target. */
.navbar-toggler {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}