/* ============================================================
   layout.css — cabeçalho fixo, navegação principal e rodapé
   Depende de: tokens.css, base.css, components.css
   ============================================================ */

/* ---------- cabeçalho ---------- */
header.site{
  position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:100;
  background:var(--dark-2); color:var(--on-dark);
  border-bottom:1px solid rgba(var(--inverse-rgb),.08);
  transition:background-color .3s ease, border-color .3s ease;
}

/* O cabeçalho tem sempre a aparência do topo da página. No topo (.is-top)
   ele é transparente e o hero aparece por trás; ao rolar, ele reproduz a
   faixa de cima do hero: mesma foto, no mesmo tamanho e posição, com os
   mesmos degradês de sections.css (.hero::before). Tamanho e posição da
   foto são medidos no hero por modules/nav.js (--hero-bg-size,
   --hero-bg-pos, --hero-h). As classes vêm de nav.js, que tira as duas
   quando o menu do celular está aberto (fundo sólido do tema, porque o
   painel do menu herda estas cores).
   Sobre a foto o texto é sempre claro, nos dois temas: as variáveis de cor
   são redefinidas só dentro do cabeçalho e o logo usa a versão clara.
   Mudando os degradês do hero, mude aqui também. */
header.site.on-photo{
  --hero-green:92,107,53; --hero-green-deep:47,56,27;
  border-bottom-color:rgba(255,255,255,.18);
  --on-dark:#fff; --on-dark-soft:rgba(255,255,255,.85); --inverse-rgb:255,255,255;
  background-color:rgb(var(--hero-green-deep));
  background-image:
    linear-gradient(180deg, rgba(14,18,9,.55) 0, rgba(14,18,9,0) calc(var(--header-h) + 5rem)),
    linear-gradient(90deg,
      rgba(var(--hero-green),0) 0%,
      rgba(var(--hero-green),.25) 28%,
      rgba(var(--hero-green),.82) 48%,
      rgba(var(--hero-green-deep),.96) 70%,
      rgb(var(--hero-green-deep)) 100%),
    url('../img/hero-principal.webp');
  background-size:auto, auto, var(--hero-bg-size, cover);
  background-position:0 0, 0 0, var(--hero-bg-pos, 30% center);
  background-repeat:no-repeat;
}
@media (max-width:960px){
  header.site.on-photo{
    background-image:
      linear-gradient(180deg,
        rgba(var(--hero-green),.35) 0,
        rgba(var(--hero-green),.8) calc(var(--hero-h, 600px) * .4),
        rgba(var(--hero-green-deep),.95) var(--hero-h, 600px)),
      url('../img/hero-principal.webp');
    background-size:auto, var(--hero-bg-size, cover);
    background-position:0 0, var(--hero-bg-pos, 30% center);
  }
}
header.site.on-photo.is-top{ background:transparent; }
header.site.on-photo nav.primary a.active::after{ background:#dfe3c9; }
header.site.on-photo .brand__logo--light{ display:none; }
header.site.on-photo .brand__logo--dark{ display:block; }
/* Três faixas: marca à esquerda, navegação no centro exato, ferramentas à
   direita. As colunas laterais são 1fr cada — como têm sempre a mesma
   largura, o centro da navegação coincide com o centro da página,
   independentemente do tamanho da marca ou dos botões.
   (Com flex + space-between o meio ficaria deslocado, porque o espaço é
   dividido entre elementos de larguras diferentes.) */
header.site .container{
  height:100%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1.5rem;
}
header.site .brand{ justify-self:start; }
header.site nav.primary{ justify-self:center; }
header.site .head-tools{ justify-self:end; }

/* ---------- logotipo ----------
   As duas versões do logo ficam no HTML e o CSS mostra a que combina com o
   fundo: cabeçalho e rodapé usam --dark-2, que é claro no tema claro e quase
   preto no tema escuro. */
.brand{ --logo-h:44px; display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
/* O logo nunca pode ser achatado. Duas travas para isso: `max-width:none`
   anula o `img{max-width:100%}` do reset (que limitaria a imagem à largura
   da coluna, estreitando-a sem mexer na altura) e `flex-shrink:0` impede que
   ela ceda espaço dentro do link. */
.brand__logo{ display:block; height:var(--logo-h); width:auto; max-width:none; flex-shrink:0; }
/* Os dois arquivos têm enquadramentos diferentes: no claro a linha
   "NORTE AGRO" ocupa 52,6% da altura da imagem; no escuro, 58,1% (o espaço
   até "PROJETOS" é menor). O fator 0,904 faz o texto sair do mesmo tamanho
   nos dois temas. Se algum dia os arquivos forem reexportados com o mesmo
   enquadramento, é só remover esta regra. */
.brand__logo--dark{ display:none; height:calc(var(--logo-h) * 0.904); }

:root[data-theme="dark"] .brand__logo--light{ display:none; }
:root[data-theme="dark"] .brand__logo--dark{ display:block; }

/* ---------- navegação ---------- */
nav.primary{ display:flex; align-items:center; gap:2rem; }
nav.primary ul{ list-style:none; display:flex; gap:1.9rem; margin:0; padding:0; }
nav.primary a{
  text-decoration:none; font-size:.9rem; font-weight:500; letter-spacing:.02em; color:var(--on-dark-soft);
  position:relative; padding-block:.3rem;
}
nav.primary a:hover, nav.primary a.active{ color:var(--on-dark); }
nav.primary a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent); }

.head-tools{ display:flex; align-items:center; gap:1rem; }
.menu-toggle{ display:none; }

/* ---------- rodapé ---------- */
/* a seção Contato, logo acima, também é branco gelo: a linha no alto separa
   as duas */
footer.site{ background:var(--footer-bg); color:var(--on-dark-soft); padding-top:4rem; border-top:1px solid rgba(var(--inverse-rgb),.08); }
.footer-grid{ display:grid; grid-template-columns:1.3fr .8fr .9fr .9fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(var(--inverse-rgb),.08); }
.footer-grid .brand{ margin-bottom:1rem; }
.footer-grid p{ font-size:.9rem; line-height:1.6; max-width:32ch; }
.footer-col h4{ font-family:var(--font-label); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark); margin-bottom:1.1rem; font-weight:500; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.75rem; }
.footer-col a:not(.stamp){ text-decoration:none; color:var(--on-dark-soft); font-size:.9rem; }
.footer-col a:not(.stamp):hover{ color:var(--on-dark); }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-block:1.5rem; font-size:.8rem; }

/* e-mails e endereços não cabem em uma linha estreita: quebram em vez de
   esticar a página */
.footer-col a, .footer-col li{ overflow-wrap:anywhere; }

/* ---------- responsivo ---------- */

/* Faixa apertada do desktop.
   Para a navegação ficar no centro exato, as colunas laterais têm de ter a
   mesma largura — ou seja, a conta é DUAS vezes a largura da marca, mesmo
   que as ferramentas ocupem bem menos. Com a navegação em inglês (608px),
   o logo em tamanho cheio só cabe a partir de ~1107px. Abaixo disso o logo
   diminui e os espaçamentos encolhem, mantendo tudo em tamanho natural.
   Se um idioma novo tiver rótulos mais longos, revise esta faixa. */
@media (min-width:961px) and (max-width:1180px){
  header.site .container{ gap:1rem; }
  header.site .brand{ --logo-h:34px; }
  nav.primary ul{ gap:1rem; }
}

@media (max-width:960px){
  /* a navegação vira painel fixo e sai do fluxo: sem ela, a grade de três
     colunas não faz sentido — volta a ser marca à esquerda, ferramentas à
     direita */
  header.site .container{ display:flex; justify-content:space-between; }

  nav.primary{
    position:fixed; inset:var(--header-h) 0 0 auto; width:min(340px,86vw);
    height:calc(100vh - var(--header-h));
    /* dvh acompanha a barra de endereço do navegador móvel, que aparece e
       some durante a rolagem; 100vh sozinho corta o fim do menu */
    height:calc(100dvh - var(--header-h));
    background:var(--dark-2); flex-direction:column; align-items:flex-start; padding:2rem 1.75rem; gap:2.25rem;
    transform:translateX(100%); transition:transform .35s ease; overflow-y:auto; border-left:1px solid rgba(var(--inverse-rgb),.08);
  }
  nav.primary.open{ transform:translateX(0); }
  nav.primary ul{ flex-direction:column; gap:1.25rem; width:100%; }
  /* área de toque confortável: ~44px de altura por link */
  nav.primary a{ font-size:1.05rem; display:block; padding-block:.6rem; }
  .head-tools{ order:2; }
  .menu-toggle{ display:flex; order:3; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

/* ---------- celular ----------
   No cabeçalho cabem marca + idioma + tema + menu lado a lado. Sem encolher
   a marca e os espaçamentos, a soma passa da largura da tela e a página
   inteira ganha rolagem horizontal. */
@media (max-width:640px){
  header.site .container{ gap:.5rem; }
  .brand{ --logo-h:30px; }
  .head-tools{ gap:.4rem; }
  .icon-btn{ padding:.35rem; }

  nav.primary{ width:100%; }
  .footer-grid{ grid-template-columns:1fr; gap:2rem; }
  .footer-bottom{ font-size:.75rem; }
}

@media (max-width:380px){
  .brand{ --logo-h:26px; }
}