/* Header Improvements CSS */

/* Increase header height and add yellow border */
.header-improved {
    border-bottom: 3px solid #F1C232; /* Add straight yellow border */
    height: 70px; /* Increase header height */
}

/* Adjust height for the inner container */
.header-improved .container .inner-container {
    height: 100%;
}

/* Adjust padding for navigation items */
.header-improved nav a {
    padding-top: 10px !important; /* Increase top padding to vertically center */
    padding-bottom: 10px !important; /* Adjust bottom padding to account for border */
}

/* Fix logo vertical alignment */
.header-improved .logo-container {
    display: flex;
    align-items: center;
    height: 100%;
}

.header-improved .logo-container img {
    height: 40px; /* Slightly larger logo */
}

/* Mobile menu improvements */
@media (max-width: 767px) {
    /* Fix mobile menu toggle - positioned on the right */
    .mobile-menu-container {
        position: relative;
        z-index: 50;
    }
    
    /* Improved toggle button design */
    .toggle-button {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background-color: rgba(255, 255, 255, 0.1);
        transition: all 0.2s ease;
        margin-right: 4px;
    }
    
    .toggle-button:hover {
        background-color: rgba(255, 255, 255, 0.2);
        transform: scale(1.05);
    }
    
    .toggle-button:focus {
        outline: 2px solid rgba(241, 194, 50, 0.5);
        box-shadow: 0 0 0 3px rgba(241, 194, 50, 0.3);
    }
    
    .toggle-button.active {
        background-color: rgba(241, 194, 50, 0.2);
    }
    
    /* Make mobile menu dropdown more robust */
    .mobile-menu {
        position: absolute;
        top: 70px; /* Match header height */
        left: 0;
        width: 100%;
        z-index: 40;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        transform: translateY(-10px);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .mobile-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    /* Improve mobile menu links */
    .mobile-menu a {
        transition: background-color 0.2s ease, color 0.2s ease;
        border-left: 3px solid transparent;
    }
    
    .mobile-menu a:hover, 
    .mobile-menu a:focus {
        border-left: 3px solid #F1C232;
        padding-left: calc(0.75rem - 3px) !important;
    }
    
    /* Improve backdrop */
    .menu-backdrop {
        position: fixed;
        top: 70px; /* Start below header */
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 30;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }
    
    .menu-backdrop.active {
        opacity: 1;
        visibility: visible;
    }
}