/**
 * Accessible Menu Styles
 *
 * Ensures dropdown menus are keyboard accessible with proper visual feedback
 * Complies with WCAG 2.2 Level AA standards
 *
 * @package BFL_Accessibility
 * @author WP-Stars - Valentin Girleanu
 */

/* ============================================
   SubToggler Keyboard Accessibility
   ============================================ */

/**
 * Make subToggler keyboard focusable with visible focus indicator
 * Updated to match accessibility report requirements (black dotted)
 */
.menuPort .subToggler {
    cursor: pointer;
}

.menuPort .subToggler:focus {
    outline: 2px dotted #000000;
    outline-offset: 2px;
}

.menuPort .subToggler:focus-visible {
    outline: 2px dotted #000000;
    outline-offset: 2px;
}

/* ============================================
   Menu Link Focus States
   ============================================ */

/**
 * Enhanced focus indicators for menu links
 * Ensures keyboard users can see which item is focused
 * Updated to match accessibility report requirements (black dotted)
 */
.menuPort nav a:focus,
.menuPort nav a:focus-visible {
    outline: 2px dotted #000000;
    outline-offset: 2px;
    position: relative;
    z-index: 100;
}

/**
 * Focus state for menu items without href (parent items with only dropdowns)
 */
.menuPort nav a[role="button"]:focus,
.menuPort nav a[role="button"]:focus-visible,
.menuPort nav a:not([href]):focus,
.menuPort nav a[href="#"]:focus,
.menuPort nav a[href=""]:focus {
    outline: 2px dotted #000000;
    outline-offset: 2px;
    position: relative;
    z-index: 100;
    cursor: pointer;
}

/**
 * Focus state for submenu items
 */
.menuPort nav .sub-menu a:focus,
.menuPort nav .sub-menu a:focus-visible {
    outline: 2px dotted #000000;
    outline-offset: -2px;
    background-color: rgba(0, 0, 0, 0.05);
}

/* ============================================
   Submenu Visibility for Keyboard Users
   ============================================ */

/**
 * Ensure submenus are visible when parent has focus
 * This allows keyboard users to access dropdown menus
 */
.menuPort nav .menu-item-has-children:focus-within > .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/**
 * Keep submenu visible when any child has focus
 */
.menuPort nav .menu-item-has-children:focus-within {
    position: relative;
}

/**
 * Ensure submenu stays open when navigating with keyboard
 */
.menuPort nav .menu-item-has-children > a:focus + .sub-menu,
.menuPort nav .menu-item-has-children > .subToggler:focus + a + .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Override: prevent focus-within from reopening submenu when aria-expanded is false (fixes mobile + mouse reappearing bug) */
.menuPort nav .menu-item-has-children:focus-within > a[aria-expanded="false"] + .sub-menu,
.menuPort nav .menu-item-has-children:focus-within > .subToggler[aria-expanded="false"] + a + .sub-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


/**
 * Fix gap between main menu and submenu
 * Ensure submenu is positioned directly below parent
 */
.menuPort nav .menu-item-has-children.on > .sub-menu,
.menuPort nav .menu-item-has-children:focus-within > .sub-menu {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/**
 * Ensure submenu appears immediately below parent item
 * without any gap for keyboard navigation
 * Override theme's transform: translateY(50px) for keyboard users
 */
.btMenuHorizontal .menuPort > nav > ul > li.menu-item-has-children:focus-within > .sub-menu,
.btMenuHorizontal .menuPort > nav > ul > li.menu-item-has-children:focus-within > ul {
    top: 100% !important;
    margin-top: 0 !important;
    transform: translateY(0) !important;
}

.btMenuHorizontal .menuPort nav .menu-item-has-children.on > .sub-menu {
    top: 100% !important;
    margin-top: 0 !important;
}

/* ============================================
   Horizontal Menu Specific Styles
   ============================================ */

/**
 * Ensure horizontal menu dropdowns appear correctly for keyboard users
 */
.btMenuHorizontal .menuPort nav .menu-item-has-children:focus-within > .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
}

/**
 * Remove any gap between parent and submenu
 * This ensures smooth keyboard navigation
 */
.btMenuHorizontal .menuPort nav > ul > li.menu-item-has-children > .sub-menu {
    margin-top: 0 !important;
}

/**
 * Ensure submenu appears flush with parent
 */
.menuPort nav .menu-item-has-children > .sub-menu {
    margin-top: 0 !important;
}

/* ============================================
   Vertical Menu Specific Styles
   ============================================ */

/**
 * Ensure vertical menu dropdowns expand correctly for keyboard users
 */
.btMenuVertical .menuPort nav .menu-item-has-children:focus-within > .sub-menu {
    position: relative;
    display: block !important;
}

/* ============================================
   ARIA Expanded State Indicators
   ============================================ */

/**
 * Visual indicator for expanded state
 * Helps users understand menu state
 */
.menuPort nav .menu-item-has-children > a[aria-expanded="true"]::after,
.menuPort nav .menu-item-has-children > .subToggler[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* ============================================
   Skip to Navigation Enhancement
   ============================================ */

/**
 * Ensure navigation is easily accessible via skip link
 */
.menuPort nav {
    position: relative;
}

.menuPort nav:focus {
    outline: none;
}

/* ============================================
   Touch Device Compatibility
   ============================================ */

/**
 * Ensure touch devices still work correctly
 * Don't interfere with existing touch functionality
 */
@media (hover: none) and (pointer: coarse) {
    .menuPort nav .menu-item-has-children:focus-within > .sub-menu {
        /* Let JavaScript handle touch interactions */
        display: none;
    }

    .menuPort nav .menu-item-has-children.on > .sub-menu {
        display: block !important;
    }
}

/* ============================================
   High Contrast Mode Support
   ============================================ */

/**
 * Ensure focus indicators are visible in high contrast mode
 * Updated to match accessibility report requirements (dotted style)
 */
@media (prefers-contrast: high) {
    .menuPort nav a:focus,
    .menuPort nav a:focus-visible,
    .menuPort .subToggler:focus,
    .menuPort .subToggler:focus-visible {
        outline-width: 3px;
        outline-style: dotted;
    }
}

/* ============================================
   Reduced Motion Support
   ============================================ */

/**
 * Respect user's motion preferences
 */
@media (prefers-reduced-motion: reduce) {
    .menuPort nav .sub-menu,
    .menuPort nav .menu-item-has-children {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================
   Screen Reader Only Text
   ============================================ */

/**
 * Helper class for screen reader only content
 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ============================================
   Submenu Positioning Fixes
   ============================================ */

/**
 * Ensure submenus don't get cut off
 */
.menuPort nav .menu-item-has-children {
    position: relative;
}

.menuPort nav .sub-menu {
    z-index: 1000;
}

/**
 * Prevent submenu from being hidden by overflow
 */
.menuPort {
    overflow: visible !important;
}

.menuPort nav {
    overflow: visible !important;
}

/* ============================================
   Focus Trap Prevention
   ============================================ */

/**
 * Ensure users can tab out of menus
 * Prevent focus traps
 */
.menuPort nav .sub-menu li:last-child a:focus {
    /* Allow natural tab order to continue */
}

/* ============================================
   Mobile Menu Accessibility
   ============================================ */

/**
 * Ensure mobile menu trigger is keyboard accessible
 * Updated to match accessibility report requirements (black dotted)
 */
.bt-horizontal-menu-trigger {
    cursor: pointer;
}

.bt-horizontal-menu-trigger:focus,
.bt-horizontal-menu-trigger:focus-visible {
    outline: 2px dotted #000000;
    outline-offset: 2px;
}

/**
 * Make mobile menu trigger keyboard operable
 */
.bt-horizontal-menu-trigger[role="button"] {
    /* Ensure it's treated as a button */
}

/**
 * Vertical menu trigger accessibility
 * Apply focus to entire hamburger icon container including pseudo-elements
 */
.bt-vertical-menu-trigger {
    cursor: pointer;
}

.bt-vertical-menu-trigger:focus-within {
    outline: 2px dotted #000000;
    outline-offset: 2px;
}

/**
 * Remove outline from inner link to prevent double outlines
 * The parent container handles the focus indicator
 */
.bt-vertical-menu-trigger .bt_bb_icon_holder:focus {
    outline: none;
}

/**
 * Make vertical menu trigger keyboard operable
 */
.bt-vertical-menu-trigger[role="button"] {
    /* Ensure it's treated as a button */
}

/* ============================================
   Nested Submenu Support
   ============================================ */

/**
 * Support for multi-level dropdown menus
 */
.menuPort nav .sub-menu .menu-item-has-children:focus-within > .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================
   Color Contrast Enhancements
   ============================================ */

/**
 * Ensure sufficient color contrast for focused items
 * WCAG 2.2 Level AA requires 3:1 contrast ratio for focus indicators
 * Updated to match accessibility report requirements
 */
.menuPort nav a:focus,
.menuPort nav a:focus-visible {
    /* Ensure background provides sufficient contrast */
    background-color: rgba(0, 0, 0, 0.05);
}

.menuPort nav .sub-menu a:focus,
.menuPort nav .sub-menu a:focus-visible {
    background-color: rgba(0, 0, 0, 0.08);
}

/* ============================================
   Keyboard Navigation Hints
   ============================================ */

/**
 * Optional: Add visual hints for keyboard users
 * Can be enabled if desired
 */
.menuPort nav .menu-item-has-children > a::before {
    /* Space for dropdown indicator */
}

/**
 * Dropdown indicator for items with submenus
 */
.menuPort nav .menu-item-has-children > a[aria-haspopup="true"]::after {
    /* Visual indicator that submenu exists */
    content: '';
    /* Styling handled by theme */
}



.btMenuHorizontal .menuPort > nav > ul > li.on > a {
    color: #000 !important;
}