/* ==========================================================================
   HEADER — fixed nav bar: brand, desktop nav + liquid indicator, theme
   switcher, hamburger trigger. (Mobile menu panel itself lives in
   mobile-menu.css; the dot-nav lives in dot-nav.css.)
   ========================================================================== */

.site-header {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: var(--z-header);
    padding: 1.1rem 0;
    transition: padding .35s var(--ease-soft), background .35s, border-color .35s;
    border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
    padding: .7rem 0;
    background: rgba(5,6,10,.7);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom-color: var(--border-soft);
}
.site-header__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

.brand { display: flex; align-items: center; gap: .7rem; }
.brand__mark {
    font-family: var(--font-display); font-weight: 700; font-size: 1.35rem;
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--panel-strong); border: 1px solid var(--border);
    color: var(--text);
}
.brand__dot { color: var(--accent); }
.brand__name { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name span:first-child { font-weight: 600; font-size: .95rem; }
.brand__tag { font-size: .62rem; color: var(--text-faint); letter-spacing: .1em; }
@media (max-width: 560px) { .brand__name { display: none; } }

.nav-desktop ul { display: flex; gap: 2.1rem; position: relative; }
.nav-desktop a {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .92rem; color: var(--text-dim);
    transition: color .25s;
    position: relative;
    z-index: 1;
}
.nav-desktop a .mono { font-size: .68rem; color: var(--text-faint); }
.nav-desktop a::after {
    content: ''; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;
    background: var(--accent); transition: width .3s var(--ease-soft);
}
.nav-desktop a:hover { color: var(--text); }
.nav-desktop a:hover::after { width: 100%; }
@media (max-width: 900px) { .nav-desktop { display: none; } }

/* "liquid" pill that glides beneath whichever nav link is hovered (js/modules/liquid-nav.js) */
.nav-liquid {
    position: absolute; top: 50%; left: 0;
    height: 32px; width: 0;
    border-radius: 100px;
    background: rgba(var(--accent-rgb), .13);
    border: 1px solid rgba(var(--accent-rgb), .35);
    transform: translateY(-50%);
    transition: transform .5s var(--ease), width .5s var(--ease), opacity .3s;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.nav-badge {
    font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase;
    color: #06070c; background: linear-gradient(120deg, var(--accent), var(--accent-2));
    padding: .12rem .4rem; border-radius: 100px;
    animation: pulseDot 1.8s infinite;
}
.mobile-menu .nav-badge { font-size: .5rem; vertical-align: middle; }

.header-actions { display: flex; align-items: center; gap: .8rem; }
@media (max-width: 560px) { .cv-download { display: none; } }

/* theme switcher */
.theme-switcher { position: relative; }
.theme-switcher__toggle {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--panel-strong); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    transition: border-color .3s;
}
.theme-switcher__toggle:hover { border-color: rgba(var(--accent-rgb), .6); }
.theme-switcher__swatch {
    width: 16px; height: 16px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 10px rgba(var(--accent-rgb), .7);
}
.theme-switcher__panel {
    position: absolute; top: calc(100% + 14px); right: 0;
    width: 180px; padding: 1rem;
    border-radius: var(--radius-md);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s var(--ease-soft), transform .25s var(--ease-soft), visibility .25s;
}
.theme-switcher__panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.theme-switcher__label { display: block; font-size: .62rem; letter-spacing: .1em; color: var(--text-faint); margin-bottom: .7rem; }
.theme-switcher__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.swatch {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--sw); border: 2px solid rgba(255,255,255,.15);
    transition: transform .25s var(--ease-soft), border-color .25s;
}
.swatch:hover { transform: scale(1.15); }
.swatch.is-active { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.15); }

/* language switch — an actual sliding toggle (real <input type="checkbox">
   underneath for free keyboard/screen-reader support) instead of a two-code
   pill. Unchecked = PT, checked = EN; modules/i18n.js drives both directions
   (click flips the language, and a language set elsewhere — e.g. the other
   switch instance in the mobile menu — syncs .checked back via JS). */
.lang-switch {
    display: flex; align-items: center; gap: .5rem; cursor: pointer;
    font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em;
    -webkit-tap-highlight-color: transparent;
}
.lang-switch__opt { color: var(--text-faint); transition: color .25s; }
.lang-switch__opt.is-active { color: var(--text); font-weight: 600; }

.lang-switch__track { position: relative; width: 38px; height: 21px; flex-shrink: 0; }
.lang-switch__input {
    position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.lang-switch__thumb {
    position: absolute; inset: 0; border-radius: 100px;
    background: var(--panel-strong); border: 1px solid var(--border);
    transition: border-color .3s;
}
.lang-switch__thumb::before {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 15px; height: 15px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 8px rgba(var(--accent-rgb), .65);
    transition: transform .3s var(--ease-soft);
}
.lang-switch__input:checked + .lang-switch__thumb::before { transform: translateX(17px); }
.lang-switch__input:checked + .lang-switch__thumb { border-color: rgba(var(--accent-rgb), .55); }
.lang-switch:hover .lang-switch__thumb { border-color: rgba(var(--accent-rgb), .6); }
.lang-switch__input:focus-visible + .lang-switch__thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-switch--mobile { align-self: flex-start; }

/* hamburger */
.hamburger {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 38px; height: 38px; background: var(--panel-strong); border: 1px solid var(--border);
    border-radius: 50%;
}
.hamburger span { width: 14px; height: 1.5px; background: var(--text); margin-inline: auto; transition: transform .3s var(--ease-soft), opacity .3s; }
.hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 900px) { .hamburger { display: flex; } }