/* ============================================================
    AUN Design-System Fixes  —  aun-fixes.css  v6
    Load AFTER redesign.css on every page.
    v6: club CTA = inverted primary (white bg, forest text, coral shadow)
    ============================================================ */

/* -- 0. DESIGN TOKENS -- */
:root {
        --aun-radius-sm: 6px;
        --aun-radius-btn: 10px;h
        --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;
}
/* ghost / club CTA hover (inverted-ink) */
.btn.btn-ghost:hover {
        background: var(--aun-forest) !important;
        border-color: var(--aun-forest) !important;
        color: #fff !important;
        transform: translateY(-2px) !important;
        box-shadow: 6px 6px 0 var(--coral, #ff8e8b) !important;
}
.btn-acid:hover {
        background: #b8f030 !important;
}

/* -- 9. "I RUN A CLUB" — INVERTED PRIMARY (white bg, forest text, coral shadow) -- */
.btn.btn-ghost {
        background: var(--white, #FEFDF9) !important;
        color: var(--forest, #25443A) !important;
        border: 2px solid var(--forest, #25443A) !important;
        box-shadow: 4px 4px 0 var(--coral, #ff8e8b) !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(--white, #FEFDF9) !important;
        color: var(--forest, #25443A) !important;
        border: 2px solid var(--forest, #25443A) !important;
        box-shadow: 4px 4px 0 var(--coral, #ff8e8b) !important;
        font-weight: 700 !important;
        padding: 16px 36px !important;
        font-size: 0.9rem !important;
}
a.btn.btn-white[href="clubs.html"]:hover {
        background: var(--aun-forest) !important;
        border-color: var(--aun-forest) !important;
        color: #fff !important;
        box-shadow: 6px 6px 0 var(--coral, #ff8e8b) !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;
}

/* -- 25. STEP NUMBERS — coral for readability (how-it-works) -- */
.step-num {
        color: var(--aun-salmon) !important;
}

/* -- 26. PROOF SECTION — text padding inside green box -- */
.proof-copy {
        padding: 32px 28px !important;
}

/* -- 27. FLOW-STEP — left padding so numbers don't touch box edge -- */
.flow-step {
        padding-left: 20px !important;
        padding-right: 20px !important;
}

/* -- 28. "WITH AUN" heading — coral colour on highlight step -- */
.flow-step.highlight h4 {
        color: var(--coral, #ff8e8b) !important;
}

/* ============================================================
   29–33. CLUBS PAGE — READABILITY FIXES
   ============================================================ */

/* -- 29. Hero paragraph — readable on dark bg -- */
.hero-dark-sub {
        color: rgba(254, 253, 249, 0.65) !important;
}
.hero-dark-sub strong {
        color: rgba(254, 253, 249, 0.95) !important;
}

/* -- 30. Truth-band text — readable on near-black bg -- */
.truth-text {
        color: rgba(254, 253, 249, 0.6) !important;
}
.truth-text strong {
        color: rgba(254, 253, 249, 0.95) !important;
}

/* -- 31. Ghost "How it works" button — visible on dark bg -- */
.btn[href="how-it-works.html"] {
        color: rgba(254, 253, 249, 0.85) !important;
        background: rgba(254, 253, 249, 0.1) !important;
        border: 1.5px solid rgba(254, 253, 249, 0.3) !important;
}
.btn[href="how-it-works.html"]:hover {
        color: #FEFDF9 !important;
        background: rgba(254, 253, 249, 0.18) !important;
        border-color: rgba(254, 253, 249, 0.5) !important;
}

/* -- 32. Dark-bg flow-step card (step 03) — readable text -- */
.flow-step[style*="background"] p,
.flow-step.highlight p {
        color: rgba(254, 253, 249, 0.7) !important;
}
.flow-step[style*="background"] h4,
.flow-step.highlight h4 {
        color: var(--white, #FEFDF9) !important;
}

/* -- 33. Generic dark-section text safety net -- */
[class*="dark"] p,
.clubs-hero p {
        color: rgba(254, 253, 249, 0.65) !important;
}
[class*="dark"] p strong,
.clubs-hero p strong {
        color: rgba(254, 253, 249, 0.95) !important;
}

/* -- 34. Clubs page — dark flow-step (step 03) readable text -- */
body.page-clubs .flow-step:nth-child(3) p {
        color: rgba(254, 253, 249, 0.7) !important;
}
body.page-clubs .flow-step:nth-child(3) h4 {
        color: var(--white, #FEFDF9) !important;
}
body.page-clubs .flow-step:nth-child(3) .step-num {
        color: var(--coral, #ff8e8b) !important;
}

    /* -- 35. Clubs page — perk cards 3 & 6 (d2 class) white-on-white fix -- */
    body.page-clubs .perk.d2 .perk-title {
                color: var(--aun-ink, #0E0D0A) !important;
    }
    body.page-clubs .perk.d2 .perk-desc {
                color: var(--aun-muted, #605A52) !important;
    }
    body.page-clubs .perk.d2 svg {
                color: var(--coral, #ff8e8b) !important;
    }

    /* -- 36. Clubs page — flow-step 03 (d2 dark card) readable heading + number -- */
    body.page-clubs .flow-step.d2 .fstep-title {
                color: var(--white, #FEFDF9) !important;
    }
    body.page-clubs .flow-step.d2 .fstep-num {
                color: var(--coral, #ff8e8b) !important;
    }
    body.page-clubs .flow-step.d2 .fstep-desc {
                color: rgba(254, 253, 249, 0.8) !important;
    }

    /* -- 37. Clubs page — bottom CTA section readability -- */
    .cta-inner .cta-title em {
                color: rgba(254, 253, 249, 0.85) !important;
    }
    .cta-inner .cta-note {
                color: rgba(254, 253, 249, 0.5) !important;
    }
    .cta-inner .cta-sub {
                color: rgba(254, 253, 249, 0.8) !important;
    }

    /* -- 38. Clubs page — 4 step cards better design: consistent padding + typography -- */
    body.page-clubs .flow-step {
                padding: 28px 24px !important;
                border-radius: var(--aun-radius-md, 12px) !important;
    }
    body.page-clubs .fstep-num {
                font-size: 2rem !important;
                font-weight: 800 !important;
                line-height: 1 !important;
                margin-bottom: 12px !important;
    }
    body.page-clubs .fstep-num.lit {
                color: var(--aun-ink, #0E0D0A) !important;
    }
    body.page-clubs .fstep-title {
                margin-bottom: 8px !important;
    }
    body.page-clubs .fstep-desc {
                line-height: 1.5 !important;
    }
    body.page-clubs .ftag {
                margin-top: 16px !important;
                display: inline-block !important;
    }

    /* -- 39. Roadmap page — active sport card (Padel) white-on-white text fix -- */
    body.page-roadmap .sport-card.active {
                color: var(--aun-ink, #0E0D0A) !important;
    }
    body.page-roadmap .sport-card.active .sport-card-name {
                color: var(--aun-ink, #0E0D0A) !important;
    }
    body.page-roadmap .sport-card.active .sport-card-note {
                color: var(--aun-muted, #605A52) !important;
    }

    /* -- 40. Roadmap page — phase-meta left sidebar alignment + readability -- */
    body.page-roadmap .phase-meta {
                padding: 40px 24px 40px 20px !important;
                text-align: left !important;
    }
    body.page-roadmap .phase-label {
                font-size: 11px !important;
                letter-spacing: 0.08em !important;
                text-transform: uppercase !important;
                color: var(--aun-muted, #605A52) !important;
                margin-bottom: 4px !important;
    }
    body.page-roadmap .phase-period {
                font-size: 1.5rem !important;
                font-weight: 800 !important;
                line-height: 1.1 !important;
                color: var(--aun-ink, #0E0D0A) !important;
    }
    body.page-roadmap .phase-status {
                margin-top: 8px !important;
                font-size: 13px !important;
    }

    /* -- 41. Roadmap page — phase-body content alignment + spacing -- */
    body.page-roadmap .phase-body {
                padding: 40px 0 40px 48px !important;
                text-align: left !important;
    }
    body.page-roadmap .phase-sport-title {
                text-align: left !important;
                margin-bottom: 12px !important;
    }
    body.page-roadmap .phase-desc {
                text-align: left !important;
                line-height: 1.6 !important;
                max-width: 640px !important;
                margin-bottom: 24px !important;
    }

    /* -- 42. Roadmap page — sport cards grid alignment + readability -- */
    body.page-roadmap .sport-cards {
                text-align: left !important;
    }
    body.page-roadmap .sport-card {
                text-align: left !important;
                padding: 20px 18px !important;
    }
    body.page-roadmap .sport-card-name {
                display: block !important;
                text-align: left !important;
                margin-bottom: 4px !important;
    }
    body.page-roadmap .sport-card-note {
                display: block !important;
                text-align: left !important;
    }
    body.page-roadmap .sport-card-badge {
                display: inline-block !important;
                text-align: left !important;
                margin-top: 10px !important;
    }

    /* -- 43. Roadmap page — coming sport cards readability (opacity fix) -- */
    body.page-roadmap .sport-card.coming {
                opacity: 1 !important;
    }
    body.page-roadmap .sport-card.coming .sport-card-name {
                color: var(--aun-ink, #0E0D0A) !important;
    }
    body.page-roadmap .sport-card.coming .sport-card-note {
                color: var(--aun-muted, #605A52) !important;
    }

    /* -- 44. Roadmap page — phase description stronger text + title contrast -- */
    body.page-roadmap .phase-sport-title {
                color: var(--aun-ink, #0E0D0A) !important;
                font-weight: 800 !important;
    }
    body.page-roadmap .phase-desc {
                color: var(--aun-ink, #0E0D0A) !important;
                opacity: 0.85 !important;
    }
    body.page-roadmap .phase-desc strong {
                color: var(--aun-ink, #0E0D0A) !important;
                opacity: 1 !important;
    }

    /* -- 45. Roadmap page — phase-meta sidebar stronger contrast -- */
    body.page-roadmap .phase-period {
                color: var(--aun-ink, #0E0D0A) !important;
                font-weight: 800 !important;
                opacity: 1 !important;
    }
    body.page-roadmap .phase-status {
                color: var(--aun-ink, #0E0D0A) !important;
                opacity: 0.8 !important;
    }

    /* -- 46. Roadmap page — sport card icon align left -- */
    body.page-roadmap .sport-card svg {
                display: block !important;
                margin: 0 0 12px 0 !important;
    }

    /* -- 47. Roadmap page — reveal animation override (no hidden phases) -- */
    body.page-roadmap .phase.reveal {
                opacity: 1 !important;
                transform: none !important;
    }

    /* -- 48. Global — replace black/ink boxes with forest green -- */
    .cta-inner {
                background: var(--aun-forest, #25443A) !important;
    }
    .cta-band {
                background: var(--aun-forest, #25443A) !important;
    }
    .truth-band {
                background: var(--aun-forest, #25443A) !important;
    }
    .submit-btn {
                background: var(--aun-forest, #25443A) !important;
    }
    .submit-btn:hover {
                background: #1a332b !important;
    }


/* ============================================================
   49. COMPACT FOOTER — reduce to ~1/3 of original height
   Overrides section 15 touch-targets inside footer only.
============================================================ */

/* Footer main area */
footer {
        padding: 10px clamp(16px, 3vw, 32px) !important;
        gap: 6px 16px !important;
        align-items: start !important;
}

/* Logo + brand area */
footer .footer-brand-logo {
        margin-bottom: 4px !important;
        align-items: center !important;
        gap: 8px !important;
}

/* Description text */
footer .footer-desc {
        font-size: 0.7rem !important;
        line-height: 1.35 !important;
        margin-top: 0 !important;
        max-width: 220px !important;
}

/* Column titles */
footer .fcol-title {
        margin-bottom: 2px !important;
        font-size: 0.65rem !important;
}

/* Link lists — tighter gaps */
footer .fcol-links {
        gap: 0px !important;
}

/* Footer list items */
footer .fcol-links li {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
}

/* Footer links — override section 15 min-height inside footer */
footer .fcol-links a {
        font-size: 0.75rem !important;
        min-height: 18px !important;
        line-height: 1.25 !important;
}

/* Footer bottom bar */
.footer-bottom {
        padding: 4px clamp(16px, 3vw, 32px) 6px !important;
        gap: 4px !important;
}

.footer-bottom,
.footer-bottom p,
.footer-bottom a {
        font-size: 0.65rem !important;
}

/* ============================================================
   50. FOOTER LOGO — bigger icon, smaller "we play"
============================================================ */
footer .footer-brand-logo svg {
        height: 36px !important;
        width: 36px !important;
}

footer .footer-brand-logo span,
footer .footer-brand-text {
        font-family: 'Pieton', Optima, Jost, Futura, 'Trebuchet MS', sans-serif !important;
        font-weight: 800 !important;
        font-size: 0.7rem !important;
        letter-spacing: 0.06em !important;
        line-height: 1 !important;
        align-self: flex-end !important;
        padding-bottom: 5px !important;
}

/* ============================================================
   51. NAV & FOOTER LOGO — PNG image support
============================================================ */
.nav-logo img {
        height: 40px !important;
        width: 40px !important;
        display: block;
        border-radius: 10px;
        object-fit: cover;
}

footer .nav-logo img,
footer a[href="index.html"] img {
        height: 36px !important;
        width: 36px !important;
        display: block;
        border-radius: 8px;
        object-fit: cover;
}

@media (max-width: 768px) {
        .nav-logo img {
                    height: 36px !important;
                    width: 36px !important;
        }
}