/*
 RL-E106-HOME-HEADING-STANDARD-V1

 Reference:
 YOUR DAY. YOUR ENERGY.

 Match all major Energy 106 homepage headings.
 Reuse the actual Vibe heading variables.

 Does not change:
 - Card titles
 - Presenter names
 - Buttons
 - Navigation
 - Heading accent bars
 - Spacing or grid layouts
*/

html body.vibe-site .vibe-homepage
.vibe-home-section-title,

html body.vibe-site .vibe-homepage
.vibe-home-recent-slot
.vibe-sidebar-recent__header h2,

html body.vibe-site .vibe-homepage
.vibe-today-schedule--energy
.vibe-today-schedule__header h2,

html body.vibe-site .vibe-homepage
.vibe-news-blogs--energy-buzz
.vibe-news-blogs__heading h2,

html body.vibe-site .vibe-homepage
.vibe-events__header h2,

html body.vibe-site .vibe-homepage
.energy-home-chart__heading h2,

html body.vibe-site .vibe-homepage
.vibe-listen-again--compact
.vibe-la-mini__heading h2,

html body.vibe-site .vibe-homepage
.e106-crew-ad-layout
.ecv3.ecv3--reference
.ecv3__brand {

    font-family: var(
        --vibe-home-heading-font,
        var(--vibe-font-heading, "Rubik", sans-serif)
    ) !important;

    font-size: var(
        --vibe-home-heading-size,
        25px
    ) !important;

    font-weight: var(
        --vibe-home-heading-weight,
        900
    ) !important;

    line-height: var(
        --vibe-home-heading-line-height,
        1.1
    ) !important;

    letter-spacing: var(
        --vibe-home-heading-spacing,
        0
    ) !important;

    text-transform: var(
        --vibe-home-heading-transform,
        uppercase
    ) !important;

    color: var(
        --vibe-home-heading-color,
        #ffffff
    ) !important;
}

/*
 Mobile uses the existing Vibe responsive
 heading-size variable, exactly as YOUR DAY.
 YOUR ENERGY. does.

 No separate hardcoded mobile heading size.
*/


/*
 RL-E106-CONNECTION-HEADING-ALIGN-V2

 Match the approved YOUR DAY. YOUR ENERGY. heading.

 Pink bar:
 3px wide × 27px high
 #ed1584
 Fully rounded ends

 Energy 106 homepage only.
*/

/* Use the same typography as the programme heading */

html body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference
.ecv3__brand {

    font-family: var(
        --vibe-home-heading-font,
        var(--vibe-font-heading, "Rubik", sans-serif)
    ) !important;

    font-size: var(
        --vibe-home-heading-size,
        25px
    ) !important;

    font-weight: var(
        --vibe-home-heading-weight,
        900
    ) !important;

    line-height: var(
        --vibe-home-heading-line-height,
        1.1
    ) !important;

    letter-spacing: var(
        --vibe-home-heading-spacing,
        0
    ) !important;

    text-transform: uppercase !important;
    color: #ffffff !important;
}

/* Exact same pink heading-bar specification */

html body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference
.ecv3__brand::before {

    content: "" !important;
    display: block !important;

    box-sizing: border-box !important;

    width: 3px !important;
    min-width: 3px !important;
    max-width: 3px !important;

    flex: 0 0 3px !important;

    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: var(--e106-pink, #ed1584) !important;

    box-shadow: none !important;
    transform: none !important;
    align-self: center !important;
}

/* Keep the existing live indicator dot unchanged. */