/* ==========================================================================
   HEADER - 2026 Invisible, Soft & Calm (Psychology Practice)
   ========================================================================== */
.site-header { 
    position: fixed; /* Fixed allows us to smoothly transition the background on scroll */
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 1000; 
    padding: 1.5rem 0; /* Generous breathing room */
    background-color: transparent; /* Totally invisible by default */
    border-bottom: 1px solid transparent;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
}

/* The state when the user starts scrolling */
.site-header.is-scrolled { 
    padding: 1rem 0; 
    background-color: #FFF6E1; /* Soft warm white */
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 2px solid rgba(28, 49, 68, 0.06); /* Very subtle line */
}

.header-inner { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 2rem; /* Wider horizontal spacing */
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

/* --- Logo Styling --- */
.site-branding { 
    display: flex; 
    align-items: center; 
}

.site-branding img {
    max-height: 65px; /* Bumped up from 45px to make the text legible */
    width: auto;
    transition: transform 0.3s ease;
}

/* Optional high-end touch: slight fade on hover */
.site-branding a:hover img {
    opacity: 0.8;
}

.site-title { 
    color: var(--color-primary); 
    font-family: var(--font-heading); 
    font-size: 1.4rem; 
    font-weight: 500; 
    text-decoration: none; 
    letter-spacing: -0.01em; 
}

/* --- Navigation Styling --- */
.main-navigation ul { 
    display: flex; 
    gap: 2.5rem; /* Generous spacing between items */
    list-style: none; 
    margin: 0; 
    padding: 0; 
}

.main-navigation a { 
    color: var(--color-primary); 
    font-family: var(--font-body), sans-serif;
    font-size: 0.95rem; /* Medium-small, not dominant */
    font-weight: 400; /* Thin, clean typography */
    letter-spacing: 0.02em; 
    text-decoration: none; 
    opacity: 0.65; /* Soft dark gray equivalent */
    transition: opacity 0.3s ease; 
}

.main-navigation a:hover { 
    opacity: 1; 
}

/* --- Header Actions (CTA & Mobile Menu) --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-cta { 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(28, 49, 68, 0.95); /* Slightly softer than pure black/navy */
    color: var(--color-surface) !important; 
    padding: 0.75rem 1.8rem; 
    border-radius: 40px; /* Soft, inviting rounded corners */
    font-weight: 500; 
    font-size: 0.95rem; 
    transition: all 0.3s ease; 
    text-decoration: none;
}

.header-cta:hover { 
    background-color: var(--color-primary); 
    transform: translateY(-1px); /* Very gentle lift */
}

/* Mobile Toggle Hamburger */
.mobile-toggle { 
    display: none; 
    background: none; 
    border: none; 
    cursor: pointer; 
    padding: 0.5rem; 
    z-index: 1001; 
}

.mobile-toggle span { 
    display: block; 
    width: 25px; 
    height: 2px; 
    background-color: var(--color-primary); 
    margin: 5px 0; 
    transition: 0.3s; 
}

/* --- Mobile Menu Overlay --- */
@media (max-width: 992px) {
    .header-inner { padding: 0 1rem; }
    .header-actions { gap: 1rem; }
    .header-cta { padding: 0.6rem 1.2rem; font-size: 0.85rem; }
    .mobile-toggle { display: block; }
    .main-navigation { 
        position: fixed; 
        top: 0; 
        right: -100%; 
        width: 80%; 
        max-width: 400px; 
        height: 100vh; 
        background-color: var(--color-surface); 
        flex-direction: column; 
        justify-content: center; 
        padding: 2rem; 
        box-shadow: -10px 0 30px rgba(0,0,0,0.1); 
        transition: right 0.4s cubic-bezier(0.19, 1, 0.22, 1); 
    }
    .main-navigation.is-open { right: 0; }
    .main-navigation ul { flex-direction: column; align-items: center; gap: 1.5rem; }
    .main-navigation a { font-size: 1.25rem; opacity: 0.8; }
    .mobile-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mobile-toggle.is-active span:nth-child(2) { opacity: 0; }
    .mobile-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}