/*
 * Club Champion Frequently Asked Questions — accessibility layer, v2.
 *
 * TOKEN NAMES: --cca-* , not --cc-*. phpMyFAQ's own styles.css already owns the
 * --cc-* namespace (it declares --cc-bg and --cc-text, and its high-contrast block
 * sets --cc-text: var(--bs-dark)), and bridge.css declares --cc-text as well. A v2
 * built on --cc-* read black text out of phpMyFAQ's own high-contrast rule on the
 * live page. The prefix is the fix.
 * WCAG 2.2 AA. Light, dark and high-contrast appearance, plus visitor text size.
 *
 * WHY THIS FILE IS SHAPED THIS WAY
 * -------------------------------
 * Three stylesheets already paint this page: phpMyFAQ's Bootstrap build (styles.css),
 * the WordPress theme carried over from clubchampion.com (theme.1.css, cc-theme.css),
 * and the bridge. They disagree about the page background -- cc-theme.css sets
 * `html { background: #fff }` unconditionally, Bootstrap sets `html, body {
 * background-color: var(--bs-body-bg) }`. v1 keyed off `data-bs-theme` and lost those
 * ties, which is why dark mode only half-painted.
 *
 * So this file owns its own attribute, `data-cc-theme` on <html>, and every selector
 * is anchored to it (`html[data-cc-theme="dark"] ...`). That is specificity 0,1,1 or
 * better, which beats every unlayered vendor rule without `!important`. `!important`
 * appears only where a vendor rule already uses it.
 *
 * It also redefines Bootstrap's own variables per theme. Bootstrap components then
 * repaint themselves and we do not have to chase every card, badge and list group.
 *
 * CONTRAST, measured, not assumed (foreground on background):
 *   LIGHT   body #595959/#fff 7.00  muted #6b7280 4.83  link #00642c 7.34
 *           bar #fff/#073c5d 11.58  button #fff/#00642c 7.34
 *   DARK    body #e6e6e6/#121416 14.79  muted #9fb3c8 8.58  link #4ade80 10.60
 *           on surface #1c1f23: body 13.25  link 9.49   button #06210f/#4ade80 9.78
 *   CONTRAST text #fff/#000 21.00  link #ffff00/#000 19.56  button #000/#ffff00 19.56
 *   Lowest pair in the file is 4.83 -- AA for body text, AAA everywhere else.
 */

/* =========================================================================
   1. TOKENS
   Light is the default and reproduces today's page exactly. Nothing below
   this block names a colour literal; components read tokens only.
   ========================================================================= */

html,
html[data-cc-theme="light"] {
  --cca-bg: #ffffff;
  --cca-surface: #ffffff;
  --cca-surface-2: #f6f8fa;
  --cca-text: #595959;
  --cca-heading: #1f2a33;
  --cca-muted: #6b7280;
  --cca-link: #00642c;
  --cca-link-hover: #004a20;
  --cca-border: #d8dee4;
  --cca-bar-bg: #073c5d;
  --cca-bar-text: #ffffff;
  --cca-bar-border: transparent;
  --cca-btn-bg: #00642c;
  --cca-btn-text: #ffffff;
  --cca-focus: #00642c;
  --cca-chip: transparent;          /* logo backing plate, only needed on dark */
  --cca-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

html[data-cc-theme="dark"] {
  --cca-bg: #121416;
  --cca-surface: #1c1f23;
  --cca-surface-2: #23272c;
  --cca-text: #e6e6e6;
  --cca-heading: #f3f4f6;
  --cca-muted: #9fb3c8;
  --cca-link: #4ade80;
  --cca-link-hover: #86efac;
  --cca-border: #2b3036;
  --cca-bar-bg: #0a2233;
  --cca-bar-text: #e6e6e6;
  --cca-bar-border: #2b3036;
  --cca-btn-bg: #00803a;
  --cca-btn-text: #ffffff;
  --cca-focus: #4ade80;
  --cca-chip: #ffffff;
  --cca-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);

  /* phpMyFAQ paints the page with
     `[data-bs-theme="dark"] html, [data-bs-theme="dark"] body {
        background-color: var(--bs-gray-700) !important }`
     and that sheet uses cascade layers, so an unlayered !important of ours loses to it
     however specific we make the selector. Redefining the variable its own rule reads is
     both simpler and stronger: phpMyFAQ then paints our colour with its own rule.
     Measured on the live page -- body went from #495057 to #121416. */
  --bs-gray-700: #121416;
  --bs-gray-800: #1c1f23;
  --bs-gray-900: #121416;
}

html[data-cc-theme="contrast"] {
  --cca-bg: #000000;
  --cca-surface: #000000;
  --cca-surface-2: #0a0a0a;
  --cca-text: #ffffff;
  --cca-heading: #ffffff;
  --cca-muted: #ffffff;             /* no grey text in high contrast, by design */
  --cca-link: #ffff00;
  --cca-link-hover: #ffffff;
  --cca-border: #ffffff;
  --cca-bar-bg: #000000;
  --cca-bar-text: #ffffff;
  --cca-bar-border: #ffffff;
  --cca-btn-bg: #ffff00;
  --cca-btn-text: #000000;
  --cca-focus: #ffff00;
  --cca-chip: #ffffff;
  --cca-shadow: none;

  /* Same lever as dark. phpMyFAQ ships its own high-contrast theme -- there are
     [data-bs-theme="high-contrast"] rules in styles.css -- so this appearance mirrors to
     that value rather than to "dark", and its components come along on their own. */
  --bs-gray-700: #000000;
  --bs-gray-800: #000000;
  --bs-gray-900: #000000;
}

/* Hand the tokens to Bootstrap so its own components follow without being listed
   one by one. This is what makes cards, badges, tables and forms repaint. */
html[data-cc-theme="dark"],
html[data-cc-theme="contrast"] {
  --bs-body-bg: var(--cca-bg);
  --bs-body-color: var(--cca-text);
  --bs-emphasis-color: var(--cca-heading);
  --bs-secondary-bg: var(--cca-surface);
  --bs-tertiary-bg: var(--cca-surface-2);
  --bs-secondary-color: var(--cca-muted);
  --bs-border-color: var(--cca-border);
  --bs-link-color: var(--cca-link);
  --bs-link-hover-color: var(--cca-link-hover);
  --bs-heading-color: var(--cca-heading);
}

/* =========================================================================
   2. TEXT SIZE
   Absolute values, because cc-theme.css sets `html { font-size: 16px }` and a
   calc() on top of it is one more tie to lose. Bootstrap and phpMyFAQ size in
   rem, so the answer text, buttons and spacing all scale together.
   The WordPress header and footer are sized in px by UIkit and will not scale.
   ========================================================================= */

html[data-cc-text="1"] { font-size: 18px; }   /* 112.5% */
html[data-cc-text="2"] { font-size: 20px; }   /* 125%   */
html[data-cc-text="3"] { font-size: 24px; }   /* 150%   */

/* =========================================================================
   3. PAGE SURFACES
   `html[data-cc-theme=...]` is 0,1,1 and beats cc-theme.css's `html` at 0,0,1.
   ========================================================================= */

html[data-cc-theme="dark"],
html[data-cc-theme="contrast"] { background: var(--cca-bg); }

html[data-cc-theme="dark"] body,
html[data-cc-theme="contrast"] body {
  background: var(--cca-bg);
  color: var(--cca-text);
}

html[data-cc-theme="dark"] h1, html[data-cc-theme="dark"] h2,
html[data-cc-theme="dark"] h3, html[data-cc-theme="dark"] h4,
html[data-cc-theme="contrast"] h1, html[data-cc-theme="contrast"] h2,
html[data-cc-theme="contrast"] h3, html[data-cc-theme="contrast"] h4,
html[data-cc-theme="dark"] .card-title, html[data-cc-theme="contrast"] .card-title {
  color: var(--cca-heading);
  /* The page title is a gradient clipped to the text, so `color` alone does not
     change it. The category cards use a plain <h3>, not .card-title -- which is
     why both are listed. */
  -webkit-text-fill-color: var(--cca-heading);
  background-image: none;
}

html[data-cc-theme="dark"] section.my-3,
html[data-cc-theme="dark"] .pmf-content,
html[data-cc-theme="dark"] main,
html[data-cc-theme="contrast"] section.my-3,
html[data-cc-theme="contrast"] .pmf-content,
html[data-cc-theme="contrast"] main {
  background: var(--cca-bg);
  color: var(--cca-text);
}

html[data-cc-theme="dark"] .card,
html[data-cc-theme="dark"] .list-group-item,
html[data-cc-theme="dark"] .accordion-item,
html[data-cc-theme="dark"] .bg-light-subtle,
html[data-cc-theme="dark"] .bg-body-tertiary,
html[data-cc-theme="contrast"] .card,
html[data-cc-theme="contrast"] .list-group-item,
html[data-cc-theme="contrast"] .accordion-item,
html[data-cc-theme="contrast"] .bg-light-subtle,
html[data-cc-theme="contrast"] .bg-body-tertiary {
  background-color: var(--cca-surface) !important;   /* Bootstrap ships these !important */
  color: var(--cca-text);
  border-color: var(--cca-border);
}

html[data-cc-theme="dark"] .text-muted,
html[data-cc-theme="dark"] .text-body-secondary,
html[data-cc-theme="contrast"] .text-muted,
html[data-cc-theme="contrast"] .text-body-secondary {
  color: var(--cca-muted) !important;
}

html[data-cc-theme="dark"] .form-control,
html[data-cc-theme="dark"] .form-select,
html[data-cc-theme="contrast"] .form-control,
html[data-cc-theme="contrast"] .form-select {
  background-color: var(--cca-surface);
  color: var(--cca-text);
  border-color: var(--cca-border);
}
html[data-cc-theme="dark"] .form-control::placeholder,
html[data-cc-theme="contrast"] .form-control::placeholder { color: var(--cca-muted); }

html[data-cc-theme="contrast"] .card,
html[data-cc-theme="contrast"] .list-group-item,
html[data-cc-theme="contrast"] .form-control,
html[data-cc-theme="contrast"] .form-select { border-width: 2px; }

/* =========================================================================
   4. LINKS, BUTTONS, FOCUS
   These run in every theme, light included: the brand green #009742 is 3.81:1
   on white and fails AA for text, so body links use the darker green.
   ========================================================================= */

section.my-3 a:not(.btn),
.pmf-content a:not(.btn),
main a:not(.btn),
.card a:not(.btn),
.list-group-item a:not(.btn) { color: var(--cca-link); }

section.my-3 a:not(.btn):hover,
.pmf-content a:not(.btn):hover,
main a:not(.btn):hover,
.card a:not(.btn):hover,
.list-group-item a:not(.btn):hover { color: var(--cca-link-hover); }

.btn-primary,
.btn-primary:disabled {
  background-color: var(--cca-btn-bg);
  border-color: var(--cca-btn-bg);
  color: var(--cca-btn-text);
}
html[data-cc-theme="contrast"] .btn-primary { border: 2px solid var(--cca-border); }

:focus-visible {
  outline: 3px solid var(--cca-focus);
  outline-offset: 2px;
}
html[data-cc-theme="contrast"] :focus-visible { outline-width: 4px; }

html[data-cc-theme="dark"] .breadcrumb,
html[data-cc-theme="dark"] .breadcrumb a,
html[data-cc-theme="contrast"] .breadcrumb,
html[data-cc-theme="contrast"] .breadcrumb a { color: var(--cca-muted); }

/* =========================================================================
   5. THE FAQ SUB-BAR
   v1 left this navy in every theme, and its dropdown stayed white -- a lit
   panel on a dark page.
   ========================================================================= */

.cc-kb-bar {
  background: var(--cca-bar-bg);
  color: var(--cca-bar-text);
  border-bottom: 1px solid var(--cca-bar-border);
}
.cc-kb-bar a,
.cc-kb-bar summary { color: var(--cca-bar-text); }

.cc-kb-bar__topics > ul {
  background: var(--cca-surface);
  border: 1px solid var(--cca-border);
  box-shadow: var(--cca-shadow);
}
.cc-kb-bar__topics > ul a { color: var(--cca-link); }
.cc-kb-bar__topics > ul a:hover { background: var(--cca-surface-2); }

/* =========================================================================
   6. THE WORDPRESS HEADER AND FOOTER
   UIkit paints these and knows nothing about the theme switch. Without this
   block the page reads as a dark answer pinned between two white slabs.
   The logo is a dark-ink SVG, so on dark and high contrast it sits on a white
   chip rather than being inverted -- inversion turns the brand green muddy.
   2x4: if a knockout (white) logo exists, swap it in and drop the chip.
   ========================================================================= */

html[data-cc-theme="dark"] .tm-header,
html[data-cc-theme="dark"] .tm-headerbar-top,
html[data-cc-theme="dark"] .uk-navbar-container,
html[data-cc-theme="dark"] footer,
html[data-cc-theme="dark"] .uk-section-default,
html[data-cc-theme="contrast"] .tm-header,
html[data-cc-theme="contrast"] .tm-headerbar-top,
html[data-cc-theme="contrast"] .uk-navbar-container,
html[data-cc-theme="contrast"] footer,
html[data-cc-theme="contrast"] .uk-section-default {
  background: var(--cca-surface) !important;   /* uk-section-default is !important */
  color: var(--cca-text);
}

html[data-cc-theme="dark"] .tm-header a,
html[data-cc-theme="dark"] .uk-navbar-nav > li > a,
html[data-cc-theme="dark"] footer a,
html[data-cc-theme="contrast"] .tm-header a,
html[data-cc-theme="contrast"] .uk-navbar-nav > li > a,
html[data-cc-theme="contrast"] footer a { color: var(--cca-text); }

html[data-cc-theme="dark"] .uk-navbar-nav > li > a:hover,
html[data-cc-theme="contrast"] .uk-navbar-nav > li > a:hover { color: var(--cca-link); }

html[data-cc-theme="dark"] .uk-logo img,
html[data-cc-theme="contrast"] .uk-logo img,
html[data-cc-theme="dark"] .tm-headerbar-top .uk-logo img,
html[data-cc-theme="contrast"] .tm-headerbar-top .uk-logo img {
  content: url("../../ClubChampionTheme/assets/images/cc-logo-white.svg");
  background: none;
  padding: 0;
}

html[data-cc-theme="dark"] .uk-navbar-container,
html[data-cc-theme="contrast"] .uk-navbar-container { border-bottom: 1px solid var(--cca-border); }

/* =========================================================================
   6b. HIGH CONTRAST SWEEP
   Dark mode can be selective, because most of what needs repainting is
   Bootstrap's and Bootstrap repaints itself. High contrast cannot: the
   WordPress header and footer carry their own greys, and on black they
   produced dark-grey-on-black navigation and near-invisible card titles --
   both seen on the live page before this block existed.
   So every colour inside the page is forced, and the exceptions are listed
   rather than hoped for.

   TWO CONSTRUCTION NOTES, both learned the hard way on the live page:

   - The exclusions use :where(), not :not(). :not() contributes the
     specificity of its argument, so a chain of them made this sweep more
     specific than the very rules meant to override it -- the call to action
     lost its button styling to the sweep's own transparent background.
     :where() contributes nothing, which keeps this rule at 0,1,1.

   - background-image is reset as well as background-color. The page heading
     is painted with a gradient clipped to the text, so setting `color` alone
     left it magenta on black; -webkit-text-fill-color is what actually
     changes it.
   ========================================================================= */

html[data-cc-theme="contrast"] body *:not(:where(
    .btn, .btn *, .uk-button, .uk-button *,
    .cc-a11y button, .cc-a11y select, li.cc-nav-cta > a)) {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--cca-text) !important;
  border-color: var(--cca-border) !important;
}

/* Every link is the link colour; buttons keep their own pair. */
html[data-cc-theme="contrast"] a:not(:where(.btn, .uk-button, li.cc-nav-cta > a)),
html[data-cc-theme="contrast"] a:not(:where(.btn, .uk-button, li.cc-nav-cta > a)) * {
  color: var(--cca-link) !important;
  -webkit-text-fill-color: var(--cca-link) !important;
}
html[data-cc-theme="contrast"] a:hover { text-decoration: underline; }

/* Headings, including the gradient-filled page title. */
html[data-cc-theme="contrast"] h1,
html[data-cc-theme="contrast"] h2,
html[data-cc-theme="contrast"] h3,
html[data-cc-theme="contrast"] .card-title,
html[data-cc-theme="contrast"] .card-title * {
  color: var(--cca-heading) !important;
  -webkit-text-fill-color: var(--cca-heading) !important;
  background-image: none !important;
}

html[data-cc-theme="contrast"] .btn-primary,
html[data-cc-theme="contrast"] .uk-button-primary {
  background-color: var(--cca-btn-bg) !important;
  color: var(--cca-btn-text) !important;
  -webkit-text-fill-color: var(--cca-btn-text) !important;
  border: 2px solid var(--cca-border) !important;
}

/* Book a fitting is a UIkit menu item, not a button, and its background is
   painted by a rule we cannot outrank cleanly. Outlining it is both legible
   and honest: yellow text, yellow rule, no background to fight over. */
html[data-cc-theme="contrast"] li.cc-nav-cta > a {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--cca-link) !important;
  -webkit-text-fill-color: var(--cca-link) !important;
  border: 2px solid var(--cca-link) !important;
  padding: 0.35rem 0.9rem !important;
  border-radius: 4px !important;
}

html[data-cc-theme="contrast"] .card { border: 2px solid var(--cca-border) !important; }

/* Dark mode has the milder version of the same problem in the card grid:
   the category titles are links and were arriving in Bootstrap blue. */
html[data-cc-theme="dark"] .card-title a,
html[data-cc-theme="dark"] .card-title { color: var(--cca-link); }

html[data-cc-theme="dark"] .tm-header a,
html[data-cc-theme="dark"] .tm-headerbar-top a,
html[data-cc-theme="dark"] footer a { color: var(--cca-text); }
html[data-cc-theme="dark"] .tm-header a:hover,
html[data-cc-theme="dark"] footer a:hover { color: var(--cca-link); }

/* =========================================================================
   7. THE ACCESSIBILITY CONTROLS IN THE SUB-BAR
   Rendered server-side so there is no shift when JavaScript arrives.
   ========================================================================= */

.cc-a11y {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font: 400 0.85rem/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.cc-a11y__group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.cc-a11y__label {
  color: var(--cca-bar-text);
  opacity: 0.9;
}
.cc-a11y button {
  min-width: 2rem;
  min-height: 2rem;                /* 32px hit target, both axes */
  padding: 0.2rem 0.5rem;
  background: transparent;
  border: 1px solid var(--cca-bar-text);
  border-radius: 4px;
  color: var(--cca-bar-text);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.cc-a11y button:hover:not(:disabled) {
  background: var(--cca-bar-text);
  color: var(--cca-bar-bg);
}
.cc-a11y button:disabled { opacity: 0.45; cursor: default; }
.cc-a11y select {
  padding: 0.25rem 0.5rem;
  min-height: 2rem;
  background: transparent;
  border: 1px solid var(--cca-bar-text);
  border-radius: 4px;
  color: var(--cca-bar-text);
  font: inherit;
}
/* A transparent select shows the OS menu in the page's colours; the options
   themselves are painted by the OS and need an explicit pair. */
.cc-a11y select option { background: var(--cca-surface); color: var(--cca-text); }

@media (max-width: 640px) {
  .cc-a11y { width: 100%; margin-left: 0; justify-content: space-between; }
  .cc-a11y__label { display: none; }
}

/* =========================================================================
   8. SKIP LINK, MOTION, FORCED COLOURS
   ========================================================================= */

.cc-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: #073c5d;
  color: #fff;
  font: 600 1rem/1.2 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-decoration: none;
}
.cc-skip-link:focus { left: 0.5rem; top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Windows High Contrast / forced colours: stand aside and let the OS paint.
   Our chip and borders would otherwise fight the system palette. */
@media (forced-colors: active) {
  .cc-a11y button,
  .cc-a11y select { border-color: ButtonBorder; color: ButtonText; }
  .cc-kb-bar__topics > ul { border: 1px solid CanvasText; }
  html[data-cc-theme] .uk-logo img { background: none; padding: 0; }
  :focus-visible { outline: 3px solid Highlight; }
}
/* =========================================================================
   CC dark-mode corrections — October 29, 2026

   Appended to ada.css 0.3.0. Three faults seen on clubchampion.com/wp/faq
   in DARK mode (high contrast was already correct):

   1. The page H1 stayed CC blue on black. The heading is a gradient clipped
      to the text, so `color` does nothing — only -webkit-text-fill-color
      changes it. 0.3.0 carries that override for [data-cc-theme="contrast"]
      (lines 363-396) but NOT for dark, which only gets the plain colour rule
      at 164-173 and loses to the gradient.

   2. Inactive top-nav items rendered UIkit grey. Active ones were white, so
      the menu read as half-disabled.

   3. Button labels were regular weight. Dan's call: bold white on the dark
      green.

   Everything here is scoped to [data-cc-theme="dark"]. Light and high
   contrast are untouched.

   To roll back: restore the .bak taken immediately before this was appended.
   ========================================================================= */

/* --- 1. Page headings ---------------------------------------------------
   Same lever the contrast block uses. background-image:none kills the
   gradient itself; the two colour properties cover browsers that honour
   -webkit-text-fill-color and those that do not. */

html[data-cc-theme="dark"] h1,
html[data-cc-theme="dark"] h1 * {
  background-image: none !important;
  color: var(--cca-heading) !important;
  -webkit-text-fill-color: var(--cca-heading) !important;
}

/* --- 2. Top navigation --------------------------------------------------
   Literal white rather than --cca-text (#e6e6e6), per Dan. */

html[data-cc-theme="dark"] .uk-navbar-nav > li > a,
html[data-cc-theme="dark"] .uk-navbar-nav > li > a *,
html[data-cc-theme="dark"] .tm-headerbar-top .uk-navbar-nav > li > a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Hover and active keep the green so the menu still gives feedback. */
html[data-cc-theme="dark"] .uk-navbar-nav > li > a:hover,
html[data-cc-theme="dark"] .uk-navbar-nav > li.uk-active > a {
  color: var(--cca-link) !important;
  -webkit-text-fill-color: var(--cca-link) !important;
}

/* --- 3. Button labels ---------------------------------------------------
   --cca-btn-text is #ffffff in dark; stated explicitly so the rule survives
   a future token change. White on #00803a measures 5.06:1 — passes WCAG AA
   for normal text, and comfortably for the large text these labels are. */

html[data-cc-theme="dark"] .btn-primary,
html[data-cc-theme="dark"] .btn-primary *,
html[data-cc-theme="dark"] .btn.btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
}
html[data-cc-theme="dark"] .uk-subnav > li > a,
html[data-cc-theme="dark"] .uk-subnav > li > a * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 15px !important;
}