/*
 * header-v2.css
 * Styles for the site-wide vanilla sticky header (_inc/header-v2.cfm).
 * Namespaced with an "sh-" (sticky header) prefix so it cannot collide
 * with classes already defined in core.css or any legacy page styles
 * still in use on pages that haven't been migrated yet.
 *
 * Color reference (see assets/css/shell.css, kept for legacy pages):
 *   CNYFSC blue (default/top-of-page bar): #6294c4
 *   Sports blue (scrolled/solid bar):      #0c2d48 (matches the /now header)
 */

:root {
    --sh-header-height: 108px;
    --sh-header-height-scrolled: 76px;
    --sh-color-cnyfsc-blue: #6294c4;
    --sh-color-sports-blue: #0c2d48; /* same navy as now/now.css --head-bg */
    --sh-transition: 0.3s ease;
}

@media only screen and (max-width: 767px) {
    :root {
        --sh-header-height: 76px;
        --sh-header-height-scrolled: 60px;
    }
}

/* -------------------------------------------------------------------- */
/* Header shell: fixed to the viewport, overlays the hero on load       */
/* -------------------------------------------------------------------- */
.sh-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    font-family: inherit;
}

.sh-header__bar {
    display: flex;
    align-items: center;
    min-height: var(--sh-header-height);
    background-color: rgba(98, 148, 196, 0.85); /* CNYFSC blue, translucent over the hero */
    /* border-bottom: 1px solid var(--sh-color-sports-blue); */
    box-shadow: none;
    transition: background-color var(--sh-transition), box-shadow var(--sh-transition), min-height var(--sh-transition);
}

/* Solid, smaller bar once the page has been scrolled (toggled via JS) */
.sh-header.is-scrolled .sh-header__bar {
    min-height: var(--sh-header-height-scrolled);
    background-color: var(--sh-color-sports-blue);
    border-bottom: 4px solid var(--sh-color-sports-blue);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.sh-header__container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* -------------------------------------------------------------------- */
/* Brand / logo                                                         */
/* -------------------------------------------------------------------- */
.sh-header__brand {
    display: flex;
    align-items: flex-start; /* keeps the logotype's top edge level with the crest's top edge */
    gap: 12px;
    text-decoration: none;
}

.sh-header__crest {
    height: 78px;
    width: auto;
    transition: height var(--sh-transition);
}

.sh-header__logotype {
    height: 64px;
    width: auto;
    margin-top: 12px;
    transition: height var(--sh-transition), opacity var(--sh-transition), margin-top var(--sh-transition);
}

.sh-header.is-scrolled .sh-header__crest {
    height: 60px;
}

.sh-header.is-scrolled .sh-header__logotype {
    height: 46px;
}

/* Phones: the bar is shorter (76px, 60px scrolled), so shrink the crest and logotype to
   leave about 8px of blue above and below them instead of running flush with the edges */
@media only screen and (max-width: 767px) {
    .sh-header__container {
        padding: 0 16px;
    }

    .sh-header__brand {
        gap: 10px;
    }

    .sh-header__crest {
        height: 60px;
    }

    .sh-header__logotype {
        height: 49px;
        margin-top: 9px;
    }

    /* 60px bar minus its 4px bottom border leaves 56px: 42px crest = 7px above and below */
    .sh-header.is-scrolled .sh-header__crest {
        height: 42px;
    }

    .sh-header.is-scrolled .sh-header__logotype {
        height: 34px;
        margin-top: 6px;
    }
}

/* -------------------------------------------------------------------- */
/* Mobile hamburger toggle                                              */
/* -------------------------------------------------------------------- */
.sh-header__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.sh-header__toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: transform var(--sh-transition), opacity var(--sh-transition);
}

/* Animate hamburger into an "X" when the menu is open */
.sh-header__toggle[aria-expanded="true"] .sh-header__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.sh-header__toggle[aria-expanded="true"] .sh-header__toggle-bar:nth-child(2) {
    opacity: 0;
}
.sh-header__toggle[aria-expanded="true"] .sh-header__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* -------------------------------------------------------------------- */
/* Primary nav + top-level menu                                         */
/* -------------------------------------------------------------------- */
.sh-header__nav {
    margin-left: auto;
    font-family: "cubano", sans-serif;
}

.sh-menu {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sh-menu__item {
    position: relative;
    display: flex;
    align-items: center;
}

.sh-menu__link,
.sh-menu__link-group {
    display: flex;
    align-items: center;
}

.sh-menu__link,
.sh-menu__toggle,
.sh-menu__sublink {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.sh-menu__link:hover,
.sh-menu__toggle:hover,
.sh-menu__link:focus-visible,
.sh-menu__toggle:focus-visible {
    color: #7dd43e; /* matches shell.css a:hover accent */
}

.sh-menu__caret-btn {
    display: flex;
    align-items: center;
    padding: 10px 8px 10px 0;
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
}

.sh-menu__caret {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--sh-transition);
}

/* Flip the caret when its submenu is open */
.sh-menu__item--has-children:hover > .sh-menu__submenu ~ .sh-menu__caret,
[aria-expanded="true"] .sh-menu__caret {
    transform: rotate(-135deg);
}

/* -------------------------------------------------------------------- */
/* Submenus (dropdowns) - work at any nesting depth via the ">" combinator */
/* -------------------------------------------------------------------- */
.sh-menu__submenu {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    display: none;
    background-color: var(--sh-color-sports-blue);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    min-width: 240px;
    box-sizing: border-box;
}

.sh-menu__divider {
    height: 1px;
    margin: 6px 12px;
    background-color: rgba(255, 255, 255, 0.2);
}

.sh-menu__sublink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    padding: 8px 18px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}

.sh-menu__sublink:hover,
.sh-menu__sublink:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
    color: #7dd43e;
}

/* -------------------------------------------------------------------- */
/* Desktop (wide viewport): flyout dropdowns on hover/focus/click        */
/* -------------------------------------------------------------------- */
@media only screen and (min-width: 992px) {
    .sh-menu__item,
    .sh-menu__subitem {
        position: relative;
    }

    .sh-menu__item > .sh-menu__submenu {
        position: absolute;
        top: 100%;
        left: 0;
    }

    /* Nested (2nd level) submenus flyout beside their own row instead of
       stacking below the whole parent panel; must be at least as specific
       as the rule above so it actually wins the cascade */
    .sh-menu__subitem > .sh-menu__submenu.sh-menu__submenu--nested {
        position: absolute;
        top: 0;
        left: 100%;
    }

    /* Show on hover, keyboard focus-within, or JS-applied .is-open */
    .sh-menu__item--has-children:hover > .sh-menu__submenu,
    .sh-menu__item--has-children:focus-within > .sh-menu__submenu,
    .sh-menu__item--has-children.is-open > .sh-menu__submenu,
    .sh-menu__subitem--has-children:hover > .sh-menu__submenu,
    .sh-menu__subitem--has-children:focus-within > .sh-menu__submenu,
    .sh-menu__subitem--has-children.is-open > .sh-menu__submenu {
        display: block;
    }

    /* Mega menu: the 3rd-level league lists can be long, so instead of a
       narrow single-column list (or the old CSS-columns hack, which caused
       overlap with long league names) lay them out as a wide grid panel.
       Width is fixed (not max-content) because auto-fill needs a definite
       container size or the column count/overlap becomes unpredictable. */
    .sh-menu__submenu--nested.sh-menu__submenu--mega {
        display: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 16px;
        width: 480px;
        max-width: calc(100vw - 32px);
        max-height: calc(100vh - var(--sh-header-height) - 32px);
        overflow-y: auto;
    }

    .sh-menu__subitem--has-children:hover > .sh-menu__submenu--nested.sh-menu__submenu--mega,
    .sh-menu__subitem--has-children:focus-within > .sh-menu__submenu--nested.sh-menu__submenu--mega,
    .sh-menu__subitem--has-children.is-open > .sh-menu__submenu--nested.sh-menu__submenu--mega {
        display: grid;
    }

    /* Dividers span every column instead of sitting in just one cell */
    .sh-menu__submenu--mega > .sh-menu__divider {
        grid-column: 1 / -1;
    }

    /* .sh-menu__sublink is nowrap by default (fine for a single narrow
       column), but that forces long league names to overflow into the
       next grid column here, so let them wrap within their own cell */
    .sh-menu__submenu--mega .sh-menu__sublink {
        white-space: normal;
        overflow-wrap: break-word;
    }

    /* Flip to the left when the panel would otherwise overflow the viewport
       (see positionMegaMenu() in header-v2.js) */
    .sh-menu__submenu--nested.sh-menu__submenu--flip {
        left: auto;
        right: 100%;
    }
}

/* -------------------------------------------------------------------- */
/* Mobile / tablet (narrow viewport): off-canvas accordion menu          */
/* -------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
    .sh-header__toggle {
        display: flex;
    }

    .sh-header__nav {
        position: fixed;
        top: var(--sh-header-height);
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        background-color: var(--sh-color-sports-blue);
        transform: translateX(100%);
        transition: transform var(--sh-transition);
    }

    .sh-header.is-scrolled .sh-header__nav {
        top: var(--sh-header-height-scrolled);
    }

    .sh-header__nav.is-open {
        transform: translateX(0);
    }

    .sh-menu {
        flex-direction: column;
    }

    .sh-menu__item {
        flex-direction: column;
        align-items: stretch;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .sh-menu__link,
    .sh-menu__toggle,
    .sh-menu__link-group {
        width: 100%;
        justify-content: space-between;
        padding: 14px 20px;
    }

    .sh-menu__caret-btn {
        padding: 14px 20px;
    }

    /* Accordion: submenu only shown once JS marks the parent as open */
    .sh-menu__submenu {
        display: none;
        min-width: 0;
        box-shadow: none;
        background-color: rgba(0, 0, 0, 0.15);
    }

    .sh-menu__item--has-children.is-open > .sh-menu__submenu,
    .sh-menu__subitem--has-children.is-open > .sh-menu__submenu {
        display: block;
    }

    .sh-menu__submenu--nested {
        padding-left: 12px;
    }
}

/* -------------------------------------------------------------------- */
/* Hero offset                                                          */
/* Since .sh-header is position:fixed (out of normal flow), the page    */
/* needs its own top padding reserving that space; the hero section     */
/* then pulls itself back up by the same amount so it renders behind    */
/* the (transparent) header instead of below it.                        */
/* -------------------------------------------------------------------- */
.sh-page {
    padding-top: var(--sh-header-height);
}

.sh-page .video-hero {
    margin-top: calc(-1 * var(--sh-header-height));
}

/* Prevent background scroll while the mobile off-canvas menu is open */
body.sh-no-scroll {
    overflow: hidden;
}