/* --- ALIGNMENT FIX (Oct 2025) ------------------------------------------
   Garante que TODO conteúdo use a mesma largura do cabeçalho/rodapé.
   Não altera estilos visuais (cores, tipografia, sombras etc.).
--------------------------------------------------------------------------- */
:root{ --container-max: 1120px; --container-pad: 16px; }

/* Força a mesma largura em todos os wrappers de página */
.container,
.page,
.header-inner,
.footer-grid,
.footer-meta,
.pillbar,
.filters,
.grid,
.hero,
.content,
.cards {
  width: auto !important;
  max-width: var(--container-max) !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  box-sizing: border-box;
}

/* Evita que algum wrapper interno mais estreito "puxe" o conteúdo para dentro */
.cards, .content, .grid, .hero { max-width: var(--container-max) !important; }

/* Mantém formulários mais estreitos apenas no painel/admin (sem afetar o site público) */
body:not(.admin) .form { max-width: var(--container-max) !important; }


/* --- UPDATE V7 --- */
/* largura mais estreita (ajuste conforme desejar) */
:root{ --container-max: 1120px; }
.container, .header-inner, .pillbar, .filters, .grid, .hero, .footer-inner, .page{
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* pílulas do placar como grid, tamanho uniforme, alinhadas */
.pillbar{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:12px;
  align-items:stretch;
}
.pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:44px;
  border-radius:12px;
  padding:10px 12px;
  box-sizing:border-box;
  white-space:nowrap;
  overflow:hidden;
}
.pill > span:first-child{ overflow:hidden; text-overflow:ellipsis; }
.pill .count{ margin-left:10px; flex:0 0 auto; font-weight:700; opacity:.9; }

@media (max-width: 640px){
  .pillbar{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .pill{ min-height:40px; }
}

/* links “ordenar por” & afins – sem sublinhado e com cor elegante */
a.control, .filters .sort a, .pager a, .perpage a, .meta a { text-decoration:none; color:#374151; }
a.control:hover, .filters .sort a:hover, .pager a:hover, .perpage a:hover, .meta a:hover { color:#111827; }
a.control.active, .filters .sort a[style*='font-weight:800'], .pager a.active, .perpage a.active, .meta a.active { color:#111827; font-weight:800; }
.pager { display:flex; gap:8px; align-items:center; flex-wrap: wrap; }
.pager a { padding:6px 10px; border-radius:8px; }
.pager a.active { border:1px solid #e5e7eb; background:#fff; }
.perpage { display:flex; gap:10px; align-items:center; }
.perpage .label { color:#6b7280; margin-right:6px; }
.pillbar a { text-decoration:none; }
.filters .chip a { text-decoration:none; color:#374151; }
.filters .chip.active a { color:#1f2937; }

/* autocomplete estilização básica */
.autocomplete{
  position:relative;
}
.autocomplete-list{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  z-index:20; margin-top:4px; max-height:240px; overflow:auto;
}
.autocomplete-item{
  padding:10px 12px; cursor:pointer;
}
.autocomplete-item:hover{ background:#f3f4f6; }
.autocomplete-empty{ padding:10px 12px; color:#6b7280; }



/* === TYPO PATCH (no width changes) =======================================
   - Hero title readable on dark
   - 'Motivo do boicote' with light background + dark text
   - Footer columns ('Apoie' & 'Aviso Legal') justified + clean font
   - Card/body sizes unchanged
   ----------------------------------------------------------------------- */

/* 1) Hero title — keep size, only ensure readable color on dark block */
html body .hero h1{
  color:#e5e7eb !important;  /* light text on dark background */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* 2) Motivo do boicote — light background and dark, comfortable text */
html body .motivo{
  background:#f5f7fb !important;               /* light gray */
  color:#111827 !important;                     /* dark text */
  border:1px solid #e5e7eb !important;
}
html body .motivo h3{ color:#0f172a !important; }
html body .motivo p{
  color:#111827 !important;
  font-weight:400 !important;
  font-size:15px !important;
  line-height:1.6 !important;
  text-align:left !important;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* 3) Footer texts — there's no .footer-legal class in the markup.
   Target both columns inside .footer-grid so it works everywhere. */
html body footer .footer-grid > div:first-child,
html body footer .footer-grid > div:last-child,
html body footer .footer-grid > div:first-child *,
html body footer .footer-grid > div:last-child *{
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif !important;
  font-weight:400 !important;
  font-size:15px !important;
  line-height:1.55 !important;
  color:#374151 !important;
  text-align:justify !important;
  text-justify:inter-word !important;
  hyphens:auto; -webkit-hyphens:auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
html body footer .footer-grid h3,
html body footer .footer-grid strong{ font-weight:700 !important; }

/* ======================================================================= */



/* === APPEND: CARDS + BUTTON TWEAK (no width changes) ==================== */
html body .card p{
  font-size: 14px !important;
  line-height: 1.45 !important;
  text-align: left !important;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
html body .card .btn{
  font-size: 14px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
}
/* ======================================================================= */



/* === CONTENT WIDTH OVERRIDE (fixes earlier 1120px max-width) ============ */
/* Keep header/footer intact. Expand only main content wrappers site-wide. */
:root{ --stage-content: 1240px; }

html body main,
html body main.page,
html body main.container,
html body .page,
html body .container.page,
html body .hero,
html body .pillbar,
html body .filters,
html body .grid,
html body .cards,
html body .content,
html body .section{
  /* override the earlier max-width: var(--container-max) !important; */
  max-width: min(var(--stage-content), 92%) !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}
/* ======================================================================= */



/* === CATEGORIAS: padronizar largura (igual à Home) =======================
   Alguns blocos estavam herdando padding 32px via .container, reduzindo
   a largura visível para ~1056px. Forçamos 1120px com 16px de padding.
========================================================================== */
:root { --stage-width: 1120px; --stage-pad: 16px; }

/* Containers DIRETOS dentro de main.page (categorias usa muito isso) */
main.page > .container {
  max-width: var(--stage-width) !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--stage-pad) !important;
  padding-right: var(--stage-pad) !important;
  box-sizing: border-box !important;
}

/* Pílulas (caixas coloridas) da página de categorias */
main.page > .container .pillbar,
main.page .pillbar {
  max-width: var(--stage-width) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--stage-pad) !important;   /* corrige 32px indevidos */
  padding-right: var(--stage-pad) !important;
  box-sizing: border-box !important;
}

/* Título "Categoria selecionada" e a lista (grid) do boicotado */
main.page section.grid,
main.page > section.grid,
main.page .section.grid {
  max-width: var(--stage-width) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--stage-pad) !important;   /* alinha com palco */
  padding-right: var(--stage-pad) !important;
  box-sizing: border-box !important;
}

/* Títulos de seção na página de categorias, para não ultrapassarem */
main.page .section-title {
  max-width: var(--stage-width) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--stage-pad) !important;
  padding-right: var(--stage-pad) !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* ===== VB – refinamentos visuais e de acessibilidade (append) ===== */

/* 1) Título do hero: tipografia mais equilibrada */
.hero h1,
.section.hero h1,
.hero-left h1 {
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

/* 2) Subtítulos de seção (ex.: "Placar de Boicotados por Categoria") */
h3.section-title {
  font-weight: 600;
  font-size: clamp(16px, 2.1vw, 18px);
  line-height: 1.35;
  color: #1a1f2b;            /* cinza-azulado mais legível */
  margin: 14px 0 10px;
}

/* 3) Pills / filtros (chips coloridos) – tipografia e espaçamento */
.pillbar a,
.filters a {
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  text-decoration: none;     /* sem sublinhado por padrão */
}
.pillbar a:hover,
.filters a:hover {
  text-decoration: none;     /* garante sem sublinhado no hover */
  filter: saturate(1.05) brightness(1.02);
}

/* contador dentro das pills (o número à direita) */
.pillbar a .count,
.filters a .count,
.pillbar a span:last-child,
.filters a span:last-child {
  font-weight: 700;
  opacity: 0.9;
}

/* 4) Cards de boicotados – hover suave e descrição com 2 linhas */
article.card,
.card {
  transition: transform .15s ease, box-shadow .15s ease;
}
article.card:hover,
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16,24,40,.06);
}

/* Descrições dos cards: clamp em 2 linhas (sem quebrar layout) */
.card p,
.card .desc,
article.card p {
  display: -webkit-box;
  -webkit-line-clamp: 2;     /* Chrome/Edge/Safari */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Metadados (ex.: "Incluído em ..."): cor mais neutra e consistente */
.card .meta,
article.card .meta,
.meta {
  color: #6b7280;            /* cinza médio */
  font-weight: 500;
}

/* 5) Links de ação (ex.: “Ver mais”) – limpa sublinhado no hover */
a.btn,
a.btn-link,
a[role="button"] {
  text-decoration: none;
}
a.btn:hover,
a.btn-link:hover,
a[role="button"]:hover {
  text-decoration: none;
}

/* 6) Acessibilidade: foco visível claro para navegação por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #94c5ff;    /* azul claro visível */
  outline-offset: 2px;
  border-radius: 8px;
}

/* --- Títulos dos cards (home & listas) --- */
.cards .card h3 a,
.grid .card h3 a,
.card h3 a {
  color: #1f3a8a;               /* mesma base usada nas categorias */
  text-decoration: none;        /* remove sublinhado */
  font-weight: 700;             /* mantém peso do título */
}

/* evita “roxo” de link visitado */
.cards .card h3 a:visited,
.grid .card h3 a:visited,
.card h3 a:visited {
  color: #1f3a8a;
}

/* estado de foco/hover: um tom mais escuro e sem sublinhado */
.cards .card h3 a:hover,
.cards .card h3 a:focus,
.grid .card h3 a:hover,
.grid .card h3 a:focus,
.card h3 a:hover,
.card h3 a:focus {
  color: #102a78;               /* 8–12% mais escuro */
  text-decoration: none;
}

/* === VB – ajustes finais (não altera larguras) ===========================
   - Links dos títulos dos cards (Home & listas): cor consistente e sem underline
   - “Ver mais” e chips: nunca sublinham no hover
   - Foco visível para teclado
   - Cards com hover suave; respeita quem prefere menos movimento
   ======================================================================= */

/* 1) Títulos dos cards (Home, Categorias, Listas) */
.cards .card h3 a,
.grid  .card h3 a,
.card  h3 a{
  color:#1f3a8a;             /* igual ao das categorias */
  text-decoration:none;
  font-weight:700;
}
.cards .card h3 a:hover,
.cards .card h3 a:focus,
.grid  .card h3 a:hover,
.grid  .card h3 a:focus,
.card  h3 a:hover,
.card  h3 a:focus{
  color:#102a78;             /* ~10% mais escuro */
  text-decoration:none;
}
.cards .card h3 a:visited,
.grid  .card h3 a:visited,
.card  h3 a:visited{
  color:#1f3a8a;             /* evita roxo padrão de link visitado */
}

/* 2) “Ver mais” e chips/filters: nunca sublinhar */
a.btn, a.btn-link, a[role="button"],
.pillbar a, .filters a{
  text-decoration:none;
}
a.btn:hover, a.btn-link:hover, a[role="button"]:hover,
.pillbar a:hover, .filters a:hover{
  text-decoration:none;
}

/* 3) Foco acessível (teclado) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:3px solid #94c5ff; /* azul claro visível */
  outline-offset:2px;
  border-radius:8px;
}

/* 4) Hover suave nos cards (e respeito ao motion-reduce) */
article.card, .card{
  transition: transform .15s ease, box-shadow .15s ease;
}
article.card:hover, .card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(16,24,40,.06);
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* === VB – microinteração do botão "Ver mais" dentro dos cards ========== */

/* Base: garante transições suaves e sem sublinhado */
.card a.btn,
.card .btn,
.card a[role="button"]{
  text-decoration: none;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

/* Hover: leve “lift”, fundo indigo-50 e borda indigo-200 */
.card a.btn:hover,
.card .btn:hover,
.card a[role="button"]:hover{
  background-color: #eef2ff;   /* indigo-50 */
  border-color:    #c7d2fe;     /* indigo-200 */
  color:           #1f3a8a;     /* indigo-900-ish para contraste */
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(31,58,138,.12);
  text-decoration: none;
}

/* Active: volta um tiquinho para dar sensação de clique */
.card a.btn:active,
.card .btn:active,
.card a[role="button"]:active{
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(31,58,138,.10);
}

/* Foco (teclado): acessível e consistente com o resto */
.card a.btn:focus-visible,
.card .btn:focus-visible,
.card a[role="button"]:focus-visible{
  outline: 3px solid #94c5ff;
  outline-offset: 2px;
  border-radius: 8px;
}

/* Garante zero sublinhado em qualquer estado do botão */
.card a.btn,
.card a.btn:hover,
.card a.btn:focus,
.card .btn,
.card .btn:hover,
.card .btn:focus{
  text-decoration: none;
}

/* === Ver mais (cards) — sem seta gerada; anima só a existente === */

/* 1) neutraliza qualquer seta criada antes via ::after */
.card a.btn::after,
.card a.btn-more::after {
  content: none !important;
}

/* 2) estilo/realce do botão no hover/focus */
.card a.btn,
.card a.btn-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none; /* sem sublinhado */
  transition: background-color .18s ease, box-shadow .18s ease, padding-right .18s ease;
}

.card a.btn:hover,
.card a.btn:focus-visible,
.card a.btn-more:hover,
.card a.btn-more:focus-visible {
  background-color: rgba(58, 99, 255, .08); /* leve realce */
  box-shadow: inset 0 0 0 1px rgba(58, 99, 255, .15);
  padding-right: .125rem; /* dá a sensação de “empurrar” a seta */
}

/* 3) anima a seta que já vem no HTML se ela estiver envolta em .arrow */
.card a.btn .arrow,
.card a.btn-more .arrow {
  display: inline-block;
  transition: transform .18s ease;
  line-height: 1;
}

.card a.btn:hover .arrow,
.card a.btn:focus-visible .arrow,
.card a.btn-more:hover .arrow,
.card a.btn-more:focus-visible .arrow {
  transform: translateX(4px);
}

/* 4) acessibilidade: respeita preferência por menos movimento */
@media (prefers-reduced-motion: reduce) {
  .card a.btn,
  .card a.btn-more {
    transition: background-color .18s ease, box-shadow .18s ease;
  }
  .card a.btn .arrow,
  .card a.btn-more .arrow {
    transition: none;
  }
}

/* Logo "Vamos Apoiar!" no card lateral da hero */
.hero-right {
  position: relative;
  padding-bottom: 110px; /* espaço para o logo; ajuste se quiser */
}
.hero-right .apoia-logo {
  position: absolute;
  right: 18px;
  bottom: 16px;
  height: 78px;
  width: auto;
  display: block;
  pointer-events: none;
}

/* ==== HEADER / LOGO ===================================================== */
/* Remove qualquer fundo/raio/padding da logo e aumenta o tamanho */
html body .site-header .brand .logo{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  height: 90px !important;   /* ↑ aumenta a logo */
  width: auto !important;
  display: inline-block;
}

/* Ajuste fino para telas pequenas (evita header “esticado” em celulares) */
@media (max-width: 480px){
  html body .site-header .brand .logo{
    height: 84px !important;
  }
}

/* ==== FOOTER / METADATA ================================================= */
html body .footer-meta,
html body .footer-meta *{
  font-size: 13px !important;   /* ↓ de ~15px para 13px */
  line-height: 1.4 !important;
}