/* EDITOR STYLES */
.block-editor-block-list__block .bmg-sidebar-template-part {
    position: fixed;
    top: 0;
    z-index: 1000;
    bottom: unset;
}

/*header*/

.bmg-header-mobile-template-part {
    display: none;
}

@media (max-width: 992px) {

    /* Swap desktop sidebar/header-top → mobile header */
    .bmg-header-top-template-part {
        display: none;
    }

    .bmg-sidebar-column {
        display: none;
    }

    .bmg-header-mobile-template-part {
        display: block;
    }
}

/* Mobile header menu toggle: match desktop hamburger (no X swap). */
.bmg-header-mobile-template-part .wp-block-navigation__responsive-container-open {
    background: none;
    border: none;
    padding: 0;
    min-width: auto;
    min-height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 30px;
    height: 25px !important;
}

.bmg-header-mobile-template-part .wp-block-navigation__responsive-container-open svg {
    display: none;
}

.bmg-header-mobile-template-part .wp-block-navigation__responsive-container-open::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../../icons/menu_toggle_icon.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* render icon white */
    filter: brightness(0) saturate(100%) invert(1);
    pointer-events: none;
}

.bmg-header-mobile-template-part .wp-block-navigation__responsive-container-open::after {
    content: none !important;
}

/* Mobile header: keep toggle right-aligned, but center the opened menu content */
.bmg-header-mobile-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Match what works in DevTools: center-align the overlay's flex children */
.bmg-header-mobile-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
.bmg-header-mobile-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.bmg-header-mobile-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
    align-items: center;
    text-align: center;
}

.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;
}

/* ------------------------------------ */
/* SIDEBAR (page template left rail) */

.admin-bar .bmg-sidebar {
    top: 32px;
}

.bmg-sidebar {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100px;
    top: 0;
    z-index: 1000;
}

/* When the sidebar menu overlay is open, remove the sidebar shadow. */
body.bmg-sidebar-menu-open .bmg-sidebar {
    box-shadow: none !important;
}

/*
 * Core Navigation block overlay ("responsive container") is a full-viewport fixed modal.
 * In the sidebar we still want it, but we want the fixed chrome (sidebar + sticky header)
 * to stay on top of it.
 */
.bmg-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open {
    /* below `.bmg-sidebar` (1000) and below sticky header (1,000,000) */
    z-index: 900 !important;
    width: 560px;
    padding-top: 23px;
    padding-bottom: 23px;
    padding-left: 45px;

}

/* Sidebar overlay: hide core close button (we use the toggle button as close). */
.bmg-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Sidebar overlay: spacing between top-level items */
.bmg-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    gap: 48px !important;
}

@media (min-width: 600px) {

    .admin-bar .bmg-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open {
        top: 158px !important;
    }

    /* keep the overlay from covering the left rail area */
    .bmg-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open {
        left: 100px !important;
        top: 126px !important;

    }

    /* Desktop: remove core padding on overlay content */
    .bmg-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        padding-top: 0 !important;
    }
}

/* Sidebar overlay submenu behavior (accordion). */
.bmg-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    /* core styles differ by WP version; force a predictable baseline */
    display: none !important;
}

.bmg-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"]~.wp-block-navigation__submenu-container {
    display: block !important;
    padding-left: 0 !important;
}

/* Sidebar overlay submenu arrow: attach to the TOGGLE button (aria-expanded flips here). */
.bmg-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
    /* we render our arrow on the button instead */
    display: none !important;
}

.bmg-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
    width: 100%;
    position: relative;
}

/* Attach arrow to the LABEL so it doesn't "drift" with full-width button layout. */
.bmg-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.bmg-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label::after {
    content: "";
    width: 15px;
    height: 8px;
    flex: 0 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url(../../icons/sub_menu_icon.png);
    /* render icon white */
    filter: brightness(0) saturate(100%) invert(1);
    transform: rotate(0deg);
    transition: transform 160ms ease;
}

.bmg-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation-item__label::after {
    transform: rotate(180deg);
}

/* keep logo sized nicely in thin rail */
.bmg-sidebar .ymca-logo img {
    max-width: 70px;
    height: auto;
    display: block;
    margin-inline: auto;
}

/* force the nav to be a centered "hamburger" control */
.bmg-sidebar .wp-block-navigation__responsive-container-open {
    background: none;
    border: none;
    padding: 0;
    min-width: auto;
    min-height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 30px;
    height: 25px !important;
}

.bmg-sidebar .wp-block-navigation__responsive-container-open svg {
    display: none;
}

.bmg-sidebar .wp-block-navigation__responsive-container-open::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../../icons/menu_toggle_icon.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* render icon white */
    filter: brightness(0) saturate(100%) invert(1);
    opacity: 1;
    transition: opacity 180ms ease;
    pointer-events: none;
    /* keep the button clickable */
}

.bmg-sidebar .wp-block-navigation__responsive-container-open::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../../icons/x_icon.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* render icon white */
    filter: brightness(0) saturate(100%) invert(1);
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: none;
}

/* When menu is open, crossfade hamburger -> X */
.bmg-sidebar-nav .wp-block-navigation__responsive-container-open[aria-expanded="true"]::before {
    opacity: 0;
}

.bmg-sidebar-nav .wp-block-navigation__responsive-container-open[aria-expanded="true"]::after {
    opacity: 1;
}

/* Fallback for setups where aria-expanded isn't present on the open button */
.bmg-sidebar-nav:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open::before {
    opacity: 0;
}

.bmg-sidebar-nav:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open::after {
    opacity: 1;
}

.bmg-sidebar-menu-label {
    line-height: 1;
    cursor: pointer;
}

/*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: brightness(0) saturate(100%) invert(1);
    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;
}

.bmg-header-bottom-row .wp-block-navigation .wp-block-navigation__submenu-icon {
    position: relative;
    width: 15px !important;
    height: 8px !important;
    margin-left: -5px !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 */

.bmg-header-top-row {
    max-height: 260px;
    /* safer buffer */
    overflow: hidden;
    transition:
        opacity 200ms ease,
        padding 260ms ease,
        max-height 160ms cubic-bezier(0.2, 0.8, 0.2, 1) 220ms;
}

.header-scrolled .bmg-header-top-row {
    max-height: 0;
    padding: 0 !important;
}

/*logos*/

/* shared logo animation */
.bmg-header-branding-group .ymca-logo img,
.bmg-header-bottom-row .ymca-logo img {
    transform-origin: left center;
    transition:
        transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 180ms 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;
}

/*tablet*/

@media (max-width: 640px) {

    /*buttons*/
    .bmg-header-button-group {
        display: none !important;
    }
}

/*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;
    }
}