/* Nova effect: menu-modern-nav — pill nav items, hover spotlight, animated underline, active glow, polished dropdown/mobile menu. */
/* Header-scoped: a footer nav pattern renders core/navigation with the very same classes. `:where`
 * contributes no specificity, unlike a bare `header ` prefix, so the notes below stay accurate —
 * and unlike @scope it needs nothing newer than CSS nesting. */
:where(header) {
    .wp-block-navigation {
        position: relative;
        gap: var(--wp--preset--spacing--20, 8px);
    }

    .wp-block-navigation-item__content {
        position: relative;
        padding: 11px 18px;
        border-radius: 14px;
        transition: transform 0.25s ease;
    }

    .wp-block-navigation-item__content:hover {
        transform: translateY(-2px);
    }

    /* .wp-block-navigation__submenu-icon's own padding:0 rule needs matching specificity to override. */
    .wp-block-navigation .wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle {
        padding-right: 18px;
    }

    .wp-block-navigation-item__content::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 2px;
        width: 0;
        height: 2px;
        border-radius: 20px;
        background: currentColor;
        transform: translateX(-50%);
        transition: width 0.25s ease;
    }

    .wp-block-navigation-item__content:hover::after {
        width: 55%;
    }

    .current-menu-item > .wp-block-navigation-item__content,
    .wp-block-navigation-item.current-menu-item > a {
        background: color-mix(in srgb, currentColor 12%, transparent);
        box-shadow: var(
            --wp--preset--shadow--glow,
            0 0 16px 0 color-mix(in srgb, currentColor 35%, transparent)
        );
    }

    .current-menu-item > .wp-block-navigation-item__content::after,
    .wp-block-navigation-item.current-menu-item > a::after {
        width: 55%;
    }

    .wp-block-navigation-item__content:focus-visible,
    .wp-block-navigation-submenu__toggle:focus-visible,
    .wp-block-navigation__responsive-container-open:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }

    /* Positioned/sized by menu-modern-nav.js on hover. */
    .nova-menu-spotlight {
        position: absolute;
        top: 0;
        height: 100%;
        border-radius: 14px;
        background-color: color-mix(in srgb, currentColor 10%, transparent);
        opacity: 0;
        pointer-events: none;
        transition:
            transform 200ms ease,
            width 200ms ease,
            opacity 150ms ease;
        z-index: 0;
    }

    .nova-menu-spotlight.is-nova-visible {
        opacity: 1;
    }

    .wp-block-navigation-item {
        position: relative;
        z-index: 1;
    }

    /* Ancestor-chained to tie core's own (0,3,0) `background-color: inherit` rule and win on source
     * order; a plain .submenu-container selector (0,1,0) would need !important. */
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
        padding: 12px;
        border-radius: 18px;
        overflow: hidden;
        border: none;
        box-shadow: var(--wp--preset--shadow--elevated, 0 15px 40px rgba(0, 0, 0, 0.12));
        background: color-mix(in srgb, var(--wp--preset--color--base, #fff) 95%, transparent);
        backdrop-filter: blur(12px);
    }

    .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        padding: 10px 16px;
    }

    .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
        background: color-mix(in srgb, currentColor 14%, transparent);
    }

    .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
        transform: translateY(-6px) scale(0.96);
        transition:
            opacity 0.2s ease,
            transform 0.2s ease,
            visibility 0.2s;
    }

    @media (hover: hover) {
        .wp-block-navigation
            .has-child:not(.open-on-click):hover
            > .wp-block-navigation__submenu-container {
            transform: translateY(0) scale(1);
        }
    }

    .wp-block-navigation
        .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within
        > .wp-block-navigation__submenu-container,
    .wp-block-navigation
        .has-child
        .wp-block-navigation-submenu__toggle[aria-expanded='true']
        ~ .wp-block-navigation__submenu-container {
        transform: translateY(0) scale(1);
    }

    /* Mobile keeps every submenu inline/open regardless of hover/focus, so force the open transform.
     * The elevation has to go with it: core makes every panel position:static and shows them all at
     * once, so the desktop shadow has nothing to lift off and instead bleeds into its neighbours. */
    .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation__responsive-container-content
        .has-child
        .wp-block-navigation__submenu-container {
        transform: translateY(0) scale(1);
        box-shadow: none;
        backdrop-filter: none;
    }

    .wp-block-navigation__responsive-container-open {
        border-radius: 12px;
        padding: 10px 14px;
        background: color-mix(in srgb, currentColor 8%, transparent);
    }

    .wp-block-navigation__responsive-container.is-menu-open {
        animation: nova-menu-fade 0.3s ease;
    }

    /* Mobile stagger, capped at 8 items. */
    .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation__responsive-container-content
        .wp-block-navigation__container
        > .wp-block-navigation-item {
        opacity: 0;
        animation: nova-menu-item-stagger 0.35s ease forwards;
    }

    .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation__responsive-container-content
        .wp-block-navigation__container
        > .wp-block-navigation-item:nth-child(1) {
        animation-delay: 0.05s;
    }
    .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation__responsive-container-content
        .wp-block-navigation__container
        > .wp-block-navigation-item:nth-child(2) {
        animation-delay: 0.1s;
    }
    .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation__responsive-container-content
        .wp-block-navigation__container
        > .wp-block-navigation-item:nth-child(3) {
        animation-delay: 0.15s;
    }
    .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation__responsive-container-content
        .wp-block-navigation__container
        > .wp-block-navigation-item:nth-child(4) {
        animation-delay: 0.2s;
    }
    .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation__responsive-container-content
        .wp-block-navigation__container
        > .wp-block-navigation-item:nth-child(5) {
        animation-delay: 0.25s;
    }
    .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation__responsive-container-content
        .wp-block-navigation__container
        > .wp-block-navigation-item:nth-child(6) {
        animation-delay: 0.3s;
    }
    .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation__responsive-container-content
        .wp-block-navigation__container
        > .wp-block-navigation-item:nth-child(7) {
        animation-delay: 0.35s;
    }
    .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation__responsive-container-content
        .wp-block-navigation__container
        > .wp-block-navigation-item:nth-child(n + 8) {
        animation-delay: 0.4s;
    }

    @media (prefers-reduced-motion: reduce) {
        .wp-block-navigation-item__content,
        .wp-block-navigation-item__content::after,
        .nova-menu-spotlight,
        .wp-block-navigation .has-child .wp-block-navigation__submenu-container,
        .wp-block-navigation__responsive-container.is-menu-open {
            transition: none;
            animation: none;
        }

        /* The item stagger is a separate animation on a nested selector, so the rule above doesn't
         * reach it. */
        .wp-block-navigation__responsive-container.is-menu-open
            .wp-block-navigation__responsive-container-content
            .wp-block-navigation__container
            > .wp-block-navigation-item {
            opacity: 1;
            animation: none;
        }
    }
}

/* Kept at the top level: @keyframes names are global, so nesting them would buy nothing. */
@keyframes nova-menu-fade {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes nova-menu-item-stagger {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}