/*
 * RL-VIBE-SHARED-HEADING-V1
 *
 * SINGLE SOURCE OF TRUTH
 * Standard Vibe page titles.
 *
 * Reference design: Energy 106 Events.
 *
 * Change the variables below to update
 * every page using the shared component.
 */

html body.vibe-site
.rl-page-heading.rl-page-heading {

    --rl-heading-font-size: 32px;
    --rl-heading-font-weight: 900;

    --rl-heading-bar-width: 5px;
    --rl-heading-bar-height: 34px;

    --rl-heading-gap: 15px;
    --rl-heading-bottom-space: 25px;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: var(--rl-heading-gap) !important;

    width: 100% !important;
    min-height: var(--rl-heading-bar-height) !important;

    margin: 0 0 var(--rl-heading-bottom-space) !important;
    padding: 0 !important;

    border: 0 !important;
    background: none !important;
}

/* The same pink line on every standard page */

html body.vibe-site
.rl-page-heading.rl-page-heading
> .rl-page-heading__bar {

    display: block !important;

    flex: 0 0 var(--rl-heading-bar-width) !important;

    width: var(--rl-heading-bar-width) !important;
    min-width: var(--rl-heading-bar-width) !important;
    max-width: var(--rl-heading-bar-width) !important;

    height: var(--rl-heading-bar-height) !important;
    min-height: var(--rl-heading-bar-height) !important;
    max-height: var(--rl-heading-bar-height) !important;

    align-self: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--vibe-primary, #ed1584) !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* The same heading typography on every page */

html body.vibe-site
.rl-page-heading.rl-page-heading > h1 {

    flex: 1 1 auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

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

    font-size: var(--rl-heading-font-size) !important;
    font-weight: var(--rl-heading-font-weight) !important;

    line-height: 1 !important;
    letter-spacing: normal !important;

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

    overflow-wrap: break-word;
}

/*
 * News has its own eyebrow and introduction.
 * Prevent its old pseudo-element adding a
 * second pink line around the shared heading.
 */

html body.vibe-site .rl-page-heading-host::before {
    content: none !important;
    display: none !important;
}

html body.vibe-site .rl-page-heading-host {
    padding-left: 0 !important;
    background: none !important;
}

/* Shared responsive settings */

@media (max-width: 767px) {

    html body.vibe-site
    .rl-page-heading.rl-page-heading {

        --rl-heading-font-size: 27px;
        --rl-heading-bar-height: 31px;
        --rl-heading-bottom-space: 22px;
        --rl-heading-gap: 15px;
    }
}