/* ── Shared Header Styles — Saprolings MVP2 ─────────────────────────────── */

#header-placeholder {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    transform: translateY(0);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#header-placeholder.header-hidden { transform: translateY(-100%); }

header {
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 50px;
    max-width: 1400px;
    margin: 0 auto;
}

.logo { display: flex; flex-direction: column; gap: 3px; line-height: 1; }

.logo-name {
    font-family: 'Avenir', 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 15px; font-weight: 600; color: #fff;
    letter-spacing: 1px; text-transform: uppercase;
}

.logo-sub {
    font-family: 'Avenir', 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 7px; font-weight: 600; color: #00cd5c;
    letter-spacing: 2.5px; text-transform: uppercase; text-align: center;
}

nav ul { display: flex; list-style: none; gap: 36px; }

nav a {
    text-decoration: none;
    font-family: 'Avenir', 'Avenir Next', 'Nunito Sans', sans-serif;
    color: rgba(255,255,255,0.85);
    font-size: 14px; font-weight: 500;
    transition: color 0.2s ease;
}
nav a:hover { color: #fff; }

.search-icon {
    cursor: pointer;
    color: rgba(255,255,255,0.75);
    transition: color 0.2s ease;
    display: flex; align-items: center;
}
.search-icon:hover { color: #fff; }

/* ── Solid state (on hover or scroll) ── */
#header-placeholder.header-solid header {
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom-color: rgba(255,255,255,0.08);
}
#header-placeholder.header-solid .logo-name { color: #fff; }
#header-placeholder.header-solid nav a { color: rgba(255,255,255,0.8); }
#header-placeholder.header-solid nav a:hover { color: #00cd5c; }
#header-placeholder.header-solid .search-icon { color: rgba(255,255,255,0.6); }
#header-placeholder.header-solid .search-icon:hover { color: #fff; }

/* ── Mobile ── */
@media (max-width: 768px) {
    .nav-container { padding: 12px 20px; }
}