/*
 * components/header.css
 * Navbar fixa e transparente sobre o Hero + menu mobile.
 *
 * Breakpoint: 960px (espelhado em NAV_DESKTOP_QUERY, components/navigation.js).
 *
 * Estados controlados por JS:
 *   .site-header.is-nav-open         menu mobile aberto        (components/navigation.js)
 *   .site-nav-toggle[aria-expanded]  estado do botão           (components/navigation.js)
 *   .site-header.is-past-hero        navbar sobre conteúdo claro → fundo
 *                                    --header-backdrop        (components/header-scroll.js)
 *
 * Sem JS (html sem .js): o botão fica oculto e os links aparecem
 * sempre visíveis, em linha, abaixo do logo — navegação continua utilizável.
 */

.site-header {
    --color-focus: var(--color-on-dark);

    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-header);
    width: 100%;
    background: transparent;
    color: var(--color-on-dark);
}

/*
 * Fora do Hero o fundo da página é claro e os links brancos somem.
 * Declarado antes de .is-nav-open para que o menu aberto (navy) prevaleça.
 */
.js .site-header.is-past-hero {
    background: var(--header-backdrop);
}

@media (prefers-reduced-motion: no-preference) {
    .js .site-header {
        transition: background-color 250ms ease;
    }
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: var(--header-height);
}

/* Logo: chip claro garante contraste do SVG (azul-marinho) sobre o vídeo. */

.site-logo {
    display: inline-flex;
    flex-shrink: 0;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    background: var(--color-background);
}

.site-logo img {
    width: auto;
    height: 28px;
}

/* Botão do menu (mobile) */

.site-nav-toggle {
    display: none;
}

.js .site-nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: var(--touch-target);
    height: var(--touch-target);
    margin-right: -10px;
    border-radius: var(--radius-sm);
}

.site-nav-toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.site-nav-toggle[aria-expanded="true"] .site-nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-nav-toggle[aria-expanded="true"] .site-nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.site-nav-toggle[aria-expanded="true"] .site-nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Painel de navegação — mobile */

.site-nav-list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    color: var(--color-on-dark-muted);
    font-weight: var(--font-weight-body);
}

.site-nav-link:hover {
    color: var(--color-on-dark);
}

/*
 * Link da section visível (scroll-spy, components/nav-spy.js):
 * .is-active + aria-current="location".
 *   desktop → traço laranja deslizante (.site-nav-indicator, posicionado pelo JS)
 *   mobile  → sublinhado laranja no próprio link (painel vertical)
 */
.site-nav-link.is-active {
    color: var(--color-on-dark);
}

.js .site-nav-list .site-nav-link.is-active {
    text-decoration: underline;
    text-decoration-color: var(--color-brand-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.5em;
}

.site-nav-indicator {
    display: none;
}

/*
 * Sem JS no mobile: links visíveis em linha, sob o logo. O header entra no
 * fluxo (não fixed) com fundo sólido para não cobrir o conteúdo do Hero.
 */
html:not(.js) .site-header {
    position: relative;
    background: var(--color-brand-navy);
}

html:not(.js) .site-header-inner {
    flex-wrap: wrap;
    padding-block: var(--space-xs);
}

html:not(.js) .site-nav-panel,
html:not(.js) .site-nav-list {
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-sm);
}

html:not(.js) .site-nav-panel {
    display: flex;
    width: 100%;
}

/* Com JS no mobile: painel em tela cheia, oculto até abrir. */
.js .site-nav-panel {
    position: fixed;
    inset: var(--header-height) 0 0;
    display: none;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--container-padding);
    overflow-y: auto;
    background: var(--color-brand-navy);
}

.js .site-header.is-nav-open {
    background: var(--color-brand-navy);
}

.js .site-header.is-nav-open .site-nav-panel {
    display: flex;
}

.js .site-nav-list {
    flex-direction: column;
    gap: var(--space-xs);
}

.js .site-nav-list .site-nav-link {
    font-size: 1.375rem;
}

.js .site-nav-panel .site-nav-cta {
    align-self: stretch;
}

/* Desktop */

@media (min-width: 960px) {
    .site-logo img {
        height: 30px;
    }

    /*
     * CTA compacto no desktop (uso com mouse): abaixo do --touch-target para
     * reduzir a altura da navbar. No mobile o CTA fica no painel, em tamanho de toque.
     */
    .site-nav-cta {
        min-height: 36px;
        padding: 0.375rem 0.875rem;
        font-size: 0.875rem;
    }

    .js .site-nav-toggle {
        display: none;
    }

    /* Sem JS não há como saber se o header está sobre o Hero: fundo sempre ativo. */
    html:not(.js) .site-header {
        position: fixed;
        background: var(--header-backdrop);
    }

    html:not(.js) .site-header-inner {
        flex-wrap: nowrap;
        padding-block: 0;
    }

    /*
     * relative: referência de posição do .site-nav-indicator.
     * inset: auto desfaz o `inset` do painel mobile (fixed) — com position
     * relative ele deslocaria o menu para fora da navbar.
     */
    html:not(.js) .site-nav-panel,
    .js .site-nav-panel {
        position: relative;
        inset: auto;
        display: flex;
        flex: 1;
        flex-direction: row;
        align-items: center;
        gap: var(--space-md);
        width: auto;
        padding: 0;
        overflow: visible;
        background: none;
    }

    .site-nav-list,
    .js .site-nav-list {
        flex-direction: row;
        gap: var(--space-lg);
        margin-inline: auto;
    }

    .js .site-nav-list .site-nav-link {
        font-size: 1rem;
    }

    .js .site-nav-panel .site-nav-cta {
        align-self: auto;
    }

    /* No desktop o traço deslizante substitui o sublinhado do link. */
    .js .site-nav-list .site-nav-link.is-active {
        text-decoration: none;
    }

    /*
     * Traço deslizante. Começa invisível; o JS define x, y, largura e opacity
     * (Anime.js) a partir da posição do link ativo dentro do painel.
     */
    .js .site-nav-indicator {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 0;
        height: 2px;
        border-radius: 2px;
        background: var(--color-brand-orange);
        opacity: 0;
        pointer-events: none;
    }
}