/* ============================================================
   PORTAL MUNICIPAL — Fundação
   1. Fonte auto-hospedada
   2. Design tokens
   3. Reset
   4. Utilitários (substituem o Bootstrap)
   5. Acessibilidade (foco, movimento, alto contraste)

   Carregado ANTES de portal.css.
   ============================================================ */

/* ══ 1. FONTE ══════════════════════════════════════════════
   Para trocar por outra família (ex.: Rawline do gov.br), basta
   substituir os arquivos em /assets/fonts e os @font-face abaixo.
   ────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/inter-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/inter-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/inter-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/inter-latin-ext-800.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ══ 2. DESIGN TOKENS ══════════════════════════════════════
   Alterar um valor aqui re-tematiza o portal inteiro.
   As cores de marca (--pm-primary etc.) vêm do PHP, por portal.
   ────────────────────────────────────────────────────────── */
:root {
  /* Família */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Escala tipográfica — base 16px (eMAG) */
  --fs-2xs:  .75rem;    /* 12px — só metadados */
  --fs-xs:   .8125rem;  /* 13px */
  --fs-sm:   .875rem;   /* 14px */
  --fs-md:   1rem;      /* 16px — corpo */
  --fs-lg:   1.125rem;  /* 18px */
  --fs-xl:   1.25rem;   /* 20px */
  --fs-2xl:  clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  --fs-3xl:  clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem);

  --lh-tight: 1.25;
  --lh-snug:  1.4;
  --lh-base:  1.6;

  /* Espaçamento — escala de 4px */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;

  /* Raio */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-full: 999px;

  /* Elevação */
  --shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-2: 0 2px 4px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.10);
  --shadow-3: 0 4px 8px rgba(16,24,40,.08), 0 12px 28px rgba(16,24,40,.14);

  /* Tinta — todos os valores validados em WCAG AA sobre #fff e #eceff1 */
  --ink:        #1a2332;  /* 15.78:1 — títulos */
  --ink-body:   #33414f;  /* corpo */
  --ink-muted:  #4e5d6a;  /*  6.78:1 — texto secundário */
  --ink-subtle: #5d6b78;  /*  5.47:1 — metadados, datas */

  /* Superfícies */
  --surface:        #ffffff;
  --surface-sunken: #f0f2f5;
  --surface-muted:  #eceff1;
  --border:         #dde3e8;
  --border-strong:  #cfd8dc;

  /* Movimento */
  --t-fast: .15s ease;
  --t-base: .25s ease;
  --t-slow: .35s cubic-bezier(.4,0,.2,1);

  /* Foco */
  --focus-ring:   3px;
  --focus-offset: 2px;
}

/* ══ 3. RESET ══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--pm-body-text, var(--ink-body));
  background: var(--surface-sunken);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }
a  { color: var(--pm-primary); text-decoration: none; }
a:hover { color: var(--pm-secondary); }

/* ══ 4. UTILITÁRIOS ════════════════════════════════════════
   Substituem as ~25 classes que vinham do Bootstrap (232 KB).
   ────────────────────────────────────────────────────────── */
.d-none  { display: none !important; }
.d-block { display: block !important; }
.d-flex  { display: flex !important; }

@media (min-width: 768px) {
  .d-md-flex  { display: flex !important; }
  .d-md-block { display: block !important; }
}
@media (min-width: 992px) {
  .d-lg-flex { display: flex !important; }
  .d-lg-none { display: none !important; }
}

.align-items-center      { align-items: center; }
.align-items-end         { align-items: flex-end; }
.justify-content-center  { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.flex-wrap               { flex-wrap: wrap; }

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }

.p-0  { padding: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-4); }
.mb-4 { margin-bottom: var(--space-5); }
.mt-3 { margin-top: var(--space-4); }
.me-1 { margin-right: var(--space-1); }
.me-2 { margin-right: var(--space-2); }
.ms-1 { margin-left: var(--space-1); }
.ms-auto { margin-left: auto; }

.text-white { color: #fff !important; }
.text-decoration-none { text-decoration: none !important; }

/* Botões genéricos */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-1);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; cursor: pointer; line-height: 1.4;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn-sm { font-size: var(--fs-xs); padding: var(--space-1) var(--space-3); }
.btn-link { color: var(--pm-primary); border: none; background: none; }
.btn-link:hover { text-decoration: underline; }
.btn-outline-secondary {
  color: var(--ink-muted); border-color: var(--border-strong); background: var(--surface);
}
.btn-outline-secondary:hover {
  color: var(--ink); border-color: var(--ink-subtle); background: var(--surface-muted);
}

/* Select */
.form-select {
  font-family: inherit; font-size: var(--fs-sm); color: var(--ink-body);
  padding: var(--space-2) var(--space-6) var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%234e5d6a' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 12px;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.form-select-sm { font-size: var(--fs-xs); padding-top: var(--space-1); padding-bottom: var(--space-1); }

/* ══ 5. ACESSIBILIDADE ═════════════════════════════════════ */

/* ── Foco visível (WCAG 2.4.7) ──
   Anel duplo: escuro por fora, claro por dentro, para permanecer
   visível tanto sobre fundo claro quanto sobre a cor primária. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring) solid var(--ink);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 calc(var(--focus-ring) + var(--focus-offset)) #fff;
  border-radius: var(--radius-sm);
}
/* Sobre superfícies escuras (header, toolbar do tema Moderno, rodapé) o anel inverte */
.site-header :where(a, button):focus-visible,
.access-bar  :where(a, button):focus-visible,
.footer-bottom :where(a, button):focus-visible,
.layout-moderno .toolbar :where(a, button, input):focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 calc(var(--focus-ring) + var(--focus-offset)) rgba(0,0,0,.65);
}
/* Nunca remover o foco sem substituir */
:focus:not(:focus-visible) { outline: none; }

/* ── Skip links (eMAG) ── */
.skip-links { position: absolute; top: 0; left: 0; z-index: 9999; }
.skip-link {
  position: absolute; top: -200px; left: 0; white-space: nowrap;
  background: var(--ink); color: #fff;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm); font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 0; color: #fff; }

/* ── Movimento reduzido (WCAG 2.3.3) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Neutraliza os deslocamentos de hover */
  .card-destaque:hover, .card-secretaria:hover, .card-noticia:hover,
  .card-servico:hover, .card-secretaria-full:hover, .pm-news-card:hover {
    transform: none !important;
  }
  .card-noticia:hover .cn-img img,
  .se-banner:hover img { transform: none !important; }
}

/* ── Alto contraste (eMAG) ──
   Tema real, não inversão de filtro: preto com amarelo, o padrão
   esperado por quem tem baixa visão. Preserva as imagens legíveis.
   ────────────────────────────────────────────────────────── */
[data-contrast="alto"] {
  --pm-primary:      #000000;
  --pm-primary-dark: #000000;
  --pm-secondary:    #ffff00;
  --pm-accent:       #ffff00;
  --pm-header-text:  #ffff00;
  --pm-body-text:    #ffffff;
  --ink:             #ffffff;
  --ink-body:        #ffffff;
  --ink-muted:       #ffffff;
  --ink-subtle:      #ffff00;
  --surface:         #000000;
  --surface-sunken:  #000000;
  --surface-muted:   #000000;
  --border:          #ffff00;
  --border-strong:   #ffff00;
}
[data-contrast="alto"] body,
[data-contrast="alto"] .layout-wrap,
[data-contrast="alto"] .site-header,
[data-contrast="alto"] .toolbar,
[data-contrast="alto"] .access-bar,
[data-contrast="alto"] .site-footer,
[data-contrast="alto"] .pm-section,
[data-contrast="alto"] .sidebar-block,
[data-contrast="alto"] .cards-destaque-section,
[data-contrast="alto"] .secretarias-section,
[data-contrast="alto"] .noticias-section,
[data-contrast="alto"] .card-noticia,
[data-contrast="alto"] .card-secretaria,
[data-contrast="alto"] .card-secretaria-full,
[data-contrast="alto"] .card-destaque,
[data-contrast="alto"] .card-servico,
[data-contrast="alto"] .pm-news-card,
[data-contrast="alto"] .pm-sidebar,
[data-contrast="alto"] .search-results,
[data-contrast="alto"] .sidebar-eventos,
[data-contrast="alto"] .sidebar-social-card,
[data-contrast="alto"] .footer-bottom,
[data-contrast="alto"] .pm-footer,
[data-contrast="alto"] .pm-footer-bottom {
  background: #000 !important;
  background-image: none !important;
  color: #fff !important;
}
[data-contrast="alto"] :where(h1,h2,h3,h4,h5,h6,p,span,div,li,td,th,label,strong,em,time) {
  color: #fff !important;
}
[data-contrast="alto"] a,
[data-contrast="alto"] a :where(span,div,i),
[data-contrast="alto"] .nav-link,
[data-contrast="alto"] .cn-titulo,
[data-contrast="alto"] .cd-titulo,
[data-contrast="alto"] .csv-titulo,
[data-contrast="alto"] .csf-nome {
  color: #ffff00 !important;
}
[data-contrast="alto"] a:hover,
[data-contrast="alto"] .nav-link:hover,
[data-contrast="alto"] .nav-link.active {
  color: #000 !important;
  background: #ffff00 !important;
}
[data-contrast="alto"] :where(i, .fas, .far, .fab) { color: #ffff00 !important; }
[data-contrast="alto"] :where(.pm-section, .card-noticia, .card-secretaria, .card-destaque,
  .card-servico, .sidebar-block, .pm-news-card, .card-secretaria-full, .search-results,
  .sidebar-eventos, .form-busca input, .form-select, .btn) {
  border: 2px solid #ffff00 !important;
  box-shadow: none !important;
}
/* Imagens permanecem visíveis, com moldura para separar do fundo preto */
[data-contrast="alto"] img { border: 2px solid #ffff00; }
[data-contrast="alto"] .brasao { border: none; background: #fff; border-radius: var(--radius-sm); }
/* Sobreposições de texto sobre foto ficam ilegíveis no modo alto contraste */
[data-contrast="alto"] .banner-overlay { background: rgba(0,0,0,.82); }
[data-contrast="alto"] .se-titulo { background: #000; }

/* Conteúdo só para leitores de tela */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ══ WIDGET DE ACESSIBILIDADE ══════════════════════════════
   Flutua na lateral direita, acima do botão do VLibras.
   Substituiu a barra do topo — o header agora encosta no topo da página.
   ────────────────────────────────────────────────────────── */
.a11y-widget {
  position: fixed;
  /* Colado na borda direita (o VLibras usa ~10px de margem, fica alinhado) */
  right: var(--a11y-right, 8px);
  bottom: 96px;              /* posição inicial; o JS reposiciona acima do VLibras */
  z-index: 1055;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.a11y-toggle {
  width: 48px; height: 48px;
  border-radius: var(--radius-full);
  border: 2px solid rgba(255,255,255,.85);
  background: var(--pm-primary);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-2);
  transition: transform var(--t-fast), background var(--t-fast);
}
.a11y-toggle:hover        { background: var(--pm-secondary); transform: scale(1.06); }
.a11y-toggle[aria-expanded="true"] { background: var(--pm-secondary); }

.a11y-panel {
  order: -1;                 /* por padrão o painel abre ACIMA do botão */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  padding: var(--space-2);
  min-width: 208px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.a11y-panel[hidden] { display: none; }

.a11y-item {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none; border-radius: var(--radius-sm);
  background: none;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-body);
  text-align: left; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.a11y-item:hover { background: var(--pm-primary); color: #fff; }
.a11y-item:hover i, .a11y-item:hover .a11y-az { color: #fff; }
.a11y-item i     { width: 20px; text-align: center; color: var(--pm-primary); font-size: 1rem; }
.a11y-az {
  width: 20px; text-align: center;
  font-weight: 800; font-size: var(--fs-sm);
  color: var(--pm-primary);
}
.a11y-item[aria-pressed="true"] {
  background: var(--pm-primary); color: #fff;
}
.a11y-item[aria-pressed="true"] i { color: #fff; }

/* Sem espaço acima (widget empilhado alto sobre o VLibras): abre para baixo */
.a11y-widget.painel-abaixo .a11y-panel { order: 1; }

/* Telas estreitas: botão um pouco menor e painel colado à borda */
@media (max-width: 480px) {
  .a11y-widget { --a11y-right: 8px; bottom: 84px; }
  .a11y-toggle { width: 44px; height: 44px; font-size: 1.2rem; }
  .a11y-panel  { min-width: 190px; }
}

/* Impressão: widget não faz sentido no papel */
@media print { .a11y-widget { display: none; } }

/* Alto contraste */
[data-contrast="alto"] .a11y-toggle {
  background: #000; color: #ffff00; border-color: #ffff00;
}
[data-contrast="alto"] .a11y-panel {
  background: #000 !important; border: 2px solid #ffff00 !important;
}
[data-contrast="alto"] .a11y-item          { color: #ffff00 !important; }
[data-contrast="alto"] .a11y-item:hover    { background: #ffff00 !important; color: #000 !important; }
[data-contrast="alto"] .a11y-item:hover i,
[data-contrast="alto"] .a11y-item:hover .a11y-az { color: #000 !important; }