/* Header & Navigation Styles */

/* Fix white line at top + ensure header stays fixed */
body {
    margin: 0 !important;
    padding: 0 !important;
}

#header {
    transition: transform 0.3s ease;
    z-index: 1000; /* Base header layer - below mobile navigation */
    top: 0 !important;
    margin-top: 0 !important;
}

/* Auto-hide permanently disabled - causes mobile navigation conflicts */
/* Header remains fixed at top always for better UX and mobile compatibility */

/* Authentication Pages - Transparent Header */
.auth-page #header {
    background-color: transparent !important;
    box-shadow: none !important;
    transition: none !important;
}

.auth-page #header .logo h1,
.auth-page #header .logo a {
    color: #333 !important;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8);
}

.auth-page #header .navmenu a {
    color: #333 !important;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8);
}

.auth-page #header .navmenu a:hover {
    color: var(--accent-color) !important;
}

.auth-page #header .mobile-nav-toggle {
    color: #333 !important;
}

/* Home Page - White text without shadow ONLY for header */
body.home-page #header .logo h1,
body.home-page #header .logo a {
    color: white !important;
    text-shadow: none !important;
}

body.home-page #header .navmenu > ul > li > a {
    color: white !important;
    text-shadow: none !important;
}

body.home-page #header .navmenu > ul > li > a:hover {
    color: var(--accent-color) !important;
}

/* Dropdown menus should have normal dark text */
body.home-page #header .navmenu .dropdown ul li a {
    color: #333 !important;
    text-shadow: none !important;
}

body.home-page #header .navmenu .dropdown ul li a:hover {
    color: var(--accent-color) !important;
}

body.home-page #header .mobile-nav-toggle {
    color: white !important;
}

/* Ensure main content keeps normal text colors */
.home-page .main,
.home-page .section,
.home-page .auth-section {
    color: var(--default-color) !important;
}

.home-page .auth-section h2,
.home-page .auth-section h3,
.home-page .auth-section h4,
.home-page .auth-section p,
.home-page .auth-section .text-muted {
    color: var(--default-color) !important;
    text-shadow: none !important;
}

.home-page .auth-section .section-header h2 {
    color: var(--heading-color) !important;
    text-shadow: none !important;
}

/* Language Dropdown Positioning Fix */
/* Position language dropdown from right edge to prevent cutting off */
.navmenu li.dropdown:last-child ul {
    left: auto !important;
    right: 0 !important;
}

/* Ensure dropdown doesn't exceed viewport on mobile/small screens */
@media (max-width: 1199.98px) {
    .navmenu .dropdown ul {
        left: auto !important;
        right: 0 !important;
        min-width: 150px !important;
    }
}

/* Logo Text - Prevent "Body Language" from wrapping to two lines */
.header .logo h1 {
    white-space: nowrap !important;
}

/* Responsive logo adjustments for smaller screens */
@media (max-width: 768px) {
    .header .logo h1 {
        font-size: 22px !important;
    }
}

@media (max-width: 576px) {
    .header .logo h1 {
        font-size: 18px !important;
    }
}

/* Badge spacing fix - prevent badge from overlapping next menu item */
.navmenu .badge {
    margin-right: 15px !important;
    margin-left: 5px !important;
}

/* MOBILE NAVIGATION FIXES */
@media (max-width: 1199px) {
    /* Ensure hamburger button is always clickable */
    #header .mobile-nav-toggle {
        z-index: 1070 !important;
    }
    
    /* When mobile nav is active */
    .mobile-nav-active #header .mobile-nav-toggle {
        z-index: 1070 !important;
        color: #fff !important;
        position: absolute !important;
        font-size: 32px !important;
        top: 15px !important;
        right: 15px !important;
        margin-right: 0 !important;
    }
    
    .mobile-nav-active #header .navmenu {
        z-index: 1050 !important;
    }
    
    .mobile-nav-active #header .navmenu ul {
        z-index: 1060 !important;
    }
    
    /* Fix mobile menu text colors */
    .mobile-nav-active #header .navmenu ul li a,
    body.home-page.mobile-nav-active #header .navmenu ul li a,
    body.home-page.mobile-nav-active #header .navmenu > ul > li > a {
        color: var(--nav-dropdown-color) !important;
        text-shadow: none !important;
    }
    
    .mobile-nav-active #header .navmenu ul li a:hover,
    body.home-page.mobile-nav-active #header .navmenu ul li a:hover,
    body.home-page.mobile-nav-active #header .navmenu > ul > li > a:hover {
        color: var(--nav-dropdown-hover-color) !important;
    }
}