/*
  header.css — Estados de cor do cabeçalho (porta de layout/header.tsx).
  Base = estado "sólido" (todas as páginas internas e a home após rolar).
  [data-over-hero] = estado "transparente" no topo da home (texto claro sobre navy).
  A troca é feita por header.js (só na home). Sem !important: o seletor de atributo
  tem especificidade maior que a classe base, então vence naturalmente.
  Utilitários Tailwind cuidam de layout/espaçamento; aqui só as cores que trocam.
*/

.site-header {
  background-color: rgb(244 242 236 / 0.85); /* bg-paper/85 */
  border-bottom: 1px solid var(--hairline);
  transition: background-color 300ms, border-color 300ms;
}
@supports (backdrop-filter: blur(1px)) {
  .site-header { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background-color: rgb(244 242 236 / 0.7); }
}
.site-header[data-over-hero] {
  background-color: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* — Marca — */
.hdr-brand-name { color: var(--navy); }
.hdr-brand-sub  { color: rgb(34 30 69 / 0.8); } /* navy/80 */
.site-header[data-over-hero] .hdr-brand-name { color: var(--paper); }
.site-header[data-over-hero] .hdr-brand-sub  { color: rgb(244 242 236 / 0.55); } /* paper/55 */

/* — Links de navegação (desktop) — */
.hdr-link { color: rgb(42 39 66 / 0.8); transition: color 300ms; } /* ink/80 */
.hdr-link:hover, .hdr-link:focus-visible { color: var(--navy); }
.hdr-link.is-active { color: var(--navy); }
.site-header[data-over-hero] .hdr-link { color: rgb(244 242 236 / 0.75); } /* paper/75 */
.site-header[data-over-hero] .hdr-link:hover,
.site-header[data-over-hero] .hdr-link:focus-visible { color: var(--paper); }
.site-header[data-over-hero] .hdr-link.is-active { color: var(--paper); }

/* Filete dourado sob o link (scale-x no hover/ativo). */
.hdr-underline {
  position: absolute; left: 0; bottom: -0.25rem; height: 2px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 300ms;
}
.hdr-link:hover .hdr-underline,
.hdr-link:focus-visible .hdr-underline,
.hdr-link.is-active .hdr-underline { transform: scaleX(1); }

/* — CTA do header — solid (base) ↔ onNavy (over-hero) — */
.hdr-cta { background-color: var(--navy); color: var(--paper); transition: background-color 300ms, color 300ms; }
.hdr-cta:hover { background-color: var(--navy-deep); }
.site-header[data-over-hero] .hdr-cta { background-color: var(--paper); color: var(--navy); }
.site-header[data-over-hero] .hdr-cta:hover { background-color: #ffffff; }

/* — Gatilho mobile — */
.hdr-trigger { color: var(--navy); transition: color 300ms, background-color 300ms; }
.hdr-trigger:hover { background-color: rgb(34 30 69 / 0.05); }
.site-header[data-over-hero] .hdr-trigger { color: var(--paper); }
.site-header[data-over-hero] .hdr-trigger:hover { background-color: rgb(244 242 236 / 0.1); }