/* =========================================
   1. DESKTOP DEFAULT (Hide Mobile Elements)
   ========================================= */
.mobile-only-header {
    display: none;
}

/* =========================================
   2. MOBILE RESPONSIVE STYLES
   ========================================= */
@media screen and (max-width: 1024px) {
    /* --- HIDE DESKTOP ELEMENTS --- */
    /* Hide the old header, the sidebar, and the sub-banners */
    .main-wrapper > header,
    .sidebar,
    img[src*="top-banner.gif"],
    img[src*="left-banner.jpg"] {
        display: none !important;
    }
    
    /* --- LAYOUT RESET --- */
    /* Force main wrapper to be full width */
    .main-wrapper {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden;
        background-image: none !important; /* Remove bgr1.jpg background */
        background-color: #fff; /* Clean white background */
    }
    
    /* Fix Content Area */
    .content-area {
        display: block !important;
        width: 100% !important;
    }
    
    /* Fix Main Content & Text - FULL WIDTH */
    main {
        width: 100% !important;
        box-sizing: border-box;
        padding: 0 !important; /* Remove padding from main */
        float: none !important;
        margin: 0 !important;
    }
    
    main > div {
        width: 100% !important;
        box-sizing: border-box;
        padding: 0 15px; /* Add padding to inner div only */
        float: none !important;
        margin: 0 !important;
    }
    
    /* Pull h1 closer to banner - MAXIMUM REDUCTION */
    main h1 {
        margin-top: 0 !important; /* No space above h1 */
        padding-top: 5px !important; /* Minimal padding */
        margin-bottom: 10px !important;
    }
    
    /* Make all images responsive to fit screen */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* --- SHOW MOBILE HEADER --- */
    .mobile-only-header {
        display: block;
        width: 100%;
        text-align: center;
        background: #fff;
    }
    
    /* 1. Mobile Logo Styles - REDUCED SIZE & SPACING */
    .mobile-logo-container {
        padding: 5px 0; /* Reduced padding */
        border-bottom: 1px solid #eee;
        margin-bottom: 0;
    }
    
    .mobile-logo-container img {
        max-height: 50px; /* Reduced from 80px */
        display: block;
        margin: 0 auto;
    }
    
    /* 2. Menu Bar Styles - NEW COLORS */
    .mobile-nav-bar {
        background-color: #00006C; /* Updated dark blue bar */
        color: #fff;
        text-align: left;
        position: relative;
        margin-top: 0;
    }
    
    /* The 'MENU' text and icon */
    .menu-label {
        display: block;
        padding: 15px 20px;
        font-family: Verdana, Arial, sans-serif;
        font-weight: bold;
        font-size: 16px;
        cursor: pointer;
        background: #00006C; /* Updated to match menu bar */
    }
    
    /* Hide the checkbox logic */
    #menu-toggle {
        display: none;
    }
    
    /* The actual menu links (Hidden by default) */
    .mobile-menu-items {
        display: none; /* Hidden until clicked */
        list-style: none;
        margin: 0;
        padding: 0;
        background-color: #0000B9; /* Updated item background color */
    }
    
    .mobile-menu-items > li {
        border-top: 1px solid #0000F9;
        position: relative;
    }
    
    .mobile-menu-items > li > a {
        display: block;
        padding: 12px 20px;
        color: #fff;
        text-decoration: none;
        font-family: Verdana, Arial, sans-serif;
        font-size: 14px;
        background-color: #0000B9; /* Updated item background */
    }
    
    .mobile-menu-items > li > a:hover {
        background-color: #0000F9;
    }
    
    /* --- SUBMENU STYLES --- */
    /* Parent menu item with submenu */
    .mobile-menu-items > li.has-submenu > a {
        padding-right: 50px; /* Make room for +/- icon */
    }
    
    /* Hide submenu toggle checkbox */
    .submenu-toggle {
        display: none;
    }
    
    /* Submenu toggle label (the +/- icon) */
    .submenu-label {
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;
        height: 48px; /* Fixed height to match link height */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        background-color: transparent; /* Remove semi-transparent background */
        z-index: 1;
    }
    
    /* Plus icon by default */
    .submenu-label::before {
        content: '+';
        font-family: Arial, sans-serif;
    }
    
    /* Change to minus when checked - using regular minus */
    .submenu-toggle:checked ~ .submenu-label::before {
        content: '-';
        font-family: Arial, sans-serif;
        font-size: 24px;
        line-height: 1;
    }
    
    /* Submenu container (hidden by default) */
    .submenu {
        display: none;
        list-style: none;
        margin: 0;
        padding: 0;
        background-color: #0000F9; /* Updated submenu background */
    }
    
    /* Show submenu when checkbox is checked */
    .submenu-toggle:checked ~ .submenu {
        display: block;
    }
    
    /* Submenu items */
    .submenu li {
        border-top: 1px solid rgba(255, 255, 255, 0.3); /* Visible separator */
    }
    
    .submenu li:first-child {
        border-top: 2px solid rgba(255, 255, 255, 0.5); /* Stronger separator for first item */
    }
    
    .submenu li a {
        display: block;
        padding: 10px 20px 10px 40px; /* Extra left padding for indent */
        color: #fff;
        text-decoration: none;
        font-family: Verdana, Arial, sans-serif;
        font-size: 13px;
        background-color: #0000F9; /* Updated submenu background */
    }
    
    .submenu li a:hover {
        background-color: #0000CC;
    }
    
    /* Show main menu when checkbox is checked */
    #menu-toggle:checked ~ .mobile-menu-items {
        display: block;
    }
    
    /* 3. Banner Styles - CLOSER TO MENU */
    .mobile-banner-container {
        width: 100%;
        line-height: 0; /* Remove gap below image */
        margin: 0; /* Remove all margins */
        padding: 0;
    }
    
    .mobile-banner-container img {
        width: 100%;
        height: auto;
        display: block; /* Removes inline spacing */
        margin: 0;
    }
    
    /* --- FOOTER ADJUSTMENTS --- */
    footer {
        width: 100% !important;
        padding: 20px 10px;
        box-sizing: border-box;
        text-align: center;
    }
    
    .footer-links a {
        display: inline-block;
        margin: 5px;
    }
}