/* ==========================================================================
   HEADER — Washinton Bento
   Consome exclusivamente tokens de css/design-system.css.
   Nenhum token novo de cor, tipografia ou espaçamento foi criado — ver
   explicação na entrega sobre os dois ajustes pontuais feitos no arquivo
   base (summary:focus-visible, .sr-only, .skip-link).

   Breakpoint de navegação: 1024px — reaproveita o mesmo breakpoint já
   usado na grid do design system (seção 5), não é um valor novo.
   ========================================================================== */

.site-header {
  position: relative; /* ancora o painel mobile (position:absolute) abaixo */
  background-color: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-lg);
  padding-block: var(--space-md);
}

/* Nome como identidade tipográfica — reaproveita a escala de H3 do design
   system (28–32px, Cormorant Garamond). Optei por não criar um tamanho
   próprio de "logo": nesta fase o nome funciona como um título de
   masthead editorial, e H3 já cobre exatamente essa hierarquia. */
.site-header__brand {
  grid-column: 1;
  justify-self: start;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-display-medium);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

/* Sem mudança de cor no hover do nome — grafite é a identidade, terracota
   fica reservada para ação (CTA) e destaque de navegação, para não diluir
   o papel dela como "cor de acento único" que o design system pede. */
.site-header__brand:hover,
.site-header__brand:focus-visible {
  color: var(--color-accent-secondary);
}

/* --------------------------------------------------------------------------
   NAVEGAÇÃO — desktop (≥1024px)
   -------------------------------------------------------------------------- */
.site-header__nav {
  grid-column: 2;
  justify-self: center;
}

.site-header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__nav-list a,
.site-header__whatsapp-link {
  position: relative;
  display: inline-block;
  padding-block: var(--space-3xs);
  font-family: var(--font-body);
  font-size: var(--text-secundario);
  font-weight: var(--weight-body-regular);
  color: var(--color-text);
  text-decoration: none;
}

/* Sublinhado que revela no hover/foco — o único uso de terracota na
   navegação, como "destaque", conforme pedido. Texto permanece grafite:
   o estado é comunicado pelo traço, não por troca de cor.
   .site-header__whatsapp-link (o CTA secundário do Header, desktop)
   reaproveita exatamente esta regra — mesmo padrão textual dos links de
   navegação, nenhum estilo novo foi criado para ele. */
.site-header__nav-list a::after,
.site-header__whatsapp-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background-color: var(--color-accent-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.site-header__nav-list a:hover::after,
.site-header__nav-list a:focus-visible::after,
.site-header__nav-list a[aria-current="page"]::after,
.site-header__whatsapp-link:hover::after,
.site-header__whatsapp-link:focus-visible::after {
  transform: scaleX(1);
}

.site-header__nav-list a:active,
.site-header__whatsapp-link:active {
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   AÇÕES — desktop (CTA)
   -------------------------------------------------------------------------- */
.site-header__actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.site-header__cta {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   MENU MOBILE (<1024px)
   <details>/<summary> nativos: o menu abre/fecha sem depender de JS.
   O JS incluído (header.js) só adiciona fechar com Esc — reforço de
   teclado, não é requisito para o menu funcionar.
   -------------------------------------------------------------------------- */
.site-header__toggle {
  display: none; /* reativado por media query abaixo, <1024px */
}

.site-header__mobile-nav-details {
  display: none; /* idem — some inteiramente em desktop */
  /* Fica dentro de .site-header__actions; só o painel (.site-header__mobile-nav)
     se estende à largura total, via position:absolute — ver abaixo. */
}

.site-header__toggle {
  list-style: none;
  cursor: pointer;
}

.site-header__toggle::-webkit-details-marker {
  display: none;
}

.site-header__toggle::marker {
  content: "";
}

/* Ícone: 3 barras que viram X quando o <details> está aberto */
.site-header__toggle-bars {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 16px;
}

.site-header__toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.site-header__toggle-bars span:nth-child(1) { top: 0; }
.site-header__toggle-bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.site-header__toggle-bars span:nth-child(3) { bottom: 0; }

.site-header__mobile-nav-details[open] .site-header__toggle-bars span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header__mobile-nav-details[open] .site-header__toggle-bars span:nth-child(2) {
  opacity: 0;
}
.site-header__mobile-nav-details[open] .site-header__toggle-bars span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-header__mobile-nav {
  /* position:absolute quebra a largura da coluna estreita onde o <details>
     está aninhado — o painel passa a se estender por todo o .site-header
     (que é o ancestral posicionado mais próximo), não pela largura do
     botão. z-index:2 é um valor local isolado, não um token: o Header só
     tem esta única camada sobreposta (além do skip-link, que só aparece
     com foco). Se um segundo elemento sobreposto surgir depois (modal,
     outro dropdown), aí sim vale formalizar uma escala --z-* no design
     system — prematuro criar isso agora para um único caso. */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  background-color: var(--color-bg);
  border-top: var(--border-width) solid var(--color-border);
  box-shadow: var(--shadow-subtle);
  padding-block: var(--space-lg);
}

.site-header__mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.site-header__mobile-nav-list a {
  display: block;
  padding-block: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text);
  text-decoration: none;
}

.site-header__mobile-nav-list a:hover,
.site-header__mobile-nav-list a:focus-visible {
  color: var(--color-accent-secondary);
}

.site-header__mobile-nav-list a:active {
  opacity: 0.7;
}

/* Os dois CTAs do painel mobile (Agendar atendimento + Conversar pelo
   WhatsApp), empilhados. Generaliza o que antes era uma regra só para
   .btn-primary (quando o WhatsApp era o único CTA do Header). */
.site-header__mobile-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.site-header__mobile-actions .btn {
  width: 100%;
}

/* --------------------------------------------------------------------------
   BREAKPOINT — troca entre navegação desktop e menu mobile em 1024px
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .site-header__inner {
    grid-template-columns: 1fr auto;
    padding-block: var(--space-sm);
  }

  .site-header__nav,
  .site-header__actions .site-header__cta,
  .site-header__whatsapp-link {
    display: none;
  }

  .site-header__actions {
    grid-column: 2;
  }

  .site-header__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;  /* ~44px — alvo de toque mínimo recomendado */
    height: 2.75rem;
    background: transparent;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text);
  }

  .site-header__toggle:hover {
    border-color: var(--color-border);
  }

  .site-header__toggle:active {
    background-color: var(--color-bg-alt);
  }

  .site-header__mobile-nav-details {
    display: block;
  }
}