/*
 * Mobile Menu — Base (shared across all themes)
 * ─────────────────────────────────────────────────────────────────────────────
 * Hides WP's default mobile nav, defines the hamburger toggle, navigation
 * item layout, submenu logic, overlay base, and reduced-motion rules.
 *
 * Always loaded alongside a theme-specific CSS file.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Hide WP's built-in mobile nav (mobile-only themes) ───────────────────── */

@media (max-width: 782px) {
    .has-msk-mobile-menu:not([class*="msk-mobile-menu--visual-menu-"]) .wp-block-navigation__responsive-container-open,
    .has-msk-mobile-menu:not([class*="msk-mobile-menu--visual-menu-"]) .wp-block-navigation__responsive-container-close,
    .has-msk-mobile-menu:not([class*="msk-mobile-menu--visual-menu-"]) .wp-block-navigation__responsive-container {
        display: none;
    }

    .has-msk-mobile-menu:not([class*="msk-mobile-menu--visual-menu-"]) .wp-block-navigation:not(.msk-mobile-navigation) .wp-block-navigation__container {
        display: none;
    }
}

/* ── Hide WP's built-in dropdowns (visual menus — all breakpoints) ─────────── */
/* Visual menu themes replace WP's default dropdowns with their own system.    */

[class*="msk-mobile-menu--visual-menu-"] .wp-block-navigation__responsive-container-open,
[class*="msk-mobile-menu--visual-menu-"] .wp-block-navigation__responsive-container-close,
[class*="msk-mobile-menu--visual-menu-"] .wp-block-navigation__responsive-container {
    display: none;
}

[class*="msk-mobile-menu--visual-menu-"] .wp-block-navigation__submenu-container {
    display: none;
}

@media (max-width: 782px) {
    [class*="msk-mobile-menu--visual-menu-"] .wp-block-navigation:not(.msk-mobile-navigation) .wp-block-navigation__container {
        display: none;
    }
}

/* ── Toggle Button ────────────────────────────────────────────────────────── */

.msk-mobile-menu-toggle {
    display: none;
    align-items: center;
    gap: var(--msk-space-2);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--msk-space-3);
    color: currentColor;
    z-index: var(--msk-z-sticky);
    margin-inline-start: auto;
}

.msk-mobile-menu-toggle .msk-hamburger {
    display: flex;
    flex-direction: column;
    inline-size: 26px;
    block-size: 20px;
    justify-content: space-between;
}

.msk-mobile-menu-toggle .msk-hamburger span {
    display: block;
    block-size: 3px;
    inline-size: 100%;
    background-color: currentColor;
    border-radius: 2px;
    transition: transform var(--msk-duration-normal) var(--msk-ease-out),
                opacity   var(--msk-duration-normal) var(--msk-ease-out);
}

.msk-mobile-menu-toggle.is-active .msk-hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.msk-mobile-menu-toggle.is-active .msk-hamburger span:nth-child(2) {
    opacity: 0;
}

.msk-mobile-menu-toggle.is-active .msk-hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

.msk-mobile-menu-toggle .msk-menu-label {
    font-size: var(--msk-font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--msk-tracking-wide);
}

@media (max-width: 782px) {
    .msk-mobile-menu-toggle {
        display: flex;
    }
}

/* ── Overlay ──────────────────────────────────────────────────────────────── */

.msk-mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: calc(var(--msk-z-modal) - 1);
    transition: opacity var(--msk-duration-normal) var(--msk-ease-out);
}

.msk-mobile-menu-overlay.is-active {
    display: block;
}

/* ── Navigation Items ─────────────────────────────────────────────────────── */

.msk-mobile-navigation .wp-block-navigation__container {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.msk-mobile-navigation .wp-block-navigation-item {
    display: block;
}

.msk-mobile-navigation .wp-block-navigation-item__content,
.msk-mobile-navigation .wp-block-pages-list__item__link {
    display: block;
    text-decoration: none;
    transition: color var(--msk-duration-fast) var(--msk-ease-out);
}

/* Active state */
.msk-mobile-navigation .current-menu-item > .wp-block-navigation-item__content {
    font-weight: 600;
}

/* ── Submenus ─────────────────────────────────────────────────────────────── */

.msk-mobile-navigation .wp-block-navigation__submenu-container {
    display: none;
    position: static;
    background: transparent;
    box-shadow: none;
    min-width: auto;
}

.msk-mobile-navigation .wp-block-navigation-item.is-open > .wp-block-navigation__submenu-container {
    display: block;
}

/* Submenu toggle arrow on parent items */
.msk-mobile-navigation .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after {
    content: "\25BC";
    float: inline-end;
    font-size: 10px;
    transition: transform var(--msk-duration-fast) var(--msk-ease-out);
    line-height: 2;
}

.msk-mobile-navigation .wp-block-navigation-item.has-child.is-open > .wp-block-navigation-item__content::after {
    transform: rotate(180deg);
}

/* Hide arrow on nested submenu items */
.msk-mobile-navigation .wp-block-navigation__submenu-container .has-child > .wp-block-navigation-item__content::after {
    display: none;
}

/* Hide WP's built-in submenu toggle button */
.msk-mobile-navigation .wp-block-navigation-submenu__toggle,
.msk-mobile-navigation .wp-block-navigation__submenu-icon {
    display: none;
}

/* ── Close Button Base ────────────────────────────────────────────────────── */

.msk-mobile-menu-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    padding: var(--msk-space-1);
    line-height: 1;
    transition: color var(--msk-duration-fast) var(--msk-ease-out);
}

/* ── Reduced Motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-mobile-menu-wrapper,
    .msk-mobile-menu-toggle .msk-hamburger span,
    .msk-mobile-menu-overlay {
        transition: none;
    }
}