/*
 * yourhumanworth — NavMenu microsite overrides.
 * Docs: /Docs/Apps/Microsites/yourhumanworth.md
 *
 * WHY: Unlike dark-hero sites, yourhumanworth has a warm cream hero background, so
 * the plugin's default white text on transparent background would be unreadable.
 * The initial state text color is overridden to dark (charcoal/terra) while the
 * background stays transparent as requested. The scrolled state uses warm cream
 * frosted glass. Lora serif brand font matches the editorial heading style.
 */

/* WHY: Dark text on transparent background — cream hero makes white text unreadable. */
.topbar__brand {
    color: var(--yhw-charcoal);
    font-family: var(--font-heading);
}

.topbar nav a {
    color: var(--yhw-warm-gray);
}

.topbar nav a:hover {
    color: var(--yhw-charcoal);
    background: rgba(45, 41, 38, 0.06);
}

.topbar nav a.active {
    color: var(--yhw-terra);
    background: rgba(193, 90, 61, 0.08);
}

.topbar__toggle {
    color: var(--yhw-charcoal);
}

/* WHY: Warm cream frosted glass for scrolled state — matches the old .site-header
   (rgba(249,245,239,0.94)) while staying in the transparent-to-solid pattern. */
.topbar.is-scrolled {
    background: rgba(249, 245, 239, 0.97);
    border-bottom-color: var(--yhw-border);
    box-shadow: 0 1px 3px rgba(45, 41, 38, 0.06);
}

/* WHY: backdrop-filter scoped to desktop so iOS Safari's containing-block bug
 * does not break touch routing on the fixed mobile nav drawer. */
@media (min-width: 901px) {
    .topbar.is-scrolled {
        backdrop-filter: blur(20px) saturate(1.05);
        -webkit-backdrop-filter: blur(20px) saturate(1.05);
    }
}

.topbar.is-scrolled .topbar__brand {
    color: var(--yhw-charcoal);
}

.topbar.is-scrolled nav a {
    color: var(--yhw-warm-gray);
}

.topbar.is-scrolled nav a:hover {
    color: var(--yhw-charcoal);
    background: rgba(45, 41, 38, 0.06);
}

.topbar.is-scrolled nav a.active {
    color: var(--yhw-terra);
    background: rgba(193, 90, 61, 0.1);
}

.topbar.is-scrolled .topbar__toggle {
    color: var(--yhw-charcoal);
}