/* --- 1. GLOBAL LAYOUT --- */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden;
}

body {
    display: flex !important;
    flex-direction: column !important;
}

#top, .RHS { display: none !important; }

/* HEADER - BLACK BACKGROUND */
#header {
    order: 1 !important;
    background-color: #000 !important;
    padding: 15px 10px !important;
    display: flex !important;
    align-items: center;
    width: 100% !important;
    box-sizing: border-box !important;
}

#logo { width: 160px; height: auto; }
.RHS-Banner { flex-grow: 1; margin-left: 20px; }
#headerNav { order: 2 !important; width: 100% !important; box-sizing: border-box !important; }

/* --- 2. MOBILE VIEW (Under 800px) --- */
@media screen and (max-width: 799px) {
    #header {
        justify-content: center !important;
        text-align: center !important;
    }
    
    #logo { margin: 0 auto !important; display: block !important; }
    .RHS-Banner { display: none !important; }

    /* STICKY HAMBURGER BUTTON - SOLID RED */
    #hamburger-btn {
        order: 3 !important;
        display: flex !important;
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10000 !important;
        background: #961B1E !important; 
        color: #ffffff !important;
        padding: 15px 20px !important;
        cursor: pointer;
        width: 100% !important;
        box-sizing: border-box !important;
        align-items: center;
    }

    #hamburger-btn .bars {
        width: 25px; height: 18px; margin-right: 15px;
        display: flex; flex-direction: column; justify-content: space-between;
    }

    #hamburger-btn .bars span {
        display: block; width: 100%; height: 3px; background: #fff !important;
    }

    /* FULL WIDTH MOBILE MENU FIX */
    .sideBoxContainer {
        order: 4 !important;
        display: none !important;
        width: 100% !important; /* Force full window width */
        min-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
    }

    #menu-toggle:checked ~ .sideBoxContainer {
        display: block !important;
    }

    /* Target the inner sideBox and the actual links */
    .sideBox.LHS { 
        width: 100% !important; 
        margin: 0 !important; 
        padding: 0 !important; 
        float: none !important; /* Kill legacy floats */
    }
    
    .sideBox.LHS a {
        display: block !important;
        width: 100% !important; /* Ensures the click area and text cover the screen */
        padding: 18px 20px !important;
        color: #333 !important;
        background: #fff !important;
        border-bottom: 1px solid #eeeeee !important;
        text-decoration: none !important;
        font-size: 18px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        text-align: left !important;
    }

    #bodyText { 
        order: 5 !important; 
        width: 100% !important;
        padding: 20px !important; 
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #footer { order: 6 !important; width: 100% !important; }
}

/* --- 3. DESKTOP VIEW (800px and up) --- */
@media screen and (min-width: 800px) {
    body {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    #hamburger-btn { display: none !important; }
    #header, #headerNav, #footer { flex: 0 0 100% !important; }
    #header { justify-content: flex-start !important; }

    .sideBoxContainer {
        order: 3 !important;
        flex: 0 0 16em !important;
        display: block !important;
        margin: 0 !important;
        padding: 20px 10px !important;
    }

    #bodyText {
        order: 4 !important;
        flex: 1 !important;
        padding: 20px !important;
        margin: 0 !important;
    }

    #footer { order: 5 !important; }
}