/* ============================
   FULL WIDTH HEADER & MENU
   ============================ */
.header-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;  /* For menu alignment */
    justify-content: space-between;
}

@media screen and (min-width: 768px) {
    .header-container {
        padding: 0 20px;
    }
}

#header .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#header {
    background-color: #820005;
    padding: 0; /* Remove default padding */
}

/* Fix for menu height with container */
#menu {
    height: 44px; /* Default desktop height */
}

@media screen and (max-width: 767px) {
    #menu {
        height: 60px; /* Mobile header height */
    }
    
    .header-container {
        display: flex;
        align-items: center;
        width: 100%;
    }
}

/* ============================
   SIDEBAR ORDERING & TOGGLE
   ============================ */
@media screen and (max-width: 767px) {
    #body {
        display: flex;
        flex-direction: column;
    }
    
    /* Make sidebar appear first */
    #sidebar {
        order: -1;
        width: 100%;
        margin: 0 0 1rem 0;
    }
    
    /* Ensure content is below */
    #body_left {
        order: 2;
    }
}

/* ============================
   SEARCH STYLING
   ============================ */
#searchform_top {
    display: flex;
    align-items: center;
}

#searchform_top_text {
    height: 34px !important;
    line-height: normal;
    box-sizing: border-box;
    vertical-align: middle;
    padding: 0 10px;
}

#gosearch {
    height: 34px !important;
    width: auto;
    vertical-align: middle;
    padding: 8px 12px;
    box-sizing: border-box;
}

@media screen and (max-width: 767px) {
    #searchform_top_text {
        height: 40px !important;
        font-size: 16px; /* Avoid mobile zoom */
    }
    
    #gosearch {
        height: 40px !important;
        padding: 10px 15px;
    }
}

/* ============================
   MOBILE SEARCH INTEGRATION
   ============================ */
@media screen and (max-width: 767px) {
    /* Hide the original header search */
    #header #main_search {
        display: none !important;
    }
    
    /* Styling for the relocated search in mobile menu */
    #mainmenu #main_search {
        display: block !important;
        width: 100%;
        max-width: none;
        background: transparent;
        box-shadow: none;
        padding: 15px;
        margin-bottom: 10px;
        float: none;
        height: auto;
    }
    
    #mainmenu #searchform_top {
        display: flex;
        width: 100%;
    }
    
    #mainmenu #searchform_top_text {
        flex: 1;
        border-radius: 4px 0 0 4px;
        border: 1px solid rgba(255,255,255,0.2);
        color: white;
        background: rgba(255,255,255,0.1);
        margin: 0;
    }
    
    #mainmenu #gosearch {
        border-radius: 0 4px 4px 0;
        background: var(--primary-color);
        border: 1px solid var(--primary-color);
    }
    
    /* Placeholder color */
    #mainmenu #searchform_top_text::placeholder {
        color: rgba(255,255,255,0.6);
    }
}