/* Mobile Navigation Specific Styles */
@media (max-width: 991px) { /* Adjusted breakpoint for better tablet/mobile handling */
    header .container {
        position: relative; /* For mobile menu positioning */
    }

    .main-nav {
        display: none; /* Hidden by default on mobile */
        flex-direction: column;
        position: fixed; /* Take up full screen */
        top: 0;
        left: -100%; /* Start off-screen */
        width: 85%; /* Don't take full width, allow a bit of page to show */
        max-width: 320px; /* Max width for the menu */
        height: 100vh;
        background-color: #1a1a1a; /* Dark background for mobile menu */
        box-shadow: 5px 0px 15px rgba(0,0,0,0.2);
        padding: 60px 0 20px; /* Padding top for close button, bottom for spacing */
        z-index: 999; /* Below header's z-index but above content */
        overflow-y: auto; /* Allow scrolling if menu is long */
        transition: left 0.35s ease-in-out;
    }

    .main-nav.active {
        display: flex; /* Show when active */
        left: 0; /* Slide in */
    }

    .main-nav ul {
        flex-direction: column;
        width: 100%;
        padding: 0;
    }

    .main-nav ul li {
        margin: 0;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .main-nav ul li:last-child {
        border-bottom: none;
    }

    .main-nav ul li a {
        color: var(--white);
        padding: 1.5rem 2rem; /* Generous padding for touch targets */
        font-size: 1.7rem; /* Larger font for mobile */
        display: block; /* Full width links */
        font-weight: 500;
    }
    
    .main-nav ul li a:hover,
    .main-nav ul li a.active-link { /* Style for active page link */
        background-color: var(--primary-red);
        color: var(--white);
    }

    /* Mobile Dropdowns */
    .main-nav .dropdown .dropbtn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    
    .main-nav .dropdown .dropbtn .arrow-down {
        border-top-color: var(--white); /* White arrow on dark background */
        margin-right: 2rem; /* Space for the arrow */
    }

    .main-nav .dropdown-content {
        position: static; /* No absolute positioning in mobile nav */
        display: none; /* Hidden by default */
        width: 100%;
        background-color: rgba(0,0,0,0.2); /* Slightly darker for nested feel */
        box-shadow: none;
        border-radius: 0;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding: 0;
        opacity: 1; /* No opacity transition needed for static display */
        visibility: visible;
        transform: none;
        transition: none; /* No transition for static display */
    }

    .main-nav .dropdown.active .dropdown-content {
        display: block; /* Show when parent is active */
    }

    .main-nav .dropdown-content a {
        padding-left: 3rem; /* Indent submenu items */
        font-size: 1.6rem;
        color: rgba(255,255,255,0.85);
        text-align: right;
    }
    
    .main-nav .dropdown-content a:hover {
        background-color: var(--primary-red);
        color: var(--white);
    }
    
    /* Language dropdown specific adjustments for mobile */
    .main-nav .lang-dropdown .dropdown-content a {
         padding-left: 2rem; /* Less indent for language items */
    }
    .main-nav .lang-dropdown-content .flag-icon {
        filter: brightness(1.1); /* Make flags slightly brighter on dark bg */
    }


    /* Hamburger Menu Toggle */
    .mobile-nav-toggle {
        display: block; /* Show hamburger */
        font-size: 2.8rem; /* Adjust size */
        color: var(--text-color);
        background: transparent;
        border: none;
        padding: 0.5rem;
        cursor: pointer;
        z-index: 1001; /* Above mobile nav */
        position: relative; /* For potential animations */
    }
    
    /* Hamburger animation (optional - simple X on open) */
    .mobile-nav-toggle.active .line1 {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    .mobile-nav-toggle.active .line2 {
        opacity: 0;
    }
    .mobile-nav-toggle.active .line3 {
        transform: rotate(45deg) translate(-5px, -6px);
    }
    
    .mobile-nav-toggle span { /* Lines for hamburger */
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--text-color);
        margin: 5px 0;
        transition: all 0.3s ease-in-out;
    }
    
    /* Header quote button hidden on mobile nav active */
    .header.nav-open .header-quote-btn { /* This should target .header-quote-btn inside a header with .nav-open */
        display: none;
    }
    
    /* Ensure the Get a Free Quote button in the header is hidden when mobile nav is open */
    header.nav-open .header-quote-btn {
        display: none !important; /* Use !important if necessary to override other styles */
    }


    /* Body overlay when mobile nav is open */
    .body-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 998; /* Below mobile nav, above content */
    }
    .body-overlay.active {
        display: block;
    }
}

/* Further adjustments for very small screens if needed */
@media (max-width: 480px) {
    .main-nav {
        width: 100%; /* Full width on very small screens */
        max-width: none;
    }
    .main-nav ul li a {
        font-size: 1.6rem;
        padding: 1.2rem 1.5rem;
    }
    .main-nav .dropdown-content a {
        font-size: 1.5rem;
        padding-left: 2.5rem;
    }
}