/* Dynamic Header Styles - Controlled from Admin Panel */

/* ========================================
   NON-SCROLLED HEADER (Top of Page - Transparent)
   ======================================== */

/* Logo/Site name color when NOT scrolled - Ultra-specific to override all other rules */
html body:not(.dark-mode):not([data-theme="dark"]) .header:not(.scrolled) .logo h1,
body:not(.dark-mode):not([data-theme="dark"]) .header:not(.scrolled) .logo h1,
html body:not([data-theme="dark"]) .header:not(.scrolled) .logo h1,
body:not([data-theme="dark"]) .header:not(.scrolled) .logo h1,
html body .header:not(.scrolled) .logo h1,
body .header:not(.scrolled) .logo h1,
.header:not(.scrolled) .logo h1,
html .header:not(.scrolled) .logo h1 {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Navigation links color when NOT scrolled */
.header:not(.scrolled) .nav-menu a,
.header:not(.scrolled) .desktop-nav a,
body:not(.dark-mode) .header:not(.scrolled) .nav-menu a,
body:not(.dark-mode) .header:not(.scrolled) .desktop-nav a,
body:not([data-theme="dark"]) .header:not(.scrolled) .nav-menu a,
body:not([data-theme="dark"]) .header:not(.scrolled) .desktop-nav a,
html body:not([data-theme="dark"]) .header:not(.scrolled) .nav-menu a {
    color: #ffffff !important;
}

/* Mobile menu button color when NOT scrolled */
html body:not([data-theme="dark"]) .header:not(.scrolled) .mobile-menu-btn span,
body:not(.dark-mode) .header:not(.scrolled) .mobile-menu-btn span,
.header:not(.scrolled) .mobile-menu-btn span {
    background: #ffffff !important;
}

/* ========================================
   SCROLLED HEADER (Sticky with Background)
   ======================================== */

/* Header scrolled background color */
.header.scrolled {
    background: #f5f5f2 !important;
}

/* Logo/Site name color when scrolled - Ultra-specific to override all other rules */
html body:not(.dark-mode):not([data-theme="dark"]) .header.scrolled .logo h1,
body:not(.dark-mode):not([data-theme="dark"]) .header.scrolled .logo h1,
html body:not([data-theme="dark"]) .header.scrolled .logo h1,
body:not([data-theme="dark"]) .header.scrolled .logo h1,
html body .header.scrolled .logo h1,
body .header.scrolled .logo h1,
.header.scrolled .logo h1,
html .header.scrolled .logo h1,
html body .header.scrolled .logo h1 {
    color: #0e0101 !important;
    text-shadow: none !important;
}

/* Additional ultra-specific override for scrolled header logo */
html body .logo h1.header.scrolled,
html body.header.scrolled .logo h1,
body .header.scrolled .logo h1,
.header.scrolled .logo h1 {
    color: #0e0101 !important;
}

/* Navigation links color when scrolled */
.header.scrolled .nav-menu a,
.header.scrolled .desktop-nav a,
body:not(.dark-mode) .header.scrolled .nav-menu a,
body:not(.dark-mode) .header.scrolled .desktop-nav a,
body:not([data-theme="dark"]) .header.scrolled .nav-menu a,
body:not([data-theme="dark"]) .header.scrolled .desktop-nav a,
html body:not([data-theme="dark"]) .header.scrolled .nav-menu a {
    color: #140606 !important;
}

/* Mobile menu button color when scrolled */
html body:not([data-theme="dark"]) .header.scrolled .mobile-menu-btn span,
body:not(.dark-mode) .header.scrolled .mobile-menu-btn span,
.header.scrolled .mobile-menu-btn span {
    background: #0a0a0a !important;
}

/* ========================================
   GET STARTED BUTTON (Always Visible)
   ======================================== */

/* Get Started button - green initially, admin colors after scroll */
html body .header .btn-primary,
body .header .btn-primary,
.header .btn-primary {
    background: linear-gradient(135deg, #10b981, #34d399) !important;
    color: white !important;
    border: none;
    transition: all 0.3s ease;
}

html body .header .btn-primary:hover,
body .header .btn-primary:hover,
.header .btn-primary:hover {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    color: white !important;
    transform: translateY(-2px);
}

/* Get Started button - admin colors when header is scrolled */
.header.scrolled .btn-primary {
    background: #c79e66 !important;
    color: #ffffff !important;
    border: none;
}

.header.scrolled .btn-primary:hover {
    background: #c79e66 !important;
    color: #ffffff !important;
    opacity: 0.9;
    transform: translateY(-2px);
}