/* ============================================================
   SOCCERNEWS TYPE SCALE — v5 FINAL
   Per: SoccerNews-Type-Scale-Spec-v5-FINAL.pdf

   SINGLE SOURCE OF TRUTH for all heading sizes and case treatment.
   Page-specific CSS files (casino-hub.css, template-article.css)
   reference these variables via var(--sn-*) with px fallbacks.

   body.template-hub   → hub/category pages: ALL CAPS, 34/26px
   body.template-article → editorial pages: sentence case, 38/28px
   ============================================================ */

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
    /* Desktop — Hub (ALL CAPS) */
    --sn-h1-hub:     34px;
    --sn-h2-hub:     26px;

    /* Desktop — Article (sentence case) */
    --sn-h1-article: 38px;
    --sn-h2-article: 28px;

    /* Desktop — Shared (H3, H4, body identical across templates) */
    --sn-h3:           22px;
    --sn-h4:           19px;
    --sn-body:         17px;
    --sn-eyebrow:      13px;
    --sn-caption:      14px;
    --sn-faq-question: 19px;

    /* Mobile ≤768px — Hub */
    --sn-h1-hub-mobile: 26px;
    --sn-h2-hub-mobile: 20px;

    /* Mobile ≤768px — Article */
    --sn-h1-article-mobile: 28px;
    --sn-h2-article-mobile: 22px;

    /* Mobile ≤768px — Shared */
    --sn-h3-mobile:    18px;
    --sn-h4-mobile:    16px;
    --sn-body-mobile:  16px;
    --sn-eyebrow-mobile: 12px;

    /* Font families */
    --sn-font-heading: 'League Spartan', 'LeagueSpartan-Bold', 'Inter', system-ui, sans-serif;
    --sn-font-body:    'Poppins', system-ui, -apple-system, sans-serif;
    --sn-font-mono:    'IBM Plex Mono', ui-monospace, monospace;
}

/* ============================================================
   HUB TEMPLATE — ALL CAPS H1 + H2
   Covers: single posts, category archives, and any hub page
   that does NOT have its own scoped CSS (e.g. soccer-betting,
   gambling, betting-promotions). Pages with own CSS
   (casino-hub.css) already use var(--sn-*) from above.
   ============================================================ */
body.template-hub h1 {
    font-size: var(--sn-h1-hub);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0em;
    line-height: 1.2;
}

body.template-hub h2 {
    font-size: var(--sn-h2-hub);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0em;
    line-height: 1.2;
}

body.template-hub h3 {
    font-size: var(--sn-h3);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0em;
    line-height: 1.2;
}

body.template-hub h4 {
    font-size: var(--sn-h4);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0em;
    line-height: 1.2;
}

/* ============================================================
   ARTICLE TEMPLATE — Sentence case H1 + H2
   Covers: single posts and any editorial page without own CSS.
   Pages with own CSS (template-article.css) already use
   var(--sn-*) from above.
   ============================================================ */
body.template-article h1 {
    font-size: var(--sn-h1-article);
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

body.template-article h2 {
    font-size: var(--sn-h2-article);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0em;
    line-height: 1.2;
}

body.template-article h3 {
    font-size: var(--sn-h3);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0em;
    line-height: 1.2;
}

body.template-article h4 {
    font-size: var(--sn-h4);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0em;
    line-height: 1.2;
}

/* ============================================================
   FAQ — sentence case, League Spartan 19px Semi-Bold
   Applies regardless of parent template per spec.
   ============================================================ */
.variant-faq-q,
.faq-question {
    font-family: var(--sn-font-heading);
    font-size: var(--sn-faq-question);
    font-weight: 600;
    text-transform: none;
    line-height: 1.2;
}

.variant-faq-a,
.faq-answer {
    font-family: var(--sn-font-body);
    font-size: var(--sn-body);
    font-weight: 400;
    line-height: 1.6;
}

/* ============================================================
   MOBILE ≤768px
   ============================================================ */
@media (max-width: 768px) {
    body.template-hub h1    { font-size: var(--sn-h1-hub-mobile); }
    body.template-hub h2    { font-size: var(--sn-h2-hub-mobile); }
    body.template-hub h3,
    body.template-article h3 { font-size: var(--sn-h3-mobile); }
    body.template-hub h4,
    body.template-article h4 { font-size: var(--sn-h4-mobile); }

    body.template-article h1 { font-size: var(--sn-h1-article-mobile); }
    body.template-article h2 { font-size: var(--sn-h2-article-mobile); }
}