/* =========================================================
   base.css — tokens (variáveis), reset e tipografia
   Valores conferidos no CSS do site original (Squarespace).
   ========================================================= */

:root {
  /* Cores */
  --azul-marinho: #02223c; /* topo após rolar, hero, banners */
  --verde-escuro: #16383b; /* botões, títulos de seção, nomes da equipe */
  --fundo: #f3f1ed;        /* fundo das páginas (cor medida na tela do original) */
  --fundo-claro: #f9f8f6;  /* faixa "Anterior/Próximo" dos artigos */
  --branco: #ffffff;       /* rodapé, seção de vídeos da home, moldura das capas */
  --texto: #131313;        /* "black" do tema original */

  /* Fontes: Inter Tight é a fonte de títulos do original;
     o texto do original usa Georgia. Gelasio (Google Fonts) tem as mesmas
     medidas da Georgia e só é baixada em aparelhos que não têm Georgia. */
  --fonte-titulo: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --fonte-texto: Georgia, "Gelasio", "Times New Roman", serif;

  /* Medidas de layout do original */
  --largura-max: 1200px;  /* largura máxima do conteúdo */
  --margem: 4vw;          /* espaço lateral do conteúdo (6vw no celular) */
  --margem-topo: 4vw;     /* espaço lateral do topo (6vw abaixo de 1024px) */
  --recorte: 6vw;         /* altura do recorte em "V" no pé dos banners */
  --altura-topo: 136px;        /* altura do topo fixo no início da página */
  --altura-topo-rolado: 102px; /* altura depois de rolar (o topo encolhe) */
}

/* ===== Reset enxuto ===== */

*,
*::before,
*::after {
  box-sizing: border-box; /* largura inclui padding e borda: contas mais fáceis */
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%; /* impede o iPhone de aumentar o texto sozinho */
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  /* Tamanho do texto pela mesma fórmula do original: 16,9px no celular, 17,6px no desktop */
  font-size: min(calc(0.1 * 1.2vw + 1rem), 1.1rem);
  line-height: 1.8;
  letter-spacing: 0.02em;
  overflow-x: hidden;       /* garantia extra contra rolagem horizontal no celular */
  /* Suavização de fonte igual à do original (texto mais fino no Mac) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
iframe,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

/* Compensa o topo fixo quando um link leva até uma âncora (#algo) */
[id] {
  scroll-margin-top: var(--altura-topo-rolado);
}

/* ===== Foco visível no teclado =====
   :focus-visible só aparece ao navegar com Tab, não no clique do mouse. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Link "Pular para o conteúdo": escondido até receber foco pelo teclado */
.pular-conteudo {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--branco);
  color: var(--azul-marinho);
  font-family: var(--fonte-titulo);
}

.pular-conteudo:focus {
  top: 1rem;
}

/* Texto só para leitores de tela (não aparece na tela) */
/* Mantém junto um trecho que não deve quebrar de linha (CEP, datas) */
.sem-quebra {
  white-space: nowrap;
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ===== Tipografia =====
   Altura de linha: fórmula do original, 1,33 × (1 + (1 − tamanho) / 25).
   O Squarespace calcula o tamanho dos títulos assim:
   (tamanho - 1) × 1,2vw + 1rem, com teto no tamanho cheio em rem.
   Reproduzimos a mesma fórmula com min(). */

h1,
h2,
h3,
h4 {
  margin: 0 0 0.6em;
  font-family: var(--fonte-titulo);
  font-weight: 900;
  letter-spacing: 0;
  overflow-wrap: break-word; /* palavra longa demais quebra em vez de vazar da tela */
}

h1 {
  font-size: min(calc(5.37 * 1.2vw + 1rem), 6.37rem);
  line-height: 1.044;
}

h2,
.h2 { /* .h2: aparência de h2 (ex.: h1 do banner das páginas internas) */
  font-size: min(calc(3.12 * 1.2vw + 1rem), 4.12rem);
  line-height: 1.164;
}

h3 {
  font-size: min(calc(1.74 * 1.2vw + 1rem), 2.74rem);
  line-height: 1.237;
}

h4,
.h4 { /* .h4: aparência de h4 num título de outro nível (ex.: rodapé) */
  font-size: min(calc(0.57 * 1.2vw + 1rem), 1.57rem);
  line-height: 1.3;
}

p {
  margin: 0 0 1em;
}

/* No celular em pé o original usa a altura da tela (vh) na fórmula */
@media (max-width: 767px) and (orientation: portrait) {
  body { font-size: calc(0.1 * 1.2 * min(1vh, 9px) + 1rem); }
  h1 { font-size: calc(5.37 * 1.2 * min(1vh, 9px) + 1rem); }
  h2, .h2 { font-size: calc(3.12 * 1.2 * min(1vh, 9px) + 1rem); }
  h3 { font-size: calc(1.74 * 1.2 * min(1vh, 9px) + 1rem); }
  h4, .h4 { font-size: calc(0.57 * 1.2 * min(1vh, 9px) + 1rem); }
}

/* Celular: margem lateral do conteúdo maior, como no original */
@media (max-width: 767px) {
  :root {
    --margem: 6vw;
  }
}