/*header*/

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

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

.bmg-header-wrapper {
    box-shadow: 1px 1px 10px #00000022;
}

.bmg-header-branding-group a {
    text-decoration: none;
}

/*separator*/

.wp-block-separator.is-style-bmg-white-faint {
    border: none;
    border-bottom-width: 1px;
    opacity: 0.5;
}

/*search*/

/* Search lives in the flow, sized like the icon */
.header-search {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* hide label visually */
.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;
}

/* input is taken OUT of layout */
.header-search .wp-block-search__input {
    position: absolute;
    right: 100%;
    /* opens to the left of the icon */
    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;
}

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

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

/* magnifying glass */
.header-search .wp-block-search__button::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    filter: var(--primary-dk-filter);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("../../icons/search_icon.png");
}

.header-actions {
    display: flex;
    align-items: center;
}

/* Login stays on the left edge */
.header-actions__login {
    margin-right: auto;
    /* pushes everything else away */
}

/* Register hugs the right edge */
.header-actions__register {
    margin-left: auto;
    /* pushes itself to the far right */
}

/* Give the center icon some breathing room */
.header-search {
    margin-inline: 1.5rem;
    /* space between login and icon, icon and register */
}

/*navigation*/

.bmg-header-bottom-row ul.wp-block-navigation__container {
    row-gap: 20px;
}

/* Direct child only — a descendant selector would size every nested submenu
   label off the top-level rule too. */
.bmg-header-bottom-row ul.wp-block-navigation__container > li.wp-block-navigation-item > .wp-block-navigation-item__content {
    padding-block: 8px;
    font-size: 20px;
}

/* Dropdown items — matched to the top-level rule above. Their padding is core's
   em-based 0.5em/1em, so it grows with this font-size on its own. */
.bmg-header-bottom-row .wp-block-navigation__submenu-container > li.wp-block-navigation-item > .wp-block-navigation-item__content {
    font-size: 20px;
}

/* Caret hitbox. openSubmenusOnClick renders the caret as a SIBLING of the
   toggle <button>, and the caret is pointer-events:none — so with the button's
   default padding only ~5px of the caret's 15px overlapped the button box and
   the rest of it was dead. Pad the button out far enough to sit underneath the
   whole caret, then pull the caret back over that padding. Clicks land on the
   button because the caret passes them through. Paired values: the padding must
   stay >= the caret's width + offset, at every level. */
.bmg-header-bottom-row li.has-child > .wp-block-navigation-submenu__toggle {
    padding-right: 30px;
}

.bmg-header-bottom-row .wp-block-navigation .wp-block-navigation__submenu-icon {
    position: relative;
    width: 15px !important;
    height: 8px !important;
    margin-left: -25px !important;
    background: none !important;
}

.bmg-header-bottom-row .wp-block-navigation .wp-block-navigation__submenu-icon::before {
    content: "";
    position: absolute;
    inset: 0;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url(../../icons/sub_menu_icon.png);

    filter: var(--primary-dk-filter);
}

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

/* ----------------- */
/* SCROLLED */

/* Grid-rows collapse (1fr → 0fr) animates to the row's real height — no
   max-height buffer, so open and close both track the scroll state with no
   dead time. .bmg-header-stack prefix outranks WP's generated flex-layout
   class regardless of stylesheet order. */
.bmg-header-stack > .bmg-header-top-row {
    display: grid;
    /* Explicit full-width column — the implicit auto column shrinks to the
       content and the inherited justify-content parks it at the left edge. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr;
    transition:
        grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1),
        padding 300ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 200ms ease;
}

.bmg-header-top-row > .bmg-header-top-row__inner {
    min-height: 0;
    overflow: hidden;
}

/* Only the block padding collapses — zeroing the side padding too made the
   content slide horizontally while it shrank. */
.header-scrolled .bmg-header-top-row {
    grid-template-rows: 0fr;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0;
}

/*logos*/

/* shared logo animation */
.bmg-header-branding-group .ymca-logo img,
.bmg-header-bottom-row .ymca-logo img {
    transform-origin: left center;
    transition:
        transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 200ms ease;
    will-change: transform, opacity;
}

/* TOP logo visible by default */
.bmg-header-branding-group .ymca-logo img {
    transform: scale(1);
    opacity: 1;
}

/* hide top logo on scroll */
.header-scrolled .bmg-header-branding-group .ymca-logo img {
    transform: scale(0.7);
    opacity: 0;
    pointer-events: none;
}

/* bottom logo hidden by default */
.bmg-header-bottom-row .ymca-logo img {
    transform: scale(0.7);
    opacity: 0;
    pointer-events: none;
}

/* show bottom logo on scroll */
.header-scrolled .bmg-header-bottom-row .ymca-logo img {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}

/*scroll detector*/
.bmg-header-sentinel {
    position: absolute;
    top: 100px;
    height: 40px;
    width: 100%;
    opacity: 0;
    z-index: -100;
    pointer-events: none;
}

/* Hover Styles */
/* Direct child only — a descendant selector here scales every nested submenu
   label too (hovering "Programs" would also enlarge "Sports"). */
ul.wp-block-navigation__container li.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 {
    transform: scale(1.05);
}

/* Clips the hover scale to the dropdown box. Skipped on .has-child items —
   their nested flyout is an absolutely-positioned child at left:100% and
   would be clipped out of existence. */
ul.wp-block-navigation__container li.wp-block-navigation-item .wp-block-navigation__submenu-container .wp-block-navigation-item:not(.has-child) {
    overflow: hidden;
}

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

/*tablet*/

@media (max-width: 740px) {

    /*buttons*/
    .bmg-header-button-group .wp-block-group {
        /*FOR NOW:*/
        display: none;
    }
}

/*mobile*/

@media (max-width: 599px) {

    /*container*/
    .wp-block-group.bmg-header {
        display: flex;
        justify-content: space-between;

        padding: 25px 35px;
    }

    /*top row*/
    .wp-block-group.bmg-header-top-row {
        margin: 0 !important;
    }

    /*branding*/
    .bmg-header-branding-group .wp-block-group {
        /* flex-direction: column; */
        /* align-items: start; */
        gap: 20px;

        transition: all 0.35s ease;
    }

    .header-scrolled .bmg-header-branding-group .wp-block-group {
        gap: 0;

        transition: all 0.35s ease;
    }

    .bmg-header-top-row>div {
        padding-top: 0 !important;
    }

    /*separator*/
    .bmg-header .wp-block-separator.is-style-bmg-white-faint {
        display: none;
    }

    /*bottom row*/
    .wp-block-group.bmg-header-bottom-row {
        margin: 0 !important;
        padding-top: 20px;

        justify-content: space-between;
        align-items: center;
    }

    .bmg-header-bottom-row .ymca-logo img {
        width: 60px !important;
    }

    .bmg-header-bottom-row nav {
        justify-content: end;
        padding-right: 20px;
    }

    /*mobile nav*/
    .bmg-header-bottom-row ul.wp-block-navigation__container {
        width: 80%;
        padding: 20px !important;
        gap: 15px !important;
    }

    .bmg-header-bottom-row ul.wp-block-navigation__container li ul {
        padding: 0 !important;
    }

    .bmg-header-bottom-row ul.wp-block-navigation__container li {
        width: 100%;
        align-items: start !important;
        text-align: left;
        justify-content: start;
    }

    /*icon*/
    .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-image: url(../../icons/menu_toggle_icon.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        filter: var(--primary-dk-filter);

        /* keep the button clickable */
        pointer-events: none;
    }

    .bmg-header-bottom-row ul.wp-block-navigation__container li button span {
        font-size: 20px;
        font-weight: 700;
    }

    /*sub menu*/
    .bmg-header-bottom-row ul.wp-block-navigation__container li ul {
        padding-left: 15px !important;
    }

    .bmg-header-bottom-row ul.wp-block-navigation__container li ul li a {
        padding: 10px 0 !important;
        font-weight: 500;
    }
}