/* =========================================================
   HOMEPAGE v3 | BASE v0.4
   FUNDAÇÃO GLOBAL
   assets/css/base.css
========================================================= */

/* =========================================================
   RESET GLOBAL
========================================================= */

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

/* =========================================================
   FONTES OFICIAIS
========================================================= */

@font-face{
    font-family:'Lato';

/* Caminho RELATIVO ao próprio base.css (assets/css/ -> ../fonts/),
   não à raiz do domínio (2026-07-21, achado real do Luciano: um
   caminho começando com "/" muda de significado dependendo da pasta —
   local é /staecnon.org.br/assets/..., produção hoje é /2026/assets/...
   — e um dia vai ser só /assets/... na raiz do domínio oficial. Um
   caminho relativo ao ARQUIVO não muda nunca, nas 3 situações, sem
   precisar lembrar de trocar nada aqui de novo. */
    src:
        url('../fonts/lato/subset-Lato-Regular.woff2') format('woff2'),
        url('../fonts/lato/subset-Lato-Regular.woff') format('woff');

    font-weight:400;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:'Lato';

    src:
        url('../fonts/lato/subset-Lato-Bold.woff2') format('woff2'),
        url('../fonts/lato/subset-Lato-Bold.woff') format('woff');

    font-weight:700;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:'Lato';

    src:
        url('../fonts/lato/subset-Lato-Black.woff2') format('woff2'),
        url('../fonts/lato/subset-Lato-Black.woff') format('woff');

    font-weight:800;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:'Lato';

    src:
        url('../fonts/lato/subset-Lato-Black.woff2') format('woff2'),
        url('../fonts/lato/subset-Lato-Black.woff') format('woff');

    font-weight:900;
    font-style:normal;
    font-display:swap;
}

/* 2026-09-11 (pedido do Luciano, print temp/242.jpg): título da
   notícia (.noticia-titulo, mais abaixo neste arquivo) ainda estava
   na fonte antiga (Lato) — essa página (noticia.php) usa o header
   ANTIGO (includes/header.php), não o header2.php da nova homepage,
   então não carrega assets/css/homepage2-header.css (onde a Fira Sans
   Condensed já estava registrada). Mesmos arquivos de fonte, mesmos
   3 pesos, só duplicando a declaração @font-face aqui pra ficar
   disponível também nas páginas com o header antigo — mesmo padrão
   já usado pra 'Lato' acima (os dois arquivos CSS declaram a mesma
   fonte local, sem depender um do outro). */
@font-face{
    font-family:'Fira Sans Condensed';
    font-weight:500;
    font-style:normal;
    font-display:swap;
    src:url('../fonts/Fira_Sans_Condensed/FiraSansCondensed-Medium-latin.woff2') format('woff2'),
        url('../fonts/Fira_Sans_Condensed/FiraSansCondensed-Medium.woff') format('woff');
}
@font-face{
    font-family:'Fira Sans Condensed';
    font-weight:600;
    font-style:normal;
    font-display:swap;
    src:url('../fonts/Fira_Sans_Condensed/FiraSansCondensed-SemiBold-latin.woff2') format('woff2'),
        url('../fonts/Fira_Sans_Condensed/FiraSansCondensed-SemiBold.woff') format('woff');
}
@font-face{
    font-family:'Fira Sans Condensed';
    font-weight:800;
    font-style:normal;
    font-display:swap;
    src:url('../fonts/Fira_Sans_Condensed/FiraSansCondensed-ExtraBold-latin.woff2') format('woff2'),
        url('../fonts/Fira_Sans_Condensed/FiraSansCondensed-ExtraBold.woff') format('woff');
}

/* 2026-09-11 (pedido do Luciano): fonte manuscrita pro slogan
   "Em defesa do Saneamento e dos Direitos" abaixo da logo no header
   (ver .header-logo-tagline em header.css e .homepage2-header-logo-tagline
   em homepage2-header.css). Caveat, peso Bold (700) só — é a única
   variação usada. Convertida da variable font oficial do Google Fonts
   pra estático, self-hosted, mesmo padrão da Fira Sans Condensed. */
@font-face{
    font-family:'Caveat';
    font-weight:700;
    font-style:normal;
    font-display:swap;
    src:url('../fonts/Caveat/Caveat-Bold.woff2') format('woff2'),
        url('../fonts/Caveat/Caveat-Bold.woff') format('woff');
}

/* =========================================================
   ARIMO — REMOVIDA (2026-08-03, item 17/pedido do Luciano: "o menu
   não usará mais ela" — ver assets/css/header.css, .main-nav a voltou
   pra Lato quando o menu virou hambúrguer em qualquer largura, sem
   mais o espaço espremido que justificava a Arimo). @font-face tirado
   daqui e os 2 arquivos (676KB) apagados de assets/fonts/arimo/ — sem
   isso o navegador não baixa a fonte à toa (nenhum seletor usa
   'Arimo' mais), mas o arquivo CSS morto ainda contava como peso e
   risco de alguém reativar sem querer. */

/* =========================================================
   VARIÁVEIS GLOBAIS
========================================================= */

:root{

    /* =====================================================
       CONTAINER OFICIAL
    ===================================================== */

    --container-max:1200px;
    --container-padding:20px;
    --container-useful:1160px;

    /* =====================================================
       CORES
    ===================================================== */

    --color-primary:#0B6AA2;
    --color-primary-dark:#082c44;
    --color-hover:#017198; /* era #88a33f (verde-oliva) — 2026-09-11, pedido do Luciano: logo nova traz azul-claro na paleta, cor de hover/accent do site passa a usar esse azul */
    --color-bg:#ffffff;
    --color-white:#ffffff;
    --color-title:#111827;
    --color-text:#4b5563;
    --color-border:#e5e7eb;
    /* Faltava — usado em vários CSS (noticias_listagem.css, boletins.css,
       design-system.css .cabecalho-interno-eyebrow) sem nunca ter sido
       declarado aqui; até 2026-07-10 esses elementos só ficavam certos
       "por acidente" (herdavam a cor do pai). Adicionado agora pra virar
       um valor de verdade, e pra a versão dark-mode (ver themes.css) ter
       o que sobrescrever. */
    --color-muted:#6b7280;

    /* =====================================================
       DARK MODE
    ===================================================== */

    --color-dark-bg:#0b1830;
    /* 2026-08-04 (bug real, print 49 — Luciano: no modo escuro, o card
       do Destaque+Últimas Notícias ficava com o MESMO tom do fundo da
       página inteira, "confuso pra distinguir quem é quem"). Tom mais
       claro, só pra CARDS que precisam se destacar do fundo — ver uso
       em ".featured-card" (assets/css/themes.css). */
    --color-dark-surface:#152a4d;
    --color-dark-text:#edf4fa;
    --color-dark-text-soft:#c9d7e4;
    --color-dark-border:
        rgba(255,255,255,.06);

    /* =====================================================
       TIPOGRAFIA
    ===================================================== */

    --font-family-base:'Lato', system-ui, sans-serif;
    --fs-body:16px;
    --lh-body:1.75;
    --fs-h1:clamp(2.6rem, 4vw, 4rem);
    --fs-h2:clamp(2rem, 3vw, 3rem);
    --fs-h3:1.5rem;
    --fw-body:400;
    --fw-title:900;
    --lh-title:1.1;
    --ls-title:-0.025em;

    /* =====================================================
       RADIUS
    ===================================================== */

    --radius-xs:8px;
    --radius-sm:12px;
    --radius-md:18px;
    --radius-lg:28px;
    --radius-xl:50px;
    --radius-circle:50%;
    --radius-pill:999px;

    /* =====================================================
       SHADOWS
    ===================================================== */

    --shadow-sm:
        0 8px 24px rgba(0,0,0,.06);

    --shadow-md:
        0 12px 34px rgba(0,0,0,.08);

    --shadow-lg:
        0 18px 48px rgba(0,0,0,.10);

    /* =====================================================
       TRANSITIONS
    ===================================================== */

    --transition-fast:.25s ease;
    --transition-medium:.4s ease;

    /*************************************************
     SPACING
    *************************************************/

    --space-xs:8px;
    --space-sm:12px;
    --space-md:20px;
    --space-lg:30px;
    --space-xl:40px;
    --space-xxl:60px;

    /*************************************************
     ACCENT
    *************************************************/

    --color-accent:#017198; /* era #88a33f — mesmo motivo de --color-hover acima */

    /*************************************************
     OVERLAYS
    *************************************************/

    --overlay-light:rgba(0,0,0,.15);
    --overlay-medium:rgba(0,0,0,.30);
    --overlay-dark:rgba(0,0,0,.45);

    /*************************************************
     CARDS
    *************************************************/

    --fs-card-title:2rem;
    --fs-card-text:1.125rem;

    /*************************************************
     Z-INDEX
    *************************************************/

    --z-header:100;
    --z-dropdown:200;
    --z-overlay:500;
    --z-modal:1000;

    }

/* =========================================================
   HTML / BODY
========================================================= */

html{
    scroll-behavior:smooth;
    scrollbar-width:auto;
    scrollbar-color:#175376 #d7e6ef;
}

body{
    font-family:var(--font-family-base);
    font-size:var(--fs-body);
    font-weight:var(--fw-body);
    line-height:var(--lh-body);
    background:var(--color-bg);
    color:var(--color-text);
    overflow-x:hidden;
}

/* =========================================================
   TIPOGRAFIA GLOBAL
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6{
    color:var(--color-title);
    font-weight:var(--fw-title);
    line-height:var(--lh-title);
    letter-spacing:var(--ls-title);
}

h1{
    font-size:var(--fs-h1);
}

h2{
    font-size:var(--fs-h2);
}

h3{
    font-size:var(--fs-h3);
}

a{
    color:var(--color-primary);
    text-decoration:none;
    transition:var(--transition-fast);
}

a:hover{
    color:var(--color-hover);
}

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

ul{
    list-style:none;
}

/* =========================================================
   BOTÕES PADRÃO
========================================================= */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:56px;

    padding:0 32px;

    font-family:var(--font-family-base);
    font-size:1.125rem;
    font-weight:700;
    line-height:1;

    text-decoration:none;

    border:none;
    cursor:pointer;

    border-radius:var(--radius-xl);

    transition:var(--transition-fast);
}

.btn-primary{
    background:var(--color-primary);
    color:var(--color-white);
}

.btn-primary:hover{
    background:var(--color-accent);
    color:var(--color-white);
}

.btn-secondary{
    background:var(--color-accent);
    color:var(--color-white);
}

.btn-secondary:hover{
    background:var(--color-primary);
    color:var(--color-white);
}

/* =========================================================
   FORMULÁRIOS PADRÃO
========================================================= */

.input,
.select,
.textarea{
    width:100%;

    padding:14px 16px;

    font-family:var(--font-family-base);
    font-size:1rem;

    color:var(--color-text);

    border:1px solid var(--color-border);

    border-radius:var(--radius-sm);

    transition:var(--transition-fast);
}

.input:focus,
.select:focus,
.textarea:focus{
    outline:none;

    border-color:var(--color-primary);
}

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
    width:18px;
    height:16px;
}

::-webkit-scrollbar-track{
    background:
        linear-gradient(
            180deg,
            #dbe8f0 0%,
            #cfe0ea 100%
        );
}

::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            180deg,
            #1b5f87 0%,
            #0f3f5c 100%
        );

    border-radius:999px;
}