/**
 * Sengeku Nav 3.0 — Apple-Style Mega Menu
 * KEY: position:static trick + :hover/:focus-within
 */

:root {
    --sengeku-nav-panel-bg: var(--wp--preset--color--contrast, #1A1514);
    --sengeku-nav-panel-text: var(--wp--preset--color--base, #D6D2CE);
    --sengeku-nav-panel-text-hover: var(--wp--preset--color--base-2, #E1DFDB);
    --sengeku-nav-panel-border: var(--wp--preset--color--contrast-2, #65574E);
    --sengeku-nav-overlay-bg: var(--wp--preset--color--contrast, #1A1514);
    --sengeku-nav-text: var(--wp--preset--color--base, #D6D2CE);
    --sengeku-nav-text-hover: var(--wp--preset--color--base-2, #E1DFDB);
    --sengeku-nav-text-muted: var(--wp--preset--color--contrast-3, #958D86);
}

/* ═══════════════════════════════════════════════════════════════════
   1. DESKTOP — Fullwidth Mega Panels on Hover
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 783px) {

    /* Parent items: relative so the hover bridge stays on the item,
       but the dropdown escapes via the nav boundary */
    .wp-block-navigation-item.has-child,
    .wp-block-navigation-submenu {
        position: relative !important;
    }

    /* The nav element is the boundary for the dropdown */
    nav.wp-block-navigation {
        position: relative !important;
    }

    /* Dropdown: fixed to viewport, positioned just below the nav */
    .wp-block-navigation .wp-block-navigation__submenu-container {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        /* top is set by JS to position below the nav bar */
        background: var(--sengeku-nav-panel-bg) !important;
        padding: 24px 32px !important;
        margin: 0 !important;
        border: none !important;
        border-top: 1px solid var(--sengeku-nav-panel-border) !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px 40px !important;
        border-radius: 0 !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s ease, visibility 0s 0.25s;
        z-index: 9999;
    }

    /* Show on HOVER + FOCUS-WITHIN */
    .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
    .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
    .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container,
    .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.25s ease, visibility 0s 0s;
    }

    /* Submenu links */
    .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        color: var(--sengeku-nav-panel-text) !important;
        text-decoration: none !important;
        padding: 10px 16px !important;
        border-radius: 6px;
        font-size: 0.95rem;
        transition: background 0.15s ease;
        display: block !important;
        white-space: nowrap;
    }

    .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
        background: rgba(255, 255, 255, 0.08);
        color: var(--sengeku-nav-panel-text-hover) !important;
    }

    /* Parent hover indicator */
    .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content,
    .wp-block-navigation-submenu:hover > .wp-block-navigation-submenu__toggle,
    .wp-block-navigation-submenu:hover > .wp-block-navigation-item__content {
        opacity: 0.7;
    }

    /* Hide WP chevron */
    .wp-block-navigation__submenu-icon {
        display: none !important;
    }

    /* Hover bridge — only as wide as the menu item itself */
    .wp-block-navigation-item.has-child::after,
    .wp-block-navigation-submenu::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 10px;
        z-index: 10000;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   2. MOBILE — Fullscreen Overlay + Accordion
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 782px) {

    .wp-block-navigation__responsive-container.is-menu-open {
        background: color-mix(in srgb, var(--sengeku-nav-overlay-bg) 94%, transparent) !important;
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
    }

    @supports not (background: color-mix(in srgb, red 50%, blue)) {
        .wp-block-navigation__responsive-container.is-menu-open {
            background: rgba(26, 21, 20, 0.94) !important;
        }
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 100vh;
        padding: 80px 24px 40px !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        width: 100%;
        max-width: 400px;
        background: transparent !important;
        color: var(--sengeku-nav-text) !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.has-background {
        background: transparent !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
        width: 100%;
        border-bottom: 1px solid color-mix(in srgb, var(--sengeku-nav-panel-border) 25%, transparent);
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
        border-bottom: none;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100%;
        min-height: 56px;
        padding: 16px 0 !important;
        font-size: 1.35rem !important;
        font-weight: 400 !important;
        color: var(--sengeku-nav-text) !important;
        text-decoration: none !important;
        background: transparent !important;
        border: none !important;
        transition: opacity 0.2s ease;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle:hover {
        opacity: 0.7;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item button {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
        display: none !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        position: static !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .sengeku-submenu-open > .wp-block-navigation__submenu-container {
        display: block !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        font-size: 1.1rem !important;
        min-height: 48px;
        padding: 12px 0 !important;
        color: var(--sengeku-nav-text-muted) !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
        display: none !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
        position: absolute !important;
        top: 16px;
        right: 16px;
        z-index: 10;
        background: transparent !important;
        border: none !important;
        color: var(--sengeku-nav-text) !important;
        width: 44px;
        height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
        fill: var(--sengeku-nav-text) !important;
    }
}

/* View Transitions */
::view-transition-old(root) { animation: sn-out 0.35s ease-in forwards; }
::view-transition-new(root) { animation: sn-in 0.35s ease-out forwards; }
@keyframes sn-out { to { opacity: 0; filter: blur(4px); } }
@keyframes sn-in { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }

@media (prefers-reduced-motion: reduce) {
    .wp-block-navigation .wp-block-navigation__submenu-container,
    .wp-block-navigation__responsive-container * {
        transition: none !important;
        animation: none !important;
    }
}