/**
 * Navigation Menu Links - White Color on Mobile Devices
 * Ensures navigation menu links (Home, About Us, Benefits, Explore Our Fleet, Safe Hours, Contact)
 * are white on mobile devices (iPhone Pro Max, Galaxy S25 Ultra, tablets, etc.)
 * ID-based and class-based selectors for maximum specificity
 */

/* ============================================
   MOBILE MENU OVERLAY - NAVIGATION LINKS
   ============================================ */

/* Mobile menu overlay navigation links - white (max-width: 1199px) */
@media only screen and (max-width: 1199px) {
    /* Mobile menu container */
    .mobile-menu .menu-outer .navigation li > a,
    .mobile-menu .menu-outer .navigation li > a:link,
    .mobile-menu .menu-outer .navigation li > a:visited,
    .mobile-menu .menu-outer .navigation li > a *,
    .mobile-menu .menu-outer .navigation li > a span,
    .mobile-menu .menu-box .menu-outer .navigation li > a,
    .mobile-menu .menu-box .menu-outer .navigation li > a *,
    .mobile-menu .menu-box .menu-outer .navigation li > a span,
    .mobile-menu nav .menu-outer .navigation li > a,
    .mobile-menu nav .menu-outer .navigation li > a *,
    /* Direct navigation links */
    .mobile-menu .navigation li > a,
    .mobile-menu .navigation li > a:link,
    .mobile-menu .navigation li > a:visited,
    .mobile-menu .navigation li > a *,
    .mobile-menu .navigation li > a span,
    .mobile-menu .menu-box .navigation li > a,
    .mobile-menu .menu-box .navigation li > a *,
    .mobile-menu .menu-box .navigation li > a span,
    /* All navigation list items */
    .mobile-menu .navigation li,
    .mobile-menu .navigation li *,
    .mobile-menu .menu-outer .navigation li,
    .mobile-menu .menu-outer .navigation li *,
    .mobile-menu .menu-box .navigation li,
    .mobile-menu .menu-box .navigation li * {
        color: #ffffff !important;
    }
    
    /* Hover and active states */
    .mobile-menu .navigation li > a:hover,
    .mobile-menu .navigation li > a:active,
    .mobile-menu .navigation li > a:focus,
    .mobile-menu .navigation li.current > a,
    .mobile-menu .navigation li.active > a,
    .mobile-menu .menu-outer .navigation li > a:hover,
    .mobile-menu .menu-outer .navigation li > a:active,
    .mobile-menu .menu-outer .navigation li > a:focus {
        color: #ffffff !important;
    }
}

/* ============================================
   TABLET SPECIFIC (768px - 991px)
   ============================================ */

@media only screen and (min-width: 768px) and (max-width: 991px) {
    /* Mobile menu navigation */
    .mobile-menu .navigation li > a,
    .mobile-menu .navigation li > a *,
    .mobile-menu .navigation li > a span,
    .mobile-menu .menu-outer .navigation li > a,
    .mobile-menu .menu-outer .navigation li > a *,
    .mobile-menu .menu-box .navigation li > a,
    .mobile-menu .menu-box .navigation li > a *,
    .mobile-menu .navigation li,
    .mobile-menu .navigation li *,
    .mobile-menu .menu-outer .navigation li,
    .mobile-menu .menu-outer .navigation li * {
        color: #ffffff !important;
    }
    
    /* Main menu navigation on tablet (if visible) */
    .main-menu .navigation li > a,
    .main-menu .navigation li > a *,
    .main-menu .navigation li > a span,
    .main-menu .navigation li,
    .main-menu .navigation li * {
        color: #ffffff !important;
    }
}

/* ============================================
   MOBILE SPECIFIC (max-width: 767px)
   ============================================ */

@media only screen and (max-width: 767px) {
    /* Mobile menu navigation - MAXIMUM SPECIFICITY */
    .mobile-menu .navigation li > a,
    .mobile-menu .navigation li > a:link,
    .mobile-menu .navigation li > a:visited,
    .mobile-menu .navigation li > a:hover,
    .mobile-menu .navigation li > a:active,
    .mobile-menu .navigation li > a:focus,
    .mobile-menu .navigation li > a *,
    .mobile-menu .navigation li > a span,
    .mobile-menu .menu-outer .navigation li > a,
    .mobile-menu .menu-outer .navigation li > a:link,
    .mobile-menu .menu-outer .navigation li > a:visited,
    .mobile-menu .menu-outer .navigation li > a:hover,
    .mobile-menu .menu-outer .navigation li > a:active,
    .mobile-menu .menu-outer .navigation li > a:focus,
    .mobile-menu .menu-outer .navigation li > a *,
    .mobile-menu .menu-outer .navigation li > a span,
    .mobile-menu .menu-box .menu-outer .navigation li > a,
    .mobile-menu .menu-box .menu-outer .navigation li > a *,
    .mobile-menu .menu-box .menu-outer .navigation li > a span,
    .mobile-menu .menu-box .navigation li > a,
    .mobile-menu .menu-box .navigation li > a *,
    .mobile-menu .menu-box .navigation li > a span,
    /* All navigation list items and their children */
    .mobile-menu .navigation li,
    .mobile-menu .navigation li *,
    .mobile-menu .navigation li a,
    .mobile-menu .navigation li a *,
    .mobile-menu .navigation li a span,
    .mobile-menu .menu-outer .navigation li,
    .mobile-menu .menu-outer .navigation li *,
    .mobile-menu .menu-outer .navigation li a,
    .mobile-menu .menu-outer .navigation li a *,
    .mobile-menu .menu-box .navigation li,
    .mobile-menu .menu-box .navigation li *,
    .mobile-menu .menu-box .navigation li a,
    .mobile-menu .menu-box .navigation li a *,
    /* Current and active states */
    .mobile-menu .navigation li.current > a,
    .mobile-menu .navigation li.current > a *,
    .mobile-menu .navigation li.current > a span,
    .mobile-menu .navigation li.active > a,
    .mobile-menu .navigation li.active > a *,
    .mobile-menu .navigation li.active > a span {
        color: #ffffff !important;
        text-decoration: none !important;
    }
    
    /* Main menu navigation on mobile (if visible) */
    .main-menu .navigation li > a,
    .main-menu .navigation li > a *,
    .main-menu .navigation li > a span,
    .main-menu .navigation li,
    .main-menu .navigation li *,
    .main-menu .navigation li.current > a,
    .main-menu .navigation li.current > a *,
    .main-menu .navigation li.active > a,
    .main-menu .navigation li.active > a * {
        color: #ffffff !important;
    }
}

/* ============================================
   SPECIFIC DEVICE TARGETING
   ============================================ */

/* iPhone Pro Max and similar large phones (max-width: 428px) */
@media only screen and (max-width: 428px) {
    .mobile-menu .navigation li > a,
    .mobile-menu .navigation li > a *,
    .mobile-menu .navigation li > a span,
    .mobile-menu .menu-outer .navigation li > a,
    .mobile-menu .menu-outer .navigation li > a *,
    .mobile-menu .menu-box .navigation li > a,
    .mobile-menu .menu-box .navigation li > a *,
    .mobile-menu .navigation li,
    .mobile-menu .navigation li *,
    .mobile-menu .menu-outer .navigation li,
    .mobile-menu .menu-outer .navigation li * {
        color: #ffffff !important;
    }
}

/* Galaxy S25 Ultra and similar large Android phones (max-width: 412px) */
@media only screen and (max-width: 412px) {
    .mobile-menu .navigation li > a,
    .mobile-menu .navigation li > a *,
    .mobile-menu .navigation li > a span,
    .mobile-menu .menu-outer .navigation li > a,
    .mobile-menu .menu-outer .navigation li > a *,
    .mobile-menu .menu-box .navigation li > a,
    .mobile-menu .menu-box .navigation li > a *,
    .mobile-menu .navigation li,
    .mobile-menu .navigation li *,
    .mobile-menu .menu-outer .navigation li,
    .mobile-menu .menu-outer .navigation li * {
        color: #ffffff !important;
    }
}

/* Landscape orientation on mobile */
@media only screen and (max-width: 991px) and (orientation: landscape) {
    .mobile-menu .navigation li > a,
    .mobile-menu .navigation li > a *,
    .mobile-menu .navigation li > a span,
    .mobile-menu .menu-outer .navigation li > a,
    .mobile-menu .menu-outer .navigation li > a *,
    .mobile-menu .navigation li,
    .mobile-menu .navigation li *,
    .mobile-menu .menu-outer .navigation li,
    .mobile-menu .menu-outer .navigation li * {
        color: #ffffff !important;
    }
}

