/*
Theme Name: SavePoint
Template: hello-biz
Version: 1.2
Description: Versão otimizada com suporte aprimorado a dark mode
*/

/* ============================================================
   VARIÁVEIS CSS - Cores do Tema
   Permite fácil manutenção e suporte a prefers-color-scheme
============================================================ */
:root {
    /* Cores Modo Claro (padrão) */
    --bg-primary: #f8fafc; /* slate-50 */
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --text-primary: #1e293b; /* slate-900 */
    --text-secondary: #334155; /* slate-700 */
    --text-muted: #94a3b8; /* slate-400 */
    --border-color: #cbd5e1; /* slate-300 */
    
    /* Cores de Acento */
    --accent-primary: #2563eb; /* blue-600 */
    --accent-hover: #1d4ed8; /* blue-700 */
    
    /* Cores Especiais */
    --heading-color: #1e293b;
    --link-color: #2563eb;
}

/* Modo Escuro via Classe .dark (prioridade) */
.dark {
    --bg-primary: #0f172a; /* slate-900 */
    --bg-secondary: #1e293b; /* slate-800 */
    --bg-card: #1e293b;
    --text-primary: #f8fafc; /* slate-50 */
    --text-secondary: #cbd5e1; /* slate-300 */
    --text-muted: #94a3b8; /* slate-400 */
    --border-color: #475569; /* slate-600 */
    
    --accent-primary: #60a5fa; /* blue-400 */
    --accent-hover: #3b82f6; /* blue-500 */
    
    --heading-color: #ffffff;
    --link-color: #60a5fa;
}

/* Suporte Nativo a prefers-color-scheme (fallback quando sem JavaScript) */
@media (prefers-color-scheme: dark) {
    :root:not(.dark):not(.light) {
        --bg-primary: #0f172a;
        --bg-secondary: #1e293b;
        --bg-card: #1e293b;
        --text-primary: #f8fafc;
        --text-secondary: #cbd5e1;
        --text-muted: #94a3b8;
        --border-color: #475569;
        --accent-primary: #60a5fa;
        --accent-hover: #3b82f6;
        --heading-color: #ffffff;
        --link-color: #60a5fa;
    }
}

/* ============================================================
   ESTILOS BASE
============================================================ */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============================================================
   TÍTULOS - Unificado e Consistente
============================================================ */
/* Títulos Principais (H1 e H2 de Seção) */
main h1,
main h2:not(.post-content h2), /* Exclui H2 dentro de posts */
.section-title {
    font-size: 2.25rem; /* text-4xl */
    line-height: 2.5rem;
    font-weight: 800;
    color: var(--heading-color);
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    main h1,
    main h2:not(.post-content h2),
    .section-title {
        font-size: 3rem; /* text-5xl */
        line-height: 1;
    }
}

/* H3 e H4 Gerais */
h3,
h4 {
    color: var(--heading-color);
    font-weight: 700;
}

/* ============================================================
   CONTEÚDO DE POST (single.php)
============================================================ */
.post-content {
    line-height: 1.85;
    font-size: 1.125rem;
}

/* Títulos dentro de Posts */
.post-content h2 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 800;
    color: var(--heading-color);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.post-content h3 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.post-content h4,
.post-content h5,
.post-content h6 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

/* Texto do Post */
.post-content p {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

/* Listas */
.post-content ul,
.post-content ol {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    margin-left: 1.5rem;
    list-style-type: disc;
}

.post-content ol {
    list-style-type: decimal;
}

.post-content li {
    margin-bottom: 0.5rem;
}

/* Links */
.post-content a {
    color: var(--link-color);
    text-decoration-line: underline;
    text-decoration-color: rgba(37, 99, 235, 0.3);
    transition-property: all;
    transition-duration: 150ms;
}

.post-content a:hover {
    text-decoration-color: rgba(37, 99, 235, 0.7);
}

/* Citações */
.post-content blockquote {
    border-left-width: 4px;
    border-color: var(--border-color);
    padding-left: 1rem;
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* Imagens */
.post-content figure.wp-block-image {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.post-content figure.wp-block-image img {
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    width: 100%;
    height: auto;
}

/* Legendas */
.post-content figcaption {
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

/* ============================================================
   SEÇÃO PODCAST (Inversão de Cores)
============================================================ */
.podcast-section-light {
    background-color: #0f172a;
    color: #f8fafc;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dark .podcast-section-light {
    background-color: #e2e8f0;
    color: #1e293b;
}

/* Título da Seção Podcast */
.podcast-section-light h3 {
    color: #f8fafc;
}

.dark .podcast-section-light h3 {
    color: #1e293b;
}

/* Descrições */
.podcast-section-light p:not(.section-description) {
    color: #94a3b8;
}

.dark .podcast-section-light p:not(.section-description) {
    color: #475569;
}

/* Mensagem de Fallback */
.podcast-section-light .section-description {
    color: #f8fafc;
}

.dark .podcast-section-light .section-description {
    color: #1e293b;
}

/* Card Interno do Podcast */
.dark .podcast-section-light .bg-slate-800 {
    background-color: #cbd5e1;
}

.dark .podcast-section-light .font-bold.text-lg a {
    color: #0f172a;
}

.dark .podcast-section-light .text-slate-400 {
    color: #475569;
}

/* ============================================================
   COMPONENTES GERAIS
============================================================ */
/* Descrições de Seção */
.section-description {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

/* Botões de Filtro */
.filter-btn {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-width: 2px;
    border-radius: 9999px;
    transition: all 0.3s;
    cursor: pointer;
    color: var(--text-secondary);
    border-color: var(--text-muted);
    background-color: transparent;
}

.filter-btn:not(.active-filter):hover {
    background-color: #e2e8f0;
}

.dark .filter-btn:not(.active-filter):hover {
    background-color: #334155;
}

.filter-btn.active-filter {
    background-color: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

.dark .filter-btn.active-filter {
    background-color: #f1f5f9;
    color: #0f172a;
    border-color: #f1f5f9;
}

/* ============================================================
   TAGS (single.php)
============================================================ */
.tags-container span {
    font-weight: 600;
    color: var(--text-primary);
}

.tags-container a {
    display: inline-block;
    background-color: #e2e8f0;
    color: #334155;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    transition-property: background-color, color;
    transition-duration: 150ms;
}

.dark .tags-container a {
    background-color: #334155;
    color: #cbd5e1;
}

.tags-container a:hover {
    background-color: #cbd5e1;
}

.dark .tags-container a:hover {
    background-color: #475569;
}

/* ============================================================
   NÚMERO DO EPISÓDIO (Podcast)
============================================================ */
.episode-number {
    display: inline-block;
    background-color: #e0e7ff;
    color: #4338ca;
    padding: 0.1rem 0.5rem;
    border-radius: 0.375rem;
    font-weight: 700;
    font-size: 0.9em;
    margin-right: 0.25rem;
    line-height: 1.2;
    vertical-align: baseline;
}

.dark .episode-number {
    background-color: #3730a3;
    color: #c7d2fe;
}

/* ============================================================
   PÁGINA SOBRE NÓS
============================================================ */
.profile-card {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.game-cover {
    transition: transform 0.3s ease;
}

.game-cover:hover {
    transform: scale(1.05);
}

.social-link {
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
    display: inline-block;
}

.social-link:hover {
    transform: translateY(-2px);
}

/* Parágrafos Introdutórios (Sobre) */
#sobre-projeto .section-description {
    color: #cbd5e1;
}

/* ============================================================
   ANIMAÇÕES E TRANSIÇÕES
============================================================ */
.news-item {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, 
                background-color 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================================
   MENU NAVIGATION
============================================================ */
header nav ul,
#mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ============================================================
   UTILITÁRIOS
============================================================ */
/* Força transparência de fundo em elementos específicos */
.bg-transparent-force {
    background-color: transparent !important;
}

/* Transição suave para todos os elementos temáticos */
* {
    transition-property: background-color, border-color, color;
    transition-duration: 0.15s;
    transition-timing-function: ease-in-out;
}

/* Exceção: não aplicar transição em animações específicas */
.no-theme-transition,
.news-item,
.filter-btn {
    transition-property: none;
}

.news-item {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, 
                background-color 0.3s ease, box-shadow 0.3s ease;
}

.filter-btn {
    transition: all 0.3s;
}