/* =========================================================================
   China Town Child — accessibility styles (WCAG 2.2 AA remediation)
   Issue numbers map to /ADA/issues.csv (Inclusive Web audit, June 2026).
   Loaded after the parent's main.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Utility — visually hidden but available to assistive technology.
   Used for form labels and live regions added by the remediation layer.
   ------------------------------------------------------------------------- */
.a11y-visually-hidden {
  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;
}

/* -------------------------------------------------------------------------
   #5 — Visible keyboard focus indicator.
   Parent main.css contains `*:focus { outline: 0 }` plus per-component
   outline resets (.navbar-toggler:focus, .form-control:focus, .btn-reset…).
   Restore a clearly visible indicator for keyboard users everywhere.
   Brand blue (#1C2674) on light surfaces; black on the red menu surfaces
   (#000 on #FF3C30 ≈ 5.9:1).
   ------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid #1C2674 !important;
  outline-offset: 2px !important;
}

/* Red surfaces: expanded navigation / mega menu, hamburger area when open */
.site-navigation :focus-visible,
.site-navigation.show + .navbar-toggler-wrapper .navbar-toggler:focus-visible,
.mega-menu :focus-visible {
  outline-color: #000 !important;
}

/* Dark footer band (links directly on bg-black) */
.site-footer > .container > :not(.site-footer__content) :focus-visible {
  outline-color: #fff !important;
}

/* Fallback for browsers without :focus-visible — keyboard-critical controls */
.skip-link:focus,
.navbar-toggler:focus,
.nav-link--a11y-toggle:focus {
  outline: 3px solid #1C2674;
  outline-offset: 2px;
}

/* Reopened #5 (audit retest): parent main.css declares
   `.site-header .navbar-toggler { outline: none !important }` — higher
   specificity than the universal :focus-visible rule above, so among
   !important declarations it won the cascade and the hamburger had no
   focus ring. Beat it explicitly (0,3,0 + pseudo > 0,2,0). */
.site-header .navbar-toggler-wrapper .navbar-toggler:focus-visible,
.site-header .navbar-toggler-wrapper .navbar-toggler:focus {
  outline: 3px solid #1C2674 !important;
  outline-offset: 2px !important;
}

/* …and keep it black when the toggler sits on the red expanded-menu bg */
.site-navigation.show + .navbar-toggler-wrapper .navbar-toggler:focus-visible,
.site-navigation.show + .navbar-toggler-wrapper .navbar-toggler:focus {
  outline-color: #000 !important;
}

/* -------------------------------------------------------------------------
   #11 — Skip to main content link.
   Visually hidden until it receives keyboard focus.
   ------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 100000;
  display: inline-block;
  padding: 12px 20px;
  background: #1C2674;
  color: #fff !important;
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  border-radius: 0 0 8px 8px;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 3px solid #000 !important;
  outline-offset: 2px !important;
}

/* Skip-link target — never show an outline ring on the invisible anchor */
#main-content:focus {
  outline: none !important;
}

/* -------------------------------------------------------------------------
   #1 — Color contrast in expanded submenus / hamburger menu.
   Audit: #212529 on #FF3C30 = 4.4:1 (fails 4.5:1).
   #000000 on #FF3C30 = 5.9:1 (passes). Top-level .nav-link is already #000
   via parent CSS; this covers the Bootstrap-default dropdown items.
   ------------------------------------------------------------------------- */
.site-header .dropdown-menu .dropdown-item {
  color: #000;
}

.site-header .dropdown-menu .dropdown-item:hover,
.site-header .dropdown-menu .dropdown-item:focus {
  color: #000;
}

/* -------------------------------------------------------------------------
   #6 — Paint-order companion to the DOM reorder in child header.php.
   With navbar-nav-wrapper now BEFORE the mega-menu in the DOM, the
   mega-menu's opaque red panel painted over the absolutely-positioned
   submenu columns in the expanded hamburger view. The mega-menu's inner
   children sit at z-index 2 (parent CSS), so lift the nav wrapper above.
   ------------------------------------------------------------------------- */
.site-navigation .navbar-nav-wrapper {
  position: relative;
  z-index: 3;
}

/* -------------------------------------------------------------------------
   #3 — Persistent visible form labels (Contact Form 7).
   Labels added to the CF7 form templates (forms 6151, 294, 5).
   color: inherit so they adapt to light/dark form contexts.
   ------------------------------------------------------------------------- */
.wpcf7 .a11y-field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: inherit;
  text-align: left;
}

.wpcf7 .a11y-newsletter-label-wrap {
  margin-bottom: 2px;
}

/* -------------------------------------------------------------------------
   #8 — Submenu disclosure <button>s (rendered by Header_Nav_Menu_A11y).
   Match the visual style of the former .nav-link anchors. Sizing, casing
   and color come from the parent's high-specificity
   `.site-header .navbar .navbar-nav .nav-item .nav-link` rules, which also
   apply to the button via the shared .nav-link class.
   ------------------------------------------------------------------------- */
.nav-link--a11y-toggle {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  width: auto;
}