/*
 * Header redesign (Asana "Header improvement", mockup approved by Glen 2026-10-13) + "Un sport sain et sécuritaire" band.
 * Top bar (2/3) in the site's main colour (Site Settings » Colors » primary) with the logo fully inside it;
 * white menu bar (1/3) with the schedule button. Logo height: --cms-logo-height (Site Settings » Branding).
 * Loaded after app.css and cms-content.css, so these rules win over the theme's header--layout-5.
 */

/* ---------- Desktop (992 px and up) ---------- */
@media (min-width: 992px) {
    /* Top bar = logo + 24 px; the menu bar is always half of it → 2/3 – 1/3 at any logo height. */
    .cms-header {
        --cms-top-bar-height: calc(var(--cms-logo-height, 80px) + 24px);
    }
    .cms-header .header__secondary.cms-header__top {
        background-color: var(--color-primary, #333);
    }
    .cms-header .header__secondary-bg-layer {
        display: none;
    }
    .cms-header .header__secondary > .container.cms-header__top-inner {
        display: flex;
        align-items: center;
        gap: 18px;
        padding-top: 12px;
        padding-bottom: 12px;
        min-height: var(--cms-top-bar-height);
    }
    .cms-header__logo {
        flex-shrink: 0;
        display: block;
        line-height: 0;
    }
    .cms-header__logo img {
        height: var(--cms-logo-height, 80px);
        width: auto;
        max-width: 260px;
        object-fit: contain;
    }
    .cms-header .header__secondary .info-block--league-name.cms-header__titles {
        flex: 1 1 auto;
        min-width: 0;
        padding-left: 0;
        margin: 0;
    }
    /* Text on the main colour: white or dark, chosen from the colour's lightness (--cms-on-primary). */
    .cms-header .cms-header__titles .info-block--league-name__primary,
    .cms-header .cms-header__titles .info-block--league-name__secondary {
        color: var(--cms-on-primary, #fff);
    }
    .cms-header__account {
        align-self: flex-start;
        flex-shrink: 0;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--cms-on-primary, #fff);
        white-space: nowrap;
    }
    .cms-header__account a {
        color: var(--cms-on-primary, #fff);
        opacity: 0.85;
    }
    .cms-header__account a:hover,
    .cms-header__account a:focus,
    .cms-header__account a.is-active {
        color: var(--cms-on-primary, #fff);
        opacity: 1;
    }
    .cms-header__languages a:not(.is-active) {
        opacity: 0.7;
    }
    .cms-header__sep {
        margin: 0 6px;
        opacity: 0.6;
    }

    /* Menu bar: the logo no longer sits here, so the menu starts at the left. */
    .cms-header .header__primary-inner {
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .cms-header.header--layout-5 .main-nav {
        margin-left: 0;
        flex: 1 1 auto;
        min-width: 0;
    }
    .cms-header .cms-header__nav-account {
        display: none;
    }
    /* Menu bar = half the top bar (theme: fixed 62 px). */
    .cms-header .main-nav__list > li > a {
        line-height: calc(var(--cms-top-bar-height) / 2);
    }
    .cms-header .main-nav__list > li > .main-nav__sub {
        top: calc(var(--cms-top-bar-height) / 2);
    }
    /* Larger titles, closer to the hockeylsl.ca reference in the Asana task. */
    .cms-header .header__secondary .cms-header__titles .info-block--league-name__primary {
        font-size: 26px;
        line-height: 1.15;
    }
    .cms-header .header__secondary .cms-header__titles .info-block--league-name__secondary {
        font-size: 14px;
    }
    .cms-header__cta.btn {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .cms-header__cta {
        flex-shrink: 0;
        background-color: var(--color-primary, #333);
        border-color: var(--color-primary, #333);
        color: var(--cms-on-primary, #fff);
    }
    .cms-header__cta:hover,
    .cms-header__cta:focus {
        filter: brightness(0.92);
        color: var(--cms-on-primary, #fff);
    }
}

/* ---------- Phones / tablets (below 992 px) ---------- */
@media (max-width: 991px) {
    /* The menu-bar button is for desktop; phones have it in the strip under the top bar. */
    .cms-header .cms-header__cta {
        display: none;
    }
    .cms-header-mobile .header-mobile__inner {
        height: auto;
        min-height: calc(var(--cms-logo-height, 80px) * 0.7 + 20px);
        display: flex;
        align-items: center;
        padding: 10px 60px 10px 16px;
        background-color: var(--color-primary, #333);
    }
    .cms-header-mobile__brand {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        color: var(--cms-on-primary, #fff);
    }
    .cms-header-mobile__brand:hover,
    .cms-header-mobile__brand:focus {
        color: var(--cms-on-primary, #fff);
    }
    .cms-header-mobile__logo {
        height: calc(var(--cms-logo-height, 80px) * 0.7);
        width: auto;
        max-width: 140px;
        object-fit: contain;
        flex-shrink: 0;
    }
    .cms-header-mobile__title {
        font-weight: 800;
        font-size: 15px;
        line-height: 1.15;
        text-transform: uppercase;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .cms-header-mobile .burger-menu-icon {
        top: 50%;
        transform: translateY(-50%);
    }
    .cms-header-mobile .burger-menu-icon__line,
    .cms-header-mobile .burger-menu-icon__line::before,
    .cms-header-mobile .burger-menu-icon__line::after {
        background-color: var(--cms-on-primary, #fff);
    }
    .cms-header-mobile__strip {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 16px;
        background: #fff;
        font-size: 12px;
        font-weight: 700;
    }
    .cms-header-mobile__strip a {
        color: #2c2c2a;
    }
    .cms-header-mobile__strip .cms-header__languages a:not(.is-active) {
        opacity: 0.55;
    }
    .cms-header-mobile__strip .cms-header__sep {
        margin: 0 6px;
        opacity: 0.5;
    }
    .cms-header-mobile .cms-header-mobile__cta {
        position: static;
        transform: none;
        background-color: var(--color-primary, #333);
        border-color: var(--color-primary, #333);
        color: var(--cms-on-primary, #fff);
        padding: 6px 12px;
    }
}

/* ---------- Footer social icons (moved from the header) ---------- */
.cms-footer__social {
    font-size: 18px;
}
.cms-footer__social a {
    display: inline-block;
    margin: 0 8px;
}

/* ---------- "Un sport sain et sécuritaire" band (above the footer, every page) ---------- */
.cms-safety {
    background: #fff;
    padding: 22px 0;
    text-align: center;
}
.cms-safety__heading {
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 14px;
    color: #2c2c2a;
    text-transform: none;
}
.cms-safety__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.cms-safety__link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 300px;
    max-width: 100%;
    padding: 10px 14px;
    border: 1px solid #e3e3e8;
    border-radius: 8px;
    color: #2c2c2a;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}
.cms-safety__link:hover,
.cms-safety__link:focus {
    border-color: var(--color-primary, #333);
    color: #2c2c2a;
}
.cms-safety__logo {
    height: 56px;
    width: 90px;
    object-fit: contain;
    flex-shrink: 0;
}