/* Nova effect: menu-boxed-tabs-nav — each primary-nav item reads as a bordered tab that fills in on
 * hover/active. CSS-only, header-scoped (see menu-modern-nav.css for why :where). */
:where(header) {
    .wp-block-navigation {
        gap: var(--wp--preset--spacing--20, 6px);
    }

    .wp-block-navigation-item__content {
        padding: 10px 16px;
        border-radius: 8px;
        border: 1px solid transparent;
        transition:
            background-color 0.15s ease,
            border-color 0.15s ease;
    }

    .wp-block-navigation-item__content:hover {
        background: color-mix(in srgb, currentColor 8%, transparent);
        border-color: color-mix(in srgb, currentColor 25%, transparent);
    }

    /* Background on the link, never the <li> — core force-hides <li> backgrounds on mobile. */
    .current-menu-item > .wp-block-navigation-item__content,
    .wp-block-navigation-item.current-menu-item > a {
        background: color-mix(in srgb, currentColor 14%, transparent);
        border-color: color-mix(in srgb, currentColor 35%, transparent);
    }

    .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;
    }

    .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
        padding: 8px;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
        box-shadow: var(--wp--preset--shadow--subtle, 0 1px 3px rgba(0, 0, 0, 0.12));
        background: var(--wp--preset--color--base, #fff);
    }

    .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        padding: 8px 14px;
        border-radius: 6px;
    }

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

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

    @media (prefers-reduced-motion: reduce) {
        .wp-block-navigation-item__content {
            transition: none;
        }
    }
}