/* ============================================================
   Camada base do portal
   ------------------------------------------------------------
   Regras que toda página precisa e que hoje estão repetidas
   (ou faltando) arquivo por arquivo. Tudo mora dentro de
   @layer tvrs-base: uma camada perde para qualquer CSS sem
   camada, não importa a ordem de carregamento. Ou seja, este
   arquivo NUNCA sobrescreve o estilo já existente de uma
   página — ele só preenche o que ninguém definiu.

   Carregado uma única vez pelo includes/navbar.php (site) e
   pelo includes/admin_navbar.php (painel).
   ============================================================ */

@import url('tokens.css');

@layer tvrs-base {

  /* ----------------------------------------------------------
     1. Rolagem horizontal no celular
     ----------------------------------------------------------
     As animações do AOS (fade-left / fade-right) deslocam o
     elemento para fora da tela antes de trazê-lo de volta. Sem
     contenção isso vira barra de rolagem lateral no celular —
     era o que acontecia em /produtos e /formatoscomercial, as
     duas únicas páginas que não tinham CSS próprio declarando
     este clip por conta própria.

     `clip` (e não `hidden`) preserva o position: sticky da
     navbar, que `hidden` quebraria.
     ---------------------------------------------------------- */
  html {
    overflow-x: clip;
  }

  body {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  /* ----------------------------------------------------------
     2. Mídia que não estoura o container
     ---------------------------------------------------------- */
  img,
  svg,
  video,
  iframe,
  canvas {
    max-width: 100%;
  }

  img,
  video {
    height: auto;
  }

  /* Tabelas largas (lista de preços, programação) rolam dentro
     da própria caixa em vez de empurrar a página inteira. */
  .tabela-rolavel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ----------------------------------------------------------
     3. Acessibilidade
     ---------------------------------------------------------- */

  /* Contorno visível para quem navega por teclado, invisível
     para quem usa mouse. Vários botões do portal removem o
     outline sem repor nada. */
  /* Sem `border-radius` aqui: o contorno já acompanha o raio do próprio
     elemento. Forçar um raio fixo quadrava botões redondos enquanto eles
     estivessem em foco — era o que acontecia com as setas do carrossel. */
  :focus-visible {
    outline: 3px solid var(--tvrs-azul-eletrico);
    outline-offset: 2px;
  }

  /* Sem regra geral de altura mínima para botões: `min-height` vence o
     `height` do componente, então uma regra global deformava botões de
     ícone com tamanho próprio — as setas redondas do carrossel do
     PlanejaMídia viravam elipses de 34x44. Alvo de toque é medida de cada
     componente, onde dá para crescer o botão inteiro. */

  /* Respeita quem pediu menos animação no sistema. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }

    [data-aos] {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
  }

  /* ----------------------------------------------------------
     4. Âncoras e navbar fixa
     ----------------------------------------------------------
     Sem isto o título de destino fica escondido atrás da
     navbar sticky ao clicar num link interno.
     ---------------------------------------------------------- */
  html {
    scroll-behavior: smooth;
  }

  :target {
    scroll-margin-top: calc(var(--tvrs-altura-navbar) + 16px);
  }

  /* ----------------------------------------------------------
     5. Impressão
     ----------------------------------------------------------
     Proposta comercial impressa a partir do site sai sem
     navbar, rodapé e fundos escuros.
     ---------------------------------------------------------- */
  @media print {
    .site-navbar,
    .site-footer,
    .site-nav-drawer,
    .no-print {
      display: none !important;
    }

    body {
      background: #fff;
      color: #000;
    }

    a[href^='http']::after {
      content: ' (' attr(href) ')';
      font-size: 0.8em;
      word-break: break-all;
    }
  }
}