/* ---------------------------------------------------------------------------
   base.css - reset, tipografia e primitivas de layout
   Depende de tokens.css (carregar antes).
   --------------------------------------------------------------------------- */

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

html
{
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;      /* compensa o header fixo nas âncoras */
}

/* O main.css antigo redefine a fonte raiz para `1vw` (tipografia fluida do
   site anterior — html.pageHome { font-size: var(--baseFtnSize) }, com
   variações por breakpoint). Como todo o sistema novo usa `rem` assumindo
   16px de raiz, isso distorcia TODAS as medidas em rem (espaçamento,
   tipografia, etc.) na página redesenhada. `html.pageHome` tem
   especificidade maior que o `html` puro do main.css em qualquer viewport,
   então volta a raiz ao padrão do navegador aqui. */
html.pageHome
{
    font-size: 16px;
}

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

body
{
    margin: 0;
    /* .siteHeader é fixed (não sticky) — compensa aqui para o conteúdo não
       nascer por baixo dele. */
    padding-top: var(--header-h);
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--f-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* O main.css antigo aplica `main, section { padding: 3rem 8rem }` em toda
   página (ainda necessário nas páginas que não migraram para este sistema —
   inclusive as que só ganharam cor/tipografia, tipo /transparency e
   /infodorcas, cujo <main> real não se chama "mainContent" e ainda depende
   desse padding pro próprio espaçamento). Nas páginas reescritas com o
   sistema novo, o <main> real é sempre #mainContent — o padding empurra as
   faixas full-bleed (hero, section--green, bandSplit...) pra dentro dos dois
   lados, porque nossos componentes só definem padding-block. Escopado por
   ID, não pelo elemento, pra não zerar o <main> de outras páginas. */
body.pageHome #mainContent
{
    margin: 0;
    padding: 0;
}

/* Estes resets de elemento puro (h1-h6, p, a, img...) têm a mesma
   especificidade das versões equivalentes no main.css antigo — e como o
   main.css carrega por último, ele venceria o empate em toda a página.
   `.pageHome` (uma classe só, sem "body.") dá especificidade maior que o
   elemento puro do main.css (então ganha sempre, independente da ordem de
   carregamento) mas EMPATA com regras de componente mais específicas tipo
   `.siteHeader__seal img` — e nesse empate, como o componentes.css carrega
   DEPOIS do base.css, a regra do componente vence, como deveria. Usar
   `body.pageHome` (duas seleções) quebrava isso: ficava mais específico que
   os próprios componentes e vencia onde não devia (ex.: o selo de 30 anos
   renderizando no tamanho nativo em vez de 44px). */

/* font-family/font-weight ficam num seletor à parte, com a especificidade
   cheia (".pageHome h1" etc., não ":where()"): o main.css antigo tem
   `h1,h2,h3,h4,h5,h6 { font-family: 'Source Sans 3' ...!important;
   font-weight: 700 !important }`, e !important só perde para outro
   !important de especificidade igual ou maior — por isso precisam vencer
   de verdade, não só perder por empate.
   As demais propriedades (margin, color, tamanho, line-height) vão em
   ":where(.pageHome)" — zero especificidade extra — porque não há nada
   equivalente e !important no main.css para elas, então só preciso perder
   de propósito para classes de componente de uma camada só (ex.: `.eyebrow`
   estilizando um <p>, ou um título com classe própria), que citam menos
   seletores que ".pageHome h1" mas devem vencer mesmo assim. */

.pageHome h1, .pageHome h2, .pageHome h3,
.pageHome h4, .pageHome h5, .pageHome h6
{
    font-family: var(--f-head) !important;
}

.pageHome h1 { font-weight: var(--fw-black) !important; }
.pageHome h2 { font-weight: var(--fw-black) !important; }
.pageHome h3 { font-weight: var(--fw-bold) !important; }
.pageHome h4 { font-weight: var(--fw-bold) !important; }

:where(.pageHome) h1, :where(.pageHome) h2, :where(.pageHome) h3,
:where(.pageHome) h4, :where(.pageHome) h5, :where(.pageHome) h6
{
    margin: 0 0 var(--sp-4);
    color: inherit;
    text-wrap: balance;
}

:where(.pageHome) h1 { font-size: var(--fs-h1); line-height: var(--lh-head); }
:where(.pageHome) h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
:where(.pageHome) h3 { font-size: var(--fs-h3); line-height: 1.34; }
:where(.pageHome) h4 { font-size: var(--fs-h4); line-height: var(--lh-head); }

:where(.pageHome) p
{
    margin: 0 0 var(--sp-4);
    text-wrap: pretty;
}

:where(.pageHome) p:last-child
{
    margin-bottom: 0;
}

/* :where() para não somar especificidade do ".pageHome" aqui: main.css não
   define `color` para `a` (só background-color/text-decoration), então não
   preciso vencer nada nessa propriedade — só preciso PERDER de propósito
   para classes de componente de uma camada só, tipo `.btn`, `.linkCard`,
   `.mainNav__link`, que também estilizam <a> e têm menos especificidade que
   ".pageHome a" (a versão anterior fazia o texto branco de botões como
   `.btn` virar verde, some por cima do fundo verde). */
:where(.pageHome) a
{
    color: var(--c-green);
    text-decoration: none;
    transition: color var(--t-base);
}

:where(.pageHome) a:hover
{
    color: var(--c-green-dark);
    text-decoration: underline;
}

.pageHome img,
.pageHome svg,
.pageHome video,
.pageHome iframe
{
    /* main.css antigo: `img, video { width:100%; max-width:100%; height:auto;
       margin:0 auto; padding:0; display:block }`, sem !important mas sem
       oposição em imagens soltas (sem classe de componente) — width:auto
       aqui deixa o atributo/estilo width do HTML valer de novo. */
    width: auto;
    max-width: 100%;
    height: auto;
}

/* "display" fica num seletor à parte, com especificidade zerada por :where():
   classes como `.imgMobile { display: none }` / `.imgDesktop { display: none }`
   (que alternam foto de desktop/mobile por media query) têm menos seletores
   que ".pageHome img", mas precisam vencer mesmo assim — senão as duas
   versões da foto aparecem juntas, uma por cima da outra. */
:where(.pageHome) img,
:where(.pageHome) svg,
:where(.pageHome) video,
:where(.pageHome) iframe
{
    display: block;
}

:where(.pageHome) ul, :where(.pageHome) ol
{
    margin: 0 0 var(--sp-4);
    padding-left: var(--sp-5);
}

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

.pageHome hr
{
    border: 0;
    border-top: 1px solid var(--c-border);
    margin: var(--sp-6) 0;
}

/* --- Foco visível (acessibilidade) -------------------------------------- */

:focus-visible
{
    outline: 3px solid var(--c-blue);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

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

/* .container também existe no main.css antigo (com regras próprias em
   media queries de mesma especificidade) — escopado pelo mesmo motivo dos
   resets de elemento acima. */
.pageHome .container
{
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.pageHome .container--wide
{
    max-width: var(--container-wide);
}

/* main.css antigo tem `main, section { padding: 3rem 8rem }` — o `main` já é
   neutralizado à parte (body.pageHome #mainContent, acima), mas `section`
   é seletor de elemento puro e casava com TODO `<section class="section...">`
   sem oposição (aqui só padding-block era redefinido), sobrando 8rem
   (128px, 64px de cada lado) de padding-inline agarrado em toda seção do
   site redesenhado. Normalmente passava despercebido — só reduzia um pouco
   o espaço útil dentro do .container — até um card de largura fixa
   (.statCard, no .impactGrid) não caber mais e vazar da viewport em telas
   estreitas (~588px). */
.section
{
    padding-block: var(--section-y);
    padding-inline: 0;
}

.section--tight
{
    padding-block: var(--section-y-sm);
}

/* Seções de cor ocupam toda a largura da viewport */
.section--green
{
    background: var(--c-green);
    color: var(--c-on-dark);
}

.section--blue
{
    background: var(--c-blue);
    color: var(--c-on-dark);
}

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

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

.section--green a:not(.btn),
.section--blue a:not(.btn)
{
    color: var(--c-on-dark);
    text-decoration: underline;
}

/* --- Grades -------------------------------------------------------------- */

.grid
{
    display: grid;
    gap: var(--sp-5);
}

.grid--2
{
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.grid--3
{
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.grid--4
{
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

/* --- Utilitários --------------------------------------------------------- */

.text-center
{
    text-align: center;
}

.lead
{
    font-size: var(--fs-lead);
}

.muted
{
    color: var(--c-text-muted);
}

/* Títulos de seção sobre fundo claro são azuis no design de referência */
.text-blue
{
    color: var(--c-blue);
}

.stack > * + *
{
    margin-top: var(--sp-4);
}

.visually-hidden
{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Link "pular para o conteúdo" */
.skip-link
{
    position: absolute;
    left: var(--sp-4);
    top: -100%;
    z-index: var(--z-modal);
    padding: var(--sp-3) var(--sp-5);
    background: var(--c-green);
    color: var(--c-on-dark);
    border-radius: var(--r-pill);
    transition: top var(--t-base);
}

.skip-link:focus
{
    top: var(--sp-4);
    color: var(--c-on-dark);
    text-decoration: none;
}