/*
Theme Name: Independente
Theme URI: https://github.com/leandro-sds/independent-theme
Author: Leandro Souza
Author URI: https://github.com/leandro-sds
Description: Tema WordPress moderno, responsivo e acessível, criado por uma pessoa cega para pessoas cegas desenvolverem sites para quem enxerga. Oferece 13 estilos visuais únicos com animações exclusivas, cada um com identidade própria — do clássico institucional ao portal esportivo noturno. Totalmente compatível com leitores de tela e navegação por teclado.
Version: 6.4
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Copyright: 2024-2026 Leandro Souza
Text Domain: independente
Tags: blog, two-columns, custom-logo, custom-menu, custom-colors, featured-images, accessibility-ready, rtl-language-support, translation-ready, footer-widgets
*/

/*
Independente WordPress Theme, Copyright 2024-2026 Leandro Souza
Independente is distributed under the terms of the GNU GPL v2 or later.

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
*/


:root {
  --primary-color: #273046;
  --accent-color: #F6AD55;
  --on-accent: #1a1200;
  --bg-light: #F5F7FA;
  --card-bg: #FFFFFF;
  --link-color: #2B6CB0;
  --font-main: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-title: var(--font-main);
  --text-color: #1e2532;
  --muted-text: #5a6476;
  --border-color: #dde3ec;
  --focus-ring: 3px solid var(--accent-color);
  --logo-max-width: 220px;
  --logo-max-height: 120px;
  --logo-scale: 1;
  --transition-fast: 0.22s ease;
  --transition-slow: 0.5s ease;
  --gold-color: #D4AF37;
  --silver-color: #C0C0C0;
  --rose-color: #E6C1C1;
  --header-bg: var(--primary-color);
  --header-fg: #ffffff;
  --header-muted: rgba(255,255,255,0.78);
  --header-border: rgba(255,255,255,0.14);
  --header-title-color: #ffffff;
  --header-input-bg: rgba(255,255,255,0.08);
  --header-input-border: rgba(255,255,255,0.25);
  /* Espaçamento global */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 2.75rem;
  --space-xl: 4rem;
  /* Largura de leitura confortável */
  --prose-max: 72ch;
  /* Raio de borda padrão */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

body {
  font-family: var(--font-main);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
  padding: 0;
  background-color: var(--bg-light);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--transition-slow), color var(--transition-slow);
}

/* Acessibilidade */
.screen-reader-text, .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 {
  position: fixed !important;
  top: -200px !important;
  left: 1rem !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 10000;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 1rem !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: auto !important;
  height: auto !important;
  padding: 12px 18px !important;
  background: var(--accent-color) !important;
  color: var(--on-accent) !important;
  border: 2px solid var(--on-accent) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  outline: var(--focus-ring) !important;
  outline-offset: 3px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

img {
  max-width: 100%;
  height: auto;
}

/* Foco global: suprime outline azul do browser no clique (mouse)
   e usa a cor de destaque do estilo na navegação por teclado */
*:focus:not(:focus-visible) {
  outline: none !important;
}

*:focus-visible {
  outline: var(--focus-ring) !important;
  outline-offset: 2px !important;
  border-radius: 3px;
}

.site-header{
  background-color: var(--header-bg);
  color: var(--header-fg);
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--header-border);
  transition: background-color var(--transition-fast);
}

footer[role="contentinfo"],
.site-footer {
  background-color: var(--header-bg);
  color: var(--header-fg);
  padding: 32px 0 20px;
  transition: background-color var(--transition-fast);
}

/* Wrapper do conteúdo: ocupa toda a largura */
.site-content {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: var(--bg-light);
  padding-bottom: var(--space-xl); /* respiro do bloco claro antes do corte para o rodapé */
}

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1200px;
  margin: 0;
  padding: 0;
  align-items: stretch; /* era flex-start — agora main e aside têm sempre a mesma altura */
}

.wrap{
  max-width:1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  width:100%;
}
main {
  flex: 1 1 0;
  padding: var(--space-lg);
  background-color: var(--card-bg);
  min-width: 0;
  min-height: 60vh; /* evita vazio visual em páginas curtas com sidebar longa */
  transition: background-color var(--transition-fast);
  /* Coluna flex: permite que o cartão do artigo estique e absorva
     o espaço vazio quando o conteúdo é mais curto que a sidebar */
  display: flex;
  flex-direction: column;
}

/* Página (page.php): o artigo é o único filho do main.
   Estica o cartão até o fim da coluna — elimina o "vão" branco
   abaixo do conteúdo em páginas curtas com sidebar longa.
   Não afeta listagens (index/archive têm <nav class="pagination">
   após os artigos) nem posts (single tem comentários/relacionados). */
main > article:only-child,
main > article:last-child {
  flex: 1 0 auto;
}

aside {
  flex: 0 0 300px;
  padding: var(--space-lg) var(--space-sm); /* lateral reduzido: evita crushing do conteúdo do widget */
  background-color: var(--bg-light);
  min-width: 240px;   /* só actua acima de 768px; responsive.css anula em mobile */
  max-width: 320px;
  transition: background-color var(--transition-fast);
}

article, .widget, .footer-widget {
  background-color: var(--card-bg);
  padding: var(--space-md) var(--space-md);
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
  transition: box-shadow var(--transition-fast), background-color var(--transition-fast);
}

/* Widget dentro da sidebar: padding lateral reduzido para que o conteúdo
   (especialmente formulários de busca) não fique apertado na sidebar de 300px */
aside .widget {
  padding: var(--space-md) var(--space-sm);
}

/* ── Articles aninhados em widgets não são cartões de post ──────────
   Plugins de listagem (posts recentes, posts por categoria etc.) marcam
   cada item como <article> — uso correto de HTML. As regras de cartão de
   post (a global do base e os reforços de cada estilo, vários com
   !important e com ::before decorativo) não devem alcançá-los: sem esta
   exceção, cada item vira um cartão branco com sombra, ilegível em
   rodapés escuros e visualmente duplicado dentro de qualquer widget.

   Especificidade: body + :is(.widget|.footer-widget) + :is(article) +
   :is(article) = 0,4,1, acima de body.style-X article (0,2,1) de todos
   os 13 estilos, garantindo vitória sem depender da ordem de carga.
   Os !important nas propriedades cobrem os reforços de estilo que também
   usam !important. Vale para os 13 estilos sem tocar nos arquivos deles. */
body :is(.widget, .footer-widget) :is(article):is(article) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  animation: none !important;
}

/* Pseudo-elementos decorativos do article (brilho de vidro no Moderno,
   barra no Gospel) não fazem sentido em item de widget */
body :is(.widget, .footer-widget) :is(article):is(article)::before,
body :is(.widget, .footer-widget) :is(article):is(article)::after {
  display: none !important;
  content: none !important;
}

/* Anula hover de cartão (elevação/sombra) e a zebra de listagem
   (nth-child) que alguns estilos aplicam aos articles */
body :is(.widget, .footer-widget) :is(article):is(article):hover {
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

.header-search .search-form{
  display:flex;
  align-items:stretch;
  gap:6px;
}

.header-search .search-form .search-field{
  height: 44px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--header-input-border);
  background: var(--header-input-bg);
  color: var(--header-fg);
  font-family: var(--font-main);
  font-size: 0.95rem;
  min-width: 220px;
  max-width: 36vw;
  line-height: 1;
}

.header-search .search-form .search-field::placeholder{
  color: var(--header-muted);
}

.header-search .search-form .search-submit{
  height: 44px;
  box-sizing: border-box;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--accent-color);
  color: var(--on-accent);
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: filter var(--transition-fast);
}

.header-search .search-form .search-submit:hover,
.header-search .search-form .search-submit:focus-visible{
  filter: brightness(1.08);
}

.logo img,
img.custom-logo,
.ls-logo {
  width: calc(var(--logo-max-width) * var(--logo-scale)) !important;
  height: calc(var(--logo-max-height) * var(--logo-scale)) !important;
  max-width: min(calc(var(--logo-max-width) * var(--logo-scale)), 90vw) !important;
  max-height: min(calc(var(--logo-max-height) * var(--logo-scale)), 35vh) !important;
  object-fit: contain;
  display: block;
  transition: transform var(--transition-fast);
}

.logo img:hover {
  transform: scale(1.05);
}

.site-title .site-name{
  margin: 0;
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.site-title .site-name a{
  color: var(--header-title-color);
  text-decoration: none;
}

.site-title .site-name a:hover,
.site-title .site-name a:focus-visible{
  text-decoration: underline;
}

.site-title .site-description{
  margin: 2px 0 0;
  font-size: 0.95rem;
  color: var(--header-muted);
}

/* Navegação */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5em;
  color: var(--header-fg);
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 8px;

}

.menu-toggle:hover {
  background: rgba(255,255,255,0.14);
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

/* Item ativo do menu */
nav ul li.current-menu-item > a,
nav ul li.current_page_item > a,
nav ul li.current-menu-ancestor > a {
  color: var(--accent-color);
  background: rgba(255,255,255,0.10);
  font-weight: 700;
  border-bottom: 2px solid var(--accent-color);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* Ícones sociais */
.social-icons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

.social-icons a {
  color: var(--header-fg);
  font-size: 20px;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.social-icons a:hover,
.social-icons a:focus-visible {
  color: var(--accent-color);
  transform: translateY(-2px);
}

/* Subpáginas */
.child-pages {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--border-color);
}

.child-pages-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 16px;
  font-family: var(--font-title);
}

.child-page-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.child-page-list li a {
  display: block;
  padding: 16px 20px;
  background-color: var(--bg-light);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  font-weight: 600;
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.child-page-list li.is-current a {
  border-left: 4px solid var(--accent-color);
  padding-left: 16px;
}

.child-page-list li a:hover,
.child-page-list li a:focus-visible {
  background-color: var(--accent-color);
  color: var(--on-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  border-color: var(--accent-color);
  text-decoration: none;
}

/* Paginação */
.pagination {
  margin-top: var(--space-lg);
  text-align: center;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 3px;
  padding: 9px 14px;
  min-width: 42px;
  background-color: var(--card-bg);
  color: var(--link-color);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  font-weight: 500;
  font-size: 0.95rem;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.pagination .page-numbers:hover,
.pagination .current {
  background-color: var(--accent-color);
  color: var(--on-accent);
  font-weight: 700;
  border-color: var(--accent-color);
}

/* Excerpt */
.excerpt {
  overflow: hidden;
  max-height: 6.4em;
  line-height: 1.6em;
  font-size: 1em;
  color: var(--muted-text);
  margin-bottom: 10px;
  background-color: var(--card-bg);
  position: relative;
  transition: background-color var(--transition-fast);
}

.excerpt p {
  margin: 0 0 1em;
}

.excerpt::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.6em;
  background: linear-gradient(to bottom, transparent, var(--card-bg));
}

/* Botões */
.read-more,
.back-link {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.back-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: 2px solid var(--accent-color);
  border-radius: var(--radius-sm);
  color: var(--text-color);
  -webkit-text-fill-color: var(--text-color);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none !important;
  background: transparent;
  transition: background 0.20s ease, color 0.20s ease;
}

.read-more:hover,
.back-link a:hover {
  background: var(--accent-color) !important;
  color: var(--on-accent) !important;
  -webkit-text-fill-color: var(--on-accent) !important;
  text-decoration: none !important;
}

/* Posts relacionados */
.related-posts ul.related-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.related-posts li {
  background-color: var(--card-bg);
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.related-posts li:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transform: translateY(-3px);
}

.related-posts .thumb {
  margin-bottom: 10px;
}

.related-posts .title {
  display: block;
  font-weight: bold;
  color: var(--link-color);
  font-family: var(--font-title);
  transition: color var(--transition-fast);
}

/* Responsivo */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .site-content main {
    padding: var(--space-md) var(--space-sm);
  }

  /* aside: padding unificado — remove conflito com a regra "main, aside" abaixo */
  .site-content aside {
    padding: 16px;
    border-top: 1px solid var(--border-color);
    border-left: none;
  }

  .header-top{
    flex-direction: column;
    align-items: stretch;
  }

  .header-search .search-form{
    width: 100%;
  }

  .header-search .search-form .search-field{
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  /* main sem sidebar: padding consistente */
  main {
    padding: 15px;
  }

  .branding {
    flex-direction: column;
    align-items: flex-start;
  }

  .menu-toggle {
    display: inline-flex;
    margin-bottom: 10px;
  }

  nav ul {
    display: none;
    flex-direction: column;
    gap: 10px;
  }

  nav ul.active {
    display: flex;
  }

  .site-title .site-name {
    font-size: 1.5em;
  }

  .site-title .site-description {
    font-size: 0.9em;
  }

  .child-page-list li a {
    padding: 12px 16px;
    font-size: 0.95em;
  }

  .related-posts ul.related-list {
    grid-template-columns: 1fr;
  }
}

.social-title {
  margin-bottom: 10px;
  font-size: 1.4rem;
  font-weight: bold;
  font-family: var(--font-title);
  color: var(--header-fg);
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: var(--header-fg);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.social-links a:hover,
.social-links a:focus-visible {
  color: var(--accent-color);
  transform: translateY(-2px);
}

.site-title .site-name a { color: inherit; text-decoration: none; }
.site-title .site-name a:hover, .site-title .site-name a:focus { text-decoration: underline; }

/* ==========================================================
   Animações — Independent Theme
   Elegantes, sutis, sem exagero.
   Todas respeitam prefers-reduced-motion abaixo.
   ========================================================== */

/* ── Keyframes ── */

/* Entrada suave de baixo para cima */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Entrada suave de cima para baixo (header) */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Entrada suave lateral (sidebar) */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade simples (elementos gerais) */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Aplicação das animações ── */

/* Header: desce suavemente ao carregar */
.site-header {
  animation: fadeInDown 0.45s ease both;
}

/* Menu principal: itens aparecem em sequência */
.primary-nav {
  animation: fadeIn 0.5s ease 0.2s both;
}

/* Conteúdo principal: sobe suavemente */
main {
  animation: fadeInUp 0.5s ease 0.15s both;
}

/* Sidebar: desliza da direita */
aside {
  animation: fadeInRight 0.5s ease 0.25s both;
}

/* Artigos na listagem: entrada escalonada */
article:nth-child(1) { animation: fadeInUp 0.45s ease 0.10s both; }
article:nth-child(2) { animation: fadeInUp 0.45s ease 0.18s both; }
article:nth-child(3) { animation: fadeInUp 0.45s ease 0.26s both; }
article:nth-child(4) { animation: fadeInUp 0.45s ease 0.34s both; }
article:nth-child(5) { animation: fadeInUp 0.45s ease 0.42s both; }

/* Widgets da sidebar: entrada escalonada */
.widget:nth-child(1) { animation: fadeInRight 0.45s ease 0.20s both; }
.widget:nth-child(2) { animation: fadeInRight 0.45s ease 0.30s both; }
.widget:nth-child(3) { animation: fadeInRight 0.45s ease 0.40s both; }

/* Footer: sobe suavemente */
footer[role="contentinfo"] {
  animation: fadeInUp 0.5s ease 0.1s both;
}

/* ── Rodapé: 4 colunas ── */
.footer-columns {
  width: 100%;
  background-color: var(--header-bg);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.footer-columns-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.footer-col {
  flex: 1 1 200px;
  min-width: 0;
}

/* ── Rodapé: faixa central ── */
.footer-full-area {
  width: 100%;
  background-color: var(--header-bg);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.footer-full-area .wrap {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}

/* Harmoniza o alinhamento do rodapé em telas largas: o conteúdo da faixa
   central (versículo, localização) é centralizado e com largura de leitura
   confortável, acompanhando as redes sociais e os créditos — que já são
   centralizados — para um rodapé visualmente equilibrado. No mobile o
   texto volta a ficar à esquerda (regra na media query) para leitura fluida. */
@media (min-width: 769px) {
  .footer-full-area .wrap {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  /* Botões dentro da faixa central centralizada mantêm largura natural
     (não esticam para a largura toda) e ficam centralizados horizontalmente. */
  .footer-full-area .wrap :is(button, .wp-block-button__link, a.button, input[type="submit"]) {
    display: inline-block;
    width: auto;
  }
}

/* ── Rodapé: blindagem dos widgets ─────────────────────────────────
   Todos os 13 estilos têm rodapé escuro. Esta blindagem garante que
   qualquer conteúdo colocado em widgets do rodapé adote o visual do
   rodapé, em vez de carregar visuais pensados para fundo claro:

   1) Títulos de widget: herdam a cor de texto do rodapé (clara), com
      especificidade alta para vencer as cores de título de widget que
      cada estilo define para a barra lateral (algumas com !important).
   2) Conteúdo interno: listas, grupos e blocos com fundo escolhido no
      editor perdem caixas/cartões próprios e viram texto solto sobre o
      rodapé — evita "caixas brancas" com texto branco invisível.
      Botões são preservados (fundo de botão é intencional). */
body footer[role="contentinfo"] :is(.widget, .footer-widget) :is(h1, h2, h3, h4, h5, h6, .widget-title) {
  color: inherit !important;
}

body footer[role="contentinfo"] :is(.widget, .footer-widget)
  :is(ul, ol, li, .wp-block-group, .wp-block-columns, .wp-block-column,
      [class*="has-background"]:not(.wp-block-button__link)) {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.footer-full-area .footer-widget--full {
  width: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* Mobile: colunas empilhadas */
@media (max-width: 768px) {
  .footer-columns-inner {
    flex-direction: column;
    gap: var(--space-md);
  }

  .footer-col {
    flex: 1 1 100%;
  }
}

/* Botão Buscar: transição de escala no hover — mais vivo */
.header-search .search-form .search-submit {
  transition: filter var(--transition-fast),
              transform var(--transition-fast),
              background-color var(--transition-fast) !important;
}
.header-search .search-form .search-submit:hover {
  transform: scale(1.04);
}

/* Logo: hover com escala suave já existia — mantida */

/* Links do menu: sublinhado animado no hover */
.primary-nav .menu a::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--accent-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
  border-radius: 2px;
}
.primary-nav .menu a:hover::after {
  transform: scaleX(1);
}
/* Item ativo não precisa do pseudo-elemento — já tem border-bottom */
.primary-nav .menu li.current-menu-item > a::after,
.primary-nav .menu li.current_page_item > a::after {
  display: none;
}

/* Cards de posts: sombra e elevação no hover — mais expressivo */
article {
  transition: box-shadow 0.25s ease, transform 0.25s ease,
              background-color var(--transition-fast) !important;
}
article:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}

/* Skip-link: entrada suave ao receber foco */
.skip-link:focus,
.skip-link:focus-visible {
  animation: fadeInDown 0.2s ease both;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Header layout refinado (harmonioso e consistente em todos os estilos) */

.branding{
  display:flex;
  align-items:center;
  gap:16px;
  flex: 1 1 auto;
  min-width: 0;  /* era 240px — causava overflow em telas muito estreitas */
}

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 0 0 auto;
}

.primary-nav{
  margin-top: 4px;
}

.primary-nav .menu{
  list-style:none;
  padding: 0;
  margin: 0;
  display:flex;
  flex-wrap:wrap;
  gap: 4px;
}

.primary-nav .menu a{
  display:inline-flex;
  align-items:center;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.90);
  text-decoration:none;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.primary-nav .menu a:hover {
  background: rgba(255,255,255,0.14);
  color: #ffffff;
  text-decoration: none;
}

/* Foco no menu: sem outline em nenhum browser, incluindo Firefox */
.primary-nav .menu a,
.primary-nav .menu li > a {
  -webkit-tap-highlight-color: transparent;
}
/* Suprime outline apenas no clique (não-teclado) */
.primary-nav .menu a:focus:not(:focus-visible),
.primary-nav .menu li > a:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}
/* Foco por teclado (Tab): visível e acessível — WCAG 2.4.7 */
.primary-nav .menu a:focus-visible,
.primary-nav .menu li > a:focus-visible {
  outline: 3px solid var(--accent-color) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(0,0,0,0.15) !important;
  border-radius: 4px !important;
}

/* Item ativo do menu principal */
.primary-nav .menu li.current-menu-item > a,
.primary-nav .menu li.current_page_item > a,
.primary-nav .menu li.current-menu-ancestor > a {
  color: var(--accent-color);
  background: rgba(255,255,255,0.10);
  font-weight: 700;
  border-bottom: 2px solid var(--accent-color);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* Título do site: cor por variável (evita choque entre estilos) */
.site-title .site-name a{
  color: var(--header-title-color);
  font-weight: 800;
  letter-spacing: 0.2px;
}

.site-title .site-description{
  color: var(--header-muted);
}

/* Busca no header */
.header-search{
  display:block;
}

.search-toggle{
  display:none;
  height: 44px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--header-input-border);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-family: var(--font-main);
  font-size: 0.95rem;
  cursor: pointer;
  align-items: center;
  gap: 6px;
}

.header-search .search-form .search-field{
  min-width: 260px;
  max-width: 40vw;
}

/* Menu toggle harmonizado */
.menu-toggle{
  height: 44px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--header-input-border);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-family: var(--font-main);
  font-size: 0.95rem;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.menu-toggle:hover{
  background: rgba(255,255,255,0.14);
}

@media (max-width: 900px){
  .header-search .search-form .search-field{
    min-width: 180px;
    max-width: 55vw;
  }
}

@media (max-width: 768px){
  .header-actions{
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .search-toggle{
    display:inline-flex;
  }
  .header-search{
    display:none;
    width:100%;
    margin-top: 8px;
  }
  .header-search.is-open{
    display:block;
  }
  .header-search .search-form{
    width:100%;
  }
  .header-search .search-form .search-field{
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  /* Menu recolhido por padrão no mobile — expande com transição suave */
  .primary-nav .menu{
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin-top: 8px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease, visibility 0s linear 0.35s;
  }
  .primary-nav .menu.active{
    max-height: 600px;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: max-height 0.35s ease, opacity 0.25s ease, visibility 0s linear 0s;
  }
  .primary-nav .menu a{
    padding: 12px 14px;
    border-radius: 8px;
    width: 100%;
  }
}

/* =========================
   Layout do cabeçalho (Personalizador)
   Classes no body: header-layout-left | header-layout-center | header-layout-stacked
   ========================= */
body.header-layout-left .header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}
body.header-layout-left .branding{
  display:flex;
  align-items:center;
  gap: 1rem;
  min-width: 0;
}
body.header-layout-left .header-actions{
  display:flex;
  align-items:center;
  gap: .75rem;
}

/* Centralizado: branding e ações em coluna, alinhados ao centro */
body.header-layout-center .header-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: .75rem;
  text-align:center;
}
body.header-layout-center .branding{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: .5rem;
}
body.header-layout-center .site-title{
  align-items:center;
}
body.header-layout-center .header-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.75rem;
  width: 100%;
  max-width: 600px;
}
/* No layout centralizado, o formulário de busca ocupa a largura disponível */
body.header-layout-center .header-search,
body.header-layout-center .header-search .search-form {
  width: 100%;
}
body.header-layout-center .header-search .search-form .search-field {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

/* Empilhado: logo acima do nome, porém mantém ações à direita no desktop */
body.header-layout-stacked .branding{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: .25rem;
}
@media (min-width: 720px){
  body.header-layout-stacked .header-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 1rem;
  }
}
@media (max-width: 719px){
  body.header-layout-stacked .header-top{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap: .75rem;
  }
  body.header-layout-stacked .header-actions{
    width:100%;
  }
}

/* =========================
   Estilos de conteúdo (post, página, archive, busca)
   ========================= */

/* Títulos de post/página */
.entry-title {
  font-family: var(--font-title);
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--text-color);
  margin: 0 0 0.6rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.entry-title a {
  color: inherit;
  text-decoration: none;
}

.entry-title a:hover,
.entry-title a:focus-visible {
  color: var(--link-color);
  text-decoration: underline;
}

/* Cabeçalhos de archive/busca */
.archive-header,
.search-header {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--border-color);
}

.archive-title,
.search-header h1 {
  font-family: var(--font-title);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-color);
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}

.search-header em {
  color: var(--accent-color);
  font-style: normal;
  font-weight: 700;
}

.archive-description {
  color: var(--muted-text);
  font-size: 1rem;
  margin-top: 0.5rem;
  line-height: 1.6;
}

/* Artigo na listagem */
article {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
}

article:last-of-type {
  border-bottom: none;
}

/* Largura de leitura confortável para conteúdo longo */
.post-content,
.page-content {
  max-width: var(--prose-max);
}

/* ── Imagens no corpo do texto ──────────────────────────────
   O bloco Imagem do Gutenberg gera:
   <figure class="wp-block-image size-full">
     <img class="wp-image-X"/>
   </figure>
   Imagens escalam naturalmente — sem corte, sem margens laterais.
   ─────────────────────────────────────────────────────────── */

/* Todas as imagens: nunca transbordam, nunca sobrepõem texto */
.post-content img,
.page-content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
}

/* Bloco imagem do Gutenberg: sempre em bloco, nunca flutua sobre texto */
.post-content .wp-block-image,
.page-content .wp-block-image {
  display: block !important;
  clear: both !important;
  margin: 1.5rem 0 !important;
  width: 100% !important;
}

/* Imagens do bloco: largura total, altura máxima 500px com cover */
.post-content .wp-block-image img,
.page-content .wp-block-image img {
  width: 100% !important;
  max-height: 500px !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Alinhamentos do editor */
.post-content .aligncenter,
.page-content .aligncenter,
.post-content .wp-block-image.aligncenter,
.page-content .wp-block-image.aligncenter {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.post-content .alignleft,
.page-content .alignleft {
  float: left;
  margin: 0.5rem 1.5rem 1rem 0;
}

.post-content .alignright,
.page-content .alignright {
  float: right;
  margin: 0.5rem 0 1rem 1.5rem;
}

/* Limpa float após imagens alinhadas */
.post-content::after,
.page-content::after {
  content: '';
  display: table;
  clear: both;
}

/* Página de post individual */
.post-header {
  margin-bottom: 1.5rem;
}

.post-header .entry-title {
  font-size: 2rem;
}

/* Sem resultados / sem posts */
.no-posts,
.no-results {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted-text);
}

.no-posts h2,
.no-results h2 {
  font-size: 1.4rem;
  color: var(--text-color);
  margin-bottom: 0.75rem;
}

/* Links do conteúdo */
.post-content a,
.page-content a {
  color: var(--link-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-content a:hover,
.page-content a:hover,
.post-content a:focus-visible,
.page-content a:focus-visible {
  opacity: 0.8;
}

/* Blockquote acessível */
.post-content blockquote,
.page-content blockquote,
.post-content .wp-block-quote,
.page-content .wp-block-quote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem 1rem 1.5rem;
  border-left: 4px solid var(--accent-color);
  background: var(--bg-light);
  border-radius: 0 8px 8px 0;
  color: var(--muted-text);
  font-style: italic;
  position: relative;
}

/* Legenda de imagem/figura (figcaption e legenda de bloco Gutenberg) */
.post-content figcaption,
.page-content figcaption,
.post-content .wp-element-caption,
.page-content .wp-element-caption {
  font-size: 0.85rem;
  color: var(--muted-text);
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
}

/* Texto destacado/grifado */
.post-content mark,
.page-content mark {
  background: var(--accent-color);
  color: var(--on-accent);
  padding: 0 0.2em;
  border-radius: 2px;
}

/* Tabelas acessíveis */
.post-content table,
.page-content table,
.post-content .wp-block-table table,
.page-content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 1.5rem 0;
}

/* Campo select (formulários, herda o visual dos demais campos) */
.post-content select,
.page-content select,
.comment-field select,
.search-form select {
  padding: 0.6rem 0.9rem;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-color);
  font-family: var(--font-main);
  font-size: 0.95rem;
}

.post-content th,
.page-content th {
  background: var(--primary-color);
  color: #fff;
  padding: 10px 14px;
  text-align: left;
}

.post-content td,
.page-content td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color);
}

.post-content tr:nth-child(even) td,
.page-content tr:nth-child(even) td {
  background: var(--bg-light);
}

/* Código inline e blocos */
.post-content code,
.page-content code {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.9em;
  color: var(--text-color);
}

.post-content pre,
.page-content pre {
  background: var(--primary-color);
  color: #e5e7eb;
  border-radius: 8px;
  padding: 1.25rem;
  overflow-x: auto;
  font-size: 0.9em;
  line-height: 1.6;
}

.post-content pre code,
.page-content pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

/* Seção de posts relacionados */
.related-posts {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
}

.related-posts h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 1rem;
}

/* Paginação de subpáginas */
.child-pages .wp-pagenavi,
.child-pages .page-links {
  margin-top: 1rem;
}

/* =========================
   Melhorias de Design — v2.1
   Tipografia · Botões · Respiro · Acessibilidade
   ========================= */

/* Tipografia aprimorada */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-color);
}

.post-content p,
.post-content li,
.page-content li,
.page-content p {
  margin-bottom: 1.4em;
}

/* Botão primário — "Ouvir ao vivo" */
.btn-primary,
a.btn-primary,
button.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 12px 24px;
  background: var(--accent-color);
  color: var(--on-accent);
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  border: none;
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: filter var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-primary:hover,
a.btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}

/* Botão secundário — "Acessibilidade" */
.btn-secondary,
a.btn-secondary,
button.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 11px 22px;
  background: transparent;
  color: var(--accent-color);
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  border: 2px solid var(--accent-color);
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.btn-secondary:hover,
a.btn-secondary:hover {
  background: var(--accent-color);
  color: var(--on-accent);
}

/* Respiro entre seções de conteúdo */
.entry-header {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-color);
}

.entry-footer {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-color);
}

/* Cards com mais respiro interno */
.card,
.wp-block-group,
.widget {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  /* overflow:hidden removido — cortava o formulário de busca e os
     indicadores de foco (focus rings) que excedem a borda do widget. */
  overflow: visible;
  overflow-wrap: anywhere;  /* mais conservador que break-word: só age quando necessário */
  word-break: normal;       /* não força quebra no meio de palavras curtas */
  hyphens: manual;          /* hifenização só em &shy; explícitos — não automática */
}

/* Garante que itens dentro do widget não transbordem.
   hyphens: none nos links evita que o browser hifenize
   títulos de posts nos widgets "Posts recentes". */
.widget a,
.widget li,
.widget p,
.widget span {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
  max-width: 100%;
}

/* Limite de largura do container principal de texto */
.wrap.single-wrap,
.wrap.page-wrap {
  max-width: calc(var(--prose-max) + 2 * var(--space-lg));
}

/* Search submit e botões de formulário consistentes */
.search-submit,
input[type="submit"] {
  background: var(--accent-color);
  color: var(--on-accent);
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  cursor: pointer;
  transition: filter var(--transition-fast);
}

.search-submit:hover,
input[type="submit"]:hover {
  filter: brightness(1.08);
}

/* Links inline de conteúdo — cor consistente */
.post-content a,
.page-content a {
  color: var(--link-color);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}

.post-content a:hover,
.page-content a:hover {
  opacity: 0.80;
}

/* Melhora read-more como botão inline */
.read-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-sm);
  padding: 8px 16px;
  background: var(--accent-color);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

.read-more:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--on-accent);
}

/* Header: menu links levemente menores em desktop para mais itens */
@media (min-width: 769px) {
  .primary-nav .menu a {
    padding: 7px 13px;
    font-size: 0.92rem;
  }
}

/* Mobile: menu items com melhor área de toque */
@media (max-width: 768px) {
  .primary-nav .menu li.current-menu-item > a,
  .primary-nav .menu li.current_page_item > a {
    border-bottom: none;
    border-left: 3px solid var(--accent-color);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding-left: 11px;
  }
  main {
    padding: var(--space-md) var(--space-sm);
  }
}

/* ==========================================================
   Correções pontuais
   ========================================================== */

/* Contraste de texto muted em estilos escuros sem redefinição posterior */
/* vintagecafe e campoepaixao são redefinidos mais abaixo com valores sólidos */

/* ==========================================================
   AJUSTES FINAIS DE ESTILO — v2.3
   ========================================================== */

/* ── Padrão: aside com fundo levemente distinto do main ── */

/* ── Todos os estilos: widget/card com borda sutil para não flutuar ── */
.widget,
.footer-widget,
aside .widget {
  border: 1px solid var(--border-color);
}

/* ── Campo e Paixão: borda dos cards levemente verde para integrar ── */

/* ── Vintage Café: card-bg deve ser perceptível sobre o bg-light ── */

/* ── Tinta & Papel: aside com fundo creme mais escuro ── */

/* ── Texto do tema padrão no modo light: cor do link correta ── */

/* ── Neon Pop: borda de cards mais nítida ── */

/* ── Remove padding duplo no aside mobile ── */
@media (max-width: 768px) {
  aside {
    border-left: none;
    border-top: 1px solid var(--border-color);
    padding: var(--space-sm);
  }
}

/* Footer: container com padding lateral para o texto não encostar na borda */
footer .container {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  max-width: 1200px;
  margin: 0 auto;
  justify-content: center;
}

/* ==========================================================
   Estilo Marinelli Drupal
   Fiel ao tema Marinelli original para Drupal 7
   Cores: azul #156aa3, laranja #f97e05, escuro #054b81
   ========================================================== */

/* ── Body: azul-marinho escuro fora do container ── */

/* ── Container de conteúdo: fundo branco com borda e sombra azul ── */

/* ── Header: azul-aço sólido ── */

/* Nome e slogan no header */

/* ── Linha após header ── */

/* ── Menu principal: gradiente azul, hover laranja ── */

/* ── Busca no header ── */

/* ── Menu toggle (mobile) ── */

/* ── Área principal ── */

/* ── Sidebar ── */

/* ── Widgets: cabeçalho gradiente azul, estilo Marinelli original ── */

/* ── Tipografia de conteúdo ── */

/* ── Links ── */

/* ── Blockquote ── */

/* ── Botão Leia mais: laranja Marinelli ── */

/* ── Botão Responder nos comentários ── */

/* ── Nome do autor nos comentários ── */

/* ── Botão Voltar ── */

/* ── Paginação ── */

/* ── Faixas alternadas nos artigos da listagem ── */

/* ── Separadores entre artigos ── */

/* ── Linha horizontal ── */

/* ── Rodapé ── */

/* ── Logo: sem bordas ── */

/* ── Animação de entrada do header ── */
@keyframes marinelliLine {
  0%   { width: 0; }
  100% { width: 100%; }
}

/* ── Mobile ── */

/* ==========================================================
   Correções visuais por estilo — separação de áreas
   ========================================================== */

/* ── Neon Pop: magenta + ciano — energia de rádio jovem ── */

/* ── Vintage Café: versão clara — creme e marrom ── */

/* ── Campo e Paixão: versão clara — verde e branco ── */

/* ── Céu e Fé: distinção suave com borda dourada ── */

/* ── Tinta & Papel: borda marrom entre áreas ── */

/* ── Padrão: separação limpa ── */

/* Vintage Café: remove borda da logo que aparece no header */

/* Campo e Paixão: mesma correção */

/* ==========================================================
   ⚡ MODERNO — Vibrante & Contemporâneo
   Glassmorphism · Gradientes · Glow · Animações com caráter
   ========================================================== */

/* ── Keyframes exclusivos do estilo Moderno ── */

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(0,245,212,0.3), 0 0 20px rgba(0,245,212,0.1); }
  50%       { box-shadow: 0 0 16px rgba(0,245,212,0.6), 0 0 40px rgba(0,245,212,0.2); }
}

@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes floatUp {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

@keyframes borderGlow {
  0%, 100% { border-color: rgba(0,245,212,0.3); }
  50%       { border-color: rgba(199,125,255,0.6); }
}

/* ── Body e fundo ── */

/* ── Header com gradiente animado ── */

/* Nome do site com gradiente de texto */

/* ── Menu com efeito moderno ── */

/* ── Busca ── */

/* ── Área de conteúdo ── */

/* ── Cards / artigos com glassmorphism ── */

/* Efeito shimmer no hover dos cards */

/* ── Títulos ── */

/* ── Títulos de widget com gradiente ── */

/* ── Links ── */

/* ── Blockquote estilo moderno ── */

/* ── Botão read-more ── */

/* ── Paginação ── */

/* ── Footer ── */

/* Todos os elementos dentro do rodapé — seletor universal para cobrir qualquer estrutura de widget */

/* ── Menu toggle ── */

/* ── Animações especiais do Moderno ── */

/* Logo flutua sutilmente */

/* Widgets pulsam com glow */

/* Borda dos artigos alterna entre ciano e violeta */

/* Escalonamento diferente para cada widget */

/* Escalonamento dos artigos */

/* ── Separação visual entre main e aside ── */

/* ── Logo sem bordas ── */

/* ==========================================================
   Moderno — Refinamentos v2
   ========================================================== */

/* Linha de brilho no topo dos widgets — detalhe premium */

/* Hover dos widgets mais expressivo */

/* Título "Início" e outros h1 sem link — gradiente direto */

/* Aside com glassmorphism mais suave */

/* Main com glassmorphism elegante */

/* Texto do conteúdo mais legível */

/* Listas com marcador em ciano */

/* Separadores horizontais com gradiente */

/* ==========================================================
   Moderno — Correções v3
   ========================================================== */

/* Título "Início" e qualquer h1 de página — gradiente garantido */

/* Texto "AO VIVO AGORA" e textos apagados nos widgets — mais visíveis */

/* "Clique em Tocar para ouvir" especificamente */

/* Textos em maiúsculas pequenas dentro dos widgets (AO VIVO AGORA) */


/* ==========================================================
   Céu e Fé — Estilos completos
   Azul profundo + coral/laranja + branco — espiritual e acessível
   ========================================================== */

/* wp-block-search no estilo Céu e Fé */

/* ==========================================================
   Vintage Café — Versão Clara
   Creme e marrom — atmosfera de livraria e café
   ========================================================== */

/* ==========================================================
   Campo e Paixão — Versão Clara
   Verde e branco — energia de estádio ao ar livre
   ========================================================== */

/* Todos os elementos dentro do rodapé — seletor universal para cobrir qualquer estrutura de widget */

/* ==========================================================
   Neon Pop — Magenta + Ciano
   Energia de rádio jovem, show e festival
   ========================================================== */

/* Todos os elementos dentro do rodapé — seletor universal para cobrir qualquer estrutura de widget */

/* Muted text Neon Pop e Vintage Café atualizados */


/* ==========================================================
   Marinelli — Refinamentos Visuais v2
   Clássico, institucional, elegante — sem exageros
   ========================================================== */

/* ── 1. Header com profundidade sólida ── */

/* ── 2. Linha laranja que se expande ao carregar ── */
@keyframes marinelliLine {
  from { width: 0; }
  to   { width: 100%; }
}

/* ── 3. Menu hover com cortina laranja subindo ── */

/* ── 4. Títulos com entrada sólida — como carimbo ── */
@keyframes marinelliStamp {
  0%   { opacity: 0; transform: translateY(8px); letter-spacing: 0.05em; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: normal; }
}

/* ── 5. Blockquote com estilo editorial ── */

/* ── Widgets com linha laranja no topo ── */

/* ==========================================================
   Campo e Paixão — Refinamentos Visuais v2
   Força, energia e paixão — sem exageros
   ========================================================== */

/* ── 1. Header com profundidade de estádio ── */

/* ── 2. Linha vermelha que se expande ao carregar ── */
@keyframes campoLine {
  from { width: 0; }
  to   { width: 100%; }
}

/* ── 3. Menu hover com energia — fundo dourado subindo ── */

/* ── 4. Títulos com entrada de impacto ── */
@keyframes campoImpact {
  0%   { opacity: 0; transform: translateY(16px) scale(0.97); }
  60%  { transform: translateY(-2px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 5. Blockquote com estilo esportivo ── */

/* ── 6. Widgets com faixa dourada no topo ── */

/* ── 7. Botões hover com elevação ── */

/* ── Links com sublinhado vermelho animado ── */

/* ==========================================================
   Tinta & Papel — Refinamentos Visuais v2
   Literário, editorial, introspectivo — suave como virar uma página
   ========================================================== */

/* ── 1. Header com profundidade de couro ── */

/* ── 2. Linha âmbar que se expande — como sublinhado de caneta ── */
@keyframes tintaLine {
  from { width: 0; opacity: 0.6; }
  to   { width: 100%; opacity: 1; }
}

/* ── 3. Menu hover com mancha de tinta ── */

/* ── 4. Títulos com entrada de manuscrito ── */
@keyframes tintaEscreve {
  0%   { opacity: 0; transform: translateY(10px); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ── 5. Blockquote com estilo de citação literária ── */

/* ── 6. Textura sutil de papel pautado no conteúdo ── */

/* ── 7. Widgets com borda âmbar no topo ── */

/* ── Links com sublinhado âmbar animado ── */

/* ── Botões hover com elegância editorial ── */

/* ==========================================================
   Padrão — Refinamentos Visuais v2
   Elegante e universal — como um terno bem cortado
   ========================================================== */

/* ── 1. Header com profundidade de céu ao entardecer ── */

/* ── 2. Linha dourada que se expande ao carregar ── */
@keyframes defaultLine {
  from { width: 0; opacity: 0.7; }
  to   { width: 100%; opacity: 1; }
}

/* ── 3. Menu hover refinado ── */

/* ── 4. Títulos com entrada elegante e universal ── */
@keyframes defaultFade {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── 5. Blockquote com destaque dourado ── */

/* ── 6. Widgets com linha dourada no topo ── */

/* A linha decorativa usa ::before com position:absolute.
   Com overflow:visible no widget, usamos clip-path para contê-la. */

/* ── 7. Links com sublinhado dourado animado ── */

/* ── Botões hover elegantes ── */

/* ==========================================================
   Moderno — Refinamentos Visuais v2
   Futurista, imersivo e elétrico — com controle
   ========================================================== */

/* ── 1. Header com nebulosa animada ── */
@keyframes modernoNebula {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── 2. Linha ciano pulsante — circuito elétrico ── */
@keyframes modernoPulse {
  0%, 100% { opacity: 0.4; box-shadow: 0 0 4px rgba(0,245,212,0.3); }
  50%       { opacity: 1.0; box-shadow: 0 0 12px rgba(0,245,212,0.8); }
}

/* ── 3. Menu hover com brilho elétrico ── */

/* ── 4. Títulos com entrada de holograma ── */
@keyframes modernoHolo {
  0%   { opacity: 0; transform: translateY(14px);
         text-shadow: 0 0 30px rgba(0,245,212,0.8); }
  60%  { text-shadow: 0 0 15px rgba(0,245,212,0.3); }
  100% { opacity: 1; transform: translateY(0);
         text-shadow: none; }
}

/* ── 5. Blockquote com vidro iluminado ── */

/* ── 6. Widgets com borda luminosa pulsante ── */
@keyframes modernoWidgetGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.30),
                         0 0 0 1px rgba(199,125,255,0.15); }
  50%       { box-shadow: 0 4px 24px rgba(0,0,0,0.40),
                         0 0 0 1px rgba(0,245,212,0.25); }
}

/* ── 7. Links com sublinhado laser ciano ── */

/* ── Botões hover com glow ciano ── */

/* ==========================================================
   Neon Pop — Refinamentos Visuais v2
   Energia elétrica, néon e vida — com controle
   ========================================================== */

/* ── 1. Header com gradiente neon animado ── */
@keyframes neonPopGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── 2. Linha magenta/ciano pulsante ── */
@keyframes neonPulse {
  0%, 100% {
    opacity: 0.5;
    box-shadow: 0 0 6px rgba(255,45,120,0.5);
    background: linear-gradient(90deg, transparent, #ff2d78, transparent);
  }
  50% {
    opacity: 1.0;
    box-shadow: 0 0 14px rgba(0,207,255,0.7);
    background: linear-gradient(90deg, transparent, #00cfff, transparent);
  }
}

/* ── 3. Menu hover com néon acendendo ── */

/* ── 4. Títulos com entrada de display LED ── */
@keyframes neonLED {
  0%   { opacity: 0; transform: translateY(14px);
         text-shadow: 0 0 30px rgba(255,45,120,0.9); }
  60%  { text-shadow: 0 0 12px rgba(255,45,120,0.3); }
  100% { opacity: 1; transform: translateY(0);
         text-shadow: none; }
}

/* ── 5. Blockquote com néon ── */

/* ── 6. Widgets com borda magenta/ciano pulsante ── */
@keyframes neonWidgetGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.40),
                         0 0 0 1px rgba(255,45,120,0.20); }
  50%       { box-shadow: 0 4px 24px rgba(0,0,0,0.50),
                         0 0 0 1px rgba(0,207,255,0.25); }
}

/* ── 7. Links com sublinhado ciano rápido ── */

/* ── Botões hover com glow magenta ── */

/* ==========================================================
   Vintage Café — Refinamentos Visuais v2
   Retrô, aconchegante e nostálgico — como jazz num café antigo
   ========================================================== */

/* ── 1. Header com profundidade de madeira escura ── */

/* ── 2. Linha âmbar dourada que se expande — como fita cassete ── */
@keyframes vintageReveal {
  from { width: 0; opacity: 0.5; }
  to   { width: 100%; opacity: 1; }
}

/* ── 3. Menu hover com calor dourado ── */

/* ── 4. Títulos com entrada suave — como rádio de válvulas aquecendo ── */
@keyframes vintageWarmUp {
  0%   { opacity: 0; transform: translateY(10px);
         filter: sepia(1) brightness(0.6); }
  60%  { filter: sepia(0.3) brightness(0.9); }
  100% { opacity: 1; transform: translateY(0);
         filter: sepia(0) brightness(1); }
}

/* ── 5. Blockquote com estilo de cardápio vintage ── */

/* ── 6. Widgets com borda dourada vintage ── */

/* ── 7. Links com sublinhado dourado suave ── */

/* ── Botões hover com calor dourado ── */

/* ── Textura sutil de papel vintage no conteúdo ── */

/* ==========================================================
   Comentários — Independent Theme
   Usa variáveis CSS de cada estilo — herda identidade visual
   ========================================================== */

/* ── Área geral ── */
.comments-area {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 2px solid var(--border-color);
}

.comments-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent-color);
}

/* ── Lista de comentários ── */
.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.comment-list .children {
  list-style: none;
  padding-left: 2rem;
  margin-top: 1rem;
  border-left: 2px solid var(--border-color);
}

/* ── Comentário individual ── */
.comment-item {
  margin-bottom: 1.5rem;
}

.comment-body {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.6rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s ease;
}

.comment-body:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

/* ── Cabeçalho do comentário ── */
.comment-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.comment-author-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--accent-color);
  object-fit: cover;
}

.comment-author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.comment-author-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-color);
}

.comment-author-name a {
  color: var(--text-color) !important;
  text-decoration: none;
}

.comment-author-name a:hover {
  color: var(--accent-color) !important;
}

.comment-date {
  font-size: 0.80rem;
  color: var(--muted-text);
}

/* ── Conteúdo do comentário ── */
.comment-content {
  font-size: 0.97rem;
  line-height: 1.80;
  color: var(--text-color);
  margin-bottom: 0.75rem;
}

.comment-content p:last-child {
  margin-bottom: 0;
}

/* ── Aguardando moderação ── */
.comment-awaiting-moderation {
  font-size: 0.85rem;
  color: var(--accent-color);
  font-style: italic;
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.8rem;
  background: rgba(0,0,0,0.04);
  border-radius: var(--radius-sm);
}

/* ── Responder ── */
.comment-reply a {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-color);
  -webkit-text-fill-color: var(--text-color);
  text-decoration: none !important;
  border: 2px solid var(--accent-color);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}

.comment-reply a:hover {
  background: var(--accent-color) !important;
  color: var(--on-accent) !important;
  -webkit-text-fill-color: var(--on-accent) !important;
}

/* ── Navegação de comentários ── */
.comment-navigation {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  font-size: 0.90rem;
}

.comment-navigation a {
  color: var(--accent-color) !important;
  text-decoration: none;
  font-weight: 600;
}

/* ── Sem comentários ── */
.no-comments {
  font-style: italic;
  color: var(--muted-text);
  margin-bottom: 1.5rem;
}

/* ── Formulário de comentários ── */
.comment-respond {
  margin-top: 2rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.8rem;
}

#reply-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 1.2rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent-color);
}

#reply-title small a {
  font-size: 0.80rem;
  font-weight: 400;
  color: var(--muted-text) !important;
  margin-left: 0.5rem;
}

.comment-field {
  margin-bottom: 1.2rem;
}

.comment-field label {
  display: block;
  font-size: 0.90rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 0.4rem;
}

.comment-field-note {
  font-size: 0.78rem;
  color: var(--muted-text);
  margin-top: 0.3rem;
}

.comment-field input[type="text"],
.comment-field input[type="email"],
.comment-field input[type="url"],
.comment-field textarea {
  width: 100%;
  padding: 0.6rem 0.9rem;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-color);
  font-family: var(--font-main);
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.comment-field input:focus,
.comment-field textarea:focus {
  outline: var(--focus-ring);
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

.comment-field textarea {
  resize: vertical;
  min-height: 130px;
}

#submit {
  background: var(--accent-color);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.65rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font-main);
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}

#submit:hover {
  filter: brightness(0.88);
  transform: translateY(-1px);
}

#submit:focus {
  outline: var(--focus-ring);
}

/* ── Responsivo ── */
@media (max-width: 600px) {
  .comment-list .children {
    padding-left: 1rem;
  }
  .comment-body {
    padding: 1rem;
  }
  .comment-respond {
    padding: 1.2rem;
  }
}

/* ==========================================================
   Hero Section — Seção de Destaque
   Usa variáveis CSS — herda identidade de cada estilo
   ========================================================== */

.hero-section {
  background: var(--primary-color);
  padding: 3.5rem 1.5rem;
  text-align: center;
  border-bottom: 3px solid var(--accent-color);
}

.hero-inner {
  max-width: 800px;
  margin: 0 auto;
}

.hero-title {
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--header-title-color);
  margin-bottom: 0.75rem;
  line-height: 1.20;
  letter-spacing: -0.01em;
  animation: fadeInDown 0.6s ease both;
}

.hero-subtitle {
  font-family: var(--font-main);
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--header-muted);
  margin-bottom: 1.8rem;
  line-height: 1.60;
  animation: fadeInUp 0.6s ease 0.15s both;
}

.hero-button {
  display: inline-block;
  background: var(--accent-color);
  color: var(--on-accent);
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: filter 0.22s ease, transform 0.22s ease,
              box-shadow 0.22s ease;
  animation: fadeInUp 0.6s ease 0.30s both;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.hero-button:hover {
  filter: brightness(0.88);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.20);
}

.hero-button:focus {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-title,
  .hero-subtitle,
  .hero-button {
    animation: none !important;
  }
  .hero-button:hover {
    transform: none !important;
  }
}

@media (max-width: 600px) {
  .hero-section {
    padding: 2.5rem 1rem;
  }
}

/* ==========================================================
   🔴 COLORADO — Vermelho & Branco
   Paixão colorada · Força de estádio · Vermelho e branco
   ========================================================== */

/* ── Keyframes exclusivos do Colorado ── */

@keyframes coloradoLine {
  from { width: 0; opacity: 0.5; }
  to   { width: 100%; opacity: 1; }
}

@keyframes coloradoImpact {
  0%   { opacity: 0; transform: translateY(18px) scale(0.96); }
  55%  { transform: translateY(-3px) scale(1.015); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}


/* ── Body: fundo branco sujo — como a camisa visitante ── */

/* ── Separação de áreas ── */

/* ── Logo: sem bordas ── */

/* ── 1. Header: textura metálica de escudo ── */

/* ── 2. Linha dourada — cor de troféu ── */

/* ── 3. Nome do site: Montserrat bold com sombra ── */

/* ── 4. Menu: fundo vermelho escuro, hover branco subindo ── */

/* Indicador dourado no item ativo — como o troféu */

/* ── 5. Busca no header ── */

/* ── 6. Tipografia: Montserrat bold, vermelho escuro ── */

/* ── 7. Links ── */

/* ── 8. Blockquote: borda vermelha com sombra dramática ── */

/* ── 9. Widgets: faixa dourada no topo + título vermelho ── */

/* ── 10. Leia mais: dourado com texto escuro — troféu ── */

/* ── 11. Botão Voltar ── */

/* ── 12. Comentários ── */

/* ── 13. Meta do post ── */

/* ── 14. Paginação ── */

/* ── 15. Rodapé ── */

/* ── 16. Textos de conteúdo ── */

/* ── 17. Widget: textos ── */

/* ── 18. Aside: sombra sutil ── */

/* ── 19. Mobile ── */

/* ==========================================================
   Imagens destacadas — listagem e post individual v3.8.0
   ========================================================== */

/* Listagem — imagem pequena ao lado do conteúdo */
.post-thumbnail-wrap {
  display: block;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  line-height: 0;
  width: 160px;
  height: 110px;
  min-width: 160px;
  min-height: 110px;
}

.post-thumbnail-img {
  width: 160px !important;
  height: 110px !important;
  max-width: 160px !important;
  max-height: 110px !important;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--radius-sm);
}

/* Post individual — imagem grande no topo do conteúdo */
.post-featured-image {
  margin: 0 0 1.8rem 0;
  padding: 0;
  line-height: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.post-featured-image img {
  width: 100%;
  height: auto;
  max-height: 350px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-sm);
}

/* Mobile — ajuste de altura máxima */
@media (max-width: 768px) {
  .post-thumbnail-img {
    max-height: 90px;
  }
  .post-featured-image img {
    max-height: 220px;
  }
}

/* ==========================================================
   Campo e Paixão — ajustes v3.9.0
   ========================================================== */

/* Fundo body menos verde — concentra atenção no conteúdo */

/* Aside — fundo levemente mais neutro, menos verde saturado */

/* Widget — mais espaçamento interno para plugins de tabela */
/* body.style-campoepaixao .widget padding — usa o padrão do tema */

/* Menu toggle — mais destaque visual */

/* Campo e Paixão — correção contraste botão Buscar v3.9.0
   Fundo vermelho com texto branco: 5.89:1 ✅ WCAG AA */

/* ==========================================================
   Widget Comentários Recentes do WordPress — v3.9.0
   Corrige transbordamento do texto na sidebar
   ========================================================== */

.widget_recent_comments .recentcomments {
  display: block !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: none !important;
  white-space: normal !important;
  max-width: 100% !important;
  padding: 4px 0 !important;
}

.widget_recent_comments .recentcomments a {
  display: inline !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: none !important;
  max-width: 100% !important;
}

.widget_recent_comments img.avatar {
  float: left !important;
  margin-right: 8px !important;
  margin-bottom: 4px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* ==========================================================
   Layout listagem de posts — imagem à esquerda, texto à direita
   Estilo portal de notícias — válido para todos os estilos
   ========================================================== */

.post-list-inner {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.post-list-content {
  flex: 1;
  min-width: 0;
}

/* Mobile — imagem acima do texto */
@media (max-width: 600px) {
  .post-list-inner {
    flex-direction: column;
  }
  .post-thumbnail-wrap {
    width: 100% !important;
    height: 120px !important;
  }
  .post-thumbnail-img {
    width: 100% !important;
    height: 120px !important;
  }
}

/* ==========================================================
   Variáveis CSS de acento por estilo
   Garante que --accent-color e --on-accent sejam corretos
   em todos os contextos (botão Responder, etc.)
   ========================================================== */

/* ==========================================================
   Layout: sem sidebar — main ocupa largura total
   ========================================================== */

body.no-sidebar main,
body.no-sidebar #primary {
  flex: 1 1 100% !important;
  max-width: 100% !important;
}

/* Sem sidebar: centraliza o cartão de conteúdo no main de largura total.
   O texto já tem teto de 72ch (--prose-max); sem isto, o conteúdo ficaria
   encostado na margem esquerda com grande vazio à direita em telas largas.
   Centralizar a coluna de leitura dá o visual de "site moderno" de coluna única. */
body.no-sidebar main > article,
body.no-sidebar main > .pagination,
body.no-sidebar main > .child-pages,
body.no-sidebar main > .related-posts,
body.no-sidebar main > #comments,
body.no-sidebar main > .content-extra {
  width: 100%;
  max-width: calc(var(--prose-max) + 2 * var(--space-lg));
  margin-left: auto;
  margin-right: auto;
}

/* ── Conteúdo Extra: região de widgets abaixo do conteúdo principal ──
   Renderizada dentro de <main>, antes da barra lateral no DOM, garantindo a
   ordem de leitura: cabeçalho → corpo → conteúdo extra → sidebar → rodapé.
   Como o main é uma coluna flex, margin-top: auto faz a região absorver a
   folga vertical de páginas curtas, ancorando-a no pé da coluna. Em páginas
   longas, a folga é zero e resta apenas o respiro do padding-top. */
.content-extra {
  margin-top: auto;
  padding-top: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
  align-items: start;
}

/* O gap do grid cuida do espaçamento; anula a margem padrão dos widgets
   e troca a entrada lateral (pensada para a sidebar) por entrada de baixo.
   A cor de fundo segue o cartão de conteúdo (--card-bg, a mesma do article),
   para que a região pareça conteúdo — não um pedaço da barra lateral. */
main .content-extra .widget {
  margin-bottom: 0;
  animation: fadeInUp 0.5s ease 0.15s both;
  background-color: var(--card-bg) !important;
}

/* Remove a listra decorativa de destaque (assinatura visual da sidebar)
   que vários estilos aplicam via ::before no topo dos widgets */
main .content-extra .widget::before {
  display: none !important;
}

/* ==========================================================
   Rock — Preto, Vermelho e Metal
   Para bandas, rádios rock, shows, festivais e roqueiros
   ========================================================== */

/* ── Variáveis do Rock ── */

/* ── Header ── */

/* Nome do site */

/* Tagline */

/* ── Linha vermelha rasgando ao carregar ── */
@keyframes rockLine {
  0%   { width: 0; opacity: 0.5; }
  60%  { opacity: 1; }
  100% { width: 100%; opacity: 1; }
}

/* ── Menu ── */

/* Hover: chama vermelha subindo */

/* ── Busca no header ── */

/* ── Área de conteúdo ── */

/* ── Títulos — entrada de impacto ── */
@keyframes rockImpact {
  0%   { opacity: 0; transform: translateY(-8px) scaleY(1.04); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}

/* ── Subtítulos de conteúdo ── */

/* ── Links ── */

/* ── Blockquote — aspas de palco ── */

/* ── Botão Leia mais ── */

/* ── Botão Voltar ── */

/* ── Sidebar ── */

/* Linha vermelha no topo: usando border-top em vez de ::before + overflow:hidden */

/* Linha vermelha no topo dos widgets */

/* Posts recentes: sem hifenização em nenhum estilo */
.widget_recent_entries a,
.widget_recent_entries li,
aside .widget ul li a {
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: anywhere;
}

/* ── Comentários ── */

/* ── Formulário de comentários ── */

/* ── Meta do post (data, autor, categoria) ── */

/* ── Paginação ── */

/* ── Rodapé ── */

/* ── Accent color global ── */

/* ── Mobile ── */

/* ==========================================================
   ⚽ NOITE DE JOGO — Portal Esportivo
   Verde noturno de estádio · Verde gramado · Amarelo de gol
   Para portais de futebol, placares ao vivo, campeonatos
   ========================================================== */

/* ── Variáveis extras do Noite de Jogo ── */

/* ── Header: verde noturno com gradiente de estádio ── */

/* ── Linha verde gramado rasgando ao carregar ── */
@keyframes noiteJogoLine {
  0%   { width: 0; opacity: 0.6; }
  100% { width: 100%; opacity: 1; }
}

/* ── Nome do site ── */

/* ── Menu: hover com gramado subindo ── */

/* ── Campo de busca ── */

/* ── Área de conteúdo ── */

/* ── Títulos: entrada de placar ── */
@keyframes noiteImpact {
  0%   { opacity: 0; transform: translateY(-6px) scaleY(1.03); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}

/* ── Links ── */

/* ── Links no conteúdo ── */

/* ── Texto corrido ── */

/* ── Blockquote: destaque de crônica esportiva ── */

/* ── Botão Leia mais ── */

/* ── Botão Voltar ── */

/* ── Widgets ── */

/* Faixa verde gramado no topo dos widgets */

/* ── Paginação ── */

/* ── Comentários ── */

/* ── Formulário de comentários ── */

/* ── Meta do post ── */

/* ── Separadores horizontais ── */

/* ── Rodapé ── */

/* ── Menu toggle ── */

/* ── Mobile ── */

/* ==========================================================
   Correção Definitiva: Bloco de Busca Gutenberg (Sidebar)
   ========================================================== */
/* Força o wrapper do Gutenberg a ser um flexbox de largura total */
.sidebar .widget .wp-block-search .wp-block-search__inside-wrapper,
#secondary .widget .wp-block-search .wp-block-search__inside-wrapper {
  display: flex !important;
  width: 100% !important;
  align-items: stretch !important;
  gap: 0 !important;
}
/* Faz o campo de texto ocupar 100% do espaço restante na esquerda */
.sidebar .widget .wp-block-search__input,
#secondary .widget .wp-block-search__input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 44px !important;
  box-sizing: border-box !important;
}
/* Impede o botão de quebrar a linha (Pesq uisar) e garante o tamanho */
.sidebar .widget .wp-block-search__button,
#secondary .widget .wp-block-search__button {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  height: 44px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}
/* Aplica a cor terracota do estilo Céu e Fé no botão do Gutenberg */

/* =WordPress Required Classes
-------------------------------------------------------------- */

/* Imagens com legenda */
.wp-caption {
  max-width: 100%;
  margin-bottom: 1.5rem;
}

.wp-caption img {
  display: block;
  width: 100%;
  height: auto;
}

.wp-caption-text,
.wp-element-caption {
  font-size: 0.875rem;
  color: var(--muted-text);
  text-align: center;
  margin-top: 0.4rem;
  font-style: italic;
}

/* Posts fixados no topo */
.sticky {
  border-left: 4px solid var(--accent-color);
  padding-left: 1rem;
}

/* Legenda de galeria */
.gallery-caption {
  font-size: 0.875rem;
  color: var(--muted-text);
  text-align: center;
  font-style: italic;
}

/* Comentário do autor do post */
.bypostauthor > .comment-body {
  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
  border-left: 3px solid var(--accent-color);
  padding-left: 0.75rem;
}