/* Header Configuration - Change header color from this single file */

/* Header color definitions using simplified color system */
:root {
    --header-bg-color: var(--bg-header);
    --header-text-color: var(--text-dark);
    --header-text-secondary: var(--text-dark-secondary);
    --header-border-color: #e2e8f0;
    --header-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* Apply the header colors to all header elements */
header {
    background-color: var(--header-bg-color) !important;
    color: var(--header-text-color) !important;
    box-shadow: var(--header-shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Header text elements */
header .nav-link,
header a.nav-link {
    color: var(--header-text-color) !important;
}

header .nav-link:hover,
header a.nav-link:hover {
    color: var(--primary) !important;
}

header .mega-menu-heading,
header h3.mega-menu-heading {
    color: var(--header-text-color) !important;
}

header .mega-menu-link,
header a.mega-menu-link {
    color: var(--header-text-color) !important;
}

header .mega-menu-link:hover,
header a.mega-menu-link:hover {
    color: var(--header-text-secondary) !important;
}

/* Language switcher */
header #language-switcher,
header #mobile-language-switcher,
header button#language-switcher,
header button#mobile-language-switcher {
    color: var(--header-text-color) !important;
}

header #language-switcher:hover,
header #mobile-language-switcher:hover,
header button#language-switcher:hover,
header button#mobile-language-switcher:hover {
    color: var(--primary) !important;
}

/* Language dropdown options */
header .language-option,
header .mobile-language-option,
header button.language-option,
header button.mobile-language-option {
    color: var(--header-text-color) !important;
}

/* Mobile menu button */
header #menu-button,
header button#menu-button {
    color: var(--header-text-color) !important;
    background-color: var(--bg-header) !important;
}

header #menu-button:hover,
header button#menu-button:hover {
    color: var(--primary) !important;
    background-color: var(--bg-header) !important;
}

/* Override Tailwind classes for mobile menu button */
header #menu-button.text-dark,
header button#menu-button.text-dark {
    color: var(--header-text-color) !important;
}

header #menu-button.hover\:text-secondary:hover,
header button#menu-button.hover\:text-secondary:hover {
    color: var(--primary) !important;
}

/* Services button active state */
header .mega-menu-trigger[aria-expanded="true"] {
    background-color: var(--bg-header) !important;
    color: var(--text-dark-secondary) !important;
}

/* Mega menu emphasis link */
header .mega-menu-emphasis-link {
    background-color: var(--bg-header) !important;
    color: var(--text-dark) !important;
}

header .mega-menu-emphasis-link:hover {
    background-color: var(--bg-header) !important;
    color: var(--text-dark-secondary) !important;
    text-decoration: underline !important;
}

/* ========================================
   HEADER COLOR CUSTOMIZATION
   ======================================== */

/* To change header colors, modify the variables above:
   - --header-bg-color: Header background color
   - --header-text-color: Primary text color
   - --header-text-secondary: Secondary text color
   - --header-border-color: Border color
   - --header-shadow: Box shadow
*/