/* header.css — header bar, scroll state, theme toggle, logo. */

/* ─── Header ───────────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
    transition: background var(--duration-base) var(--ease),
                box-shadow var(--duration-base) var(--ease),
                border-color var(--duration-base) var(--ease);
}
/* Stronger surface when the page is scrolled — toggled by nav.js */
.site-header.is-scrolled {
    background: color-mix(in srgb, var(--color-bg) 96%, transparent);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--color-gold) 18%, transparent),
                var(--shadow-sm);
}
@supports not (backdrop-filter: blur(1px)) {
    .site-header { background: var(--color-bg); }
}

.header-top {
    background: var(--color-green-darker);
    color: #fff;
    font-size: var(--fs-sm);
    padding: var(--space-1) 0;
}
.header-top .container {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    /* Allow graceful wrap as a safety net, but tightened mobile rules
       (after .lang-switcher__item base rule below) keep one-row at 375. */
    flex-wrap: wrap;
}
.header-top a { color: #fff; }
.header-top a:hover, .header-top a:focus-visible { text-decoration: underline; }
.header-top__phone,
.header-top__email {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: rgba(255, 255, 255, .9);
}

.lang-switcher {
    list-style: none;
    display: flex;
    gap: var(--space-1);
    margin: 0 0 0 auto;
    padding: 0;
}

/* Theme toggle (light/dark) — sits in the dark header-top bar */
.theme-toggle {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .7);
    padding: var(--space-1);
    margin-left: var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.theme-toggle:hover, .theme-toggle:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}
/* Show sun in dark mode (click to go light), moon in light mode (click to go dark) */
.theme-toggle__sun  { display: none; }
.theme-toggle__moon { display: inline-block; }
[data-theme="dark"] .theme-toggle__sun  { display: inline-block; }
[data-theme="dark"] .theme-toggle__moon { display: none; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) .theme-toggle__sun  { display: inline-block; }
    html:not([data-theme]) .theme-toggle__moon { display: none; }
}
.lang-switcher__item {
    display: inline-block;
    padding: 2px var(--space-2);
    color: rgba(255, 255, 255, .65);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xs);
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.lang-switcher__item:hover,
.lang-switcher__item:focus-visible {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    text-decoration: none;
}
.lang-switcher__item.is-active {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.header-main { padding-block: var(--space-3); }
.header-main__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
}

.logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    overflow: hidden;
    border-radius: var(--radius-sm);
    transition: background var(--duration-base) var(--ease);
}
.logo__stage {
    width: clamp(140px, 20vw, 200px);
    height: auto;
    aspect-ratio: 400 / 225;
    display: block;
}
.logo__anim,
.logo__static {
    width: 100%;
    height: 100%;
    display: block;
}
.logo__static {
    color: var(--logo-mark-color, currentColor);
}
.logo__static rect { fill: currentColor; }

/* Default: animated WebP only. Static SVG hidden so two layers don't double up. */
.logo__static { display: none; }

/* Light theme: the WebP is encoded as white-on-transparent (matches dark theme natively).
   On a cream/white background the white letters disappear, so invert RGB (alpha is preserved
   by CSS invert) to render the wordmark as near-black. The transparent BG stays transparent. */
:root .logo__anim,
[data-theme="light"] .logo__anim {
    filter: invert(1);
}
[data-theme="dark"] .logo__anim {
    filter: none;
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) .logo__anim { filter: none; }
}

/* Reduced-motion: swap — hide the animation, show the themed static SVG. */
@media (prefers-reduced-motion: reduce) {
    .logo__anim   { display: none; }
    .logo__static { display: block; }
}