/* ============================================================
    AUN Design-System Fixes  —  aun-fixes.css  v5
    Load AFTER redesign.css on every page.
    v5: club CTA same size as primary, inverted colours
    ============================================================ */

/* -- 0. DESIGN TOKENS -- */
:root {
      --aun-radius-sm: 6px;
      --aun-radius-btn: 10px;
      --aun-radius-md: 12px;
      --aun-radius-lg: 24px;
      --aun-radius-pill: 99px;
      --aun-radius-round: 50%;
      --aun-muted: #605A52;
      --aun-focus: #CBFF47;
      --aun-transition: 180ms ease;
      --aun-ink: #0E0D0A;
      --aun-forest: #25443A;
      --aun-salmon: #F2836B;
}

/* -- 1. GLOBAL FOCUS RING (WCAG 2.4.7) -- */
*:focus-visible {
      outline: 2px solid var(--aun-focus) !important;
      outline-offset: 2px !important;
      box-shadow: 0 0 0 4px rgba(203, 255, 71, .35) !important;
}

/* -- 2. HEADING FONT UNIFICATION -- */
h1, h2, h3, h4,
.proof-title, .section-title, .page-title,
.inner-hero h1, .inner-hero h2 {
      font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif !important;
}

/* -- 3. BODY TEXT MINIMUM 16 px -- */
body {
      font-size: 16px !important;
      line-height: 1.55 !important;
}
p, li, td, th, dd, dt, label, input, textarea, select {
      font-size: max(1rem, 16px) !important;
}
small, .hero-note, .fact-label, .proof-kicker,
.proof-card-label, .proof-card-sub,
.fcol-title, .footer-bottom, .footer-bottom p {
      font-size: max(0.8rem, 13px) !important;
}

/* -- 4. MUTED TEXT CONTRAST FIX (4.5 : 1+) -- */
.hero-sub, .fact-label, .footer-desc,
.fcol-links a, .step-content p,
[class*="muted"], .nav-links a {
      color: var(--aun-muted) !important;
}

/* -- 5. LINE-HEIGHT NORMALISATION -- */
h1 { line-height: 1.15 !important; }
h2, h3, h4 { line-height: 1.3 !important; }
p, li, dd { line-height: 1.55 !important; }

/* -- 6. SALMON / FREE-BAND CONTRAST FIX -- */
.free-band .free-title, .free-band h2 {
      color: #1a3c2e !important;
}
.free-band p, .free-band li, .free-band .free-desc {
      color: #2a4a3c !important;
}

/* -- 7. ANGULAR BUTTONS — match logo radius (10 px) -- */
.btn.btn-ink,
.btn.btn-ghost,
.btn.btn-white,
.btn.btn-acid,
.btn,
.nav-cta,
.badge,
.problem-badge,
.solution-badge,
.sticky-bar a,
.sticky-bar .btn {
      border-radius: var(--aun-radius-btn) !important;
}

/* -- 8. BUTTON HOVER & INTERACTIVE STATES -- */
.btn {
      transition: transform var(--aun-transition),
                        background var(--aun-transition),
                        box-shadow var(--aun-transition),
                        color var(--aun-transition) !important;
}
.btn:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 4px 16px rgba(14, 13, 10, .13) !important;
}
.btn-ink:hover {
      background: #23221e !important;
}
.btn.btn-ghost:hover {
      background: #e0724e !important;
      border-color: #e0724e !important;
      color: #fff !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 4px 16px rgba(242, 131, 107, .25) !important;
}
.btn-acid:hover {
      background: #b8f030 !important;
}

/* -- 9. "I RUN A CLUB" — EQUALLY PROMINENT CTA (inverted colours, same size) -- */
.btn.btn-ghost {
      background: var(--aun-salmon) !important;
      color: #fff !important;
      border: 2px solid var(--aun-salmon) !important;
      font-weight: 700 !important;
      padding: 16px 36px !important;
      font-size: 0.9rem !important;
}

/* Also catch the .btn-white variant used for club links */
a.btn.btn-white[href="clubs.html"] {
      background: var(--aun-salmon) !important;
      color: #fff !important;
      border: 2px solid var(--aun-salmon) !important;
      font-weight: 700 !important;
      padding: 16px 36px !important;
      font-size: 0.9rem !important;
}
a.btn.btn-white[href="clubs.html"]:hover {
      background: #e0724e !important;
      border-color: #e0724e !important;
}

/* -- 10. NAV ACTIVE STATE -- */
.nav-links a[data-active="true"],
.nav-links a.active {
      color: #0E0D0A !important;
      font-weight: 700 !important;
      text-decoration: underline !important;
      text-underline-offset: 4px !important;
      text-decoration-thickness: 2px !important;
}
.drawer a[data-active="true"],
.drawer a.active {
      color: #0E0D0A !important;
      text-decoration: underline !important;
      text-underline-offset: 6px !important;
}

/* -- 11. CARD & CONTAINER RADII -- */
.proof-card, .card, .faq-item, .timeline-card, .flow-step {
      border-radius: var(--aun-radius-md) !important;
}
.proof-phone {
      border-radius: var(--aun-radius-lg) !important;
}
input, textarea, select {
      border-radius: var(--aun-radius-sm) !important;
}

/* -- 12. FORM INPUT SIZE (prevent iOS zoom) -- */
input, textarea, select {
      font-size: 16px !important;
      padding: 12px 14px !important;
}

/* -- 13. FOOTER LEGIBILITY -- */
.footer-desc {
      color: var(--aun-muted) !important;
      line-height: 1.6 !important;
}
.fcol-links a {
      color: var(--aun-muted) !important;
      transition: color var(--aun-transition) !important;
}
.fcol-links a:hover {
      color: #0E0D0A !important;
}
.footer-bottom, .footer-bottom p, .footer-bottom a {
      color: var(--aun-muted) !important;
}
.footer-bottom a {
      transition: color var(--aun-transition) !important;
}
.footer-bottom a:hover {
      color: #0E0D0A !important;
}

/* -- 14. STICKY BAR HIDE ON JOIN PAGE -- */
body.page-join .sticky-bar {
      display: none !important;
}

/* -- 15. TOUCH TARGET MINIMUM 44 px -- */
.nav-links a, .fcol-links a, .burger, .drawer a {
      min-height: 44px !important;
      display: inline-flex !important;
      align-items: center !important;
}

/* -- 16. PAGE-SPECIFIC INNER HERO HEADINGS -- */
.inner-hero h1, .inner-hero h2, .inner-hero .page-title {
      font-weight: 800 !important;
      letter-spacing: -0.02em !important;
      text-transform: none !important;
}

/* -- 17. FAQ ACCORDION TOUCH TARGETS -- */
.faq-item summary, .faq-q, .faq-toggle {
      min-height: 44px !important;
      cursor: pointer !important;
      padding: 14px 0 !important;
}

/* -- 18. SKIP-TO-CONTENT (A11Y) -- */
.skip-link {
      position: absolute;
      top: -100px;
      left: 16px;
      background: #0E0D0A;
      color: #CBFF47;
      padding: 12px 24px;
      border-radius: var(--aun-radius-sm);
      font-weight: 700;
      z-index: 9999;
      transition: top 0.2s;
}
.skip-link:focus {
      top: 8px;
}

/* -- 19. NAV CTA ANGULAR OVERRIDE -- */
.nav-cta {
      border-radius: var(--aun-radius-btn) !important;
      font-size: 14px !important;
      padding: 12px 26px !important;
      transition: transform var(--aun-transition),
                        background var(--aun-transition),
                        box-shadow var(--aun-transition) !important;
}
.nav-cta:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 4px 16px rgba(14, 13, 10, .13) !important;
      background: #1e3b30 !important;
}

/* -- 20. INLINE TEXT LINKS (fpanel-link, etc.) -- */
.fpanel-link {
      transition: color var(--aun-transition),
                        text-decoration-color var(--aun-transition) !important;
}
.fpanel-link:hover {
      text-decoration: underline !important;
      text-underline-offset: 4px !important;
      text-decoration-thickness: 1.5px !important;
}

/* -- 21. CARD HOVER TRANSITIONS -- */
.proof-card, .card, .timeline-card, .flow-step {
      transition: transform var(--aun-transition),
                        box-shadow var(--aun-transition) !important;
}

/* -- 22. CONSISTENT CURSOR FOR INTERACTIVE ELEMENTS -- */
a, button, [role="button"], summary, .btn, .nav-cta, .burger {
      cursor: pointer !important;
}

/* -- 23. SPORT-TAG CHIPS (join page) -- */
.sport-tag, .chip, [class*="tag"] {
      border-radius: var(--aun-radius-btn) !important;
}

/* -- 24. PROOF SECTION BOTTOM CTA AREA -- */
.proof .btn,
.proof-cta .btn,
.cta-section .btn,
.final-cta .btn {
      border-radius: var(--aun-radius-btn) !important;
}