/* portal-chrome.css — chrome compartilhado (extraído de portal.css) para o Mapa da Mulher.

   Inclui :root tokens + .site-header/.nav-drawer/.site-footer/.partners-strip + responsivo.

   NÃO inclui as regras bare body/h1-h4 (para não conflitar com o design próprio do mapa). */

:root{
  /* ---- Cores institucionais (manual) ---- */
  --color-primary:#0A2342;
  --color-accent:#E21D2D;
  --color-gray-light:#E6E6E6;
  --color-white:#FFFFFF;
  --color-gray-dark:#333333;

  /* ---- Tons derivados (variação controlada da marca) ---- */
  --color-primary-900:#061629;
  --color-primary-800:#0A2342;
  --color-primary-700:#14365b;
  --color-primary-600:#1d4570;
  --color-primary-100:#e9eef5;
  --color-accent-hover:#bf1623;
  --color-blue:#1b6cb3;        /* azul interativo (ícones/links) — derivado, presente na referência */
  --color-blue-deep:#13568a;
  --color-blue-soft:#e8f1f9;
  --color-surface:#ffffff;
  --color-surface-soft:#f4f6fa;
  --color-surface-soft-2:#eaeff5;
  --color-border:#e2e7ef;
  --color-border-strong:#cfd8e4;
  --color-text:#1f2a37;
  --color-text-muted:#5b6b7e;
  --color-on-primary:#ffffff;

  /* ---- Sombras ---- */
  --shadow-xs:0 1px 2px rgba(10,35,66,.06);
  --shadow-sm:0 1px 2px rgba(10,35,66,.05),0 4px 12px rgba(10,35,66,.06);
  --shadow:0 1px 2px rgba(10,35,66,.05),0 12px 28px rgba(10,35,66,.09);
  --shadow-lg:0 20px 48px rgba(10,35,66,.16);

  /* ---- Tipografia ---- */
  --font-display:"Montserrat",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --font-label:"Montserrat",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --font-body:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,Segoe UI,Arial,sans-serif;

  /* escala fluida */
  --fs-h1:clamp(2rem,1.25rem + 2.9vw,3.5rem);     /* 32 → 56 */
  --fs-h2:clamp(1.75rem,1.35rem + 1.6vw,2.5rem);  /* 28 → 40 */
  --fs-h3:clamp(1.375rem,1.2rem + 0.7vw,1.75rem); /* 22 → 28 */
  --fs-lead:clamp(1.125rem,1.06rem + 0.3vw,1.25rem);
  --fs-body:clamp(1rem,0.97rem + 0.15vw,1.0625rem);
  --fs-meta:0.9rem;

  /* ---- Layout ---- */
  --maxw:1240px;
  --pad-x:clamp(20px,4vw,48px);
  --sec-y:clamp(56px,7vw,104px);
  --radius:12px;
  --radius-sm:8px;
  --radius-lg:18px;
  --header-h:90px;
  --header-h-shrink:78px;

  /* ---- Aliases legados (NÃO remover — usados nos <style> inline das páginas) ---- */
  --navy:var(--color-primary);
  --navy-2:var(--color-primary-700);
  --blue:var(--color-blue);
  --blue-deep:var(--color-blue-deep);
  --blue-soft:var(--color-blue-soft);
  --red:var(--color-accent);
  --red-deep:var(--color-accent-hover);
  --red-soft:#fbe7e8;
  --paper:var(--color-surface-soft);
  --paper-2:var(--color-surface-soft-2);
  --card:var(--color-surface);
  --line:var(--color-border);
  --ink:var(--color-text);
  --muted:var(--color-text-muted);
  --charcoal:var(--color-primary-900);
  --charcoal-2:var(--color-primary-900);
}

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

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:2000;
  background:var(--color-accent); color:#fff; padding:12px 18px; border-radius:8px;
  font-family:var(--font-label); font-weight:600; text-decoration:none; transition:top .18s ease;
}
.skip-link:focus{ top:12px; }

/* ---------- Container ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x); width:100%; }

/* =====================================================================
   HEADER / NAVEGAÇÃO  (renderizado por /js/portal.js)
   ===================================================================== */
.site-header{
  position:sticky; top:0; z-index:1000; width:100%;
  min-height:var(--header-h);                 /* reserva de espaço — evita CLS na injeção via JS */
  background:var(--color-primary);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .25s ease, box-shadow .25s ease;
}
/* Variante "overlay" — header transparente sobre o hero (home) */
.site-header.is-overlay{
  position:absolute; min-height:0; background:transparent; border-bottom-color:transparent;
}
.site-header.is-overlay.is-stuck{ position:fixed; }
.site-header.is-stuck{
  background:var(--color-primary); box-shadow:0 6px 22px rgba(6,18,38,.34);
  border-bottom-color:rgba(255,255,255,.10);
}
.site-header__inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x);
  min-height:var(--header-h); display:flex; align-items:center; gap:8px;
  transition:min-height .25s ease;
}
.site-header.is-stuck .site-header__inner{ min-height:var(--header-h-shrink); }
/* Aviso flutuante "em construção" (Cursos/Vídeos) */
.idr-chrome-toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,16px); z-index:4000;
  display:flex; align-items:center; gap:10px; max-width:92vw;
  background:#0f1f3a; color:#eaf1fb; border:1px solid rgba(255,255,255,.14);
  border-radius:14px; padding:13px 18px; font-size:14.5px; font-weight:500;
  box-shadow:0 16px 44px rgba(6,18,38,.5); opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.idr-chrome-toast.show{ opacity:1; transform:translate(-50%,0); }
.idr-chrome-toast .cone{ font-size:18px; flex:0 0 auto; }

/* Marca IDR no header: símbolo "IDR" (recortado) + texto "Instituto / Darcy Ribeiro" legível ao lado. */
.site-brand{ display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; text-decoration:none; }
.brand-mark{ height:30px; width:auto; object-fit:contain; transition:height .25s ease; flex:0 0 auto; }
.site-header.is-stuck .brand-mark{ height:27px; }
.brand-text{ display:flex; flex-direction:column; justify-content:center; line-height:1.06; font-family:var(--font-display); white-space:nowrap; }
.brand-text .bt-1{ font-weight:600; font-size:.76rem; color:#aebfd6; letter-spacing:.2px; }
.brand-text .bt-2{ font-weight:800; font-size:.9rem; color:#fff; letter-spacing:.1px; }
.site-header.is-stuck .brand-text .bt-1{ font-size:.72rem; }
.site-header.is-stuck .brand-text .bt-2{ font-size:.84rem; }

/* Logo da Prefeitura de Maricá — lado direito do header */
.site-brand-marica{ display:inline-flex; align-items:center; flex:0 0 auto; text-decoration:none; }
.site-brand-marica img{
  height:74px; width:auto; object-fit:contain; transition:height .25s ease;
}
.site-header.is-stuck .site-brand-marica img{ height:62px; }

.site-nav{ display:flex; align-items:center; gap:0; margin-left:auto; flex-wrap:nowrap; }
.site-nav a{
  position:relative; font-family:var(--font-label); font-weight:600;
  font-size:.85rem; letter-spacing:.1px; color:#cdd8e8; text-decoration:none;
  padding:8px 4px; border-radius:8px; white-space:nowrap; transition:color .18s ease;
}
.site-nav a::after{
  content:""; position:absolute; left:4px; right:4px; bottom:4px; height:2.5px;
  border-radius:2px; background:var(--color-accent); transform:scaleX(0);
  transform-origin:center; transition:transform .2s ease;
}
.site-nav a:hover, .site-nav a:focus-visible{ color:#fff; }
.site-nav a:hover::after, .site-nav a:focus-visible::after{ transform:scaleX(.55); }
.site-nav a[aria-current="page"]{ color:#fff; }
.site-nav a[aria-current="page"]::after{ transform:scaleX(1); }
.site-nav a .ext-ic{ width:13px; height:13px; margin-left:5px; vertical-align:-1px; opacity:.85; }

/* Ícones das redes no canto superior direito — pequenos e discretos */
.site-social{ display:flex; align-items:center; gap:1px; flex:0 0 auto; margin-left:6px; padding-left:8px; border-left:1px solid rgba(255,255,255,.14); }
.site-social a{
  width:28px; height:28px; display:grid; place-items:center; border-radius:8px;
  color:#aebfd6; transition:.18s ease;
}
.site-social a:hover, .site-social a:focus-visible{ color:#fff; background:rgba(255,255,255,.12); }
.site-social a svg{ width:16px; height:16px; }

.nav-toggle{
  display:none; margin-left:auto; width:46px; height:46px; border-radius:10px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  color:#fff; cursor:pointer; place-items:center;
}
.nav-toggle svg{ width:26px; height:26px; }

/* ----- Drawer mobile ----- */
.nav-backdrop{
  position:fixed; inset:0; z-index:1100; background:rgba(6,18,38,.55);
  opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s ease;
}
.nav-backdrop.open{ opacity:1; visibility:visible; }
.nav-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:1200; width:min(86vw,360px);
  background:var(--color-primary); transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; padding:18px 20px 26px;
  box-shadow:-12px 0 40px rgba(6,18,38,.4);
}
.nav-drawer.open{ transform:translateX(0); }
.nav-drawer__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.nav-drawer__top img{ height:44px; width:auto; }
.nav-drawer__close{
  width:44px; height:44px; border-radius:10px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); color:#fff; cursor:pointer; display:grid; place-items:center;
}
.nav-drawer__close svg{ width:24px; height:24px; }
.nav-drawer nav{ display:flex; flex-direction:column; margin-top:10px; }
.nav-drawer nav a{
  font-family:var(--font-label); font-weight:600; font-size:1.05rem; color:#dbe4f0;
  text-decoration:none; padding:14px 12px; border-radius:10px; border-bottom:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; gap:8px;
}
.nav-drawer nav a:hover, .nav-drawer nav a:focus-visible{ background:rgba(255,255,255,.08); color:#fff; }
.nav-drawer nav a[aria-current="page"]{ color:#fff; box-shadow:inset 3px 0 0 var(--color-accent); }
.nav-drawer__social{ margin-top:auto; padding-top:20px; display:flex; gap:10px; }
.nav-drawer__social a{
  width:46px; height:46px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#dbe4f0;
}
.nav-drawer__social a:hover, .nav-drawer__social a:focus-visible{ background:rgba(255,255,255,.16); color:#fff; }
.nav-drawer__social svg{ width:20px; height:20px; }
body.nav-open{ overflow:hidden; }


/* =====================================================================
   FAIXA DE PARCEIROS (acima do rodapé)
   ===================================================================== */
.partners-strip{ background:#fff; border-top:1px solid var(--color-border); padding:26px 0; }
.partners-strip .row{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(22px,4.5vw,52px);
}
.partners-strip a{ display:inline-flex; align-items:center; }
.partners-strip img{ height:46px; width:auto; max-width:158px; object-fit:contain; opacity:.88; transition:.2s ease; }
.partners-strip a:hover img, .partners-strip a:focus-visible img{ opacity:1; transform:translateY(-2px); }
@media (max-width:560px){ .partners-strip img{ height:36px; } }

/* =====================================================================
   FOOTER institucional (navy + dobra gráfica)
   ===================================================================== */
.site-footer{ position:relative; overflow:hidden; background:var(--color-primary); color:#c4d2e4; }
.site-footer__fold{
  position:absolute; right:0; bottom:0; width:min(46%,520px); height:100%;
  pointer-events:none; z-index:0; opacity:.9;
}
.site-footer__inner{
  position:relative; z-index:1; max-width:var(--maxw); margin:0 auto;
  padding:clamp(40px,5vw,64px) var(--pad-x) clamp(28px,4vw,40px);
  display:grid; grid-template-columns:1.5fr 1.2fr 1fr 1fr; gap:clamp(28px,4vw,48px);
}
.site-footer h4{
  font-family:var(--font-label); font-weight:700; font-size:.8125rem; letter-spacing:1.4px;
  text-transform:uppercase; color:#fff; margin:0 0 16px;
}
/* Logo do IDR no rodapé com um leve "fade" (marca d'água), realça no hover */
.footer-brand img{ height:64px; width:auto; margin-bottom:14px; opacity:.7; transition:opacity .3s ease; }
.footer-brand img:hover{ opacity:1; }
.footer-brand p{ color:#9fb1c9; font-size:.85rem; line-height:1.55; max-width:34ch; margin:0; }
.footer-contact ul, .footer-links ul{ list-style:none; margin:0; padding:0; }
.footer-contact li{ display:flex; gap:11px; margin-bottom:14px; line-height:1.5; font-size:.95rem; }
.footer-contact li svg{ width:18px; height:18px; flex:0 0 auto; margin-top:2px; color:#7f97b6; }
.footer-contact a, .footer-links a{ color:#c4d2e4; text-decoration:none; }
.footer-contact a:hover, .footer-links a:hover{ color:#fff; text-decoration:underline; }
.footer-links li{ margin-bottom:11px; }
.footer-links a{ font-size:.95rem; display:inline-flex; align-items:center; gap:7px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:#c4d2e4; transition:.18s ease;
}
.footer-social a:hover, .footer-social a:focus-visible{ background:rgba(255,255,255,.15); color:#fff; transform:translateY(-2px); }
.footer-social svg{ width:19px; height:19px; }
.footer-cnpj{ margin-top:14px; font-size:.82rem; color:#7f97b6; }

.site-footer__bar{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.18); }
.site-footer__bar .row{
  max-width:var(--maxw); margin:0 auto; padding:14px var(--pad-x);
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; justify-content:space-between;
  font-size:.82rem; color:#9fb1c9;
}
.site-footer__bar .row > span{ display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; }
.site-footer__bar a{ color:#7f97b6; text-decoration:none; }
.site-footer__bar a:hover{ color:#c4d2e4; text-decoration:underline; }
.team-access{ display:inline-flex; align-items:center; gap:6px; }
.team-access svg{ width:13px; height:13px; }

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width:1080px){
  .site-footer__inner{ grid-template-columns:1.4fr 1fr 1fr; }
  .footer-social-col{ grid-column:1 / -1; }
}
/* Nav horizontal completa só onde cabe (2 logos grandes + 10 itens). Abaixo, menu lateral. */
@media (max-width:1240px){
  .site-nav, .site-social{ display:none; }
  .nav-toggle{ display:grid; }
}
@media (max-width:920px){
  .site-brand-marica{ display:none; }
  :root{ --header-h:68px; --header-h-shrink:60px; }
  .brand-mark, .site-header.is-stuck .brand-mark{ height:28px; }
  .brand-text .bt-1{ font-size:.74rem; }
  .brand-text .bt-2{ font-size:.88rem; }
}
@media (max-width:760px){
  .site-footer__inner{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .site-footer__fold{ width:62%; opacity:.5; }
}
@media (max-width:520px){
  .site-footer__inner{ grid-template-columns:1fr; }
  .site-footer__bar .row{ justify-content:flex-start; }
  .site-footer__fold{ display:none; }
}