/**
 * Header Layout Fix
 * Ensures clock is properly aligned to the right
 */

/* Ensure header container uses flexbox properly */
.site-header .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 2rem;
    padding: 0.75rem 1rem;
    min-height: 60px;
    min-width: 1000px; /* Ensure enough space for logo + nav + clock */
}

/* Branding section - left aligned */
.branding {
    flex: 0 0 auto;
    flex-shrink: 0;
    max-width: 280px;
}

/* Navigation - center/left */
.site-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0; /* Allow nav to shrink */
}

/* Clock - right aligned */
.header-clock {
    flex: 0 0 auto;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    order: 3; /* Ensure it's last */
    min-width: 420px !important;
}

/* Reduce header gap at medium sizes to fit everything */
@media (max-width: 1300px) {
    .site-header .container {
        gap: 1.25rem !important;
    }
}

@media (max-width: 1150px) {
    .site-header .container {
        gap: 1rem !important;
    }
}

/* Adjust nav menu spacing on medium screens */
@media (max-width: 1300px) {
    .site-nav .nav_menu {
        gap: 1.25rem !important; /* Tighter spacing */
    }
    
    .site-nav .nav_menu li a {
        font-size: 0.9rem !important; /* Slightly smaller */
    }
}

@media (max-width: 1150px) {
    .site-nav .nav_menu {
        gap: 1rem !important; /* Even tighter */
    }
    
    .site-nav .nav_menu li a {
        font-size: 0.875rem !important; /* Smaller font */
    }
}

@media (max-width: 1024px) {
    .site-nav .nav_menu {
        gap: 0.875rem !important; /* Very tight */
    }
    
    .site-nav .nav_menu li a {
        font-size: 0.85rem !important; /* Even smaller */
    }
}