/*
 * Mobile Menu Theme: Visual Menu 6
 * ─────────────────────────────────────────────────────────────────────────────
 * Bobbi Brown / luxury brand style. Works on BOTH desktop and mobile.
 *
 * Desktop: full-width dropdown with text links on left. Active nav item
 * gets underline indicator. Clean, minimal, pairs well with dark nav bars.
 *
 * Mobile: full-screen takeover with large uppercase nav items.
 * Accordion expand for submenus. Dark-theme friendly via WP color support.
 * ─────────────────────────────────────────────────────────────────────────────
 */

@media (min-width: 783px) {

    .msk-mobile-menu-wrapper[data-msk-menu-theme="visual-menu-6"] {
        position: absolute;
        top: var(--msk-visual-menu-top, 80px);
        inset-inline-start: 0;
        inset-inline-end: 0;
        inline-size: auto;
        background: var(--msk-color-surface);
        border-block-end: 1px solid var(--msk-color-border);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        z-index: var(--msk-z-dropdown);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: var(--msk-space-8) var(--msk-space-10) var(--msk-space-10);

        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition:
            opacity    var(--msk-duration-normal) var(--msk-ease-out),
            visibility var(--msk-duration-normal) var(--msk-ease-out),
            transform  var(--msk-duration-normal) var(--msk-ease-out);
    }

    .msk-mobile-menu-wrapper[data-msk-menu-theme="visual-menu-6"].is-active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    [data-msk-menu-theme="visual-menu-6"] .msk-visual-menu-panel__header {
        display: none;
    }

    [data-msk-menu-theme="visual-menu-6"] .msk-mobile-navigation {
        padding: 0;
    }

    /* Category heading */
    [data-msk-menu-theme="visual-menu-6"] .wp-block-navigation__container {
        display: block;
    }

    [data-msk-menu-theme="visual-menu-6"] .wp-block-navigation-item {
        border: none;
    }

    [data-msk-menu-theme="visual-menu-6"] .wp-block-navigation-item__content {
        display: block;
        padding: var(--msk-space-2) 0;
        font-weight: 500;
        font-size: var(--msk-font-size-sm);
        color: var(--msk-color-text-primary);
        transition: color var(--msk-duration-fast) var(--msk-ease-out);
    }

    [data-msk-menu-theme="visual-menu-6"] .wp-block-navigation-item__content:hover {
        color: var(--msk-color-accent);
    }

    /* Submenu visible as plain list */
    [data-msk-menu-theme="visual-menu-6"] .wp-block-navigation__submenu-container {
        display: block;
        position: static;
        background: transparent;
        box-shadow: none;
        padding: 0;
        min-width: auto;
    }

    [data-msk-menu-theme="visual-menu-6"] .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after {
        display: none;
    }

    .msk-mobile-menu--visual-menu-6 .msk-mobile-menu-overlay {
        display: none;
    }

    [data-msk-menu-theme="visual-menu-6"] .msk-mobile-menu-close {
        display: none;
    }
}

@media (max-width: 782px) {

    .msk-mobile-menu-wrapper[data-msk-menu-theme="visual-menu-6"] {
        position: fixed;
        inset: 0;
        background: var(--msk-color-surface);
        z-index: var(--msk-z-modal);
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 0;
        visibility: hidden;
        transition:
            opacity    var(--msk-duration-normal) var(--msk-ease-out),
            visibility var(--msk-duration-normal) var(--msk-ease-out);
    }

    .msk-mobile-menu-wrapper[data-msk-menu-theme="visual-menu-6"].is-active {
        opacity: 1;
        visibility: visible;
    }

    [data-msk-menu-theme="visual-menu-6"] .msk-visual-menu-panel__header {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: var(--msk-space-4) var(--msk-space-6);
        border-block-end: 1px solid var(--msk-color-border);
    }

    [data-msk-menu-theme="visual-menu-6"] .msk-visual-menu-panel__category {
        display: none;
    }

    [data-msk-menu-theme="visual-menu-6"] .msk-mobile-menu-close {
        font-size: 28px;
        color: var(--msk-color-text-muted);
    }

    [data-msk-menu-theme="visual-menu-6"] .msk-mobile-navigation {
        padding: var(--msk-space-6);
    }

    /* Large uppercase items */
    [data-msk-menu-theme="visual-menu-6"] .wp-block-navigation-item {
        border: none;
    }

    [data-msk-menu-theme="visual-menu-6"] .wp-block-navigation-item__content {
        display: block;
        padding: var(--msk-space-3) 0;
        font-size: var(--msk-font-size-lg);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: var(--msk-tracking-wide);
        color: var(--msk-color-text-primary);
    }

    [data-msk-menu-theme="visual-menu-6"] .wp-block-navigation-item__content:hover {
        color: var(--msk-color-accent);
    }

    /* Accordion arrows */
    [data-msk-menu-theme="visual-menu-6"] .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after {
        content: "\25BC";
        float: inline-end;
        font-size: 10px;
        color: var(--msk-color-text-muted);
        transition: transform var(--msk-duration-fast) var(--msk-ease-out);
        line-height: 2.5;
    }

    [data-msk-menu-theme="visual-menu-6"] .wp-block-navigation-item.has-child.is-open > .wp-block-navigation-item__content::after {
        transform: rotate(180deg);
    }

    /* Expanded submenu */
    [data-msk-menu-theme="visual-menu-6"] .wp-block-navigation__submenu-container {
        padding-inline-start: 0;
        padding-block-end: var(--msk-space-4);
    }

    [data-msk-menu-theme="visual-menu-6"] .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        font-size: var(--msk-font-size-base);
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
        padding: var(--msk-space-3) 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .msk-mobile-menu-wrapper[data-msk-menu-theme="visual-menu-6"] {
        transition: none;
    }
}