/* ==========================================================================
   INAEC · INTERFACE
   Peças que não pertencem a nenhuma seção do conteúdo: faixa de avisos do
   topo, botão de voltar ao topo, busca, consentimento de cookies, faixa de
   parceiros e o formulário de contato.

   >>> ELEMENTOR: cada bloco daqui vira um widget global no Theme Builder
   (Header, Footer ou Popup), e não um container de página.
   ========================================================================== */

/* ==========================================================================
   1 · TOP HEADER — a faixa de avisos
   ========================================================================== */

.top-header {
  background: var(--inaec-verde-profundo);
  color: var(--color-text-inverse);
  position: relative;
  z-index: calc(var(--z-header) + 1);
}

/* A régua do MIV separa a faixa do cabeçalho branco sem precisar de borda. */
.top-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--inaec-grad-ciclo);
}

.top-header__barra {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding-block: 0.5rem;
}

/*
   O conteúdo aparece e some por opacidade, no lugar, sem alterar a altura
   da faixa. Trocar a mensagem não pode empurrar a página para baixo — o
   visitante estaria lendo outra coisa quando isso acontecesse.
*/
.top-header__conteudo {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  opacity: 0;
  transform: translate3d(0, 4px, 0);
  transition: opacity 320ms var(--anim-curva), transform 320ms var(--anim-curva);
}

.top-header__conteudo.esta-visivel { opacity: 1; transform: none; }

.top-header__texto {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
}

.top-header__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  color: var(--inaec-amarelo);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration) var(--ease), gap var(--duration) var(--ease);
}

.top-header__link svg {
  width: 0.875rem; height: 0.875rem;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (hover: hover) {
  .top-header__link:hover { border-color: currentColor; gap: 0.6rem; }
}

.top-header__fechar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: color-mix(in srgb, #fff 70%, transparent);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.top-header__fechar svg {
  width: 0.9375rem; height: 0.9375rem;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}

@media (hover: hover) {
  .top-header__fechar:hover {
  background: color-mix(in srgb, #fff 12%, transparent);
  color: #fff;
}
}

/* ==========================================================================
   2 · VOLTAR AO TOPO
   ========================================================================== */

.ao-topo {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: calc(var(--z-header) - 1);

  width: 2.875rem;
  height: 2.875rem;
  display: grid;
  place-items: center;

  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--inaec-verde);
  box-shadow: var(--shadow-md);
  cursor: pointer;

  /* Fora de vista, o botão sai também da árvore de acessibilidade e não
     intercepta cliques em nada que esteja embaixo dele. */
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 12px, 0) scale(0.9);
  transition: opacity 280ms var(--anim-curva),
              transform 280ms var(--anim-curva),
              visibility 0s linear 280ms,
              background-color var(--duration) var(--ease),
              color var(--duration) var(--ease);
}

.ao-topo.esta-visivel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.ao-topo svg {
  width: 1.125rem; height: 1.125rem;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (hover: hover) {
  .ao-topo:hover {
  background: var(--inaec-verde);
  color: var(--color-text-inverse);
  border-color: var(--inaec-verde);
  transform: translateY(-3px);
}
}

/* Não cobrir a barra de cookies enquanto ela estiver na tela. */
.ao-topo:has(~ .cookies.esta-visivel),
body:has(.cookies.esta-visivel) .ao-topo { bottom: clamp(7.5rem, 18vh, 10rem); }

/* ==========================================================================
   3 · BUSCA
   ========================================================================== */

.busca {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  align-items: start;
  justify-items: center;
  padding: clamp(3rem, 12vh, 7rem) var(--container-gutter) var(--space-lg);
}

.busca__fundo {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--inaec-grafite) 55%, transparent);
  backdrop-filter: blur(3px);
  animation: busca-fundo 240ms var(--anim-curva);
}

@keyframes busca-fundo { from { opacity: 0; } to { opacity: 1; } }

.busca__caixa {
  position: relative;
  width: min(42rem, 100%);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  animation: busca-entra 280ms var(--anim-curva);
}

@keyframes busca-entra {
  from { opacity: 0; transform: translate3d(0, -12px, 0); }
  to   { opacity: 1; transform: none; }
}

.busca__campo {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.busca__campo > svg {
  width: 1.125rem; height: 1.125rem; flex-shrink: 0;
  fill: none; stroke: var(--color-text-muted); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.busca__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  color: var(--color-text);
  padding: 0.35rem 0;
}

.busca__input:focus { outline: none; }
.busca__input::-webkit-search-cancel-button { display: none; }

.busca__fechar {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text-muted); cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.busca__fechar svg {
  width: 1rem; height: 1rem;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}

@media (hover: hover) {
  .busca__fechar:hover { background: var(--inaec-nevoa); color: var(--color-text); }
}

.busca__resultados { max-height: min(28rem, 55vh); overflow-y: auto; }

.busca__dica {
  padding: var(--space-sm);
  margin: 0;
  font-size: var(--fs-legend);
  color: var(--color-text-muted);
}

.busca__lista { list-style: none; margin: 0; padding: var(--space-2xs); }

.busca__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "tipo titulo" ".    resumo";
  gap: 0.15rem var(--space-2xs);
  align-items: baseline;
  padding: 0.7rem var(--space-xs);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background-color 160ms var(--ease);
}

.busca__item:focus-visible { background: var(--inaec-nevoa); }


@media (hover: hover) {
  .busca__item:hover { background: var(--inaec-nevoa); }
}

.busca__tipo {
  grid-area: tipo;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--inaec-verde);
  background: color-mix(in srgb, var(--inaec-verde) 10%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.45rem;
  white-space: nowrap;
}

.busca__titulo { grid-area: titulo; font-weight: var(--fw-medium); color: var(--color-text); }

.busca__resumo {
  grid-area: resumo;
  font-size: var(--fs-legend);
  color: var(--color-text-muted);
}

@media (max-width: 560px) {
  .busca__item { grid-template-columns: 1fr; grid-template-areas: "tipo" "titulo" "resumo"; }
  .busca__tipo { justify-self: start; }
}

/* ==========================================================================
   4 · CONSENTIMENTO DE COOKIES
   ========================================================================== */

.cookies {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-drawer);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -12px 40px -24px rgba(35, 31, 32, 0.4);
  transform: translate3d(0, 100%, 0);
  transition: transform 360ms var(--anim-curva);
}

.cookies.esta-visivel { transform: none; }

.cookies__caixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-xs);
  flex-wrap: wrap;
}

.cookies__texto { flex: 1 1 24rem; font-size: var(--fs-legend); line-height: 1.6; color: var(--color-text-muted); }
.cookies__texto p { margin: 0; }

.cookies__titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-bottom: 0.2rem !important;
}

/* Os dois botões têm o mesmo peso visual de propósito: consentimento em que
   recusar custa mais do que aceitar não é consentimento livre. */
.cookies__acoes { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }

/* ==========================================================================
   5 · PARCEIROS
   ========================================================================== */

.parceiros { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
             align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, 3.5rem); }

.parceiros__item img {
  height: clamp(1.75rem, 4vw, 2.5rem);
  width: auto;
  max-width: 11rem;
  object-fit: contain;
  /* Logotipos de terceiros entram em escala de cinza para não competirem
     entre si nem com a marca do Instituto; a cor volta no hover. */
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 320ms var(--anim-curva), opacity 320ms var(--anim-curva);
}

.parceiros__item a:focus-visible img { filter: none; opacity: 1; }


@media (hover: hover) {
  .parceiros__item a:hover img { filter: none; opacity: 1; }
}

/* ==========================================================================
   6 · FORMULÁRIO
   ========================================================================== */

.form { display: grid; gap: var(--space-sm); }

.form__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-sm); }

.form__campo { display: flex; flex-direction: column; gap: 0.4rem; }

.form__rotulo {
  font-size: var(--fs-legend);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.form__obrigatorio { color: var(--inaec-verde); }

.form__ajuda { font-size: 0.8125rem; color: var(--color-text-muted); }

.form__entrada {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  width: 100%;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.form__entrada:focus {
  outline: none;
  border-color: var(--inaec-verde);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--inaec-verde) 16%, transparent);
}

textarea.form__entrada { min-height: 9rem; resize: vertical; }

/*
   A ARMADILHA ANTI-SPAM.

   Fica fora da tela em vez de `display:none`: parte dos robôs ignora campos
   com display nenhum, mas preenche os que existem no layout. `aria-hidden` e
   `tabindex="-1"` mantêm o campo invisível para leitor de tela e fora da
   ordem de tabulação — quem navega por teclado nunca cai nele por engano.
*/
.form__armadilha {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__estado {
  font-size: var(--fs-legend);
  line-height: 1.6;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  margin: 0;
}

.form__estado--sucesso {
  background: color-mix(in srgb, var(--inaec-verde) 10%, transparent);
  border-color: color-mix(in srgb, var(--inaec-verde) 32%, transparent);
  color: var(--inaec-verde-profundo);
}

.form__estado--erro {
  background: color-mix(in srgb, #B42318 8%, transparent);
  border-color: color-mix(in srgb, #B42318 28%, transparent);
  color: #8A2018;
}

.form__estado--aguarde {
  background: var(--inaec-nevoa);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.form__acoes { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .top-header__conteudo,
  .ao-topo,
  .cookies,
  .parceiros__item img { transition: none; }
  .busca__fundo, .busca__caixa { animation: none; }
  @media (hover: hover) {
  .ao-topo:hover { transform: none; }
}
}

/* ==========================================================================
   7 · PÁGINA DE CONTATO
   ========================================================================== */

.contato-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.contato-form h2,
.contato-lado h2 {
  font-family: var(--font-display);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  margin: 0 0 var(--space-2xs);
}

.contato-form > p { color: var(--color-text-muted); margin: 0 0 var(--space-sm); }

.contato-lado {
  padding: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  position: sticky;
  top: calc(var(--header-height-scrolled) + var(--space-xs));
}

.contato-bloco + .contato-bloco { margin-top: var(--space-sm); padding-top: var(--space-sm);
                                  border-top: 1px solid var(--color-border); }

.contato-bloco h3 {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  margin: 0 0 0.4rem;
}

.contato-bloco p,
.contato-bloco address {
  margin: 0;
  font-style: normal;
  font-size: var(--fs-legend);
  line-height: 1.65;
  color: var(--color-text);
}

@media (max-width: 900px) {
  .contato-layout { grid-template-columns: 1fr; }
  .contato-lado { position: static; }
}

/* ==========================================================================
   8 · PÁGINA DE ERRO
   O botão de busca precisa parecer texto, não controle: ele está no meio de
   uma frase, e um botão desenhado como botão quebraria a leitura.
   ========================================================================== */

.pagina-404__busca { margin-top: var(--space-sm); color: var(--color-text-muted); }

.pagina-404__gatilho {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--inaec-verde);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration) var(--ease);
}

@media (hover: hover) {
  .pagina-404__gatilho:hover { color: var(--inaec-verde-profundo); }
}

/* ==========================================================================
   AVISO DO PAINEL — Marketing → Banner de aviso
   Três formas de exibição e quatro temas, exatamente os que o painel oferece.
   Sem estas regras o aviso existiria no HTML e não seria visto: era metade
   do defeito de "o painel não reflete o site".
   ========================================================================== */

.aviso {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--fs-legend);
  line-height: var(--lh-legend);
  z-index: 60;
}
.aviso__corpo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; flex: 1; min-inline-size: 0; }
.aviso__titulo { font-weight: var(--fw-semibold); }
.aviso__acao {
  flex-shrink: 0;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  background-color: currentColor;
  font-weight: var(--fw-medium);
  text-decoration: none;
}
/* O botão inverte: fundo na cor do texto, texto na cor do fundo. */
.aviso__acao { color: inherit; }
.aviso__acao span, .aviso__acao { mix-blend-mode: normal; }
.aviso__fechar {
  flex-shrink: 0;
  inline-size: 28px;
  block-size: 28px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  opacity: 0.75;
}
@media (hover: hover) {
  .aviso__fechar:hover { opacity: 1; background-color: rgb(255 255 255 / 0.15); }
}

/* --- Temas --------------------------------------------------------------- */
.aviso--info    { background-color: #0C1A25; color: #fff; }
.aviso--success { background-color: #04443F; color: #fff; }
.aviso--warning { background-color: #F59E0B; color: #1A1A1A; }
.aviso--error   { background-color: #B42318; color: #fff; }
@media (hover: hover) {
  .aviso--warning .aviso__fechar:hover { background-color: rgb(0 0 0 / 0.12); }
}
.aviso--info .aviso__acao    { background-color: #fff; color: #0C1A25; }
.aviso--success .aviso__acao { background-color: #fff; color: #04443F; }
.aviso--warning .aviso__acao { background-color: #1A1A1A; color: #F59E0B; }
.aviso--error .aviso__acao   { background-color: #fff; color: #B42318; }

/* --- Formas de exibição -------------------------------------------------- */
/*
   O banner do topo empurra a página em vez de cobrir o cabeçalho fixo: o
   cabeçalho tem posição fixa, e sobrepor os dois esconderia o menu.
*/
.aviso--banner { position: fixed; inset-block-start: 0; inset-inline: 0; }
:root[data-aviso="banner"] .site-header { inset-block-start: var(--aviso-altura, 44px); }
:root[data-aviso="banner"] body { padding-block-start: var(--aviso-altura, 44px); }

.aviso--footer { position: fixed; inset-block-end: 0; inset-inline: 0; }

.aviso--modal {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  max-inline-size: min(34rem, calc(100vw - 2rem));
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
}
.aviso--modal .aviso__fechar { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; }

@media (max-width: 560px) {
  .aviso { flex-wrap: wrap; }
  .aviso__acao { order: 3; }
}
@media print { .aviso { display: none; } }

/* ==========================================================================
   ALVOS DE TOQUE
   Num aparelho de toque o dedo cobre cerca de 9mm — perto de 44px. Os
   controles autônomos do portal ficavam entre 19 e 26px de altura: "Ler o
   artigo" com 23px, as etiquetas de assunto com 26px, os filtros da
   listagem. Acertar neles exigia precisão que dedo nenhum tem, e errar leva
   ao link errado, o que se lê como página quebrada.

   A folga vem de `padding` e de uma área invisível, NÃO de fonte maior: o
   desenho continua o mesmo, só o alvo cresce. E vale apenas onde o ponteiro
   é grosso — no desktop, um botão de 44px de altura ficaria desproporcional.
   ========================================================================== */

@media (pointer: coarse) {
  /* Controles autônomos: o alvo cresce por dentro, sem mexer no texto. */
  .artigo-item__acao,
  .paper__acao,
  .link-arrow,
  .pessoa-rede {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* As etiquetas de assunto são clicáveis na página do artigo; as demais são
     apenas rótulos e não precisam de alvo. */
  .artigo-tags .tag {
    min-block-size: 40px;
    display: inline-flex;
    align-items: center;
    padding-inline: 0.85rem;
  }

  /* Filtros da listagem: régua horizontal, o dedo erra a linha inteira. */
  .filtro { min-block-size: 44px; }

  /*
     Links da trilha de navegação e do rodapé ficam em listas densas: aumentar
     a altura de cada um afastaria demais as linhas. A área cresce por fora,
     com um pseudo-elemento que não ocupa espaço no fluxo.
  */
  .breadcrumb a,
  .footer__nav a {
    position: relative;
  }
  .breadcrumb a::before,
  .footer__nav a::before {
    content: "";
    position: absolute;
    inset-block: -11px;
    inset-inline: -6px;
  }
}