/**
 * Mobile Navigation Improvements
 * Enhanced touch targets and usability for mobile devices
 * Following Apple HIG and Material Design guidelines (min 44px tap targets)
 */

/* ============================================
   MOBILE MENU IMPROVEMENTS (max-width: 991px)
   ============================================ */

@media (max-width: 991px) {

    /* ========================================
       HAMBURGER TOGGLE BUTTON IMPROVEMENTS
       ======================================== */

    /* Ensure minimum 44x44px tap target for hamburger */
    .toggle_menu {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 60px;
        height: 60px;
        /* Add subtle background for better visibility */
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        transition: background-color 0.3s ease;
    }

    .toggle_menu:hover,
    .toggle_menu:active {
        background-color: rgba(0, 0, 0, 0.2);
    }

    .toggle_menu.mobile-active {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* ========================================
       MOBILE MENU CONTAINER
       ======================================== */

    /* Increase padding in mobile menu */
    .sf-menu {
        padding: 30px 30px 30px 20px !important;
        /* Ensure smooth scrolling for long menus */
        -webkit-overflow-scrolling: touch;
    }

    /* ========================================
       MAIN MENU ITEMS (First Level)
       ======================================== */

    /* Bigger tap targets for main menu items */
    .sf-menu > li > a {
        display: flex;
        align-items: center;
        padding: 18px 24px !important; /* More padding for bigger tap targets */
        font-size: 20px !important; /* Larger font - easier to read & tap */
        line-height: 1.3;
        min-height: 56px; /* Well above Apple HIG minimum */
        /* Add visual spacing */
        margin-bottom: 6px;
        border-radius: 6px;
        transition: background-color 0.2s ease, color 0.2s ease;
        font-weight: 500;
    }

    /* Touch feedback - active/tap state */
    .sf-menu > li > a:active,
    .sf-menu > li > a:focus {
        background-color: rgba(255, 255, 255, 0.12);
        outline: none;
    }

    /* Hover state for devices that support it */
    .sf-menu > li > a:hover {
        background-color: rgba(255, 255, 255, 0.18);
        color: #fff !important;
    }

    /* Active menu item styling */
    .sf-menu > li.active > a {
        background-color: rgba(190, 59, 25, 0.25);
        color: #be3b19 !important;
    }

    /* ========================================
       SUBMENU ITEMS (Second Level & Beyond)
       ======================================== */

    /* Bigger tap targets for submenu items */
    .sf-menu ul li a {
        display: flex;
        align-items: center;
        padding: 16px 20px 16px 24px !important; /* More padding */
        font-size: 18px !important; /* Bigger font */
        line-height: 1.3;
        min-height: 52px; /* Well above Apple HIG minimum */
        margin-bottom: 4px;
        border-radius: 6px;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    /* Touch feedback for submenu items */
    .sf-menu ul li a:active,
    .sf-menu ul li a:focus {
        background-color: rgba(255, 255, 255, 0.1);
        outline: none;
    }

    .sf-menu ul li a:hover {
        background-color: rgba(255, 255, 255, 0.15);
        color: #fff !important;
    }

    /* Active submenu item */
    .sf-menu ul li.active > a {
        background-color: rgba(190, 59, 25, 0.2);
        color: #be3b19 !important;
    }

    /* ========================================
       SUBMENU CONTAINER SPACING
       ======================================== */

    /* Add breathing room for submenus */
    .sf-menu ul {
        padding-left: 18px !important;
        margin-top: 6px;
        margin-bottom: 12px;
    }

    /* ========================================
       DROPDOWN ARROWS (for items with submenus)
       ======================================== */

    /* Make arrow icon larger and more tappable */
    .sf-arrows .sf-with-ul {
        padding-right: 50px !important; /* More space for arrow */
    }

    .sf-arrows .sf-with-ul:after {
        font-size: 26px !important; /* Larger arrow icon */
        right: 18px !important; /* Better positioning */
        line-height: 1;
        padding: 10px; /* Increase tappable area around arrow */
    }

    /* ========================================
       VISUAL IMPROVEMENTS
       ======================================== */

    /* Add subtle separator between main menu items */
    .sf-menu > li {
        position: relative;
    }

    .sf-menu > li + li {
        margin-top: 2px;
    }

    .sf-menu > li:not(:last-child):after {
        content: '';
        display: block;
        height: 1px;
        background: rgba(255, 255, 255, 0.08);
        margin: 10px 4px;
    }

    /* Better submenu item indicators */
    .sf-menu ul li a:before {
        content: '–'; /* En dash instead of hyphen */
        padding-right: 8px;
        opacity: 0.6;
    }

    .sf-menu ul ul li a:before {
        content: '––';
        padding-right: 8px;
        opacity: 0.6;
    }

    /* ========================================
       ACCESSIBILITY & TOUCH OPTIMIZATION
       ======================================== */

    /* Ensure links are block-level for full tap area */
    .sf-menu a {
        display: block;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
        user-select: none;
        -webkit-user-select: none;
    }

    /* Remove double-tap zoom on links */
    .sf-menu a {
        touch-action: manipulation;
    }

    /* Prevent text selection on menu interaction */
    .mainmenu_wrapper {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
}

/* ============================================
   VERY SMALL SCREENS (max-width: 400px)
   ============================================ */

@media (max-width: 400px) {
    /* Slightly reduce padding on very small screens while maintaining tap targets */
    .sf-menu > li > a {
        padding: 16px 18px !important;
        font-size: 19px !important;
        min-height: 52px;
    }

    .sf-menu ul li a {
        padding: 14px 16px 14px 20px !important;
        font-size: 17px !important;
        min-height: 48px;
    }

    /* Ensure menu doesn't take up too much horizontal space */
    .sf-menu {
        padding: 25px 18px 25px 12px !important;
    }
}

/* ============================================
   LANDSCAPE MOBILE (max-height: 500px)
   ============================================ */

@media (max-width: 991px) and (max-height: 500px) {
    /* Reduce vertical spacing in landscape mode */
    .sf-menu > li > a {
        padding: 14px 24px !important;
        font-size: 18px !important;
        min-height: 48px;
    }

    .sf-menu ul li a {
        padding: 12px 20px 12px 24px !important;
        font-size: 16px !important;
        min-height: 44px;
    }

    .sf-menu {
        padding: 20px 30px 20px 20px !important;
    }

    .sf-menu > li:not(:last-child):after {
        margin: 6px 4px;
    }
}