/* =========================================================
   BritainPost HP7.0A — Typography Foundation

   Purpose:
   - One authoritative typography token system
   - Apple-style system typography for public UI
   - Sora reserved for Nia and AI experiences
   - No component redesign or forced size migration yet
   ========================================================= */

:root {
    /* =====================================================
       FONT FAMILIES
       ===================================================== */

    --bp-font-ui:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    --bp-font-display:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    --bp-font-ai:
        "Sora",
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "Helvetica Neue",
        Arial,
        sans-serif;

    --bp-font-editorial:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Text",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    /*
     * Compatibility aliases.
     * Existing components can continue using these names
     * while later HP7 phases migrate them safely.
     */
    --bp-font-sans: var(--bp-font-ui);
    --bp-font-heading: var(--bp-font-display);


    /* =====================================================
       FONT WEIGHTS
       ===================================================== */

    --bp-weight-body: 400;
    --bp-weight-meta: 500;
    --bp-weight-navigation: 500;
    --bp-weight-section: 600;
    --bp-weight-headline: 700;
    --bp-weight-ai: 600;
    --bp-weight-ai-strong: 700;


    /* =====================================================
       TYPE SCALE
       ===================================================== */

    --bp-type-caption: 0.6875rem;
    --bp-type-meta: 0.75rem;
    --bp-type-small: 0.8125rem;
    --bp-type-body: 1rem;
    --bp-type-body-large: 1.0625rem;
    --bp-type-card-title: 1rem;

    --bp-type-section-title:
        clamp(1.55rem, 1.9vw, 2.1rem);

    --bp-type-page-title:
        clamp(2rem, 4vw, 3.75rem);

    --bp-type-hero-title:
        clamp(2.25rem, 4.8vw, 4.75rem);

    --bp-type-article-title:
        clamp(2.15rem, 4.6vw, 4.5rem);


    /* =====================================================
       LINE HEIGHTS
       ===================================================== */

    --bp-leading-hero: 1.02;
    --bp-leading-article-title: 1.08;
    --bp-leading-page-title: 1.08;
    --bp-leading-section-title: 1.15;
    --bp-leading-card-title: 1.28;
    --bp-leading-body: 1.65;
    --bp-leading-summary: 1.55;
    --bp-leading-meta: 1.45;
    --bp-leading-button: 1.2;


    /* =====================================================
       LETTER SPACING
       ===================================================== */

    --bp-tracking-hero: -0.03em;
    --bp-tracking-page-title: -0.025em;
    --bp-tracking-headline: -0.025em;
    --bp-tracking-section-title: -0.015em;
    --bp-tracking-card-title: -0.012em;
    --bp-tracking-body: 0;
    --bp-tracking-meta: 0.01em;
    --bp-tracking-button: -0.005em;


    /* =====================================================
       SEMANTIC TYPOGRAPHY TOKENS
       ===================================================== */

    --bp-hero-font: var(--bp-font-display);
    --bp-hero-size: var(--bp-type-hero-title);
    --bp-hero-weight: var(--bp-weight-headline);
    --bp-hero-leading: var(--bp-leading-hero);
    --bp-hero-tracking: var(--bp-tracking-hero);

    --bp-page-title-font: var(--bp-font-display);
    --bp-page-title-size: var(--bp-type-page-title);
    --bp-page-title-weight: var(--bp-weight-headline);
    --bp-page-title-leading: var(--bp-leading-page-title);
    --bp-page-title-tracking: var(--bp-tracking-page-title);

    --bp-section-title-font: var(--bp-font-display);
    --bp-section-title-size: var(--bp-type-section-title);
    --bp-section-title-weight: var(--bp-weight-section);
    --bp-section-title-leading: var(--bp-leading-section-title);
    --bp-section-title-tracking:
        var(--bp-tracking-section-title);

    --bp-card-title-font: var(--bp-font-display);
    --bp-card-title-size: var(--bp-type-card-title);
    --bp-card-title-weight: var(--bp-weight-headline);
    --bp-card-title-leading: var(--bp-leading-card-title);
    --bp-card-title-tracking: var(--bp-tracking-card-title);

    --bp-body-font: var(--bp-font-editorial);
    --bp-body-size: var(--bp-type-body);
    --bp-body-weight: var(--bp-weight-body);
    --bp-body-leading: var(--bp-leading-body);
    --bp-body-tracking: var(--bp-tracking-body);

    --bp-meta-font: var(--bp-font-ui);
    --bp-meta-size: var(--bp-type-meta);
    --bp-meta-weight: var(--bp-weight-meta);
    --bp-meta-leading: var(--bp-leading-meta);
    --bp-meta-tracking: var(--bp-tracking-meta);
}


/* =========================================================
   GLOBAL FONT FOUNDATION

   Family normalization only.
   Existing component sizes, weights, spacing and dimensions
   remain authoritative until later HP7 migration phases.
   ========================================================= */

html,
body,
button,
input,
select,
textarea {
    font-family: var(--bp-font-ui);
}

body {
    font-synthesis: none;
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--bp-font-display);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}


/* =========================================================
   AI TYPOGRAPHY BOUNDARIES

   These selectors intentionally reserve Sora for verified
   Nia and AI experiences only.
   ========================================================= */

.bp-nia-modal,
.bp-nia-modal button,
.bp-nia-modal input,
.bp-nia-modal textarea,
.bp-nia-modal select,

.bp-ai-newsroom,
.bp-ai-newsroom button,
.bp-ai-newsroom input,
.bp-ai-newsroom textarea,
.bp-ai-newsroom select,

[data-bp-ai-search],
[data-bp-ai-search] button,
[data-bp-ai-search] input,
[data-bp-ai-search] textarea,
[data-bp-ai-search] select,

.bp-mega-menu__nia-card,
.bp-mega-menu__nia-card button,
.bp-mega-menu__nia-card input,

.bp-intelligence-nia,
.bp-intelligence-nia button,

.bp-v3-metrics__ask-ai {
    font-family: var(--bp-font-ai);
}


/* =========================================================
   OPTIONAL SEMANTIC UTILITIES

   These classes are available for phased migration.
   Nothing currently depends on them.
   ========================================================= */

.bp-type-hero {
    font-family: var(--bp-hero-font);
    font-size: var(--bp-hero-size);
    font-weight: var(--bp-hero-weight);
    line-height: var(--bp-hero-leading);
    letter-spacing: var(--bp-hero-tracking);
}

.bp-type-page-title {
    font-family: var(--bp-page-title-font);
    font-size: var(--bp-page-title-size);
    font-weight: var(--bp-page-title-weight);
    line-height: var(--bp-page-title-leading);
    letter-spacing: var(--bp-page-title-tracking);
}

.bp-type-section-title {
    font-family: var(--bp-section-title-font);
    font-size: var(--bp-section-title-size);
    font-weight: var(--bp-section-title-weight);
    line-height: var(--bp-section-title-leading);
    letter-spacing: var(--bp-section-title-tracking);
}

.bp-type-card-title {
    font-family: var(--bp-card-title-font);
    font-size: var(--bp-card-title-size);
    font-weight: var(--bp-card-title-weight);
    line-height: var(--bp-card-title-leading);
    letter-spacing: var(--bp-card-title-tracking);
}

.bp-type-body {
    font-family: var(--bp-body-font);
    font-size: var(--bp-body-size);
    font-weight: var(--bp-body-weight);
    line-height: var(--bp-body-leading);
    letter-spacing: var(--bp-body-tracking);
}

.bp-type-meta {
    font-family: var(--bp-meta-font);
    font-size: var(--bp-meta-size);
    font-weight: var(--bp-meta-weight);
    line-height: var(--bp-meta-leading);
    letter-spacing: var(--bp-meta-tracking);
}


/* =========================================================
   RESPONSIVE TOKENS
   ========================================================= */

@media (max-width: 900px) {
    :root {
        --bp-type-section-title:
            clamp(1.4rem, 4.8vw, 1.8rem);

        --bp-type-page-title:
            clamp(1.8rem, 7vw, 3rem);

        --bp-type-hero-title:
            clamp(2rem, 8vw, 3.5rem);

        --bp-type-article-title:
            clamp(2rem, 8vw, 3.25rem);
    }
}

@media (max-width: 520px) {
    :root {
        --bp-type-body: 0.96875rem;
        --bp-type-body-large: 1rem;
        --bp-type-card-title: 0.96875rem;

        --bp-type-section-title:
            clamp(1.3rem, 6vw, 1.6rem);

        --bp-type-page-title:
            clamp(1.7rem, 9vw, 2.5rem);

        --bp-type-hero-title:
            clamp(1.9rem, 10vw, 2.85rem);

        --bp-type-article-title:
            clamp(1.9rem, 9.5vw, 2.75rem);
    }
}


/* =========================================================
   HP7.0C.1 — Homepage Hero Typography Migration

   Typography only:
   - Apple system typography
   - Semantic token ownership
   - Current visual scale preserved

   Explicitly untouched:
   - layout
   - spacing
   - dimensions
   - colours
   - buttons
   - images
   - animation
   ========================================================= */

:root {
    /*
     * Homepage hero migration values preserve the current
     * production appearance while moving ownership into the
     * central typography system.
     */
    --bp-home-hero-label-font: var(--bp-font-ui);
    --bp-home-hero-label-size: 0.75rem;
    --bp-home-hero-label-weight: var(--bp-weight-headline);
    --bp-home-hero-label-leading: 1;
    --bp-home-hero-label-tracking: 0.28em;

    --bp-home-hero-title-font: var(--bp-font-display);
    --bp-home-hero-title-size: 1.5rem;
    --bp-home-hero-title-weight: var(--bp-weight-navigation);
    --bp-home-hero-title-leading: 1.22;
    --bp-home-hero-title-tracking: -0.03em;

    --bp-home-hero-summary-font: var(--bp-font-editorial);
    --bp-home-hero-summary-size: var(--bp-type-body);
    --bp-home-hero-summary-weight: var(--bp-weight-body);
    --bp-home-hero-summary-leading: var(--bp-leading-summary);
    --bp-home-hero-summary-tracking: var(--bp-tracking-body);

    --bp-home-hero-meta-font: var(--bp-font-ui);
    --bp-home-hero-meta-size: var(--bp-type-meta);
    --bp-home-hero-meta-weight: var(--bp-weight-meta);
    --bp-home-hero-meta-leading: var(--bp-leading-meta);
    --bp-home-hero-meta-tracking: var(--bp-tracking-meta);
}

html body section.bp-v3-hero
article.bp-v3-lead
.bp-v3-lead__content > .bp-kicker.bp-type-meta {
    font-family: var(--bp-home-hero-label-font) !important;
    font-size: var(--bp-home-hero-label-size) !important;
    font-weight: var(--bp-home-hero-label-weight) !important;
    line-height: var(--bp-home-hero-label-leading) !important;
    letter-spacing: var(--bp-home-hero-label-tracking) !important;
}

html body section.bp-v3-hero
article.bp-v3-lead
h1.bp-type-hero[data-hero-title] {
    font-family: var(--bp-home-hero-title-font) !important;
    font-size: var(--bp-home-hero-title-size) !important;
    font-weight: var(--bp-home-hero-title-weight) !important;
    line-height: var(--bp-home-hero-title-leading) !important;
    letter-spacing: var(--bp-home-hero-title-tracking) !important;
}

html body section.bp-v3-hero
article.bp-v3-lead
p.bp-type-body[data-hero-summary] {
    font-family: var(--bp-home-hero-summary-font) !important;
    font-size: var(--bp-home-hero-summary-size) !important;
    font-weight: var(--bp-home-hero-summary-weight) !important;
    line-height: var(--bp-home-hero-summary-leading) !important;
    letter-spacing: var(--bp-home-hero-summary-tracking) !important;
}

html body section.bp-v3-hero
article.bp-v3-lead
.bp-v3-lead__meta.bp-type-meta[data-hero-meta] {
    font-family: var(--bp-home-hero-meta-font) !important;
    font-size: var(--bp-home-hero-meta-size) !important;
    font-weight: var(--bp-home-hero-meta-weight) !important;
    line-height: var(--bp-home-hero-meta-leading) !important;
    letter-spacing: var(--bp-home-hero-meta-tracking) !important;
}


/* =========================================================
   HP7.0C.2 — Homepage Public Section Titles

   Public newsroom UI:
   - Apple-style display typography
   - One consistent section-title hierarchy
   - Compact module labels remain compact

   Excluded intentionally:
   - AI Newsroom
   - Nia
   - AI assistant interfaces
   ========================================================= */

:root {
    --bp-home-section-title-font:
        var(--bp-section-title-font);

    --bp-home-section-title-size:
        var(--bp-section-title-size);

    --bp-home-section-title-weight:
        var(--bp-section-title-weight);

    --bp-home-section-title-leading:
        var(--bp-section-title-leading);

    --bp-home-section-title-tracking:
        var(--bp-section-title-tracking);

    --bp-home-module-title-font:
        var(--bp-font-display);

    --bp-home-module-title-size:
        1rem;

    --bp-home-module-title-weight:
        var(--bp-weight-section);

    --bp-home-module-title-leading:
        1.15;

    --bp-home-module-title-tracking:
        -0.015em;

    --bp-home-compact-title-font:
        var(--bp-font-ui);

    --bp-home-compact-title-size:
        0.75rem;

    --bp-home-compact-title-weight:
        var(--bp-weight-section);

    --bp-home-compact-title-leading:
        1.15;

    --bp-home-compact-title-tracking:
        -0.005em;
}


/* Full public homepage section headings */

html body .bp-type-section-title {
    font-family:
        var(--bp-home-section-title-font) !important;

    font-size:
        var(--bp-home-section-title-size) !important;

    font-weight:
        var(--bp-home-section-title-weight) !important;

    line-height:
        var(--bp-home-section-title-leading) !important;

    letter-spacing:
        var(--bp-home-section-title-tracking) !important;

    text-wrap: balance;
}


/* Compact Most Read module heading */

html body
.bp-most-read-clean__heading
h2.bp-type-module-title {
    font-family:
        var(--bp-home-module-title-font) !important;

    font-size:
        var(--bp-home-module-title-size) !important;

    font-weight:
        var(--bp-home-module-title-weight) !important;

    line-height:
        var(--bp-home-module-title-leading) !important;

    letter-spacing:
        var(--bp-home-module-title-tracking) !important;
}


/* Compact Trending label */

html body
.bp-v3-trending__heading
> strong.bp-type-compact-title {
    font-family:
        var(--bp-home-compact-title-font) !important;

    font-size:
        var(--bp-home-compact-title-size) !important;

    font-weight:
        var(--bp-home-compact-title-weight) !important;

    line-height:
        var(--bp-home-compact-title-leading) !important;

    letter-spacing:
        var(--bp-home-compact-title-tracking) !important;
}


/* =========================================================
   HP7.0C.2D — Featured Stories Final Alignment

   Scope:
   - Main featured headline scale and rhythm
   - Supporting category-label alignment
   - Supporting title and date rhythm

   Explicitly untouched:
   - Images and image heights
   - Grid structure
   - Card widths and heights
   - Content padding
   - Borders, colours and shadows
   ========================================================= */

@media (min-width: 921px) {

    /* Main featured-story label */

    html body
    .bp-v4-compact-showcase
    .bp-v4-compact-lead__top {
        margin-bottom: 12px !important;
    }

    html body
    .bp-v4-compact-showcase
    .bp-v4-compact-lead__top p {
        margin: 0 !important;
        font-family: var(--bp-font-ui) !important;
        font-size: 0.68rem !important;
        font-weight: var(--bp-weight-section) !important;
        line-height: 1 !important;
        letter-spacing: 0.12em !important;
    }

    /* Main headline — approximately half the current scale */

    html body
    .bp-v4-compact-showcase
    .bp-v4-compact-lead h3 {
        max-width: 520px !important;
        margin-top: 0 !important;
        margin-bottom: 14px !important;
        font-family: var(--bp-font-display) !important;
        font-size: clamp(1.45rem, 1.8vw, 1.9rem) !important;
        font-weight: var(--bp-weight-headline) !important;
        line-height: 1.13 !important;
        letter-spacing: -0.025em !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        text-wrap: balance !important;
    }

    /* Main summary */

    html body
    .bp-v4-compact-showcase
    .bp-v4-compact-lead__summary {
        max-width: 520px !important;
        margin-top: 0 !important;
        font-family: var(--bp-font-editorial) !important;
        font-size: 0.86rem !important;
        font-weight: var(--bp-weight-body) !important;
        line-height: 1.5 !important;
        letter-spacing: 0 !important;
    }

    /* Lower-card category labels — one shared baseline */

    html body
    .bp-v4-compact-showcase
    .bp-v4-compact-story__content > p {
        display: flex !important;
        min-height: 18px !important;
        margin-top: 0 !important;
        margin-bottom: 14px !important;
        align-items: center !important;
        font-family: var(--bp-font-ui) !important;
        font-size: 0.68rem !important;
        font-weight: var(--bp-weight-section) !important;
        line-height: 1 !important;
        letter-spacing: 0.08em !important;
    }

    /* Lower-card titles — consistent three-line rhythm */

    html body
    .bp-v4-compact-showcase
    .bp-v4-compact-story h3 {
        display: -webkit-box !important;
        min-height: 3.72em !important;
        max-height: 3.72em !important;
        margin-top: 0 !important;
        margin-bottom: 14px !important;
        overflow: hidden !important;
        font-family: var(--bp-font-display) !important;
        font-size: 0.96rem !important;
        font-weight: var(--bp-weight-headline) !important;
        line-height: 1.24 !important;
        letter-spacing: -0.015em !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
    }

    /* Lower-card dates */

    html body
    .bp-v4-compact-showcase
    .bp-v4-compact-story footer {
        margin-top: 0 !important;
        font-family: var(--bp-font-ui) !important;
        font-size: 0.72rem !important;
        font-weight: var(--bp-weight-meta) !important;
        line-height: 1.2 !important;
        letter-spacing: var(--bp-tracking-meta) !important;
    }
}


@media (max-width: 920px) {

    html body
    .bp-v4-compact-showcase
    .bp-v4-compact-lead h3 {
        font-family: var(--bp-font-display) !important;
        font-size: clamp(1.5rem, 6vw, 2.1rem) !important;
        font-weight: var(--bp-weight-headline) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.025em !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    html body
    .bp-v4-compact-showcase
    .bp-v4-compact-story__content > p {
        margin-bottom: 12px !important;
        font-family: var(--bp-font-ui) !important;
        font-weight: var(--bp-weight-section) !important;
        line-height: 1 !important;
    }

    html body
    .bp-v4-compact-showcase
    .bp-v4-compact-story h3 {
        margin-top: 0 !important;
        font-family: var(--bp-font-display) !important;
        font-weight: var(--bp-weight-headline) !important;
        line-height: 1.25 !important;
        letter-spacing: -0.015em !important;
    }
}