/* ==========================================================================
   Tema Ellos ConnecTI — cabeçalho, rodapé e tipografia global

   Só isso. Componente é assunto do plugin. Se aparecer regra de card aqui,
   alguém errou de arquivo.

   Depende dos tokens do design system (plugin Ellos Widgets) ou, na ausência
   dele, de assets/fallback.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TIPOGRAFIA GLOBAL

   A stack da display, os tamanhos calibrados e a trava de peso 400 moram no
   design system desde a 1.6.1 — não são redeclarados aqui. O tema apenas
   carrega os arquivos de fonte (functions.php). Duas cópias dos mesmos
   valores divergem; é uma questão de tempo.
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }

/* O cabeçalho é sticky e cobre o topo da viewport. Sem esta compensação,
   toda âncora do menu para atrás dele: a seção rola até encostar no topo e
   o título fica escondido, aparecendo o meio do bloco. O valor acompanha a
   altura real da barra em cada faixa. */
html { scroll-padding-top: 5rem; }
.admin-bar { scroll-padding-top: 7rem; }
@media (max-width: 939.98px) { html { scroll-padding-top: 4.75rem; } }
/* Abaixo de 600px a barra de admin não é fixa: não há o que compensar. */
@media (max-width: 600px) { .admin-bar { scroll-padding-top: 4.75rem; } }
body { margin: 0; background-color: var(--ec-white); }

.ec-nav__logo { font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   PULAR PARA O CONTEÚDO
   -------------------------------------------------------------------------- */

.ec-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--ec-sp-3) var(--ec-sp-4);
  background-color: var(--ec-white);
  color: var(--ec-blue-900);
  font-weight: 600;
  border-radius: 0 0 var(--ec-r-sm) 0;
}
.ec-skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   CABEÇALHO
   -------------------------------------------------------------------------- */

.ec-nav {
  --ec-brand-size: 4.6rem;
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(1, 63, 182, .96);
  backdrop-filter: blur(8px);
  color: var(--ec-white);
  overflow: visible; /* o crachá precisa poder sair da barra */
}

/* Com o painel aberto, o desfoque de fundo sai.

   `backdrop-filter` faz do elemento um bloco de contenção para descendentes
   `position: fixed` — a mesma regra que vale para `transform`. Com ele
   ligado, o painel de tela cheia era confinado à altura da barra: medido,
   `inset: 0` resultava em 44px de altura em vez dos 780 da viewport.

   Desligar é melhor que tirar o painel do cabeçalho no HTML: a relação
   entre o botão e o menu que ele controla continua junta na marcação, que é
   o que o `aria-controls` descreve. E com o painel cobrindo tudo não há
   fundo para desfocar. */
.ec-nav.is-nav-open {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: var(--ec-blue-900);
}

/* A barra de admin do WordPress também é fixa — mas só até certa largura.

   Em 600px ou menos ela deixa de ser fixa e passa a rolar junto com a
   página: compensar a altura dela ali prende o cabeçalho 46px abaixo do
   topo para sempre, com a página aparecendo nessa faixa depois que a barra
   já saiu de vista. Era o que acontecia, e o sintoma é o cabeçalho
   "flutuando" no meio do hero.

   As três faixas seguem o comportamento real da barra: 32px fixa no
   desktop, 46px fixa entre 601 e 782, e nenhuma compensação abaixo disso. */
.admin-bar .ec-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .ec-nav { top: 46px; } }
@media (max-width: 600px) { .admin-bar .ec-nav { top: 0; } }

.ec-nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ec-sp-5);
  padding-block: var(--ec-sp-3);
}

/* A âncora mantém a caixa no fluxo; o crachá é que transborda. Assim a logo
   cresce sem engordar a barra. */
.ec-nav__brand {
  position: relative;
  width: var(--ec-brand-size);
  height: 2.4rem;
  flex: none;
  margin-right: auto;
  display: block;
  text-decoration: none;
  color: inherit;
}

.ec-nav__logo {
  font-family: var(--ec-font-display);
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
}

/* Sem logo carregada, a âncora precisa acomodar o texto do nome do site.
   A classe vem do PHP; :has() resolveria, mas um navegador sem suporte
   quebraria o cabeçalho inteiro. */
.ec-nav__brand--texto { width: auto; height: auto; }

.ec-brand-badge {
  position: absolute;
  left: 0;
  top: -0.15rem;
  z-index: 2;
  display: block;
  width: 100%;
  background-color: var(--ec-white);
  border-radius: calc(var(--ec-brand-size) * .18);
  padding: calc(var(--ec-brand-size) * .06);
  box-shadow: 0 18px 34px -16px rgba(1, 20, 60, .55);
  animation: ec-brand-rise .7s var(--ec-ease) both;
}
.ec-brand-badge img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes ec-brand-rise {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ec-brand-badge { animation: none; }
}

/* --- Navegação ------------------------------------------------------------

   Dois estados do mesmo elemento: linha no desktop, painel de tela cheia no
   celular. O botão de ação mora dentro da navegação, então acompanha os dois.
   -------------------------------------------------------------------------- */

.ec-nav__list {
  display: flex;
  gap: var(--ec-sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ec-nav__list a {
  color: inherit;
  text-decoration: none;
  font-size: var(--ec-fs-sm);
  font-weight: 500;
  opacity: .88;
}
.ec-nav__list a:hover,
.ec-nav__list a:focus-visible { opacity: 1; text-decoration: underline; }
.ec-nav__list .current-menu-item > a { opacity: 1; }

.ec-nav__cta {
  padding: .7em 1.2em;
  font-size: var(--ec-fs-sm);
}

/* --- Botão de três barras -------------------------------------------------

   As barras viram X na abertura. A do meio some; as outras duas giram sobre
   o próprio centro. O alvo de toque tem 44px, que é o mínimo confortável.
   -------------------------------------------------------------------------- */

.ec-nav__toggle {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.4rem;
  padding: 0;
  background-color: transparent;
  border: 0;
  color: inherit;
  border-radius: var(--ec-r-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ec-nav__toggle:focus-visible { outline: 3px solid var(--ec-yellow-400); outline-offset: 2px; }

.ec-nav__burger {
  position: relative;
  display: block;
  width: 1.5rem;
  height: 1rem;
}
.ec-nav__burger i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform 300ms var(--ec-ease, ease), opacity 180ms linear;
}
.ec-nav__burger i:nth-child(1) { top: 0; }
.ec-nav__burger i:nth-child(2) { top: calc(50% - 1px); }
.ec-nav__burger i:nth-child(3) { bottom: 0; }

.is-nav-open .ec-nav__burger i:nth-child(1) { transform: translateY(calc(0.5rem - 1px)) rotate(45deg); }
.is-nav-open .ec-nav__burger i:nth-child(2) { opacity: 0; }
.is-nav-open .ec-nav__burger i:nth-child(3) { transform: translateY(calc(-0.5rem + 1px)) rotate(-45deg); }

/* --- Desktop: linha ------------------------------------------------------- */

@media (min-width: 940px) {
  .ec-nav__links {
    display: flex;
    align-items: center;
    gap: var(--ec-sp-5);
  }
  .ec-nav__toggle { display: none; }
}

/* --- Celular: painel de tela cheia ----------------------------------------

   Fixo e cobrindo a viewport inteira, com o cabeçalho por cima: a barra
   continua visível e o botão de fechar fica no mesmo lugar onde estava o de
   abrir, que é o que o dedo espera.

   z-index 1 dentro do contexto do cabeçalho, e o botão em 2. Assim o painel
   passa por cima da página e por baixo do controle, sem precisar de valor
   alto e sem competir com a barra de admin do WordPress.

   visibility no lugar de display: elemento que sai de display:none não
   anima, e o painel precisa entrar com transição.
   -------------------------------------------------------------------------- */

@media (max-width: 939.98px) {
  .ec-nav__links {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--ec-sp-6);
    padding: calc(var(--ec-brand-size) + var(--ec-sp-6)) var(--ec-gutter)
             max(var(--ec-sp-7), env(safe-area-inset-bottom));
    background: linear-gradient(180deg, var(--ec-blue-900), #01143C);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.75rem);
    transition: opacity 260ms var(--ec-ease, ease),
                transform 300ms var(--ec-ease, ease),
                visibility 0s linear 300ms;
  }

  .ec-nav__links.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 260ms var(--ec-ease, ease),
                transform 300ms var(--ec-ease, ease),
                visibility 0s;
  }

  .ec-nav__list {
    flex-direction: column;
    gap: 0;
  }
  .ec-nav__list li { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .ec-nav__list li:first-child { border-top: 1px solid rgba(255, 255, 255, .12); }

  .ec-nav__list a {
    display: block;
    padding: var(--ec-sp-4) 0;
    font-family: var(--ec-font-display);
    font-size: 1.6rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: var(--ec-ls-display);
    opacity: 1;
  }
  .ec-nav__list a:hover,
  .ec-nav__list a:focus-visible { text-decoration: none; color: var(--ec-blue-400); }

  /* O botão desce para o fim do painel: é a última coisa depois de ler as
     opções, não a primeira. */
  .ec-nav__cta {
    margin-top: auto;
    justify-content: center;
    width: 100%;
    padding: 1em 1.2em;
    font-size: var(--ec-fs-body);
  }

  /* Enquanto o painel está aberto a página não rola atrás dele.

     `overflow: hidden` sozinho não basta: o scrollport encolhe, o navegador
     reancora a posição e a página salta — medido, de 483px para 217px ao
     abrir. O corpo fixo com deslocamento negativo mantém tudo no lugar, e o
     JS devolve a posição ao fechar. */
  .ec-nav-travado body {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ec-nav__links { transition: opacity 1ms linear, visibility 0s; transform: none; }
  .ec-nav__burger i { transition: none; }
}

/* --------------------------------------------------------------------------
   RODAPÉ
   -------------------------------------------------------------------------- */

.ec-foot { padding-block: var(--ec-sp-6); }

.ec-foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ec-sp-4);
}

.ec-foot__brand {
  display: block;
  width: 9rem;
  flex: none;
  text-decoration: none;
  color: inherit;
}
/* No rodapé o crachá é estático: nada para transbordar, nada para animar. */
.ec-foot .ec-brand-badge {
  position: static;
  padding: 0;
  background-color: transparent;
  box-shadow: none;
  animation: none;
}

.ec-foot__legal { text-align: right; }
.ec-foot__line {
  margin: 0;
  font-size: var(--ec-fs-sm);
  opacity: .72;
}
.ec-foot__line--fine {
  margin-top: var(--ec-sp-1);
  font-size: var(--ec-fs-xs);
  opacity: .55;
}

/* --------------------------------------------------------------------------
   TELAS ESTREITAS
   -------------------------------------------------------------------------- */

@media (max-width: 939.98px) { .ec-nav { --ec-brand-size: 4rem; } }
@media (max-width: 560px)    { .ec-nav { --ec-brand-size: 3.5rem; } }

@media (max-width: 700px) {
  .ec-foot__inner {
    flex-direction: column;
    gap: var(--ec-sp-3);
    text-align: center;
  }
  .ec-foot__legal { text-align: center; }
  .ec-foot__brand { width: 7.5rem; }
}