/*
 * Zero to One - SP Drawer (mobile navigation overlay) override
 * ------------------------------------------------------------------
 * Full-screen drawer that slides in from the right, with a centered,
 * large, tap-friendly menu and accordion sub menus.
 *
 * Loaded AFTER we-blocks.css (depends on the `we-block` handle) so that
 * these rules win by source order without editing the minified build.
 * All rules are scoped to `.is-menu-open`, which only exists while the
 * mobile overlay is open, so the desktop (hover) menu is untouched.
 * The accordion open/close is driven by assets/js/drawer.js, which adds
 * the `wb-submenu-open` class to each `.has-child` list item.
 */

/* ---------------------------------------------------------------- *
 * Overlay container: full screen + slide in from the right
 * ---------------------------------------------------------------- */
/* Mobile: keep the overlay rendered (WP hides it with display:none) so it
 * can slide BOTH ways. It sits off-canvas to the right - invisible and
 * non-interactive - until `.is-menu-open`. Scoped to the overlay breakpoint
 * (WP default 600px) so the desktop menu is completely untouched. */
@media (max-width: 599.98px) {
    .c-nav1 .wp-block-navigation__responsive-container {
        display: flex !important;
        position: fixed;
        inset: 0;
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        will-change: transform;
        transition: transform .32s cubic-bezier(.22, .61, .36, 1),
                    opacity .32s ease,
                    visibility 0s linear .32s;   /* hide only after sliding out */
    }

    .c-nav1 .wp-block-navigation__responsive-container.is-menu-open {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: transform .32s cubic-bezier(.22, .61, .36, 1),
                    opacity .32s ease,
                    visibility 0s;               /* show immediately, then slide in */
    }
}

@media (max-width: 599.98px) and (prefers-reduced-motion: reduce) {
    .c-nav1 .wp-block-navigation__responsive-container,
    .c-nav1 .wp-block-navigation__responsive-container.is-menu-open {
        transition-duration: .01ms;
    }
}

/* Inner layout while open (this state only ever exists on mobile) */
.c-nav1 .wp-block-navigation__responsive-container.is-menu-open {
    align-items: center;        /* center the dialog horizontally */
    justify-content: center;    /* center the dialog vertically   */
    overflow-y: auto;
    padding-top: 4.5rem !important;   /* room for the close button */
    padding-bottom: 2rem !important;
}

/* Dialog + content wrapper: take the full width and center the menu */
.c-nav1 .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog {
    width: 100%;
}

.c-nav1 .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
    width: 100%;
    margin: auto;                 /* vertical + horizontal centering */
    align-items: center;
    padding-top: 0 !important;
}

/* ---------------------------------------------------------------- *
 * Main menu list: single centered column, generous spacing
 * ---------------------------------------------------------------- */
.c-nav1 .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;   /* cancel the old grid layout */
    align-items: center !important;
    justify-content: center;
    gap: .25rem !important;
    width: min(90%, 30rem);
    margin-inline: auto;
    text-align: center;
}

.c-nav1 .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item {
    width: 100%;
    align-items: center;
    border: 0 !important;
}

/* Top-level menu link: big + tappable + centered */
.c-nav1 .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.25rem;          /* ~52px tap target */
    padding: .75rem 1rem !important;
    font-size: clamp(1.25rem, 6vw, 1.75rem);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    background-color: transparent !important;
    transition: background-color .2s ease;
}

.c-nav1 .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation-item__content:hover,
.c-nav1 .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation-item__content:focus {
    background-color: hsla(0, 0%, 100%, .12) !important;
}

/* Remove the small left-pointing triangle used by the old design */
.c-nav1 .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation-item__content::before {
    content: none !important;
    display: none !important;
}

/* ---------------------------------------------------------------- *
 * Accordion sub menus (driven by drawer.js on mobile)
 * ---------------------------------------------------------------- */

/* Chevron indicator on items that have a sub menu */
.c-nav1 .is-menu-open.wp-block-navigation__responsive-container .has-child > .wp-block-navigation-item__content {
    position: relative;
}

.c-nav1 .is-menu-open.wp-block-navigation__responsive-container .has-child > .wp-block-navigation-item__content::after {
    content: "";
    display: inline-block;
    width: .55em;
    height: .55em;
    margin-left: .6em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-.15em) rotate(45deg);   /* chevron pointing down */
    transition: transform .25s ease;
    opacity: .8;
}

.c-nav1 .is-menu-open.wp-block-navigation__responsive-container .has-child.wb-submenu-open > .wp-block-navigation-item__content::after {
    transform: translateY(.1em) rotate(-135deg);    /* chevron pointing up */
}

/* Keep the default WP sub-menu icon hidden (we use the chevron above) */
.c-nav1 .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__submenu-icon {
    display: none !important;
}

/* Collapse the sub menu by default; drawer.js sets max-height inline on open */
.c-nav1 .is-menu-open.wp-block-navigation__responsive-container .has-child > .wp-block-navigation__submenu-container {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .3s ease, opacity .3s ease;
}

.c-nav1 .is-menu-open.wp-block-navigation__responsive-container .has-child.wb-submenu-open > .wp-block-navigation__submenu-container {
    opacity: 1;
    /* max-height is set inline by drawer.js to the exact content height */
}

/* Sub-menu items: a touch smaller than the parents, still tappable */
.c-nav1 .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item {
    width: 100%;
    border: 0 !important;
}

.c-nav1 .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    min-height: 2.75rem;
    padding: .5rem 1rem !important;
    font-size: clamp(1rem, 4.5vw, 1.25rem);
    font-weight: 500;
    border: 0 !important;
}

/* Neutralise the old hover overlay markers inside sub menus */
.c-nav1 .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item::after {
    display: none !important;
}