/* ===================================
   Header CSS
   =================================== */

/* Default Header State - Absolute positioned, transparent */
#main-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background-color: transparent;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Logo Styling - Default White */
#main-header #header-logo {
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

/* Header Hidden State - When scrolling down */
#main-header.header-hidden {
    position: fixed;
    transform: translateY(-100%);
}

/* Header Visible State - Fixed and slides in from top on scroll up */
#main-header.header-visible {
    position: fixed;
    transform: translateY(0);
}

/* Header Scrolled State - White background */
.header-scrolled {
    background-color: white !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* Logo Styling - Scrolled Normal */
.header-scrolled #header-logo {
    filter: none !important;
}

.header-scrolled .header-tagline {
    color: #6B6B6B !important;
}

.header-scrolled .header-icon {
    background-color: #632963 !important;
    border-color: #632963 !important;
}

.header-scrolled .header-text-primary {
    color: #2D2D2D !important;
}

.header-scrolled .header-text-secondary {
    color: #6B6B6B !important;
}

.header-scrolled .header-divider {
    background: linear-gradient(to bottom, transparent, #E5E7EB, transparent) !important;
}

.header-scrolled .header-icon-location {
    background-color: #F9FAFB !important;
    border-color: #F3F4F6 !important;
}

.header-scrolled .header-icon-location svg {
    color: #632963 !important;
}

/* Hover state for scrolled header icons */
.header-scrolled .group:hover .header-icon-location {
    background-color: #632963 !important;
    border-color: #632963 !important;
}

.header-scrolled .group:hover .header-icon-location svg {
    color: white !important;
}