/* ==========================================================================
   INAEC · SEÇÃO 1a: HEADER INSTITUCIONAL
   Cabeçalho fixo do portal, tema claro sobre o ground cinza.

   >>> MIGRAÇÃO ELEMENTOR PRO
   Alvo: Theme Builder → Header.
     Container "header-bar"  (flex · row · space-between · align center)
       ├── Widget Site Logo        → .site-header__brand
       ├── Container "nav"         (flex · row · gap 28) → widget Nav Menu
       └── Container "actions"     (flex · row · gap 12) → Busca + Botão
   Efeito de rolagem: Avançado → Efeitos de Movimento → Sticky "Top" +
   "Efeitos ao rolar" (o Elementor injeta .elementor-sticky--effects; troque
   .is-scrolled por essa classe nos seletores abaixo).
   Breakpoint de colapso = 1024px (breakpoint "tablet" do Elementor).
   ========================================================================== */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  background-color: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  transition: background-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  block-size: var(--header-height);
  transition: block-size var(--duration) var(--ease);
}

/* Estado rolado — superfície sólida + régua institucional na base */
.site-header.is-scrolled {
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.site-header.is-scrolled .site-header__bar { block-size: var(--header-height-scrolled); }

.site-header::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: var(--regua-height);
  background-image: var(--inaec-grad-ciclo);
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}
.site-header.is-scrolled::after { opacity: 1; }

/* --- Marca --------------------------------------------------------------
   Assinatura HORIZONTAL COLORIDA (variação A do MIV) — o padrão preferencial.
   O símbolo isolado foi testado e descartado: em um portal institucional o
   visitante de primeira viagem precisa ler o nome da instituição no topo.
   Mínimo digital da assinatura horizontal: 150px de largura.
   Nunca em caixa ou moldura, nunca com sombra. */
.site-header__brand { display: block; line-height: 0; }
.site-header__brand img {
  inline-size: var(--logo-width);
  min-inline-size: var(--logo-horizontal-min);
  block-size: auto;
}

/* --- Navegação ---------------------------------------------------------- */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-xs), 1.8vw, var(--space-md));
}

.site-nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--space-2xs);
  font-size: var(--fs-legend);   /* 14px */
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration) var(--ease);
}
@media (hover: hover) {
  .site-nav__link:hover { color: var(--inaec-verde); }
}

/* Sublinhado como affordance de navegação (não como ênfase textual) */
.site-nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  background-image: var(--inaec-grad-ciclo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration) var(--ease);
}
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }

@media (hover: hover) {
  .site-nav__link:hover::after { transform: scaleX(1); }
}
.site-nav__link[aria-current="page"] { color: var(--inaec-verde); font-weight: var(--fw-semibold); }

/* --- Submenus (dropdown) ------------------------------------------------
   Mesma organização do portal anterior: Institucional e Conteúdo Circular
   agrupam páginas filhas. O item-pai é um <button>, não um <a>: ele não leva
   a lugar nenhum, apenas abre o grupo — e botão é o que leitores de tela
   anunciam corretamente como controle expansível.

   >>> ELEMENTOR: o widget Nav Menu monta isso a partir de Aparência › Menus.
   Este CSS existe para o protótipo se comportar como o site final. */
.site-nav__item { position: relative; }

.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: var(--space-2xs) 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.site-nav__toggle svg {
  inline-size: 14px;
  block-size: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--duration) var(--ease);
}
.site-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

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

.site-nav__submenu a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-legend);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
@media (hover: hover) {
  .site-nav__submenu a:hover {
  background-color: color-mix(in srgb, var(--inaec-verde) 9%, transparent);
  color: var(--inaec-verde);
}
}

/* Desktop: painel flutuante ------------------------------------------------ */
@media (min-width: 1025px) {
  .site-nav__submenu {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-start: -0.5rem;
    z-index: 1;
    min-inline-size: 210px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    /* `visibility` não deve ser interpolada: transicioná-la com duração
       deixa o painel invisível durante toda a animação de abertura. O
       idioma correto é duração zero com atraso — some só depois do fade,
       e aparece na hora ao abrir. */
    transition: opacity var(--duration) var(--ease),
                transform var(--duration) var(--ease),
                visibility 0s linear var(--duration);
  }

  /* Régua institucional assinando o topo do painel */
  .site-nav__submenu::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    border-start-start-radius: var(--radius-md);
    border-start-end-radius: var(--radius-md);
    background-image: var(--inaec-grad-ciclo);
  }
  .site-nav__submenu { padding-block-start: calc(var(--space-2xs) + 3px); }

  /* Ponte invisível até o painel: sem ela o menu fecha ao atravessar o vão
     de 8px com o mouse. */
  .site-nav__item--tem-filhos::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    block-size: 0.75rem;
  }

  .site-nav__item:hover > .site-nav__submenu,
  .site-nav__item:focus-within > .site-nav__submenu,
  .site-nav__toggle[aria-expanded="true"] + .site-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }
}

/* --- Ações do cabeçalho -------------------------------------------------- */
.site-header__actions { display: flex; align-items: center; gap: var(--space-2xs); }

/* Busca — o portal do INEC expõe busca no cabeçalho */
.site-search {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
@media (hover: hover) {
  .site-search:hover {
  background-color: color-mix(in srgb, var(--inaec-verde) 10%, transparent);
  color: var(--inaec-verde);
}
}
.site-search svg {
  inline-size: 22px; block-size: 22px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- Botão de menu (mobile) ---------------------------------------------
   Ícone conforme MIV: grade 24px, traço 2px, pontas arredondadas, sem fill. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  padding: 0;
  background: transparent;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
@media (hover: hover) {
  .nav-toggle:hover { border-color: var(--color-border-strong); color: var(--inaec-verde); }
}
.nav-toggle__icon { inline-size: 24px; block-size: 24px; }
.nav-toggle__icon line {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
  /*
     O X SAÍA TORTO.

     Em elemento SVG, `transform-origin: center` é o centro da CAIXA DE
     REFERÊNCIA — e a referência padrão de um `<line>` é o viewBox inteiro,
     não a própria linha. Cada braço girava em torno do centro do ícone
     (12,12) em vez do seu próprio centro, saía da posição, e o `translateY`
     seguinte já partia do lugar errado: os dois braços não se cruzavam no
     meio.

     `transform-box: fill-box` muda a referência para a caixa da PRÓPRIA
     linha. Assim cada uma gira sobre si mesma e o deslocamento de 6px leva
     as duas exatamente ao centro do ícone.
  */
  transform-box: fill-box;
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon line:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   RESPONSIVO · ≤1024px (breakpoint "tablet" do Elementor)
   Navegação vira gaveta em tela cheia, mantendo o tema claro do portal.
   ========================================================================== */
@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    /*
       ALINHADA AO TOPO, NÃO CENTRALIZADA.

       Com `justify-content: center` e conteúdo mais alto que a caixa, o flex
       transborda para os DOIS lados: a lista de 437px ficava centralizada
       numa caixa de 200px e o primeiro item nascia em -130px — acima da
       tela, atrás do cabeçalho. Cinco dos treze links ficavam sob o
       cabeçalho e três fora da tela, e `overflow: visible` não deixava
       rolar até eles. Abrindo os submenus, piorava.

       Três correções que só funcionam juntas: altura real da janela, topo
       alinhado e rolagem própria.
    */
    justify-content: flex-start;
    /* `dvh` acompanha a barra do navegador no celular, que muda de altura ao
       rolar; `vh` fica como reserva para quem não conhece a unidade. */
    block-size: 100vh;
    block-size: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Espaço para o dedo passar do último item sem esbarrar na borda. */
    overscroll-behavior: contain;
    padding: calc(var(--header-height) + var(--space-md)) var(--container-gutter) var(--space-2xl);
    background-color: var(--color-surface);
    /* Fechada: fora de tela e fora da árvore de acessibilidade */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--duration) var(--ease), visibility var(--duration) var(--ease);
  }
  .site-nav.is-open { transform: translateX(0); visibility: visible; }

  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  .site-nav__link,
  .site-nav__toggle {
    font-family: var(--font-display);
    font-size: var(--fs-title);
    font-weight: var(--fw-heading);
    letter-spacing: var(--tracking-tight);
    color: var(--color-heading);
  }
  .site-nav__toggle svg { inline-size: 20px; block-size: 20px; }

  /* Acordeão: o grupo só ocupa espaço quando aberto */
  .site-nav__item { inline-size: 100%; }
  .site-nav__submenu {
    padding: 0 0 0 var(--space-xs);
    margin-block-start: 0.5rem;
    border-inline-start: 2px solid var(--color-border);
    display: none;
  }
  .site-nav__toggle[aria-expanded="true"] + .site-nav__submenu { display: flex; }
  .site-nav__submenu a { font-size: 1rem; padding-inline: 0.5rem; }

  /* CTA migra para dentro da gaveta */
  .site-nav__cta { margin-block-start: var(--space-lg); align-self: stretch; text-align: center; }
  .site-header__actions .btn { display: none; }

  /* Trava a rolagem do corpo com a gaveta aberta */
  body.has-drawer-open { overflow: hidden; }

  /* A gaveta é filha do header e, por ter z-index, pintava por cima da marca
     e do botão de fechar. Reerguemos os dois acima do painel para que o
     usuário sempre possa fechar o menu no toque — e não só com Esc. */
  .site-header__brand,
  .site-header__actions {
    position: relative;
    z-index: calc(var(--z-drawer) + 1);
  }

  /* Com a gaveta aberta a barra acompanha a superfície branca do painel */
  .site-header.is-drawer-open {
    background-color: var(--color-surface);
    box-shadow: none;
  }
  .site-header.is-drawer-open::after { opacity: 0; }
}

@media (min-width: 1025px) {
  .site-nav__cta { display: none; }
}

@media (max-width: 480px) {
  :root { --logo-width: 152px; } /* segue acima do mínimo de 150px do MIV */
  .site-search { display: none; } /* busca migra para dentro da gaveta */
}