/* ============================================================================
   BASE — Instituto Ideia Pública
   Camada de fundação: reinício, acessibilidade, estados de comportamento e
   impressão. Sem decisão estética — cor, tipo e componente moram nos arquivos
   tokens.css e componentes.css, que vêm depois nesta ordem de camadas.
   ========================================================================= */

@layer reinicio, tokens, tipografia, layout, componentes, utilitarios, estados;

@layer reinicio {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;   /* iPhone não infla o texto ao girar */
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;         /* abrir um menu não empurra a página */
  }

  body {
    min-height: 100svh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;                 /* nada vaza para o lado */
  }

  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  img, video { height: auto; }

  input, button, textarea, select { font: inherit; color: inherit; }

  p, h1, h2, h3, h4, h5, h6, li, dt, dd, figcaption, blockquote, td, th {
    overflow-wrap: break-word;
    hyphens: auto;                    /* palavra longa não estoura a coluna no celular */
  }

  /* 'balance' equilibra as linhas de um título — o que é bom por padrão, e é ERRADO
     onde a quebra é AUTORAL. A manchete de abertura quebra por sentença, uma ideia
     por linha; deixar o navegador reequilibrar desfaz justamente a escrita. */
  h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
  .hero__manchete, .hero__manchete .linha { text-wrap: wrap; }
  p, li { text-wrap: pretty; }        /* evita a última linha com uma palavra só */

  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

  table { border-collapse: collapse; width: 100%; }
  caption { text-align: left; }

  :target { scroll-margin-top: 6rem; } /* âncora não fica embaixo da barra fixa */
}

@layer utilitarios {
  /* Texto que só o leitor de tela ouve — nunca use display:none para isso. */
  .apenas-leitor {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  /* Igual à anterior, mas reaparece ao receber foco (usada no pular-para-o-conteúdo). */
  .apenas-leitor-ate-foco:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

@layer estados {
  /* --- FOCO ---
     Anel duplo (escuro + claro) para ficar visível sobre qualquer fundo do site,
     inclusive sobre foto e sobre a cena 3D. WCAG 2.2 exige foco não obscurecido. */
  :focus-visible {
    outline: 3px solid var(--foco-a, #ffffff);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--foco-b, rgba(0, 0, 0, .75));
    border-radius: 3px;
  }
  :focus:not(:focus-visible) { outline: none; }

  /* --- REVELAÇÃO AO ROLAR ---
     Só existe quando o JavaScript marcou "espera". Sem JavaScript, ou com
     movimento reduzido, o conteúdo já está no lugar — nunca opacity:0 órfão. */
  [data-revelar="espera"] {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    will-change: opacity, transform;
  }
  [data-revelar="visivel"] {
    opacity: 1;
    transform: none;
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--atraso, 0ms);
    will-change: auto;
  }

  /* --- CENA 3D ---
     O pôster manda enquanto a cena não está animando; a tela do canvas cobre
     o pôster só quando há quadro desenhado. */
  [data-cena] { position: relative; isolation: isolate; }
  [data-cena] .cena__poster { width: 100%; height: 100%; object-fit: cover; }
  [data-cena] .cena__tela {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; transition: opacity var(--dur-placa, 1.2s) var(--curva-entrada, ease);
  }
  [data-cena="animando"] .cena__tela { opacity: 1; }
  [data-cena="animando"] .cena__poster { opacity: 0; transition: opacity var(--dur-placa, 1.2s) var(--curva-entrada, ease); }

  /* --- MODO LEVE ---
     Desliga o que consome banda sem carregar informação. O conteúdo permanece
     completo: nada que importe vive apenas dentro de um enfeite. */
  [data-modo-leve="ligado"] [data-cena] .cena__tela,
  [data-modo-leve="ligado"] [data-so-com-banda] { display: none !important; }
  [data-modo-leve="ligado"] [data-revelar] { opacity: 1 !important; transform: none !important; }

  /* --- MOVIMENTO REDUZIDO ---
     Vale para quem pediu no sistema. Nada de animação, nada de rolagem suave,
     nada de vídeo em laço. O site continua inteiro; só para de se mexer. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
    [data-revelar] { opacity: 1 !important; transform: none !important; }
    [data-cena] .cena__tela { display: none !important; }
  }

  /* --- CONTRASTE FORÇADO (Windows) --- */
  @media (forced-colors: active) {
    :focus-visible { outline: 3px solid CanvasText; box-shadow: none; }
    [data-cena] .cena__tela { display: none; }
  }
}

@layer layout {
  /* Impressão: o documento tem de sair legível em papel — gestores imprimem. */
  @media print {
    [data-cena] .cena__tela, [data-nav], .nao-imprimir, .voltar { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    /* O endereço impresso NÃO encolhe: 0,85em cairia abaixo do piso de 16px, que
       vale no papel como vale na tela. Quem carrega a diferença é o peso e a cor. */
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 1em; font-weight: 400;
                             color: #333; word-break: break-all; }
    h1, h2, h3 { break-after: avoid; }
    table, figure, li { break-inside: avoid; }
  }
}