/* ==========================================================================
   Reset, tipografia base e utilitários de layout.
   Depende de tokens.css.
   ========================================================================== */

/* ---------- Reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /**
   * Fallback para quando o JS não roda. Com JS ativo, smooth-scroll.js troca
   * para `auto` e anima com easing e duração próprios — o smooth nativo não
   * permite controlar nem uma coisa nem outra.
   */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--color-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

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

img {
  height: auto;
}

/**
 * <picture> sai do fluxo de layout: o <img> passa a ser filho direto do
 * container de mídia. Sem isso um `height: 100%` no <img> resolveria contra o
 * <picture> (altura indefinida) e a imagem manteria a proporção original em vez
 * de preencher a caixa — cards com fotos de proporções diferentes ficavam com
 * alturas diferentes.
 */
picture {
  display: contents;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

address {
  font-style: normal;
}

hr {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--color-border);
}

/* O sprite de ícones fica no DOM mas nunca ocupa espaço. */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Foco visível ---------- */

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Tipografia ---------- */

.h1, .h2, .h3 {
  color: var(--color-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, var(--fs-h1)); }
.h2 { font-size: clamp(1.5rem, 1.16rem + 1.4vw, var(--fs-h2)); }
.h3 { font-size: clamp(1.25rem, 1.14rem + 0.45vw, var(--fs-h3)); }

.lead {
  /* 27em @18px = 486px, a largura do parágrafo de apoio no frame */
  max-width: 27em;
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: var(--lh-body);
}

.lead--wide {
  max-width: 29em;
}

/**
 * Quebra de linha só no desktop. O design quebra alguns títulos em dois; no
 * mobile a quebra ficaria errada, então ela vale a partir de 1024px.
 * Ver headline() em includes/config.php.
 */
.br-lg {
  display: none;
}

@media (min-width: 64rem) {
  .br-lg {
    display: inline;
  }
}

.text-sm { font-size: var(--fs-sm); }
.text-muted { color: var(--color-text-muted); }

/* Blocos "título + linha de apoio" no topo das seções */
.section-head {
  margin-bottom: var(--sp-8);
}

.section-head > * + * {
  margin-top: var(--sp-3);
}

.section-head__sub {
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.93rem + 0.4vw, var(--fs-h3));
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
}

/* ---------- Ícones ---------- */

.icon {
  flex: none;
  width: 1.5em;
  height: 1.5em;
  fill: none;
}

.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 2em; height: 2em; }

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.section {
  padding-block: var(--section-py);
}

/* Seção que continua o bloco anterior: sem respiro extra no topo. */
.section--tight {
  padding-top: 0;
}

.section--alt {
  background: var(--surface-alt);
}

/**
 * Contexto escuro. Além das cores de texto, troca --color-link: o Brand Orange
 * sobre #2f3542 dá 4.45:1 e reprova AA por 0.05; o Light Brand Orange dá 5.42:1.
 */
.section--dark {
  --color-heading: var(--white);
  --color-text: var(--gray-200);
  --color-text-muted: var(--gray-300);
  --color-link: var(--us-orange-light);
  --color-border: rgba(255, 255, 255, 0.14);
  background: var(--surface-darker);
  color: var(--color-text);
}

.section--dark .lead,
.section--dark .section-head__sub {
  color: var(--gray-300);
}

/* Grade de 3 colunas usada em vários blocos de cards */
.grid-3 {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Acessibilidade ---------- */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  z-index: calc(var(--z-drawer) + 10);
  top: 0;
  left: 50%;
  padding: var(--sp-3) var(--sp-5);
  color: var(--white);
  font-weight: var(--fw-bold);
  background: var(--us-blue);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transform: translate(-50%, -110%);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
}

/* Impede scroll do body quando o menu mobile está aberto. */
body.is-locked {
  overflow: hidden;
}