/* 
* Header Layout Fix for Yemen Union Website
* Fixes the responsive layout issues across different viewport widths
* Date: May 2025
*/

/* Fix for header layout between 1000px and 770px */
@media screen and (max-width: 1000px) and (min-width: 770px) {
    header .container {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }
    
    header .logo {
        order: 3 !important; /* Move logo to the left */
        margin-right: 0 !important;
        position: relative !important;
        flex: 0 0 auto !important;
    }
    
    header .center-nav {
        order: 2 !important; /* Keep navigation in the center */
        flex: 1 !important;
        margin: 0 auto !important;
    }
    
    header .membership-button {
        order: 1 !important; /* Move membership button to the right */
        margin-left: 0 !important;
        position: relative !important;
        flex: 0 0 auto !important;
    }
    
    header .menu-toggle {
        order: 3 !important; /* Ensure menu toggle has the same order as center-nav */
    }
    
    /* Fix for RTL layout */
    html[dir="rtl"] header .container {
        flex-direction: row-reverse !important;
    }
    
    html[dir="rtl"] header .logo {
        order: 3 !important; /* Logo on the left in RTL */
    }
    
    html[dir="rtl"] header .center-nav {
        order: 2 !important; /* Navigation in the center */
    }
    
    html[dir="rtl"] header .membership-button {
        order: 1 !important; /* Button on the right in RTL */
    }
}

/* Fix for small mobile screens (less than 577px) */
@media screen and (max-width: 576px) {
    /* Fix header layout */
    header .container {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: auto !important;
        padding: 10px !important;
        flex-direction: row !important;
    }
    
    /* Fix logo position - now on the left */
    header .logo {
        order: 3 !important; /* Move logo to the left for RTL */
        margin: 0 !important;
        flex: 0 0 auto !important;
    }
    
    header .logo img {
        width: 60px !important;
        height: 45px !important;
        margin: 0 !important;
    }
    
    /* Fix navigation position */
    header .center-nav {
        order: 2 !important;
        margin: 0 auto !important;
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    /* Fix membership button position - now on the right */
    header .membership-button {
        order: 1 !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }
    
    /* Fix menu toggle position */
    header .menu-toggle {
        width: 35px !important;
        height: 35px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Fix text visibility on banner while maintaining consistent styling */
    .hero-content {
        position: relative !important;
        z-index: 5 !important;
        padding: 15px !important;
        border-radius: 8px !important;
        margin: 10px !important;
    }
    
    .hero-content h1,
    .hero-content p {
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4) !important;
    }
    
    /* Ensure hero section is properly structured */
    .hero .container {
        position: relative !important;
    }
    
    /* Fix for RTL layout */
    html[dir="rtl"] header .container {
        flex-direction: row-reverse !important;
    }
    
    html[dir="rtl"] header .logo {
        order: 3 !important; /* Logo on the left in RTL */
    }
    
    html[dir="rtl"] header .center-nav {
        order: 2 !important; /* Navigation in the center */
    }
    
    html[dir="rtl"] header .membership-button {
        order: 1 !important; /* Button on the right in RTL */
    }
    
    /* Ensure membership button is properly sized */
    header .membership-button .btn.primary-btn {
        font-size: 11px !important;
        padding: 4px 8px !important;
        min-height: 30px !important;
        min-width: 30px !important;
        white-space: nowrap !important;
    }
}