/*header — YMCA Midsize 2026 (Menu B — purple two-row bar, no notch)*/

.wp-site-blocks header {
    position: sticky;
    top: 0;
    z-index: 1000000;
}

.logged-in .wp-site-blocks header {
    top: 30px;
}

/* Full-width purple bar (two stacked bands, no white notch).
   overflow-x:clip keeps the trailing nav dropdowns from pushing the document
   width past 1440 (sticky-safe; downward dropdown overflow stays visible). */
.bmg-header-wrapper {
    position: relative;
    background: var(--purple-dk);
    box-shadow: 1px 1px 10px #00000022;
    overflow-x: clip;
}

/* ----------------------------- */
/* Top band (purple-dk): brand left, utility right */

.bmg-header-top {
    margin: 0 auto;
    padding: 22px 80px;
    align-items: center;
}

/* Brand lockup: logo + wordmark */
.bmg-header-brand {
    align-items: center;
}

.bmg-header-brand .ymca-logo img {
    width: 81px;
    height: auto;
    display: block;
    /* Comp shows the all-white knockout mark on the purple band (full-color
       lives in the footer card). */
    filter: brightness(0) invert(1);
}

.bmg-header-site-name {
    margin: 0;
    letter-spacing: -0.04em;
}

.bmg-header-site-name a {
    color: var(--white);
    text-decoration: none;
}

/* Utility cluster: Login / search / Join Now */
.bmg-header-utility {
    align-items: center;
}

/* Login renders via is-style-bmg-white-link (transparent bg, white text) so it
   reads as a plain white text link, not a chip. */
.bmg-header-login .wp-block-button__link {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.bmg-header-join .wp-block-button__link {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

/* Join Now sits on the purple-dk band; the shared bmg-white hover (purple-dk
   fill) made it vanish into the bar. Hover cyan — the site's action color. */
.bmg-header-join .wp-block-button.is-style-bmg-white .wp-block-button__link:hover {
    background: var(--primary-lt);
    border-color: var(--primary-lt);
    color: var(--black);
}

/* search */
.header-search {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.header-search .wp-block-search__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.header-search .wp-block-search__input {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    opacity: 0;
    padding: 0;
    border: none;
    transition:
        width 0.25s ease,
        opacity 0.25s ease,
        padding 0.25s ease,
        border 0.25s ease;
    background: #ffffff;
    border-radius: 999px;
}

.header-search:focus-within .wp-block-search__input {
    width: 230px;
    margin-right: 10px;
    opacity: 1;
    padding: 10px;
    border: none;
}

.header-search .wp-block-search__button {
    position: relative;
    min-width: 25px;
    min-height: 25px;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-indent: -9999px;
    background: none;
    border: none;
}

.header-search .wp-block-search__button::before {
    content: "";
    display: block;
    width: 25px;
    height: 25px;
    filter: brightness(0) invert(1);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("../../icons/search_icon.png");
}

/* ----------------------------- */
/* Lower band (purple-md): primary nav */

.bmg-header-nav-row {
    background: var(--purple-md);
    padding-top: 16px;
    padding-bottom: 16px;
}

/* Nav links: white CachetPro-Bold 18px. The constrained nav-row group caps the
   navigation at the 1240px content width (centered → 100px side gutters). */
.bmg-header-nav-row .wp-block-navigation {
    column-gap: 70px;
}

.bmg-header-nav-row .wp-block-navigation .wp-block-navigation-item__content {
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

/* submenu caret: sub_menu_icon.png */
.bmg-header-nav-row .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon,
.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__submenu-icon {
    position: relative;
    width: 14px !important;
    height: 9px !important;
    margin-left: 6px !important;
    background-image: url("../../icons/sub_menu_icon.png") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
    background-color: transparent !important;
    pointer-events: none;
    transition: transform 0.2s ease-in-out;
    transform-origin: center;
}

.bmg-header-nav-row .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon::before,
.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__submenu-icon::before {
    content: none !important;
    display: none !important;
}

.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__submenu-icon svg {
    display: none !important;
}

/* With openSubmenusOnClick the caret <span> renders as a SIBLING of the toggle
   <button>, so clicks on the arrow did nothing. Extend the button's padding box
   under the caret (negative margin pulls the caret onto it) so the arrow is part
   of the hitbox, and let the caret react: it flips when the submenu is open and
   scales with the label on hover. (A pseudo-overlay doesn't survive the hover
   scale — the transform turns the button into its own containing block.) */
.bmg-header-nav-row .wp-block-navigation .wp-block-navigation-submenu__toggle {
    padding-right: 26px;
    margin-right: -26px;
}

.bmg-header-nav-row .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon,
.bmg-header-nav-row .wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon {
    transform: rotate(180deg);
}

/* the label scales from its LEFT edge on hover, so its right edge grows ~6px
   toward the caret — slide the caret right in step so they never collide */
ul.wp-block-navigation__container li.wp-block-navigation-item:hover > .wp-block-navigation__submenu-icon {
    transform: translateX(7px) scale(1.05);
}

/* dropdown panel: white rounded card, purple links (desktop only) */
@media (min-width: 769px) {
    .bmg-header-nav-row .wp-block-navigation .wp-block-navigation__submenu-container {
        background: var(--white);
        border: none;
        border-radius: 12px;
        box-shadow: 0 10px 25px #00000033;
        padding: 24px;
        min-width: 280px !important;
    }
}

/* dropdown title: a repeat of the parent label as a heading, non-clickable */
.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__submenu-container .bmg-submenu-title .wp-block-navigation-item__content {
    color: var(--primary-dk);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.04em;
    text-transform: none;
    padding: 0 0 14px;
    cursor: default;
}

/* Two columns once a menu is long enough to warrant them (title + 5+ links).
   Multi-column (not grid) so links fill the first column top-to-bottom before
   starting the second, matching the comp. Core makes the container a flex
   column, which would make column-count a no-op — hence display:block.
   Scoped to >=769px: below that core swaps the dropdown for the stacked
   overlay, where columns would be wrong. */
@media (min-width: 769px) {
    .bmg-header-nav-row .wp-block-navigation .wp-block-navigation__submenu-container:has(> li:nth-child(6)) {
        display: block;
        column-count: 2;
        column-gap: 48px;
        min-width: 480px !important;
    }

    .bmg-header-nav-row .wp-block-navigation .wp-block-navigation__submenu-container li.wp-block-navigation-item {
        break-inside: avoid;
    }

    /* Title and CTA sit above/below the columns, full width */
    .bmg-header-nav-row .wp-block-navigation .wp-block-navigation__submenu-container .bmg-submenu-title,
    .bmg-header-nav-row .wp-block-navigation .wp-block-navigation__submenu-container .bmg-submenu-cta {
        column-span: all;
    }
}

/* join-now pill at the bottom of the membership dropdown */
.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-button.bmg-submenu-cta {
    margin-top: 18px;
}

/* Right-align the trailing nav dropdowns so they open leftward and stay
   on-screen (keeps scrollWidth at 1440 alongside the wrapper's overflow-x:clip). */
.bmg-header-nav-row .wp-block-navigation > .wp-block-navigation-item.has-child:nth-last-child(-n + 2) > .wp-block-navigation__submenu-container {
    left: auto;
    right: 0;
}

/* Third level (Programs → Sports → Basketball). Core opens the flyout at
   left:100% / top:-1px of its parent item, i.e. inside the parent card's 24px
   padding — push it out so the two cards sit edge to edge, and lift it by the
   panel padding so the flyout's first link lines up with the item it came from.
   Scoped to >=769px like the column rule above: below that core swaps the
   dropdown for the stacked overlay, where the offset would just push the nested
   card past its parent's right edge. */
@media (min-width: 769px) {
    .bmg-header-nav-row .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
        top: -24px;
        margin-left: 24px;
    }
}

/* Carets inside white dropdown container (sub-menu within a sub-menu):
   filter white icon to purple-dk and position closer to the label end */
.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
    filter: var(--purple-dk-filter) !important;
    margin-left: 4px !important;
}

.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle {
    padding-right: 14px;
    margin-right: -14px;
}

.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: var(--primary-dk);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    text-transform: none;
    padding: 6px 0;
}

/* Hover styles */
ul.wp-block-navigation__container li.wp-block-navigation-item:hover > .wp-block-navigation-item__content,
ul.wp-block-navigation__container li.wp-block-navigation-item button.wp-block-navigation-item__content,
ul.wp-block-navigation__container li.wp-block-navigation-item .wp-block-navigation__submenu-icon,
ul.wp-block-navigation__container li.wp-block-navigation-item .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content {
    transform-origin: left center;
    transition: all 0.2s ease-in-out;
}

ul.wp-block-navigation__container li.wp-block-navigation-item:hover > .wp-block-navigation-item__content,
ul.wp-block-navigation__container li.wp-block-navigation-item:hover button.wp-block-navigation-item__content,
ul.wp-block-navigation__container li.wp-block-navigation-item .wp-block-navigation__submenu-container .wp-block-navigation-item:hover .wp-block-navigation-item__content {
    transform: scale(1.05);
}

/* the dropdown title is a heading, not a link — no hover affordance */
ul.wp-block-navigation__container li.bmg-submenu-title:hover > .wp-block-navigation-item__content {
    transform: none;
}

/* Clip the hover scale on LEAF dropdown items only. An item that owns a
   third-level submenu (Programs → Sports → Basketball) has to stay
   overflow:visible or its flyout is clipped away and never appears on desktop
   — mobile's stacked overlay is unaffected, so the bug hides on phones. */
ul.wp-block-navigation__container li.wp-block-navigation-item .wp-block-navigation__submenu-container .wp-block-navigation-item:not(.has-child) {
    overflow: hidden;
}

ul.wp-block-navigation__container li.wp-block-navigation-item .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child {
    overflow: visible;
}

/*mobile close button*/
.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
    margin: 20px;
}

/* ----------------------------- */
/* Editor parity (editor renders the part without the front-end body chrome) */

.editor-styles-wrapper .bmg-header-nav-row {
    background: var(--purple-md);
}

.editor-styles-wrapper .bmg-header-site-name a {
    color: var(--white);
}

/* ----------------------------- */
/* Below desktop */

@media (max-width: 1100px) {
    .bmg-header-top {
        padding: 12px 20px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .bmg-header-nav-row > .wp-block-navigation {
        padding: 8px 20px;
    }

    .bmg-header-nav-row .wp-block-navigation {
        column-gap: 40px;
    }
}

/* ----------------------------- */
/* Mobile overlay: Structured section cards & accordion layout */

.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
    padding: 60px 20px 120px !important;
    box-sizing: border-box;
    background-color: #f4f3f8 !important;
}

.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 0;
    align-items: stretch !important;
    text-align: left !important;
}

.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
    gap: 30px;
    text-align: left !important;
}

/* Each main category becomes a structured card container */
.bmg-header-nav-row
    .wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    > .wp-block-navigation__responsive-container-content
    > .wp-block-navigation__container
    > .wp-block-navigation-item {
    background: var(--white) !important;
    border: 1px solid rgba(92, 45, 145, 0.12) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    padding: 16px 18px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: left !important;
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
}

/* Category header title */
.bmg-header-nav-row
    .wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    > .wp-block-navigation__responsive-container-content
    > .wp-block-navigation__container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
    color: var(--purple-dk) !important;
    font-family: var(--font-heading) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    text-align: left !important;
}

.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
    color: var(--purple-dk) !important;
    text-align: left !important;
}

/* Caret indicator */
/* Caret indicator */
.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
    filter: brightness(0) !important;
}

/* Submenu container inside category card */
.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 10px 0 0 0 !important;
    min-width: 0 !important;
    margin: 10px 0 0 0 !important;
    border-top: 1px solid rgba(92, 45, 145, 0.08) !important;
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
    gap: 4px;
    text-align: left !important;
}

/* Submenu link items */
.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: var(--purple-dk) !important;
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    display: block !important;
    text-align: left !important;
    transition: background 0.15s ease;
}

.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    transform: none !important;
}

.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background: rgba(92, 45, 145, 0.06) !important;
    transform: none !important;
}

/* 3rd-level submenus (e.g. Sports -> All Sports, Basketball) */
.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
    background: rgba(92, 45, 145, 0.04) !important;
    border-radius: 8px !important;
    padding: 6px 8px !important;
    margin: 6px 0 6px 8px !important;
}

.bmg-header-nav-row
    .wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 6px 10px !important;
}

/* CTA button (e.g. JOIN NOW in Membership card) */
.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .bmg-submenu-cta {
    margin-top: 12px !important;
    margin-left: 0 !important;
    width: 100% !important;
}

.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .bmg-submenu-cta .wp-block-button__link {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background: var(--primary-lt) !important;
    color: var(--black) !important;
    font-family: var(--font-heading) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 12px 20px !important;
    border-radius: 999px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 174, 239, 0.25) !important;
}

/* Close button positioning */
.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute;
    top: 20px;
    right: 20px;
    margin: 0;
    padding: 10px;
    color: var(--purple-dk) !important;
    background: var(--white) !important;
    border: 1px solid rgba(92, 45, 145, 0.15) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* The dropdown title repeats its parent label. On desktop that's the panel's
   heading; in the overlay the real label sits directly above it, so hide it. */
.bmg-header-nav-row .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .bmg-submenu-title {
    display: none;
}

/* ----------------------------- */
/* Phone: comp puts the whole header on ONE dark-purple band — brand left,
   hamburger right, no magenta strip and no utility cluster. The wrapper's two
   children (.bmg-header-top, .bmg-header-nav-row) already sit in that source
   order, so flexing the wrapper is the entire layout change: no absolute
   positioning, no second nav, no mobile-only template part. Core collapses the
   nav below 600px on its own, so the nav row contributes just the toggle. */

@media (max-width: 768px) {
    .bmg-header-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 20px;
    }

    .bmg-header-top {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .bmg-header-nav-row .wp-block-navigation .wp-block-navigation-item__content {
        margin: 0 !important;
    }

    /* Login / search / Join Now move to the fixed bottom bar (parts/mobile-nav.html).
       !important: the group renders is-layout-flex, and core's generated
       .wp-container-…-is-layout-flex { display:flex } is same-specificity but
       printed after this file, so it otherwise wins. display is not a
       client-editable property, so this is not a WYSIWYG fight. */
    .bmg-header-utility {
        display: none !important;
    }

    /* display:contents drops the magenta box so the bar reads as one purple band
       without overriding the client's backgroundColor pick; the collapsed nav
       becomes a direct flex item of the wrapper. */
    .bmg-header-nav-row {
        display: contents;
    }

    /* the row's constrained layout puts margin:auto on its child — as a flex item
       that auto margin would eat the space-between free space */
    .bmg-header-nav-row > .wp-block-navigation {
        flex: 0 0 auto;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* Ensure navigation toggle button displays and horizontal links hide on screens <= 768px */
    .bmg-header-nav-row .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex !important;
    }

    .bmg-header-nav-row .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none !important;
    }

    /* 3-bar icon from the comp, replacing core's default hamburger SVG */
    .wp-block-navigation__responsive-container-open svg {
        display: none;
    }

    .wp-block-navigation__responsive-container-open::before {
        content: "";
        display: inline-block;
        width: 30px;
        height: 25px;
        background: url(../../icons/menu_toggle_icon.png) center / contain no-repeat;
        filter: brightness(0) invert(1);
        pointer-events: none;
    }
}