/* chrome.css — the SINGLE SOURCE of header / nav / footer / back-to-top for ALL 63 pages.

   Loaded by every page: the 55 migrated ones (which still render from Elementor's
   stylesheets) and the 8 new-template ones (which also load style.css for their
   own content styling).

   ⚠️ CORRECTED 2026-08-10. This header previously claimed "The 8 new pages do NOT
   load this — they use style.css, which already contains identical chrome rules."
   Both halves were false. Network capture shows all 8 new pages requesting this
   file, and style.css carried 17 chrome selectors duplicating the ones here — so
   chrome.css won where it spoke and style.css's stale 3-item-nav rules applied
   where it did not. Those 17 selectors have been removed from style.css; chrome
   is defined here and nowhere else.

   ⚠️ DELIBERATELY SCOPED. This file contains NO global reset and NO rules on
   body, h1-h6, a, p, ul, table or any other bare element selector. Loading
   style.css on the migrated pages instead would apply its reset and its
   body/heading/link colours over Elementor and shift the layout — which the
   content/layout freeze forbids.

   THIS FILE HOLDS TWO CATEGORIES — stated plainly, because an earlier version of
   this header claimed "every selector here is under .site-header, .site-nav,
   .site-footer or .back-to-top" while the Elementor fixes below already existed:

     1. SHARED CHROME — header / nav / footer / back-to-top. The bulk of the file.
     2. ELEMENTOR REGRESSION FIXES — a deliberately small, ID-scoped set of
        corrections to the migrated export's own markup, which cannot live in
        style.css (the migrated pages do not load it) and must not be written into
        Elementor's inline <style> block (that block is regenerated wholesale by
        the deferred CSS-extraction job). Each one is commented with its cause.

   Tokens come from variables.css, which is linked before this file. */

/* ---------- header / nav ---------- */
.site-header {
  border-bottom: 3px solid var(--color-primary);
  background: var(--color-bg);
  font-family: var(--font-sans);
}
.site-header .container {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: var(--space-md);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); min-height: 62px; flex-wrap: wrap;
  box-sizing: border-box;
}
.site-header .site-logo {
  font-weight: 700; font-size: 1.0625rem; color: var(--color-dark);
  text-decoration: none;
}
.site-header .site-logo:visited { color: var(--color-dark); }
.site-header .site-logo:hover { color: var(--color-accent-text); }

.site-nav > ul.nav-list {
  display: flex; gap: var(--space-md); list-style: none;
  padding: 0; margin: 0; flex-wrap: wrap;
}
.site-nav li { margin: 0; padding: 0; }
.site-nav a {
  color: var(--color-dark); text-decoration: none; font-size: 0.9375rem;
  padding-block: var(--space-xs); border-bottom: 2px solid transparent;
}
.site-nav a:visited { color: var(--color-dark); }
.site-nav a:hover { color: var(--color-accent-text); border-bottom-color: var(--color-accent); }
.site-nav a[aria-current="page"] {
  color: var(--color-primary-text); border-bottom-color: var(--color-primary);
  font-weight: 600;
}

.nav-toggle {
  display: none; background: none; border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: var(--space-xs) var(--space-sm);
  color: var(--color-dark); font: inherit; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--color-accent); color: var(--color-accent-text); }

@media (max-width: 640px) {
  .nav-toggle { display: block; }
  .site-nav { flex-basis: 100%; display: none; }
  .site-nav[data-open="true"] { display: block; }
  .site-nav > ul.nav-list { flex-direction: column; gap: var(--space-sm); padding-bottom: var(--space-md); }
}

/* ---------- footer ---------- */
.site-footer {
  border-top: 3px solid var(--color-secondary);
  padding-block: var(--space-lg);
  font-size: 0.875rem; color: var(--color-text-muted);
  font-family: var(--font-sans);
  background: var(--color-bg);
}
.site-footer .container {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: var(--space-md); box-sizing: border-box;
}
.site-footer ul {
  display: flex; flex-wrap: wrap; gap: var(--space-md);
  list-style: none; padding: 0; margin: 0 0 var(--space-sm) 0;
}
.site-footer li { margin: 0; }
.site-footer a { color: var(--color-link); }
.site-footer p { margin: 0; }

/* ---------- back-to-top (replaces generatepress back-to-top.min.js) ---------- */
.back-to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 999;
  width: 42px; height: 42px; display: none;
  align-items: center; justify-content: center;
  background: var(--color-cta-bg); color: var(--color-cta-text);
  border: none; border-radius: var(--radius); cursor: pointer;
  font-size: 1.1rem; line-height: 1; text-decoration: none;
}
.back-to-top[data-visible="true"] { display: flex; }
.back-to-top:hover { background: var(--color-cta-bg-hover); color: var(--color-cta-text); }
.back-to-top:visited { color: var(--color-cta-text); }

/* ══════════════════════════════════════════════════════════════════════════
   REGRESSION FIX — Elementor entrance animations
   Elementor ships elements with `.elementor-invisible` (visibility:hidden) and
   its frontend JS strips the class when the element scrolls into view. That JS
   is removed, so without this rule 16 elements on the homepage — including the
   entire hero — stay permanently invisible against their black background.
   Content beats decoration: force them visible. The entrance animation is lost;
   the content is not.
   ══════════════════════════════════════════════════════════════════════════ */
.elementor-invisible { visibility: visible !important; }

/* ══════════════════════════════════════════════════════════════════════════
   HOTFIX 2026-08-10 — homepage black-on-black text (P1-pattern)
   Four elements inside .elementor-element-a80421b (the hero, background
   rgb(0,0,0), page y 65-672) rendered color:rgb(0,0,0) on that black —
   a contrast ratio of 1.00:1, i.e. invisible. The hero lockup reads
   "Buy BASKETBALL shoes" and only BASKETBALL was visible.

   Two different causes:
     c6558eb "Buy" (30px) and 8045d81 "shoes" (50px) are set black by an
       explicit Elementor rule — stale from a design where the section was
       not yet black. BASKETBALL (4f76041) beside them is explicitly white.
     38d4ade "Latest Shoes" and 5f8378c "Shoes Guide" have NO colour rule
       at all and inherit generatepress's body{color:#000000}.

   Colours are the two the hero ALREADY uses (white x12, #E85D1B x1 on the
   H1) — nothing invented. Buttons take white so a CTA is never lower
   contrast than the body text around it.

   !important is required: Elementor's own rules are (0,4,0)
   (.elementor-6 .elementor-element.elementor-element-c6558eb
   .elementor-heading-title), so a readable selector loses on specificity
   whatever the source order. Four ID-scoped rules — NOT the blanket
   !important that the Phase 9 design-system work is warned against.
   ══════════════════════════════════════════════════════════════════════════ */
.elementor-element-c6558eb .elementor-heading-title,
.elementor-element-8045d81 .elementor-heading-title {
  color: var(--elementor-hero-accent) !important;   /* 6.01:1 on #000 */
}
.elementor-element-38d4ade .elementor-button-text,
.elementor-element-5f8378c .elementor-button-text {
  color: #fff !important;                            /* 21:1 on #000 */
}

/* ---------- Phase 5b: dropdowns (desktop) + in-place accordion (mobile) ---------- */
.nav-list { position: relative; }
.site-nav .has-children { position: relative; }
.submenu-toggle {
  background: none; border: 0; padding: 0 0 0 4px; cursor: pointer;
  color: var(--color-dark); line-height: 1;
}
.submenu-toggle span::after { content: "\25BE"; font-size: .7em; display: inline-block; }
.submenu-toggle[aria-expanded="true"] span::after { transform: rotate(180deg); }
.site-nav .submenu {
  list-style: none; margin: 0; padding: var(--space-sm) 0;
  min-width: 240px; background: var(--color-bg);
  border: 1px solid var(--color-border); border-top: 3px solid var(--color-primary);
  border-radius: 0 0 var(--radius) var(--radius);
}
.site-nav .submenu li { margin: 0; }
.site-nav .submenu a { display: block; padding: 6px var(--space-md); font-size: .9375rem; border-bottom: 0; }
.site-nav .submenu .submenu-group {
  padding: var(--space-sm) var(--space-md) 2px; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted);
}

@media (min-width: 641px) {
  .site-nav .submenu { position: absolute; top: 100%; left: 0; z-index: 500; display: none; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
  .site-nav .has-children:hover > .submenu,
  .site-nav .has-children:focus-within > .submenu,
  .site-nav .has-children[data-open="true"] > .submenu { display: block; }
}
@media (max-width: 640px) {
  /* in-place accordion: caret expands, label still navigates */
  .site-nav .has-children { display: flex; flex-wrap: wrap; align-items: center; }
  .site-nav .has-children > a { flex: 1; }
  .submenu-toggle { padding: var(--space-xs) var(--space-sm); }
  .site-nav .submenu { display: none; flex-basis: 100%; border: 0; border-left: 3px solid var(--color-primary); border-radius: 0; padding-left: var(--space-sm); }
  .site-nav .has-children[data-open="true"] > .submenu { display: block; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SHARED COMPONENT — author card (Phase 7)

   Lives here, not in style.css, because style.css reaches only the 8 new-template
   pages while this component ships on all 42 qualifying pages. chrome.css is the
   only stylesheet all 63 load.

   Semantic tokens only, so light and dark both follow §13 automatically — the
   initials avatar and the accent rule are the two places a raw colour would have
   been easy and wrong.
   ══════════════════════════════════════════════════════════════════════════ */
.author-card {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  margin-top: var(--space-xl);
  padding: var(--space-md);
  background: var(--legacy-surface);
  border-top: 3px solid var(--brand-orange);
  font-family: var(--font-sans);
  /* MUST be explicit. Without it the bio inherits generatepress's hard-coded
     body{color:#000000}, and every other line in the card sets its own colour —
     which is exactly why the bio was the only element that failed contrast. */
  color: var(--brand-black);
}
.author-card__avatar {
  flex: 0 0 auto;
  width: 76px; height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--legacy-border);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.author-card__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;          /* the source is portrait; crop rather than squash */
  display: block;
}
.author-card__initials {
  font-size: 1.5rem; font-weight: 700; line-height: 1;
  color: var(--legacy-muted);
  letter-spacing: .02em;
}
.author-card__text { min-width: 0; }
.author-card__eyebrow {
  margin: 0; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--legacy-muted);
}
.author-card__name { margin: 2px 0 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.author-card__name a { color: var(--brand-blue-text); }
.author-card__role { margin: 1px 0 var(--space-sm); font-size: .8125rem; color: var(--legacy-muted); }
.author-card__bio { margin: 0 0 var(--space-sm); font-size: .9375rem; line-height: 1.6; }
.author-card__more { margin: 0; font-size: .875rem; }
.author-card__more a { color: var(--brand-orange-text); font-weight: 600; }

@media (max-width: 480px) {
  .author-card { flex-direction: column; gap: var(--space-sm); }
}

/* Dark variant — ONLY the 8 new-template pages, which are the only ones that
   actually respond to prefers-color-scheme. Discriminator verified 2026-08-12:
   all 55 migrated pages carry elementor-* body classes, all 8 new pages have a
   bare <body>. Without this gate the card renders dark on a permanently light
   Elementor page. */
@media (prefers-color-scheme: dark) {
  body:not([class*=elementor-]) .author-card {
    background: var(--color-surface);
    color: var(--color-text);
    border-top-color: var(--color-primary);
  }
  body:not([class*=elementor-]) .author-card__avatar { background: var(--color-border); }
  body:not([class*=elementor-]) .author-card__initials,
  body:not([class*=elementor-]) .author-card__eyebrow,
  body:not([class*=elementor-]) .author-card__role { color: var(--color-text-muted); }
  body:not([class*=elementor-]) .author-card__name a { color: var(--color-link); }
  body:not([class*=elementor-]) .author-card__more a { color: var(--color-primary-text); }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 9 — heading colour, DELIBERATELY SCOPED

   The original plan called for a blanket `h1,h2,h3,h4,h5,h6 { color:#000 }`.
   The blocking pre-check killed that outright. Measured across all 63 pages in
   both schemes:

     dark mode, 8 new pages   EVERY heading sits on #14171a -> 1.17:1
     dark mode, all 63 pages  the 4 footer column <h2>s     -> 1.17:1  (252 total)
     light mode, 55 migrated  1,278 headings measured, ONE fails (the hero H1)

   So the blanket rule would have erased every heading on the new pages and every
   footer heading site-wide, to fix a single element. Scope inverted accordingly.

   WHERE THIS APPLIES: the Elementor content region on migrated pages only.
     body[class*="elementor-"]  selects exactly the 55 migrated pages (0 of the 8
                                new ones) — the discriminator verified in Phase 7.
     .site-content              excludes the shared header and footer structurally
                                rather than by exception: on a migrated page it
                                holds 49 headings while the footer's 4 sit outside.

   WHERE IT DOES NOT: the 8 new pages already resolve correctly in BOTH schemes via
   --color-text, and the footer already passes in both. Neither needs a rule; a rule
   could only break them.
   ══════════════════════════════════════════════════════════════════════════ */
body[class*="elementor-"] .site-content :is(h1, h2, h3, h4, h5, h6) {
  /* PURE #000, not --brand-black. The token is #1A1820 — very slightly lighter, which
     is invisible on white but costs real contrast on the mid-tone Elementor chips.
     Measured on the red "Cons" chip rgb(243,45,45): --brand-black gives 4.37 (FAIL),
     #000 gives 5.25 (pass). The headings here sit on eight different backgrounds, so
     the extra headroom is not cosmetic. */
  color: #000;
}

/* Two measured exclusions. Both sit on dark or on a photograph, so the rule above
   would make them invisible — the exact failure Phase 9 exists to prevent.
   The extra .elementor-element class raises specificity to (0,3,1) so these win
   on merit rather than on source order. */
body[class*="elementor-"] .elementor-element.elementor-element-a80421b :is(h1, h2, h3, h4, h5, h6) {
  color: var(--elementor-hero-accent);   /* hero H1 on #000 — 6.01:1, per 7dc152c */
}
body[class*="elementor-"] .elementor-element.elementor-element-6222c03 :is(h1, h2, h3, h4, h5, h6) {
  color: #fff;                           /* sits on a background IMAGE, not a colour */
}

/* ---------- footer columns ---------- */
.footer-cols { display: flex; flex-wrap: wrap; gap: var(--space-xl); }
.footer-col h2 {
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em;
  margin: 0 0 var(--space-sm); color: var(--color-dark); font-weight: 700;
}
.footer-col ul { display: block; margin: 0; }
.footer-col li { margin-bottom: 4px; }
/* Social + contact row. Restored 2026-08-13 after the Elementor footer replacement
   dropped all five outbound links from every page. Semantic tokens only, so it follows
   the scheme — the footer is one of the few chrome surfaces that genuinely flips. */
.footer-social { margin-top: var(--space-lg); }
.footer-social ul {
  display: flex; flex-wrap: wrap; gap: var(--space-md);
  list-style: none; padding: 0; margin: 0;
}
.footer-social li { margin: 0; }
.footer-social a { color: var(--color-link); text-decoration: none; }
.footer-social a:hover { color: var(--color-link-hover); text-decoration: underline; }

.footer-legal { margin-top: var(--space-md); }