/* 
   FORCE MOBILE MENU VISIBILITY
   This file is injected to solve the "White Text on White Background" issue on mobile.
*/

@media (max-width: 1100px) {

    /* 1. Force the Main Nav Container to be White */
    body .header .main-nav {
        background-color: #ffffff !important;
        display: none;
        /* Hide via JS usually, but if active: */
    }

    body .header .main-nav.active {
        display: flex !important;
        /* Ensure flex layout when active */
    }

    /* 2. Force ALL Links inside Main Nav to be Navy Blue */
    body .header .main-nav a,
    body .header .main-nav .sub a,
    body .header .main-nav li a,
    html body .header .main-nav a {
        color: #003366 !important;
        /* Navy Blue */
        text-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        font-weight: 600 !important;
    }

    /* 3. Handle Hover States (Optional but good for UX) */
    body .header .main-nav a:hover,
    body .header .main-nav .sub a:hover {
        color: #ff7f50 !important;
        /* Orange */
        background-color: #f5f5f5 !important;
    }

    /* 4. Ensure Toggle Button is Visible */
    body .header .menu-toggle {
        display: block !important;
        color: white !important;
        /* White icon on transparent/black header */
    }

    body .header.scrolled .menu-toggle {
        color: #003366 !important;
        /* Navy icon on white scrolled header */
    }

    /* 5. Hide the sticky Phone Button to avoid overlap */
    body .header .phone-link {
        display: none !important;
    }
}