/* ============================================================================
   legal.css — responsividade das páginas de documento
   (privacidade.html, termos.html, exclusao-de-dados.html)
   ----------------------------------------------------------------------------
   Estas três páginas são HTML estático puro: não passam pelo <x-dc> nem pelo
   React, e cada uma tinha só @media print — nenhuma regra de tela. Isto aqui é
   o que faltava. Carregado depois do <style> de cada página, então não precisa
   de !important.
   ============================================================================ */

@media (max-width: 700px) {
  main { padding: 40px 16px 72px !important; }

  h1 { font-size: clamp(27px, 8vw, 40px); }
  h2 { font-size: 20px; margin: 38px 0 10px; }
  h3 { font-size: 16.5px; margin: 24px 0 8px; }
  p, li { font-size: 15.5px; }
  ul, ol { padding-left: 20px; }
  hr { margin: 32px 0; }

  /* --- Header ----------------------------------------------------------- */
  .adson-header-inner { padding: 12px 16px; gap: 10px; }
  .adson-brand { font-size: 15px; min-height: 44px; }
  .adson-back {
    display: inline-flex; align-items: center;
    min-height: 44px; font-size: 11.5px; letter-spacing: .1em;
  }

  /* --- Tabelas ----------------------------------------------------------
     A tabela de categorias de dados tem 3 colunas de texto longo: o
     min-content soma ~350px contra ~312px úteis, e como o <body> destas
     páginas não tem overflow-x:hidden, a página inteira rolava de lado.
     O wrapper .table-wrap isola a rolagem na própria tabela.            --- */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin: 14px 0;
    /* sangra até o gutter para a tabela usar a largura toda da tela */
    margin-left: -16px; margin-right: -16px;
    padding-left: 16px; padding-right: 16px;
  }
  .table-wrap table { margin: 0; min-width: 460px; }
  th, td { padding: 9px 10px; font-size: 14px; }

  /* --- Rodapé: 11px com margin lateral virava alvo de ~15px ------------- */
  footer { padding: 24px 16px 32px; }
  footer a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 10px; margin: 0;
  }
  footer > * { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }

  /* Links de contato no corpo do texto também são alvo de toque */
  main p > a[href^="mailto:"], main li > a[href^="mailto:"] {
    display: inline-block; padding: 3px 0;
  }
}

@media (max-width: 400px) {
  main { padding: 32px 14px 64px !important; }
  .table-wrap { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
}