/*
Theme Name: Arquivo do Clube
Author: Paulo
Description: Tema do site Arquivo Alvirrubro, feito para acompanhar o plugin Arquivo do Clube.
Version: 0.9.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arquivo-do-clube-tema
*/


/* ==========================================================================
   Tokens de reserva
   ==========================================================================
   O tema usa os tokens do plugin (assets/css/ac-tokens.css). Estes valores
   só entram em cena se o plugin estiver desativado — sem eles, o site ficaria
   sem cor nenhuma nessa situação. `@supports` não serve aqui: a variável
   simplesmente não existe, então o fallback vai no próprio :root com uma
   especificidade que o arquivo do plugin vence naturalmente por ordem.
   ========================================================================== */

:root {
  --ac-papel:        #FFFFFF;
  --ac-papel-alto:   #FFFFFF;
  --ac-papel-fundo:  #F5F4F4;
  --ac-tinta:        #1A1414;
  --ac-tinta-2:      #5E5454;
  --ac-tinta-3:      #8C8080;
  --ac-regua:        #E4E0E0;
  --ac-regua-forte:  #C6C0C0;
  --ac-rubro:        #BB0000;
  --ac-rubro-vivo:   #8F0000;
  --ac-rubro-fraco:  #FCEDED;
  --ac-sobre-rubro:  #FFFFFF;
  --ac-fonte-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ac-fonte-texto:   "Source Serif 4", Georgia, serif;
  --ac-fonte-etiq:    "Archivo Narrow", "Archivo", Arial, sans-serif;
  --ac-raio: 4px;
  --ac-raio-sm: 3px;
  --ac-largura: 1100px;
}

/* O fundo e a tinta da página inteira vêm dos tokens. Sem isto, o tema
   continuaria branco enquanto o conteúdo do plugin usasse o papel. */
body {
  background: var(--ac-papel);
  color: var(--ac-tinta);
  font-family: var(--ac-fonte-texto);
}
/* ==========================================================================
   Utilitários e componentes usados pelos templates novos
   (index, search, archive, single, searchform)
   ========================================================================== */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ac-skip-link:focus {
  position: fixed !important;
  top: 8px;
  left: 8px;
  z-index: 100000;
  width: auto;
  height: auto;
  clip: auto;
  padding: 10px 16px;
  background: var(--ac-papel-alto);
  color: var(--ac-tinta);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--ac-rubro);
  outline-offset: 2px;
}

.ac-page-title { margin: 0 0 14px; font-size: var(--ac-t-2xl); line-height: 1.2; }

.ac-busca-lista { list-style: none; margin: 14px 0 0; padding: 0; }
.ac-busca-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--ac-regua);
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.ac-busca-item:last-child { border-bottom: 0; }
.ac-busca-tipo {
  font-size: var(--ac-t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .6;
}

.ac-lista-posts { display: flex; flex-direction: column; gap: 14px; }
.ac-post-titulo { margin: 0 0 4px; font-size: var(--ac-t-xl); }
.ac-post-meta { font-size: var(--ac-t-xs); opacity: .65; margin-bottom: 8px; }
.ac-post-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }

.ac-site-footer { margin-top: 40px; padding: 24px 16px; border-top: 1px solid var(--ac-regua); }
.ac-footer-inner { max-width: 1120px; margin: 0 auto; }
.ac-footer-copy { font-size: var(--ac-t-sm); opacity: .7; text-align: center; }



/* =========================
   Header + Footer (grid + cores)
========================= */
/* Este bloco :root definia uma paleta ESCURA que era sobrescrita, mais abaixo
   no mesmo arquivo, por um segundo :root com paleta clara. As variáveis daqui
   nunca chegavam a valer. Ficou só o --ac-link, que não existe no outro bloco. */
:root{
  --ac-link: var(--ac-tinta);
}

.ac-site-header{
  position: relative;
  background: var(--ac-bg);
  border-bottom: 1px solid var(--ac-border);
}
.ac-header-inner{
  max-width: var(--ac-max);
  margin: 0 auto;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}
.ac-header-brand a{
  color: var(--ac-text);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .2px;
}
.ac-header-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
}
.ac-header-nav a{
  color: var(--ac-muted);
  text-decoration: none;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 10px;
}
.ac-header-nav a:hover{
  color: var(--ac-link);
  background: var(--ac-papel-fundo);
}

.ac-nav-toggle{
  display:inline-flex;
align-items:center;
  justify-content:center;
  width:42px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--ac-border);
  background: transparent;
  color: var(--ac-text);
  cursor:pointer;
}
.ac-header-nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:flex-end;
  list-style:none;
  margin:0;
  padding:0;
}
.ac-header-nav li{ margin:0; padding:0; }
.ac-header-nav li a{ display:inline-block; }

.ac-mobile-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ac-mobile-nav li{ margin:0; padding:0; }

.ac-nav-toggle:hover{
  background: var(--ac-papel-fundo);
}
.ac-nav-toggle-bars{
  width:18px;
  height:2px;
  background: currentColor;
  position: relative;
  display:block;
  border-radius:2px;
}
.ac-nav-toggle-bars:before,
.ac-nav-toggle-bars:after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background: currentColor;
  border-radius:2px;
}
.ac-nav-toggle-bars:before{ top:-6px; }
.ac-nav-toggle-bars:after{ top:6px; }

.ac-mobile-nav{
  display:none;
  max-width: var(--ac-max);
  margin: 0 auto;
  padding: 6px 16px 14px 16px;
  border-bottom: 1px solid var(--ac-border);
}
.ac-mobile-nav a{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--ac-muted);
  text-decoration:none;
  font-weight:600;
}
.ac-mobile-nav a:hover{
  color: var(--ac-link);
  background: var(--ac-papel-fundo);
}

.ac-footer-copy{
  text-align:center;
  color: var(--ac-muted);
  font-weight:600;
  font-size: var(--ac-t-sm);
}

@media (max-width: 768px){
  .ac-header-inner{
    grid-template-columns: 1fr auto;
  }
  .ac-header-nav{
    display:none !important;
  }
  .ac-nav-toggle{
    display:inline-flex !important;
  }
  body.ac-nav-open .ac-mobile-nav{
    display:block !important;
  }
}

.ac-site-footer{
  background: var(--ac-bg);
  border-top: 1px solid var(--ac-border);
  margin-top: 40px;
  padding: 18px 16px;
}
.ac-footer-inner{
  max-width: var(--ac-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.ac-footer-nav{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
}
.ac-footer-nav a{
  color: var(--ac-muted);
  text-decoration:none;
  font-weight:600;
  padding: 6px 8px;
  border-radius: 10px;
}
.ac-footer-nav a:hover{
  color: var(--ac-link);
  background: var(--ac-papel-fundo);
}

/* Ajuste de base para o site */
body{
  margin:0;
}

/* Dedupe: evita header duplicado caso algum template imprima duas vezes */
header.ac-site-header:not(:first-of-type){display:none !important;}


/* =========================
   Visual polish (tipografia, espaçamento, cards)
   ========================= */
/*
 * Pontes: os nomes antigos do tema, agora apontando para os tokens do plugin.
 *
 * --ac-border e --ac-border-2 eram rgba(17,24,39,…) FIXO — preto translúcido.
 * Como o tema carrega DEPOIS do plugin e a especificidade é a mesma, ele
 * vencia: no tema escuro, toda borda de card e toda linha de tabela ficava
 * preta sobre fundo escuro, ou seja, invisível. As grades de estatística
 * viravam um bloco de números soltos.
 */
:root{
  --ac-bg: var(--ac-papel);
  --ac-surface: var(--ac-papel-alto);
  --ac-surface-2: var(--ac-papel-fundo);
  --ac-text: var(--ac-tinta);
  --ac-muted: var(--ac-tinta-2);
  --ac-border: var(--ac-regua);
  --ac-border-2: var(--ac-regua-forte);
  --ac-accent: var(--ac-rubro);
  --ac-accent-2: var(--ac-rubro-vivo);
  --ac-radius: var(--ac-raio);
  --ac-radius-sm: var(--ac-raio-sm);
  --ac-shadow: var(--ac-sombra);
  --ac-shadow-sm: var(--ac-sombra);
  --ac-max: var(--ac-largura);
  --ac-gutter: var(--ac-e-4);
}

html{scroll-behavior:smooth}
/*
 * A ÚLTIMA regra body do arquivo — é ela que vale. Havia quatro, e esta
 * sobrescrevia a fonte do sistema de design por uma pilha de fontes de
 * sistema: o Source Serif 4 era baixado do Google em toda página e o corpo do
 * texto nunca o usava. E o fundo era --ac-papel-alto (branco puro), o mesmo
 * dos cards, então card e página tinham a mesma cor.
 */
body{
  background: var(--ac-papel);
  color: var(--ac-tinta);
  font-family: var(--ac-fonte-texto);
  font-size: var(--ac-t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{color: var(--ac-accent); text-underline-offset: 2px}
a:hover{color: var(--ac-accent-2)}

h1,h2,h3,h4{line-height:1.2; letter-spacing:-.02em}
h1{font-size: clamp(28px, 3.2vw, 40px); margin: 0 0 10px}
h2{font-size: clamp(20px, 2.2vw, 28px); margin: 0 0 10px}
h3{font-size: var(--ac-t-lg); margin: 0 0 8px}

p{margin: 0 0 12px}
small,.muted{color: var(--ac-muted)}

/* Layout container */
.ac-page, .site, .ac-wrap, .wrap, .container, main{
  max-width: var(--ac-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ac-gutter);
  padding-right: var(--ac-gutter);
}

/* Header */
.ac-site-header{
  background: var(--ac-surface);
  border-bottom: 1px solid var(--ac-border);
}
.ac-header-inner{
  max-width: var(--ac-max);
  margin: 0 auto;
  padding: 14px var(--ac-gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}
.ac-header-brand a{
  color: var(--ac-text);
  text-decoration:none;
  font-weight: 800;
  letter-spacing:-.02em;
  font-size: var(--ac-t-lg);
}
.ac-header-nav{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 14px;
}
.ac-header-nav a{
  color: var(--ac-text);
  text-decoration:none;
  font-weight: 600;
  font-size: var(--ac-t-sm);
  padding: 8px 10px;
  border-radius: 999px;
}
.ac-header-nav a:hover{
  background: var(--ac-rubro-fraco);
  color: var(--ac-accent);
}

/* Footer */
.ac-site-footer, .ac-global-footer{
  background: var(--ac-surface-2);
  border-top: 1px solid var(--ac-border);
  margin-top: 48px;
}
.ac-footer-inner{
  max-width: var(--ac-max);
  margin: 0 auto;
  padding: 18px var(--ac-gutter);
}
.ac-footer-nav, .ac-global-footer .ac-footer-inner{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 14px;
}
.ac-footer-nav a, .ac-global-footer .ac-footer-inner a{
  color: var(--ac-text);
  text-decoration:none;
  font-weight: 600;
  font-size: var(--ac-t-sm);
  padding: 8px 10px;
  border-radius: 999px;
}
.ac-footer-nav a:hover, .ac-global-footer .ac-footer-inner a:hover{
  background: var(--ac-rubro-fraco);
  color: var(--ac-accent);
}

/* Cards / boxes: aplica em blocos comuns (sem depender do plugin) */
/*
 * .ac-card, .ac-section e .ac-block saíram desta lista: são componentes do
 * PLUGIN, já definidos em ac-componentes.css. Como o tema carrega depois e a
 * especificidade é igual, ele vencia — e o raio de 14px daqui derrotava o
 * --ac-raio de 4px do sistema. Um "raio só" que existe em dois valores não é
 * um sistema. O tema estiliza o que é dele.
 */
.card, .box, .panel,
.ac-stats-box, .ac-stat-box{
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  box-shadow: var(--ac-shadow);
}

/* Inputs */
input, select, textarea, button{
  font: inherit;
}
select, input[type="text"], input[type="number"], input[type="date"], textarea{
  border: 1px solid var(--ac-border-2);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--ac-papel-alto);
}
select:focus, input:focus, textarea:focus{
  outline: none;
  border-color: var(--ac-rubro);
  box-shadow: 0 0 0 3px rgba(185,28,28,.15);
}

/* Tabelas padrão */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  overflow:hidden;
}
th, td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--ac-border);
  text-align:left;
}
tr:last-child td{border-bottom:none}
th{
  background: var(--ac-papel-fundo);
  font-weight: 700;
  color: var(--ac-text);
}

/* Responsivo: não deixa o menu estourar */
@media (max-width: 768px){
  .ac-header-inner{flex-direction:column; align-items:flex-start}
  .ac-header-nav a, .ac-footer-nav a{padding: 7px 9px}
}



@media (min-width: 769px){
  .ac-nav-toggle{display:none !important;}
  .ac-mobile-nav{display:none !important;}
  body.ac-nav-open .ac-mobile-nav{display:none !important;}
}


/* === Mobile menu toggle (Fix 3) === */
.ac-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.ac-nav-toggle{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:46px;
  height:40px;
  border:0;
  border-radius:12px;
  background:transparent;
  cursor:pointer;
  position:relative;
  padding:0;
  margin-left:auto;
}
/* Removido: `.ac-nav-toggle > span:not(.ac-nav-toggle-bars)` — o único <span>
   que o header emite dentro do botão É o .ac-nav-toggle-bars, então a regra
   nunca casava com nada. As 3 barras vêm de .ac-nav-toggle-bars + :before/:after. */

.ac-mobile-nav{display:none;}
body.ac-nav-open .ac-mobile-nav{display:block;}
@media (min-width: 769px){
  .ac-nav-toggle{display:none !important;}
  .ac-mobile-nav{display:none !important;}
}
@media (max-width: 768px){
  .ac-header-nav{display:none !important;}
  .ac-nav-toggle{display:inline-flex !important;}
  .ac-mobile-nav{
    position:absolute;
    top:100%;
    right:12px;
    left:12px;
    background:var(--ac-papel-alto);
    border: 1px solid var(--ac-regua);
    border-radius:16px;
    box-shadow:0 16px 48px rgba(0,0,0,.12);
    padding:10px;
    z-index:9999;
  }
  .ac-header{position:relative;}
  .ac-mobile-nav a{
    display:block;
    padding:12px 14px;
    border-radius:12px;
    text-decoration:none;
  }
  .ac-mobile-nav a:hover{background: var(--ac-papel-fundo);}
}

/* ==============================
   Barra de busca (header)
   ============================== */
.ac-searchbar-wrap {
  padding: 18px 0 6px;
}

.ac-searchbar-wrap .container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

.ac-searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.ac-search-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--ac-regua);
  border-radius: 14px;
  outline: none;
  font-size: var(--ac-t-sm);
}

.ac-search-input:focus {
  border-color: var(--ac-regua-forte);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

.ac-search-btn {
  height: 44px;
  width: 44px;
  border-radius: 14px;
  border: 1px solid var(--ac-regua);
  background: var(--ac-papel-alto);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ac-search-btn:hover {
  background: var(--ac-papel-fundo);
}


/* ===== DROPDOWN MENU (FIX POSIÇÃO + ANTI-GAP) ===== */
@media (min-width: 769px){
  .ac-header-nav li{ position:relative; }
  .ac-header-nav ul.sub-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    z-index:9999;
    flex-wrap:nowrap;
    gap:0;
    justify-content:flex-start;
    flex-direction:column;
    min-width:220px;
    margin:0;
    padding:8px 0;
    list-style:none;
    background:var(--ac-papel-alto);
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
  }
  .ac-header-nav li:hover > ul.sub-menu,
  .ac-header-nav li:focus-within > ul.sub-menu{
    display:flex;
  }
  .ac-header-nav ul.sub-menu::before{
    content:"";
    position:absolute;
    left:0; right:0;
    top:-12px;
    height:12px;
  }
  .ac-header-nav ul.sub-menu a{
    display:block;
    padding:8px 16px;
    white-space:nowrap;
  }
}

/* ===== AJUSTES: LOGO + MENU (15%) + SETA SUBMENU ===== */
.ac-site-logo{
  height:51px; /* 44px * 1.15 */
  width:auto;
  display:block;
}
@media (max-width: 768px){
  .ac-site-logo{
    height:39px; /* 34px * 1.15 */
  }
}

/* aumenta fonte do menu */
@media (min-width: 769px){
  .ac-header-nav > ul > li > a{
    font-size: 1.15em;
  }
}
@media (max-width: 768px){
  .ac-header-nav a{
    font-size: 1.12em;
  }
}

/* setinha nos itens que têm submenu */
@media (min-width: 769px){
  .ac-header-nav .menu-item-has-children > a::after{
    content:"▾";
    display:inline-block;
    margin-left:6px;
    font-size:0.85em;
    line-height:1;
    vertical-align:middle;
    opacity:.75;
  }
}

/* ==========================================================================
   Movimento reduzido — precisa ficar no FIM do arquivo.
   Antes este bloco vinha antes de `html{scroll-behavior:smooth}`; media query
   não aumenta especificidade, então a regra posterior vencia e a preferência
   do usuário era anulada.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Alternador de tema
   ========================================================================== */

.ac-header-acoes {
  display: flex;
  align-items: center;
  gap: var(--ac-e-2, .5rem);
}

/* Os estilos do .ac-tema-toggle saíram com o botão: o site tem uma pele só. */