/* ============================================================
   AUN Typography Audit Fixes — aun-typography.css
      Load AFTER aun-mobile.css on every page.
         Fixes: font-stack consistency, min font sizes, FAQ readability,
            skip-link contrast, section label sizing, CTA unification,
               type scale tokens.
                  ============================================================ */

/* -- 1. TYPE SCALE TOKENS ---------------------------------- */
:root {
    --ts-xs: 0.75rem;   /* 12px — minimum readable */
    --ts-sm: 0.875rem;  /* 14px */
    --ts-base: 1rem;    /* 16px */
    --ts-md: 1.125rem;  /* 18px */
    --ts-lg: 1.5rem;    /* 24px */
    --ts-xl: 2rem;      /* 32px */
    --ts-2xl: 3rem;     /* 48px */
    --ts-3xl: 3.5rem;   /* 56px */
}

/* -- 2. FONT-STACK CONSISTENCY ----------------------------- *
 * Fix: some selectors used 'Barlow Condensed',sans-serif
  * (missing Arial Narrow fallback). Standardise all to var().
   * ---------------------------------------------------------  */
.timeline-title,
.timeline-step .step-content h4,
.solution-section h3,
.app-logo,
.drawer a,
.app-body span,
.step-num,
.highlight-num,
.step-content h4,
.drawer .dcta,
.timeline-step .step-num,
.timeline-step .step-content h4,
.dash-name,
.dstat-val,
.dstat-val em,
.sport-card-name,
.counter-number {
    font-family: var(--f-head) !important;
}

/* Fix DM Sans stack in phone mockup UI elements */
.app, .app-bar, .app-body, .app-foot,
.app-tag, .p-name, .p-meta, .p-score,
.prow, .av {
    font-family: var(--f-body) !important;
}

/* -- 3. MINIMUM FONT SIZE FLOOR (12px) -------------------- *
 * No meaningful text should render below 12px on desktop.
  * --------------------------------------------------------- */
.section-label,
.inner-hero .section-label,
.step-num,
.fpanel .step-num,
.about-section-num,
[class*="section-"] span:first-child,
.footer-col-title,
.fact-label {
    font-size: max(var(--ts-xs), 0.75rem) !important;
    letter-spacing: 0.08em;
}

/* Section eyebrow labels — bumped from ~9.6px to 12px */
.fpanel .step-num,
.about-section-num {
    font-size: var(--ts-xs) !important;
}

/* -- 4. FAQ QUESTION READABILITY --------------------------- *
 * Bump questions to 1.15rem/600 for better scannability.
  * --------------------------------------------------------- */
.faq-q,
.faq-item summary {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    line-height: 1.4 !important;
}

.faq-a,
.faq-a p {
    font-size: var(--ts-base) !important;
    line-height: 1.7 !important;
}

/* -- 5. SKIP-TO-CONTENT A11Y CONTRAST --------------------- *
 * Original: #CBFF47 on #0E0D0A = 12.8:1 (passes).
  * But on focus-visible state, ensure high contrast.
   * --------------------------------------------------------- */
.skip-link {
    color: #0E0D0A !important;
    background: #CBFF47 !important;
    font-size: var(--ts-sm) !important;
    font-family: var(--f-head) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* -- 6. SECTION LABEL / EYEBROW SMOOTHING ----------------- *
 * Bridge the gap between tiny labels and large headings.
  * --------------------------------------------------------- */
.section-label,
.inner-hero .section-label,
.page-label {
    font-size: var(--ts-xs) !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--f-head) !important;
}

/* -- 7. CTA BUTTON UNIFICATION ---------------------------- *
 * Three tiers: primary, secondary (ghost), nav-cta.
  * All share base sizing and border-radius.
   * --------------------------------------------------------- */

/* Base for all CTA buttons */
.btn,
.nav-cta,
.btn-primary,
.btn-secondary,
.btn-ink,
.btn-ghost,
.btn-acid,
.btn-white {
    font-family: var(--f-head) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 10px !important;
    transition: transform 180ms ease,
                background 180ms ease,
                box-shadow 180ms ease !important;
}

/* Primary CTA — consistent sizing across pages */
.btn-primary,
.btn-ink,
.btn-acid,
.cta-band .btn,
.final-cta .btn {
    font-size: var(--ts-base) !important;
    padding: 14px 28px !important;
}

/* Secondary / Ghost CTA */
.btn-ghost,
.btn-white,
.btn-secondary {
    font-size: var(--ts-base) !important;
    padding: 14px 28px !important;
}

/* Nav CTA — slightly smaller */
.nav-cta {
    font-size: var(--ts-sm) !important;
    padding: 12px 26px !important;
}

/* Drawer CTA (mobile nav) */
#drawer .btn,
.drawer-cta {
    font-size: 1.1rem !important;
    padding: 14px 28px !important;
    border-radius: 10px !important;
}

/* -- 8. BODY TEXT MAX-WIDTH FOR READABILITY ---------------- *
 * Enforce 65ch max line-length on paragraphs.
  * --------------------------------------------------------- */
.about-body p,
.proof-copy p,
.roadmap-body p,
section > p,
.fpanel p,
.faq-a p {
    max-width: 65ch;
}

/* -- 9. FOOTER MINIMUM SIZES ------------------------------ */
footer,
footer a,
footer p,
.footer-tagline,
.footer-legal {
    font-size: max(var(--ts-xs), 12px) !important;
}

.footer-col-title {
    font-size: var(--ts-xs) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* -- 10. MOBILE RESPONSIVE TYPOGRAPHY --------------------- */
@media (max-width: 768px) {
    /* Ensure FAQ stays readable on mobile */
    .faq-q,
    .faq-item summary {
          font-size: 1.05rem !important;
          font-weight: 600 !important;
    }

    /* CTAs stack nicely on mobile */
    .btn-primary,
    .btn-ink,
    .btn-acid,
    .btn-ghost,
    .btn-white,
    .btn-secondary {
          font-size: var(--ts-base) !important;
          padding: 14px 24px !important;
          width: 100%;
          text-align: center;
    }

    /* Section labels stay at floor */
    .section-label,
    .inner-hero .section-label {
          font-size: var(--ts-xs) !important;
    }
}

@media (max-width: 480px) {
    .faq-q,
    .faq-item summary {
          font-size: 1rem !important;
    }
}