/* Interações da página inicial (âncoras e cabeçalho compacto fixo ao rolar, em todas as larguras).
   Escopo body.nova-pagina; o comportamento está em /nova/interacoes.js. Os botões flutuantes têm o CSS no próprio componente
   (src/components/BotoesFlutuantesNovos.astro). */

body.nova-pagina {
  --nova-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --nova-dur-curta: 0.25s;
  --nova-dur-media: 0.4s;
  --nova-marrom: #b84c26;
  --nova-marrom-escuro: #9e3f1f;
}

/* --- Âncoras (ANI-02) ------------------------------------------------------
   A rolagem até as seções é feita no JS (scrollIntoView com smooth, ou auto em
   "reduzir movimento"). Âncoras e o foco do Tab param abaixo da barra compacta
   fixa (80 px no celular e tablet, 110 px no desktop). */
html:has(> body.nova-pagina) {
  scroll-padding-top: 88px;
}
@media (min-width: 1025px) {
  html:has(> body.nova-pagina) { scroll-padding-top: 122px; }
}

/* Seções que recebem foco ao seguir uma âncora: sem anel no clique do mouse. */
body.nova-pagina .nova-alvo-ancora:focus:not(:focus-visible) {
  outline: none;
}

/* --- Cabeçalho compacto fixo (UX-15, 3.5; U-12 no desktop) -----------------
   Criado por interacoes.js; aparece quando o cabeçalho sai por cima da tela.
   Fixo e animado só com transform: não empurra o conteúdo (sem CLS). */
body.nova-pagina .nova-barra {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
  height: 80px;
  padding: 0 calc(0.75rem + env(safe-area-inset-right, 0px)) 0 calc(1rem + env(safe-area-inset-left, 0px));
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(calc(-100% - env(safe-area-inset-top, 0px) - 16px));
  visibility: hidden;
  transition: transform 0.3s var(--nova-ease-out), visibility 0.3s;
}

/* Faixa branca atrás da área do entalhe enquanto a barra está visível. */
body.nova-pagina .nova-barra::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: env(safe-area-inset-top, 0px);
  background: #fff;
}

body.nova-pagina .nova-barra--visivel {
  transform: none;
  visibility: visible;
}

body.nova-pagina .nova-barra__logo {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
}

body.nova-pagina .nova-barra__logo img {
  display: block;
  width: auto;
  height: 62px;
  max-width: 190px;
  object-fit: contain;
}

body.nova-pagina .nova-barra__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: var(--raio-botao, 999px);
  background: var(--nova-marrom);
  color: #fff;
  font: 700 14px/1 Lato, system-ui, sans-serif;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s;
}
body.nova-pagina .nova-barra__cta:is(:hover, :focus-visible) { background: var(--nova-marrom-escuro); color: #fff; }

body.nova-pagina .nova-barra__cta svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
body.nova-pagina .nova-barra__longo { display: none; }

body.nova-pagina .nova-barra__cta:active {
  background: var(--nova-marrom-escuro);
}

body.nova-pagina .nova-barra__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--nova-marrom);
  cursor: pointer;
}
body.nova-pagina .nova-barra__menu:is(:hover, :focus) { background: transparent; color: var(--nova-marrom); }

body.nova-pagina .nova-barra__menu svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

body.nova-pagina .nova-barra__painel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Até 1024 px: menu no painel do hambúrguer, logo abaixo da barra. */
@media (max-width: 1024px) {
  body.nova-pagina .nova-barra__painel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
  }

  body.nova-pagina .nova-barra__painel[hidden] {
    display: none;
  }

  body.nova-pagina .nova-barra__painel a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 1rem;
    border-top: 1px solid #e4e4e4;
    color: var(--nova-marrom);
    font: 700 15px/1 Lato, system-ui, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
  }

  body.nova-pagina .nova-barra__painel a.nova-ativo {
    color: var(--nova-marrom-escuro);
    box-shadow: inset 4px 0 0 var(--nova-marrom);
  }
}

/* Tablet: a barra ganha a margem do conteúdo e o texto inteiro no botão. */
@media (min-width: 768px) and (max-width: 1024px) {
  body.nova-pagina .nova-barra { padding-inline: 24px 14px; gap: 0.75rem; }
  body.nova-pagina .nova-barra__curto { display: none; }
  body.nova-pagina .nova-barra__longo { display: inline; }
}

/* Desktop: logo | menu em linha | botão, na largura do conteúdo (até 1200 px). */
@media (min-width: 1025px) {
  body.nova-pagina .nova-barra {
    gap: 1.5rem;
    height: 110px;
    padding-inline: max(24px, calc((100% - 1200px) / 2));
  }
  body.nova-pagina .nova-barra__logo { margin-right: 0; }
  body.nova-pagina .nova-barra__logo img { height: 90px; max-width: 280px; }
  body.nova-pagina .nova-barra__menu { display: none; }
  body.nova-pagina .nova-barra__painel { flex: 1; min-width: 0; }
  body.nova-pagina .nova-barra__painel[hidden] { display: block; } /* garantia: no desktop o menu não recolhe */
  body.nova-pagina .nova-barra__painel ul { display: flex; justify-content: center; flex-wrap: wrap; }
  body.nova-pagina .nova-barra__painel a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    color: var(--nova-marrom);
    font: 700 16px/1 "Heebo", system-ui, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
  }
  body.nova-pagina .nova-barra__painel a:is(:hover, :focus-visible, .nova-ativo) {
    color: var(--nova-marrom-escuro);
    text-decoration: underline 2px #f67d21;
    text-underline-offset: 6px;
  }
  body.nova-pagina .nova-barra__cta { min-height: 50px; padding: 0 1.5rem; font-size: 16px; }
  body.nova-pagina .nova-barra__curto { display: none; }
  body.nova-pagina .nova-barra__longo { display: inline; }
}

/* --- Reduzir movimento ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  body.nova-pagina .nova-barra { transition: none; }
}