/**
 * Navigation Focus Outline Fix
 *
 * Removes blue outline from WordPress navigation blocks when clicked with mouse,
 * but maintains accessibility for keyboard navigation.
 *
 * Issue: WordPress core/navigation blocks show browser default blue outline
 * on all clicks due to data-wp-interactive focus management.
 *
 * @package eRide
 * @version 1.0.2
 * @date 2026-01-04
 */

/* Global aggressive fix - remove all focus outlines except keyboard */
*:focus {
    outline: 0 !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Re-enable for keyboard navigation only */
*:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary, var(--color-primary)) !important;
    outline-offset: 2px !important;
}

/* Nuclear option - force remove outline on everything */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
div:focus,
span:focus,
li:focus,
[role]:focus {
    outline: 0 !important;
    outline-width: 0 !important;
    box-shadow: none !important;
}

/* Remove focus outline for mouse clicks on navigation items */
.wp-block-navigation-item:focus:not(:focus-visible),
.wp-block-navigation-item a:focus:not(:focus-visible),
.wp-block-navigation-item button:focus:not(:focus-visible),
.wp-block-navigation-item__content:focus:not(:focus-visible),
.wp-block-navigation-submenu:focus:not(:focus-visible),
.wp-block-navigation__submenu-icon:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove outline on active/click state */
.wp-block-navigation-item:active,
.wp-block-navigation-item a:active,
.wp-block-navigation-item button:active,
.wp-block-navigation-item__content:active,
.wp-block-navigation__submenu-icon:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Keep focus outline for keyboard navigation (accessibility) */
.wp-block-navigation-item:focus-visible,
.wp-block-navigation-item a:focus-visible,
.wp-block-navigation-item button:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary, var(--color-primary)) !important;
    outline-offset: 2px !important;
}

/* Specifically target items with data-wp-interactive (WordPress core navigation) */
[data-wp-interactive="core/navigation"] .wp-block-navigation-item:focus:not(:focus-visible),
[data-wp-interactive="core/navigation"] .wp-block-navigation-item__content:focus:not(:focus-visible),
[data-wp-interactive="core/navigation"] button:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove tap highlight on mobile for navigation */
.wp-block-navigation-item,
.wp-block-navigation-item a,
.wp-block-navigation-item__content,
.wp-block-navigation__submenu-icon {
    -webkit-tap-highlight-color: transparent;
}

/* Primary menu specific fixes */
nav.primary-menu .wp-block-navigation-item:focus:not(:focus-visible),
nav.primary-menu .wp-block-navigation-item a:focus:not(:focus-visible),
nav.primary-menu .wp-block-navigation-item__content:focus:not(:focus-visible) {
    outline: none !important;
}

/* Top bar navigation fixes */
.top-bar-nav .wp-block-navigation-item:focus:not(:focus-visible),
.top-bar-nav .wp-block-navigation-item a:focus:not(:focus-visible) {
    outline: none !important;
}

/**
 * Mobile Menu Submenu Toggle Fix
 *
 * Issue: Nested submenu items (2nd level+) cannot be expanded on mobile.
 * Cause: WordPress core sets z-index: 1 on .wp-block-navigation-item__content,
 *        causing the link to render on top of the absolutely-positioned toggle button.
 * Fix: Give the submenu toggle a higher z-index so it's clickable.
 *
 * @version 1.0.2
 * @date 2026-01-04
 */
.mobile-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle {
    z-index: 2;
}