/*
  Header/nav — extraído do Figma:
    desktop  112:2137 (1920x120)
    mobile fechado  301:1670 (430x165)
    mobile aberto   301:2167 (430x980)

  Breakpoints reais do Figma: 1920 (desktop) e ~430 (mobile). O ponto de troca entre nav
  desktop e hamburger mobile (1024px) não tem frame próprio no Figma — é interpolação de
  engenharia (rules/responsive.md seção 2/3), escolhido por coincidir com o breakpoint fixo
  "tablet" (1025) do projeto.
*/

.site-header {
  background-color: #ffffff;
  width: 100%;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1520px;
  margin-inline: auto;
  padding-inline: 20px;
  height: 120px;
}

.site-header__logo {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}

.site-header__logo img {
  display: block;
  width: 191px;
  height: 37.59px;
  max-width: 100%;
}

/* ---- nav desktop ---- */

.site-header__nav-list {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__nav-list a,
.site-header__nav-toggle {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.site-header__chevron {
  display: block;
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

/*
  Popup hover "Unidades"/"Soluções" — sem frame no Figma, reproduzido a partir de screenshot
  de referência (pedido explícito do usuário, 2026-08-18, ver comentário em header.php).
*/

.site-header__nav-item--dropdown {
  position: relative;
}

.site-header__nav-item--dropdown:hover .site-header__chevron,
.site-header__nav-item--dropdown:focus-within .site-header__chevron {
  transform: rotate(180deg);
}

.site-header__dropdown-panel {
  position: absolute;
  top: calc(100% + 16px);
  left: 0;
  min-width: 240px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow:
    0px 10px 25px rgba(0, 0, 0, 0.12),
    0px 4px 10px rgba(0, 0, 0, 0.06);
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s;
  z-index: 50;
}

.site-header__nav-item--dropdown:hover .site-header__dropdown-panel,
.site-header__nav-item--dropdown:focus-within .site-header__dropdown-panel,
.site-header__nav-toggle[aria-expanded="true"] ~ .site-header__dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-header__dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__dropdown-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__dropdown-list a:hover {
  color: var(--color-brand-orange);
}

.site-header__dropdown-list img {
  display: block;
  flex: 0 0 auto;
}

/* ---- CTA desktop ---- */

.site-header__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding-inline: 24px;
  border-radius: 9999px;
  background-color: var(--color-brand-orange);
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

/* ---- toggle mobile (hamburger) — escondido no desktop ---- */

.site-header__menu-toggle {
  display: none;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 25px;
  height: 20.1px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.site-header__menu-bar {
  display: block;
  width: 25px;
  height: 4.7px;
  background-color: var(--color-dark);
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

/* Hamburger → X quando aberto — padrão de mercado pro botão de fechar; o Figma não desenha
   esse estado (só mostra o menu já aberto, sem o botão), então isso é assunção de engenharia,
   não extração (rules/core.md). */
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-bar:nth-child(1) {
  transform: translateY(7.8px) rotate(45deg);
}
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-bar:nth-child(2) {
  opacity: 0;
}
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-bar:nth-child(3) {
  transform: translateY(-7.8px) rotate(-45deg);
}

/* ---- mobile menu (drawer full-screen) — escondido no desktop ---- */

.site-header__mobile-menu {
  display: none;
}

.site-header__mobile-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
}

.site-header__mobile-heading {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  color: var(--color-heading);
  /* Figma mostra o texto em caixa alta nesse breakpoint (mesmo link do desktop, tratamento
     visual diferente) — texto fonte continua natural-case no HTML, CSS resolve o visual. */
  text-transform: uppercase;
}

.site-header__mobile-pills {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 53px;
  border-radius: 26.5px;
  background-color: var(--color-brand-orange);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  text-decoration: none;
  white-space: nowrap;
}

.site-header__pill img {
  display: block;
  flex: 0 0 auto;
}

.site-header__mobile-links {
  display: flex;
  flex-direction: column;
  gap: 25px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__mobile-links a {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  color: var(--color-heading);
  text-decoration: none;
  text-transform: uppercase;
}

.site-header__mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 60px;
  border-radius: 9999px;
  background-color: var(--color-brand-green);
  box-shadow:
    0px 20px 25px -5px rgba(0, 201, 80, 0.3),
    0px 8px 10px -6px rgba(0, 201, 80, 0.3);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  text-decoration: none;
}

/* ---- breakpoint tablet/mobile (1024px, interpolado — ver comentário no topo) ---- */

@media (max-width: 1024px) {
  .site-header__nav,
  .site-header__cta {
    display: none;
  }

  .site-header__menu-toggle {
    display: flex;
  }
}

/* ---- mobile real (frames 301:1670 / 301:2167, ~430px) ---- */

@media (max-width: 767px) {
  .site-header__inner {
    height: 165px;
    padding-inline: 50px;
  }

  /* display:flex só via :not([hidden]) — senão sobrescreve o [hidden] do HTML (mesma
     especificidade de seletor, esta regra carrega depois do UA stylesheet) e o menu nunca
     fecharia via JS. */
  .site-header__mobile-menu {
    position: fixed;
    inset: 0;
    top: 165px;
    z-index: 100;
    background-color: #ffffff;
    overflow-y: auto;
    padding: 40px 50px;
    flex-direction: column;
    gap: 25px;
  }

  .site-header__mobile-menu:not([hidden]) {
    display: flex;
  }

  /* Body travado enquanto o menu mobile está aberto — sem isso, arrastar em
     .site-header__inner (faixa 0-165px, fora do overlay que começa em top:165px) rola a
     página por trás e mantém o menu aberto sobre um scroll incorreto.
     touch-action:none fica só em .site-header__inner (não no body) — touch-action é a
     interseção com os ancestrais, então no body ele travaria também o scroll interno do
     próprio .site-header__mobile-menu (overflow-y: auto). */
  body.site-header-menu-open {
    overflow: hidden;
  }

  body.site-header-menu-open .site-header__inner {
    touch-action: none;
  }
}