@charset "utf-8";

@media screen and (max-width: 768px) {

    /* 1. THE TOGGLE (Three Dark Lines) */
    /* Using 'fixed' pulls it out of the header so the header cannot hide it */
    button.menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-around !important;
        align-items: center !important;
        
        position: fixed !important; 
        top: 20px !important;
        right: 20px !important;
        
        width: 40px !important;
        height: 35px !important;
        background: #ffffff !important; /* White background box */
        border: 1px solid #1a3a5a !important; /* Dark blue border */
        border-radius: 4px !important;
        padding: 5px !important;
        
        cursor: pointer !important;
        z-index: 2000000 !important; /* Above everything on the page */
    }

    /* THE BARS */
    button.menu-toggle span.bar {
        display: block !important;
        width: 25px !important;
        height: 3px !important;
        background-color: #1a3a5a !important; /* Dark blue lines */
        margin: 0 !important;
    }

    /* 2. THE MENU (What appears when you click) */
    nav.dropnav {
        display: none !important;
    }

    /* This forces the menu to show up when the 'active' class is toggled */
    nav.dropnav.active {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: #ffffff !important;
        z-index: 1500000 !important;
        padding-top: 80px !important; /* Space for the hamburger */
    }

    /* Ensure the links are visible and stacked */
    nav.dropnav.active ul.main-menu {
        display: block !important;
        list-style: none !important;
        padding: 20px !important;
    }

    nav.dropnav.active ul.main-menu li a {
        display: block !important;
        padding: 15px !important;
        color: #1a3a5a !important;
        font-size: 18px !important;
        text-decoration: none !important;
        border-bottom: 1px solid #eee !important;
    }

    /* 3. PUSH CONTENT DOWN */
    .hero, main, #main-content {
        margin-top: 70px !important;
    }
    
    /* FORCE VERTICAL STACKING */
    .header-container, 
    .hero, 
    .main-content, 
    .container, 
    section, 
    article, 
    aside,
    .flex-container {
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    /* Target the specific columns that are likely side-by-side */
    div[class*="col-"], 
    .left-column, 
    .right-column, 
    .sidebar {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }
    
    
}