/* ===================================
   Header CSS - Landing Page 2
   Replicated from Landing Page 1
   =================================== */

/* Default Header State - Always white background with shadow */
#main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease;
}


/* Body padding removed - hero touches header directly */




/* Logo Styling - Always colored (no filter) */
#main-header #header-logo {
    filter: none;
    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 tagline - Always dark */
.header-tagline {
    color: #6B6B6B !important;
}

/* Icon containers - Always light background with centered icons */
.header-icon-location {
    background-color: #F9FAFB !important;
    border-color: #F3F4F6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.header-icon-location svg {
    color: #632963 !important;
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    margin: 0 !important;
}


/* Text colors - Always dark */
.header-text-primary {
    color: #2D2D2D !important;
}

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

/* Divider - Always gray */
.header-divider {
    background: linear-gradient(to bottom, transparent, #E5E7EB, transparent) !important;
}

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

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

/* Utility Classes for Responsive Design */
.max-w-7xl {
    max-width: 80rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-col {
    flex-direction: column;
}

.items-start {
    align-items: flex-start;
}

.group {
    position: relative;
}

.h-10 {
    height: 2.5rem;
}

.w-10 {
    width: 2.5rem;
}

.h-12 {
    height: 3rem;
}

.w-auto {
    width: auto;
}

.rounded-full {
    border-radius: 9999px;
}

.transition-all {
    transition: all 0.3s ease;
}

.duration-300 {
    transition-duration: 300ms;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.font-semibold {
    font-weight: 600;
}

.font-medium {
    font-weight: 500;
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.mt-0\.5 {
    margin-top: 0.125rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

.text-white {
    color: white;
}

.border {
    border-width: 1px;
}

.border-white\/30 {
    border-color: rgba(255, 255, 255, 0.3);
}

.bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.2);
}

.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

.w-px {
    width: 1px;
}

.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.from-transparent {
    --tw-gradient-from: transparent;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
}

.via-white\/30 {
    --tw-gradient-stops: var(--tw-gradient-from), rgba(255, 255, 255, 0.3), var(--tw-gradient-to, transparent);
}

.to-transparent {
    --tw-gradient-to: transparent;
}

/* Glassmorphism and hover effects */
.header-icon-location {
    background-color: #F9FAFB;
    backdrop-filter: none;
    /* Removed blur for always-white design */
    border: 1px solid #F3F4F6;
    transition: all 0.3s ease;
}

.group:hover .header-icon-location {
    background-color: #632963;
    border-color: #632963;
}

.header-text-primary {
    color: #2D2D2D;
    /* Changed to dark for always-white design */
    transition: color 0.3s ease;
}

.group:hover .header-text-primary {
    color: #632963;
    /* Changed to accent color on hover */
}

.header-text-secondary {
    color: #6B6B6B;
    /* Changed to dark gray for always-white design */
}

.header-divider {
    background: linear-gradient(to bottom, transparent, #E5E7EB, transparent);
    /* Changed to gray for always-white design */
    transition: all 0.3s ease;
}

/* Responsive breakpoints */
@media (min-width: 640px) {
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .sm\:h-12 {
        height: 3rem;
    }

    .sm\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .sm\:gap-4 {
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .lg\:h-24 {
        height: 6rem;
    }

    .lg\:h-14 {
        height: 3.5rem;
    }

    .lg\:h-5 {
        height: 1.25rem;
    }

    .lg\:w-5 {
        width: 1.25rem;
    }

    .lg\:gap-8 {
        gap: 2rem;
    }

    .lg\:flex {
        display: flex;
    }

    .lg\:block {
        display: block;
    }
}

/* Hide/show utilities */
.hidden {
    display: none;
}

@media (min-width: 1024px) {
    .hidden.lg\:flex {
        display: flex;
    }

    .hidden.lg\:block {
        display: block;
    }
}

/* Height utilities */
.h-20 {
    height: 5rem;
}

.h-4 {
    height: 1rem;
}

.w-4 {
    width: 1rem;
}

/* SVG styling */
svg {
    display: block;
    vertical-align: middle;
}

.transition-colors {
    transition-property: color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}