/* ================================================================================
   WP INFINITY CINE — UPGRADED DARK CINEMA STYLESHEET
   Autor: Upgrade visual por Claude / Anthropic
   Nota: Não remove nem substitui configurações do Customizer.
         Aprimora apenas o layout visual.
   ================================================================================ */

/* ================================================================================
   DESIGN TOKENS — TEMA ESCURO CINEMA
   ================================================================================ */
:root {
    /* Paleta Escura Cinema */
    --cine-bg:          #0d0d12;
    --cine-surface:     #13141f;
    --cine-surface-2:   #1a1b28;
    --cine-border:      #1e2030;
    --cine-border-soft: rgba(255,255,255,0.06);

    /* Cores de Destaque */
    --cine-red:         #e31e24;
    --cine-red-dark:    #b01519;
    --cine-red-glow:    rgba(227,30,36,0.15);
    --cine-gold:        #f5c518;
    --cine-orange:      #ff7b00;
    --cine-purple:      #7c3aed;

    /* Texto */
    --cine-text-1:      #f0f0f0;
    --cine-text-2:      rgba(255,255,255,0.7);
    --cine-text-3:      rgba(255,255,255,0.45);
    --cine-text-4:      rgba(255,255,255,0.25);

    /* Tipografia Cinema */
    --font-display:     'Georgia', 'Times New Roman', serif;
    --font-ui:          'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Sombras */
    --cine-shadow-sm:   0 2px 12px rgba(0,0,0,0.4);
    --cine-shadow-md:   0 8px 32px rgba(0,0,0,0.5);
    --cine-shadow-lg:   0 20px 60px rgba(0,0,0,0.6);

    /* Transições */
    --cine-ease:        cubic-bezier(0.25, 1, 0.5, 1);
    --cine-transition:  all 0.3s var(--cine-ease);
}

/* ================================================================================
   BASE — FUNDO E TIPOGRAFIA
   ================================================================================ */

/* Ativa modo escuro no body quando layout cine está ativo */
body.home,
body.archive,
body.single,
body.search {
    background: var(--cine-bg);
    color: var(--cine-text-1);
}

/* Fundo escuro no main */
.site-main {
    background: var(--cine-bg);
}

/* ================================================================================
   HEADER — VISUAL CINEMA PREMIUM
   ================================================================================ */

.site-header {
    background: rgba(13,13,18,0.97) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--cine-border);
    box-shadow: 0 1px 0 var(--cine-border), 0 4px 24px rgba(0,0,0,0.4) !important;
}

/* Logo com tipografia séria */
.site-name {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    color: #fff !important;
    letter-spacing: -0.02em;
}

.site-tagline {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--cine-red) !important;
    font-weight: 700;
    margin-top: 2px;
}

/* Navegação mais clean */
.main-navigation #primary-menu > li > a {
    color: rgba(255,255,255,0.65) !important;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-ui);
    padding: 6px 12px;
    border-radius: 4px;
    letter-spacing: 0.01em;
    transition: var(--cine-transition);
}

.main-navigation #primary-menu > li > a:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.08) !important;
}

.main-navigation #primary-menu > li.current-menu-item > a {
    color: #fff !important;
    background: rgba(255,255,255,0.06) !important;
}

/* Dropdown elegante */
.main-navigation .sub-menu {
    background: #1a1b28 !important;
    border: 1px solid var(--cine-border) !important;
    border-top: 2px solid var(--cine-red) !important;
    box-shadow: var(--cine-shadow-lg) !important;
    border-radius: 6px !important;
}

.main-navigation .sub-menu li a {
    color: var(--cine-text-2) !important;
    border-bottom: 1px solid var(--cine-border) !important;
    font-size: 0.85rem;
    font-family: var(--font-ui);
}

.main-navigation .sub-menu li a:hover {
    background: rgba(255,255,255,0.04) !important;
    color: #fff !important;
    padding-left: 22px !important;
}

/* Hamburger mobile */
.menu-toggle { color: rgba(255,255,255,0.7) !important; }
.menu-toggle:hover { color: #fff !important; }

/* Ícone de busca */
.search-toggle { color: rgba(255,255,255,0.65) !important; }
.search-toggle:hover { color: #fff !important; }

/* Search overlay */
.search-bar-overlay {
    background: rgba(0,0,0,0.97) !important;
    backdrop-filter: blur(12px);
}

.search-bar-overlay .search-field {
    border-bottom-color: rgba(255,255,255,0.2) !important;
    color: #fff !important;
    font-family: var(--font-display);
    font-size: 1.8rem !important;
}

.search-bar-overlay .search-field:focus {
    border-bottom-color: var(--cine-red) !important;
}

/* ================================================================================
   TICKER / BREAKING NEWS BAR
   ================================================================================ */

.top-bar {
    background: var(--cine-surface) !important;
    border-bottom: 1px solid var(--cine-border);
    padding: 9px 0;
}

.top-bar-nav #top-menu a {
    color: var(--cine-text-3) !important;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.top-bar-nav #top-menu a:hover {
    color: var(--cine-text-1) !important;
    opacity: 1 !important;
}

/* ================================================================================
   HERO — GRID MASONRY ESTILO LETTERBOXD
   ================================================================================ */

.featured-grid-magazine {
    background: var(--cine-bg);
    margin-bottom: 0 !important;
    padding-bottom: 0;
}

/* Posts do hero */
.hero-masonry-post {
    border-radius: 10px !important;
    overflow: hidden;
    background: var(--cine-surface) !important;
}

/* Sobreposição mais cinematográfica — vinheta mais forte */
.hero-overlay {
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.97) 0%,
        rgba(0,0,0,0.7) 35%,
        rgba(0,0,0,0.2) 65%,
        transparent 100%
    ) !important;
}

/* Títulos do hero em estilo display */
.hero-title {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em;
}

.hero-masonry-post.post-1 .hero-title {
    font-size: 1.7rem !important;
}

.hero-title a:hover {
    color: var(--cine-gold) !important;
}

/* Categoria badge no hero */
.hero-cat {
    background: var(--cine-red) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    border-radius: 3px !important;
}

/* Meta no hero */
.hero-masonry-post .post-meta {
    color: rgba(255,255,255,0.6) !important;
    font-family: var(--font-ui);
    font-size: 0.78rem;
}

/* Zoom suave na imagem ao hover */
.hero-masonry-post:hover .hero-img {
    transform: scale(1.06) !important;
}

.hero-img {
    transition: transform 0.9s var(--cine-ease) !important;
}

/* ================================================================================
   SEÇÕES DE CATEGORIAS
   ================================================================================ */

.home-dynamic-sections {
    background: var(--cine-bg);
    padding: 30px 0;
}

.category-block {
    margin-bottom: 50px !important;
}

/* Título da seção estilo linha vermelha */
.section-title-wrap {
    border-bottom: 1px solid var(--cine-border) !important;
    margin-bottom: 22px !important;
    padding-bottom: 12px !important;
}

.section-title,
.cine-section-title {
    font-family: var(--font-ui) !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: var(--cine-text-1) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Barra lateral vermelha elegante no título */
.section-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background: var(--cine-red);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Remove o ::after padrão para não duplicar */
.section-title::after {
    display: none !important;
}

.see-all-link {
    font-family: var(--font-ui);
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: var(--cine-red) !important;
    border: 1px solid rgba(227,30,36,0.4) !important;
    border-radius: 20px !important;
    padding: 5px 12px !important;
    transition: var(--cine-transition);
}

.see-all-link:hover {
    background: var(--cine-red) !important;
    color: #fff !important;
    border-color: var(--cine-red) !important;
}

/* ================================================================================
   POST CARDS — ESTILO DARK CINEMA
   ================================================================================ */

.post-card {
    background: var(--cine-surface) !important;
    border: 1px solid var(--cine-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: transform 0.3s var(--cine-ease), border-color 0.3s ease !important;
}

.post-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--cine-shadow-md) !important;
    border-color: rgba(255,255,255,0.12) !important;
}

/* Thumbnail */
.post-thumbnail {
    border-radius: 8px 8px 0 0 !important;
}

.post-thumbnail img {
    transition: transform 0.6s var(--cine-ease) !important;
}

.post-card:hover .post-thumbnail img {
    transform: scale(1.06) !important;
}

/* Badge de categoria */
.post-category {
    background: var(--cine-red) !important;
    font-family: var(--font-ui);
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    border-radius: 3px !important;
    padding: 3px 8px !important;
}

/* Conteúdo do card */
.post-content {
    padding: 14px !important;
    background: var(--cine-surface);
}

/* Título do post */
.post-title {
    font-family: var(--font-display) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--cine-text-1) !important;
    line-height: 1.4 !important;
}

.post-title a:hover {
    color: var(--cine-gold) !important;
}

/* Meta do post */
.post-meta {
    font-family: var(--font-ui);
    font-size: 0.72rem !important;
    color: var(--cine-text-3) !important;
}

/* ================================================================================
   LAYOUT DE GRADE DAS SEÇÕES
   ================================================================================ */

.section-grid {
    gap: 14px !important;
}

/* ================================================================================
   SIDEBAR — ESTILO DARK CINEMA
   ================================================================================ */

/* Widget geral */
.widget {
    background: var(--cine-surface);
    border: 1px solid var(--cine-border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px !important;
}

/* Título do widget */
.widget-title,
.custom-recent-posts .widget-title,
.custom-lead-capture .widget-title,
.custom-categories .widget-title {
    font-family: var(--font-ui) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--cine-text-1) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--cine-border) !important;
    margin-bottom: 16px !important;
}

.widget-title::after,
.custom-recent-posts .widget-title::after,
.custom-lead-capture .widget-title::after,
.custom-categories .widget-title::after {
    background: var(--cine-red) !important;
    width: 30px !important;
    height: 2px !important;
}

/* Posts recentes na sidebar */
.recent-item {
    border-bottom: 1px solid var(--cine-border) !important;
    padding: 12px 0 !important;
}

.recent-item:last-child { border-bottom: none !important; }

.recent-thumb {
    border-radius: 6px !important;
    width: 75px !important;
    height: 75px !important;
    overflow: hidden;
}

.recent-thumb img {
    width: 75px !important;
    height: 75px !important;
    border-radius: 6px !important;
    transition: transform 0.4s ease;
}

.recent-item:hover .recent-thumb img {
    transform: scale(1.08);
}

.recent-title {
    color: var(--cine-text-1) !important;
    font-family: var(--font-display) !important;
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
}

.recent-item:hover .recent-title {
    color: var(--cine-gold) !important;
}

.recent-date { color: var(--cine-text-4) !important; }

/* Categorias */
.custom-cat-list li {
    border-bottom: 1px solid var(--cine-border) !important;
    padding: 10px 0 !important;
}

.custom-cat-list li a {
    color: var(--cine-text-2) !important;
    font-family: var(--font-ui);
    font-size: 0.9rem;
}

.custom-cat-list li a:hover {
    color: var(--cine-red) !important;
    padding-left: 5px;
}

/* Botões de redes sociais */
.lead-btn {
    border-radius: 6px !important;
    font-family: var(--font-ui) !important;
}

/* ================================================================================
   POST ÚNICO — LEITURA CONFORTÁVEL NO DARK
   ================================================================================ */

.single-post-entry .entry-title {
    font-family: var(--font-display) !important;
    font-size: 2rem !important;
    color: var(--cine-text-1) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em;
}

.post-excerpt-description {
    font-family: var(--font-display);
    color: var(--cine-text-2) !important;
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    border-left: 3px solid var(--cine-red);
    padding-left: 18px;
    margin: 20px 0 !important;
}

.single-post-entry .entry-content {
    color: var(--cine-text-2) !important;
    font-family: var(--font-display);
    font-size: 1.02rem !important;
    line-height: 1.85 !important;
}

.single-post-entry .entry-content p { margin-bottom: 1.5rem !important; }

.single-post-entry .entry-content h2 {
    font-family: var(--font-display);
    color: var(--cine-text-1) !important;
    font-size: 1.5rem !important;
    margin: 2.5rem 0 1rem !important;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cine-border);
}

.single-post-entry .entry-content h3 {
    font-family: var(--font-display);
    color: var(--cine-text-1) !important;
    font-size: 1.25rem !important;
}

.single-post-entry .entry-content blockquote {
    border-left: 3px solid var(--cine-red) !important;
    background: var(--cine-surface) !important;
    color: var(--cine-text-2) !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 20px 24px !important;
    margin: 2rem 0 !important;
    font-style: italic;
}

/* Caixa autor/share */
.single-author-share-box {
    background: var(--cine-surface);
    border: 1px solid var(--cine-border) !important;
    border-radius: 8px;
    padding: 18px !important;
    margin: 30px 0 !important;
}

/* Botões de compartilhar */
.share-btn {
    border-color: var(--cine-border) !important;
    color: var(--cine-text-3) !important;
    background: var(--cine-surface-2);
}

.share-btn:hover {
    background: var(--cine-red) !important;
    color: #fff !important;
    border-color: var(--cine-red) !important;
}

/* Bio do autor */
.post-author-bio-box {
    background: var(--cine-surface) !important;
    border: 1px solid var(--cine-border) !important;
    border-radius: 10px !important;
}

.bio-name a { color: var(--cine-text-1) !important; }
.bio-name a:hover { color: var(--cine-gold) !important; }
.bio-description { color: var(--cine-text-2) !important; }
.bio-role { color: var(--cine-text-3) !important; border-left-color: var(--cine-border) !important; }
.bio-social a { color: var(--cine-text-3) !important; }
.bio-social a:hover { color: var(--cine-red) !important; }

/* Tags de post */
.tags-links a {
    border-color: var(--cine-border) !important;
    color: var(--cine-text-3) !important;
    background: var(--cine-surface);
    border-radius: 20px !important;
}

.tags-links a:hover {
    background: var(--cine-red-glow) !important;
    border-color: rgba(227,30,36,0.4) !important;
    color: var(--cine-red) !important;
}

/* Posts relacionados */
.related-posts {
    border-top-color: var(--cine-border) !important;
}

/* ================================================================================
   VEJA TAMBÉM BOX
   ================================================================================ */

.veja-tambem-box {
    background: var(--cine-surface) !important;
    border: 1px solid var(--cine-border) !important;
    border-left: 3px solid var(--cine-red) !important;
    border-radius: 6px !important;
}

.veja-tambem-box a { color: var(--cine-text-1) !important; }
.veja-tambem-box a:hover { color: var(--cine-gold) !important; }
.veja-tambem-box:hover {
    background: var(--cine-surface-2) !important;
    box-shadow: var(--cine-shadow-sm) !important;
}

/* ================================================================================
   FORMULÁRIO DE COMENTÁRIOS
   ================================================================================ */

.comment-form-comment textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
    background: var(--cine-surface) !important;
    border-color: var(--cine-border) !important;
    color: var(--cine-text-1) !important;
    border-radius: 6px !important;
}

.comment-form-comment textarea:focus,
.comment-form input:focus {
    border-color: var(--cine-red) !important;
    outline: none;
    box-shadow: 0 0 0 2px var(--cine-red-glow) !important;
}

/* ================================================================================
   PAGINAÇÃO
   ================================================================================ */

.page-numbers {
    background: var(--cine-surface) !important;
    border-color: var(--cine-border) !important;
    color: var(--cine-text-2) !important;
    border-radius: 6px !important;
    font-family: var(--font-ui);
    font-weight: 700;
}

.page-numbers.current {
    background: var(--cine-red) !important;
    border-color: var(--cine-red) !important;
    color: #fff !important;
}

.page-numbers:hover:not(.current):not(.dots) {
    border-color: var(--cine-red) !important;
    color: var(--cine-red) !important;
    background: var(--cine-red-glow) !important;
}

/* ================================================================================
   BREADCRUMBS
   ================================================================================ */

.breadcrumbs {
    background: var(--cine-surface);
    padding: 10px 20px !important;
    border-radius: 6px;
    border: 1px solid var(--cine-border);
    margin-bottom: 20px !important;
}

.breadcrumbs a { color: var(--cine-red) !important; }
.breadcrumbs ol, .breadcrumbs ul { color: var(--cine-text-3); }

/* ================================================================================
   FOOTER — PREMIUM DARK
   ================================================================================ */

.site-footer {
    background: #080810 !important;
    border-top: 1px solid var(--cine-border);
}

.footer-bottom {
    background: rgba(0,0,0,0.3) !important;
    border-top: 1px solid var(--cine-border) !important;
}

.footer-column ul li {
    border-bottom-color: var(--cine-border) !important;
}

.footer-column ul li a {
    color: var(--cine-text-3) !important;
}

.footer-column ul li a:hover {
    color: var(--cine-text-1) !important;
}

.social-link-footer {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid var(--cine-border);
    transition: var(--cine-transition);
}

.social-link-footer:hover {
    background: var(--cine-red) !important;
    border-color: var(--cine-red) !important;
}

.footer-copyright a { color: var(--cine-red) !important; }

/* ================================================================================
   BACK TO TOP
   ================================================================================ */

.back-to-top {
    background: var(--cine-red) !important;
    box-shadow: 0 4px 20px rgba(227,30,36,0.4) !important;
}

.back-to-top:hover {
    background: var(--cine-red-dark) !important;
    transform: translateY(-6px) !important;
}

/* ================================================================================
   MENU MOBILE — DARK
   ================================================================================ */

.mobile-menu {
    background: #0d0d12 !important;
}

.mobile-menu-header {
    background: #0d0d12 !important;
    border-bottom-color: var(--cine-border) !important;
}

.mobile-menu-close { color: var(--cine-text-2) !important; }
.mobile-menu-close:hover { color: #fff !important; }

.mobile-menu #mobile-nav-menu > li {
    border-bottom-color: var(--cine-border) !important;
}

.mobile-menu #mobile-nav-menu > li > a {
    color: var(--cine-text-1) !important;
    font-family: var(--font-display);
    font-size: 1.1rem;
}

.mobile-menu #mobile-nav-menu > li > a:hover {
    color: var(--cine-gold) !important;
}

/* ================================================================================
   HERO SPLIT CINE (CINE-LAYOUT.CSS)
   ================================================================================ */

.cine-hero-section {
    background: var(--cine-bg) !important;
    border-bottom-color: var(--cine-border) !important;
}

.cine-hero-post {
    border-radius: 10px !important;
    background: var(--cine-surface) !important;
}

.cine-hero-overlay {
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.97) 0%,
        rgba(0,0,0,0.55) 45%,
        transparent 100%
    ) !important;
}

.cine-hero-title {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.25 !important;
}

.cine-hero-title a:hover { color: var(--cine-gold) !important; }

.cine-hero-meta {
    color: rgba(255,255,255,0.55) !important;
    font-family: var(--font-ui);
}

.cine-badge {
    background: var(--cine-red) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.1em !important;
}

/* Carousel de categorias */
.cine-cat-circle-card {
    border: 2px solid var(--cine-border) !important;
    transition: var(--cine-transition) !important;
}

.cine-cat-circle-card:hover {
    border-color: var(--cine-red) !important;
    transform: scale(1.04);
}

.cine-cat-circle-overlay {
    background: rgba(0,0,0,0.55) !important;
}

.cine-cat-circle-card:hover .cine-cat-circle-overlay {
    background: rgba(227,30,36,0.35) !important;
}

/* ================================================================================
   ARCHIVE / CATEGORY PAGE
   ================================================================================ */

.archive .site-main,
.category .site-main {
    background: var(--cine-bg);
}

.archive-title {
    font-family: var(--font-display);
    color: var(--cine-text-1) !important;
}

.archive-description { color: var(--cine-text-3) !important; }

/* ================================================================================
   AUTHOR PAGE
   ================================================================================ */

.author-header-premium {
    background: var(--cine-surface) !important;
    border-bottom-color: var(--cine-border) !important;
}

.author-name { color: var(--cine-text-1) !important; }

.author-social-links a {
    background: var(--cine-surface-2) !important;
    color: var(--cine-text-3) !important;
    border: 1px solid var(--cine-border);
}

.author-social-links a:hover {
    background: var(--cine-red) !important;
    color: #fff !important;
}

.filter-tab {
    background: var(--cine-surface) !important;
    color: var(--cine-text-2) !important;
    border: 1px solid var(--cine-border);
    font-family: var(--font-ui);
}

.filter-tab.is-active {
    background: var(--cine-red) !important;
    color: #fff !important;
    border-color: var(--cine-red) !important;
}

/* ================================================================================
   ABOUT PAGE
   ================================================================================ */

.about-hero {
    background: linear-gradient(135deg, #0d0d12 0%, #1a0a0a 100%) !important;
    border-bottom: 1px solid var(--cine-border);
}

.about-hero-title { color: #fff !important; }
.about-hero-subtitle { color: rgba(255,255,255,0.7) !important; }
.about-article .entry-content { color: var(--cine-text-2) !important; }

/* ================================================================================
   404 PAGE
   ================================================================================ */

.error-404 .site-main { background: var(--cine-bg); color: var(--cine-text-1); }

/* ================================================================================
   SCROLLBAR CUSTOM
   ================================================================================ */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cine-bg); }
::-webkit-scrollbar-thumb { background: #2a2b3d; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cine-red); }

/* ================================================================================
   SELEÇÃO DE TEXTO
   ================================================================================ */

::selection {
    background: rgba(227,30,36,0.3);
    color: #fff;
}

/* ================================================================================
   AJUSTES RESPONSIVOS MOBILE
   ================================================================================ */

@media (max-width: 768px) {
    .hero-masonry-post { border-radius: 8px !important; }
    .post-card { border-radius: 8px !important; }
    .widget { padding: 16px !important; }
    .single-post-entry .entry-title { font-size: 1.6rem !important; }
}

@media (max-width: 480px) {
    .section-title { font-size: 0.95rem !important; }
    .hero-title { font-size: 1.2rem !important; }
    .hero-masonry-post.post-1 .hero-title { font-size: 1.3rem !important; }
}