/*
Theme Name: SyTechZone
Theme URI: https://sytechzone.com
Author: SyTechZone
Author URI: https://sytechzone.com
Description: A modern, responsive WordPress theme designed for tech news and magazine websites featuring dark/light modes, 3D carousels, and mobile-first design with premium glassmorphism effects.
Version: 4.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sytechzone
Tags: news, magazine, tech, responsive, dark-mode, modern
*/

/* --- 1. VARIABLES --- */
:root {
  --bg: #050505;
  --card-bg: #0f0f0f;
  --text: #ffffff;
  --accent: #ff0d0d; /* Vivid Red */
  --nav-bg: rgba(5, 5, 5, 0.95); /* Almost solid for readability */
  --border: #222;
}

/* Light Theme */
body.light-theme {
  --bg: #f5f5f5;
  --card-bg: #ffffff;
  --text: #1a1a1a;
  --nav-bg: rgba(255, 255, 255, 0.95);
  --border: #e0e0e0;
}

/* White titles in dark theme (default) */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  color: #ffffff !important;
}

/* Black titles in light theme (overrides default) */
body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4,
body.light-theme h5,
body.light-theme h6 {
  color: #1a1a1a !important;
}

/* EXCEPTION: Titles over dark overlays ALWAYS white (for readability) */
/* These titles appear over images with dark gradient, so they must be white */
body.light-theme .hot-featured .overlay h2,
body.light-theme .hot-small-card .overlay h3,
body.light-theme .spotlight-featured .overlay h2,
body.light-theme .exclusive-card .overlay h4,
body.light-theme .popular-card .overlay h3 {
  color: #ffffff !important;
}

/* Title and content links - Dark Mode */
body a {
  color: #ffffff;
}

body a:hover {
  color: var(--accent);
}

/* Title and content links - Light Mode */
/* APPLIES ONLY TO MAIN CONTENT (excludes header and buttons) */
body.light-theme .site-content a,
body.light-theme .post-item a,
body.light-theme .hot-topics-list a,
body.light-theme .sidebar-posts a {
  color: #1a1a1a !important;
}

body.light-theme .site-content a:hover,
body.light-theme .post-item a:hover,
body.light-theme .hot-topics-list a:hover,
body.light-theme .sidebar-posts a:hover {
  color: var(--accent) !important;
}

/* FIX: Header and Logo ALWAYS White (because background is dark) */
body.light-theme .site-header a,
body.light-theme .site-branding a,
body.light-theme .site-nav a {
  color: #ffffff !important;
}

body.light-theme .site-header a:hover,
body.light-theme .site-nav a:hover {
  color: var(--accent) !important;
}

/* =================================================================
   HOMEPAGE SEO SECTION
   ================================================================= */

.home-seo-content {
  max-width: 1200px;
  margin: 0 auto 60px auto;
  padding: 40px 20px;
}

.seo-intro {
  background: var(--card-bg);
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  line-height: 1.8;
}

.home-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 30px;
  line-height: 1.2;
  color: var(--text);
  text-align: center;
}

.intro-text {
  font-size: 1.1rem;
  margin-bottom: 30px;
  text-align: center;
}

/* Hero Image */
.hero-image-wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 30px auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.8s ease-in-out;
}

.hero-banner {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.hero-banner:hover {
  transform: scale(1.02);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-heading {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 40px 0 20px 0;
  color: var(--text);
  border-left: 4px solid var(--accent);
  padding-left: 15px;
}

.seo-intro p {
  color: var(--text);
  margin-bottom: 20px;
  font-size: 1.05rem;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.feature-list li {
  padding: 12px 0 12px 30px;
  position: relative;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.6;
}

.feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: bold;
  font-size: 1.2rem;
}

.feature-list a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.3s ease;
}

.feature-list a:hover {
  color: #ff3333;
  text-decoration: underline;
}

/* Light Theme - Adjustments */
body.light-theme .home-seo-content {
  background: transparent;
}

body.light-theme .seo-intro {
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

body.light-theme .home-title,
body.light-theme .section-heading {
  color: #1a1a1a !important;
}

body.light-theme .seo-intro p {
  color: #2a2a2a;
}

body.light-theme .feature-list li {
  color: #2a2a2a;
}

/* Responsive */
@media (max-width: 768px) {
  .home-title {
    font-size: 1.8rem;
  }

  .section-heading {
    font-size: 1.4rem;
  }

  .seo-intro {
    padding: 25px;
  }

  .home-seo-content {
    padding: 20px 15px;
    margin-bottom: 40px;
  }
}

/* FIX: Buttons ALWAYS with White text (High Specificity) */
body.light-theme a.read-more-btn,
body.light-theme .post-item a.read-more-btn,
body.light-theme .site-content a.read-more-btn,
body.light-theme .btn,
body.light-theme button {
  color: #ffffff !important;
}

/* General text (paragraphs, spans, etc) - ensure readability */
body p,
body span,
body div {
  color: var(--text);
}

body.light-theme {
  background-image: radial-gradient(
    circle at 50% -20%,
    rgba(255, 13, 13, 0.08),
    transparent 40%
  );
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  margin: 0;
  overflow-x: hidden;
  background-image: radial-gradient(
    circle at 50% -20%,
    rgba(255, 13, 13, 0.15),
    transparent 40%
  );
  background-attachment: fixed;
}

/* FIX: Remove gap globally - All pages */
main {
  margin: 0 !important;
  padding: 0 !important;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}
img {
  max-width: 100%;
  display: block;
}
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* --- INSTAGRAM STYLE TYPOGRAPHY --- */
/* Global metadata - Author, Date, Comments */
.meta-info,
.popular-meta,
.post-meta {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Author */
.author,
.popular-author,
.post-author {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}

/* Date */
.date,
.popular-date,
.post-date {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

/* Separator */
.separator {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 300;
  font-size: 14px;
}

/* Comments */
.comments-count {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

/* Light Theme - Keeps light colors as they appear over dark overlays */
body.light-theme .meta-info,
body.light-theme .popular-meta,
body.light-theme .post-meta {
  color: rgba(255, 255, 255, 0.7);
}

body.light-theme .author,
body.light-theme .popular-author,
body.light-theme .post-author {
  color: rgba(255, 255, 255, 0.95);
}

body.light-theme .date,
body.light-theme .popular-date,
body.light-theme .post-date,
body.light-theme .comments-count {
  color: rgba(255, 255, 255, 0.6);
}

body.light-theme .separator {
  color: rgba(255, 255, 255, 0.4);
}

/* Mobile - Slightly smaller size */
@media (max-width: 900px) {
  .meta-info,
  .popular-meta,
  .post-meta,
  .author,
  .popular-author,
  .post-author,
  .date,
  .popular-date,
  .post-date,
  .separator,
  .comments-count {
    font-size: 13px;
  }
}

/* --- 2. HEADER --- */
.site-header {
  background: var(--nav-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: sticky;
  top: 0;
  z-index: 9999; /* Very high z-index to stay above everything */
  backdrop-filter: blur(10px);
}

/* Keeps header always dark, even in light theme */
body.light-theme .site-header {
  background: rgba(5, 5, 5, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Menu links in light theme continue with dark style */
body.light-theme .site-nav a {
  color: #a0a0a0;
}

body.light-theme .site-nav a:hover {
  color: #fff;
}

body.light-theme .site-branding a {
  color: #fff;
}

/* SEO H1 - Visually hidden but accessible for SEO and screen readers */
.site-title-seo {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===========================================
   HEADER STYLES - REFACTORED AND ORGANIZED
   =========================================== */

/* --- SITE HEADER (Main Container) --- */
.site-header {
  background: var(--header-bg, #0a0a0a);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* --- HEADER WRAP (Container Interno) --- */
.header-wrap {
  display: flex;
  align-items: center;
  justify-content: center; /* Menu centered */
  height: 70px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
}

/* --- LOGO / SITE BRANDING --- */
.site-branding {
  position: absolute;
  left: 80px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 10;
  flex-shrink: 0;
}

.site-branding .custom-logo-link {
  display: flex;
  align-items: center;
}

.site-branding .site-logo {
  width: 270px;
  height: auto;
  max-height: 75px;
  object-fit: contain;
}

/* SEO Title - visually hidden */
.site-title-seo {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Logo visibility (dark theme by default) */
.logo-light {
  display: none !important;
}
.logo-dark {
  display: block !important;
}

/* --- DESKTOP MENU (Centered in flow) --- */
.site-nav.desktop-only {
  display: flex;
  align-items: center;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 30px;
  align-items: center;
}

.site-nav li {
  position: relative;
}

.site-nav a {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: #a0a0a0;
  padding: 10px 0;
  display: block;
  transition:
    color 0.3s ease,
    text-shadow 0.3s ease;
}

.site-nav a:hover {
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 13, 13, 0.6);
}

/* Dropdown Desktop */
.site-nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  background: rgba(5, 5, 5, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 5px;
  border-radius: 0 0 8px 8px;
  flex-direction: column;
  gap: 2px;
}

.site-nav li:hover > ul {
  display: flex;
}

.site-nav ul ul li a {
  padding: 8px 15px;
  text-align: center;
  color: #ccc;
}

.site-nav ul ul li a:hover {
  color: var(--accent);
}

/* --- HEADER RIGHT (Social + Search + Theme) --- */
.header-right {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
  flex-shrink: 0;
}

/* --- SOCIAL LINKS --- */
.social-links {
  display: flex;
  gap: 8px;
  align-items: center;
}

.social-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ccc;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-decoration: none;
}

.social-icon:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(255, 13, 13, 0.5);
}

.social-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Light Theme Social Icons */
body.light-theme .social-icon {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: #333;
}

body.light-theme .social-icon:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* --- SEARCH BUTTON (Desktop) --- */
.header-search-toggle {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 13, 13, 0.1);
  border: 2px solid rgba(255, 13, 13, 0.3);
  border-radius: 50%;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.3s ease;
}

.header-search-toggle:hover {
  background: rgba(255, 13, 13, 0.2);
  transform: scale(1.05);
}

.header-search-toggle svg {
  width: 20px;
  height: 20px;
}

/* --- THEME TOGGLE --- */
.theme-toggle {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(255, 160, 0, 0.3),
    rgba(255, 200, 0, 0.1)
  );
  border: 2px solid rgba(255, 200, 0, 0.4);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  text-align: center;
  padding: 0;
  transition: all 0.3s ease;
  box-shadow:
    0 4px 15px rgba(255, 200, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(255, 200, 0, 0.4);
}

/* --- MOBILE ELEMENTS (Hidden on Desktop) --- */
.mobile-menu-btn,
.mobile-search-btn,
.mobile-header-actions {
  display: none;
}

.mobile-nav-overlay {
  display: none;
}

/* ===========================================
   RESPONSIVE - MEDIUM SCREENS (901px - 1200px)
   Desktop menu hidden, hamburger visible
   =========================================== */
@media (max-width: 1200px) {
  /* Hide desktop menu */
  .site-nav.desktop-only {
    display: none !important;
  }

  /* Show hamburger menu */
  .mobile-header-actions {
    display: flex !important;
    align-items: center;
    gap: 8px;
  }

  .mobile-menu-btn {
    display: flex !important;
    width: 44px;
    height: 44px;
    background: rgba(255, 13, 13, 0.1);
    border: 2px solid rgba(255, 13, 13, 0.3);
    border-radius: 10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .mobile-menu-btn:hover {
    background: rgba(255, 13, 13, 0.2);
    border-color: rgba(255, 13, 13, 0.5);
  }

  .hamburger-line {
    width: 22px;
    height: 2px;
    background: var(--accent, #ff0d0d);
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  /* Adjust header wrap */
  .header-wrap {
    padding: 0 20px;
  }

  /* Reduce social icons size */
  .social-icon {
    width: 28px;
    height: 28px;
  }

  .social-icon svg {
    width: 14px;
    height: 14px;
  }
}

/* ===========================================
   RESPONSIVE - MOBILE (≤900px)
   Logo centered, theme on left, hamburger on right
   =========================================== */
@media (max-width: 900px) {
  .header-wrap {
    height: 60px;
    padding: 0 15px;
    justify-content: center;
  }

  /* Logo centered */
  .site-branding {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
  }

  .site-branding .site-logo {
    width: 280px;
    max-height: 80px;
  }

  /* Header right - left position (theme only) */
  .header-right {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    gap: 8px;
  }

  /* Hide desktop elements */
  .social-links,
  .header-search-toggle,
  .site-nav.desktop-only {
    display: none !important;
  }

  /* Theme button smaller */
  .theme-toggle {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  /* Mobile actions on right */
  .mobile-header-actions {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex !important;
    align-items: center;
    gap: 10px;
    z-index: 10;
  }

  /* Mobile search button */
  .mobile-search-btn {
    display: flex !important;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: #ccc;
    cursor: pointer;
  }

  /* Hamburger mobile */
  .mobile-menu-btn {
    display: flex !important;
    width: 44px;
    height: 44px;
    background: rgba(255, 13, 13, 0.1);
    border: 2px solid rgba(255, 13, 13, 0.3);
    border-radius: 10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
  }

  .hamburger-line {
    width: 20px;
    height: 2px;
    background: var(--accent, #ff0d0d);
    border-radius: 2px;
  }
}

/* === END OF ORGANIZED HEADER STYLES ===
   The styles below are legacy and may contain conflicts.
   TODO: Remove duplicates after testing. === */

/* THEME TOGGLE BUTTON - MODERN DESIGN */
.theme-toggle {
  /* Modern Design with Gradient */
  background: linear-gradient(
    135deg,
    rgba(255, 13, 13, 0.2),
    rgba(255, 13, 13, 0.05)
  );
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 13, 13, 0.3);
  box-shadow:
    0 4px 15px rgba(255, 13, 13, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);

  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 10001;

  /* Glow effect */
  overflow: hidden;
  position: relative;
  flex-shrink: 0; /* Prevents button from shrinking */
}

.theme-toggle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 13, 13, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.theme-toggle:hover::before {
  opacity: 1;
}

.theme-toggle:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 13, 13, 0.4),
    rgba(255, 13, 13, 0.1)
  );
  border-color: rgba(255, 13, 13, 0.6);
  box-shadow:
    0 6px 25px rgba(255, 13, 13, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 30px rgba(255, 13, 13, 0.3);
  transform: scale(1.05); /* No translateY on desktop */
}

/* Click animation - rotation */
.theme-toggle:active {
  transform: scale(0.97) rotate(180deg); /* No translateY on desktop */
}

.theme-toggle.rotating {
  animation: themeRotate 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes themeRotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.08); /* Reduced from 1.2 to 1.08 */
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* Tema Claro */
body.light-theme .theme-toggle {
  background: linear-gradient(
    135deg,
    rgba(255, 200, 0, 0.3),
    rgba(255, 200, 0, 0.1)
  );
  border-color: rgba(255, 200, 0, 0.4);
  box-shadow:
    0 4px 15px rgba(255, 200, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body.light-theme .theme-toggle::before {
  background: radial-gradient(circle, rgba(255, 200, 0, 0.4), transparent);
}

body.light-theme .theme-toggle:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 200, 0, 0.5),
    rgba(255, 200, 0, 0.2)
  );
  border-color: rgba(255, 200, 0, 0.6);
  box-shadow:
    0 6px 25px rgba(255, 200, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 30px rgba(255, 200, 0, 0.3);
}

/* Mobile Adjust - Simply hide as we have specific rules below */
@media (max-width: 900px) {
  /* These rules will be overwritten by more specific ones below */
}

/* --- 3. MENU DESKTOP --- */
.site-nav.desktop-only {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 35px;
  align-items: center;
}
.site-nav a {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: #a0a0a0;
  padding: 10px 0;
  display: flex;
  align-items: center;
}
.site-nav a:hover {
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 13, 13, 0.6);
}

/* Dropdown Desktop */
.site-nav li {
  position: relative;
}
.site-nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  background: rgba(5, 5, 5, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 5px;
  border-radius: 0 0 8px 8px;
  flex-direction: column;
  gap: 2px;
}
.site-nav li:hover > ul {
  display: flex;
}
.site-nav ul ul li a {
  padding: 8px 15px;
  text-align: center;
  color: #ccc;
}
.site-nav ul ul li a:hover {
  color: var(--accent);
}

/* --- 4. MOBILE BUTTON (Red) --- */
.mobile-menu-btn {
  display: none;
} /* Hidden on PC */
.mobile-search-btn {
  display: none;
} /* Hidden on PC */
.mobile-header-actions {
  display: none;
} /* Mobile container hidden on PC */
.mobile-nav-overlay {
  display: none;
}
/* --- 4.5 RESPONSIVENESS - HIDE DESKTOP MENU WHEN ZOOMING OR SMALLER SCREEN --- */
/* Breakpoint increased to 1250px to ensure no overlap at any zoom level */
@media (max-width: 1250px) {
  /* Hide desktop menu - ANY zoom that reduces space */
  .site-nav.desktop-only,
  nav.site-nav.desktop-only,
  .site-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Show mobile actions (hamburger menu) */
  .mobile-header-actions {
    display: flex !important;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10002;
    gap: 8px;
    align-items: center;
  }

  /* Show mobile menu button */
  .mobile-menu-btn {
    display: flex !important;
    width: 42px;
    height: 42px;
    background: rgba(255, 13, 13, 0.1);
    border: 2px solid rgba(255, 13, 13, 0.3);
    border-radius: 8px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
  }

  /* Logo - fixed position on left with perfect vertical alignment */
  .site-branding {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10;
  }

  .site-branding .site-logo {
    max-height: 35px;
    width: auto;
  }

  /* Header right - position before hamburger */
  .header-right {
    position: absolute !important;
    right: 70px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    gap: 8px;
  }

  /* Keep social links smaller but visible */
  .social-links {
    display: flex !important;
    gap: 5px;
  }

  /* Reduce social icons size */
  .social-icon {
    width: 26px;
    height: 26px;
  }

  .social-icon svg {
    width: 12px;
    height: 12px;
  }

  /* Search button smaller */
  .header-search-toggle {
    width: 32px;
    height: 32px;
  }

  .header-search-toggle svg {
    width: 18px;
    height: 18px;
  }

  /* Theme button smaller */
  .theme-toggle {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
}

/* --- 5. RESPONSIVIDADE (MOBILE FIX) --- */
@media (max-width: 900px) {
  .desktop-only {
    display: none !important;
  }

  /* Header Mobile - Altura fixa e alinhamento */
  .header-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0 15px;
    min-height: 60px;
    height: 60px;
  }

  /* Logo centered - exactly in vertical and horizontal center */
  .site-branding {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center;
    z-index: 1;
  }

  /* Header-right: ONLY theme button on LEFT */
  .header-right {
    display: flex !important;
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: auto;
    width: auto;
    gap: 0;
    align-items: center;
    z-index: 10002;
  }

  /* Hide social links and desktop search on mobile */
  .header-right .social-links,
  .header-right .header-search-toggle {
    display: none !important;
  }

  /* Theme button in normal flow */
  .theme-toggle {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    margin: 0;
  }

  /* HIDE header social links on mobile */
  .social-links {
    display: none !important;
  }

  /* HIDE desktop search button on mobile */
  .header-search-toggle {
    display: none !important;
  }

  /* MOBILE: Mobile search button - in flex container */
  .mobile-search-btn {
    display: flex !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    background: linear-gradient(135deg, #ff0d0d 0%, #cc0000 100%);
    border: none;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
  }

  .mobile-search-btn svg {
    width: 18px !important;
    height: 18px !important;
    fill: white;
  }

  /* Logo bigger and visible on mobile */
  .site-branding .site-logo {
    width: 180px;
    height: auto;
    max-height: none;
  }

  /* Mobile actions - Hamburger on right */
  .mobile-header-actions {
    display: flex !important;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10002;
    gap: 8px;
    align-items: center;
  }

  /* Hamburger button */
  .mobile-menu-btn {
    display: flex !important;
    width: 42px;
    height: 42px;
    background: rgba(255, 13, 13, 0.1);
    border: 2px solid rgba(255, 13, 13, 0.3);
    border-radius: 8px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
  }

  /* HIDE old footer social links (now used as floating) */
  /* .social-links-mobile { display: none !important; } -> REMOVED TO REACTIVATE */

  /* --- MOBILE SOCIAL LINKS - FLOATING BOTTOM LEFT (NEON VERTICAL) --- */
  .social-links-mobile {
    display: none; /* Hidden on Desktop */
  }

  @media (max-width: 900px) {
    .social-links-mobile {
      display: flex !important;
      position: fixed !important;
      bottom: 20px !important;
      left: 15px !important;
      flex-direction: column; /* Vertical */
      gap: 10px; /* Reduced from 15px to 10px */
      z-index: 99999;

      /* Rounded Dark Container (Vertical Pill) */
      background: rgba(10, 10, 10, 0.9);
      padding: 10px 6px; /* Reduced from 15px 8px */
      border-radius: 25px; /* Reduced from 30px */
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    /* Light Theme Container */
    body.light-theme .social-links-mobile {
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    /* Neon Icons - Smaller */
    .social-links-mobile .social-icon {
      width: 32px; /* Reduced from 40px */
      height: 32px; /* Reduced from 40px */
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;

      /* Base Dark */
      background: rgba(255, 255, 255, 0.05);
      color: #ccc;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* Base Light */
    body.light-theme .social-links-mobile .social-icon {
      background: rgba(0, 0, 0, 0.05);
      color: #555;
    }

    /* Hover Neon Effect */
    .social-links-mobile .social-icon:hover,
    body.light-theme .social-links-mobile .social-icon:hover {
      background: transparent !important;
      color: #ff0000 !important;
      transform: scale(1.2);
      /* Neon Glow on Icon */
      filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.8));
    }

    .social-links-mobile .social-icon svg {
      width: 16px; /* Reduced from 20px */
      height: 16px; /* Reduced from 20px */
      fill: currentColor !important;
      display: block;
      overflow: visible;
    }

    /* Garantir que o path do SVG seja renderizado corretamente */
    .social-links-mobile .social-icon svg path {
      fill: inherit !important;
      stroke: none !important;
    }

    /* Forces icon color in normal state */
    .social-links-mobile .social-icon svg {
      color: #ccc;
    }

    body.light-theme .social-links-mobile .social-icon svg {
      color: #555;
    }
  }

  /* Additional theme button adjustments on mobile */
  .theme-toggle:hover {
    transform: scale(1.05);
  }

  .theme-toggle:active {
    transform: scale(0.97) rotate(180deg);
  }

  /* === MOBILE HEADER ICONS CONTAINER === */
  /* Container for right buttons (hamburger) */
  .mobile-header-actions {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10002;
  }

  /* === MOBILE SEARCH BUTTON === */
  .mobile-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    box-sizing: border-box;
  }

  .mobile-search-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--accent);
    color: var(--accent);
  }

  .mobile-search-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
  }

  /* === MOBILE HAMBURGER BUTTON === */
  .mobile-menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    z-index: 10002;
    gap: 4px;
    padding: 0;
    box-sizing: border-box;
  }

  .mobile-menu-btn.hamburger .hamburger-line {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  .mobile-menu-btn:hover {
    background: #ff3333;
  }

  /* Animation when open */
  .mobile-menu-btn.active .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .mobile-menu-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-btn.active .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* === MOBILE OPTIMIZATION: STATIC HOT GRID === */
  /* Remove animations and hover effects for better performance and stability */
  .hot-grid,
  .hot-featured,
  .hot-small-card,
  .hot-featured:hover,
  .hot-small-card:hover {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* === HEADER SEARCH OVERLAY === */
  .header-search-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 100000;
    justify-content: center;
    align-items: center;
  }

  .header-search-overlay.active {
    display: flex;
  }

  .search-overlay-container {
    width: 90%;
    max-width: 600px;
    position: relative;
  }

  .header-search-form {
    display: flex;
    gap: 10px;
    width: 100%;
  }

  .header-search-form input {
    flex: 1;
    padding: 15px 20px;
    font-size: 1.1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: #fff;
    outline: none;
    transition: all 0.3s ease;
  }

  .header-search-form input:focus {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.15);
  }

  .header-search-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }

  .header-search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--accent);
    border: none;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .header-search-submit:hover {
    background: #ff3333;
    transform: scale(1.05);
  }

  .search-close-btn {
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .search-close-btn:hover {
    color: var(--accent);
    transform: translateY(-50%) scale(1.1);
  }

  /* Light theme search overlay */
  body.light-theme .header-search-form input {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
    color: #1a1a1a;
  }

  body.light-theme .header-search-form input::placeholder {
    color: rgba(0, 0, 0, 0.4);
  }

  body.light-theme .header-search-form input:focus {
    border-color: var(--accent);
  }

  /* Menu Drawer */
  .mobile-nav-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95); /* More opaque */
    backdrop-filter: blur(15px); /* Glassmorphism effect */
    -webkit-backdrop-filter: blur(15px); /* Safari */
    z-index: 99999; /* Higher z-index */
    padding-top: 100px;
    text-align: center;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    visibility: hidden;
  }
  .mobile-nav-overlay.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  /* Close Button */
  .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
  }

  /* Large Links on Mobile */
  .mobile-nav-links ul {
    flex-direction: column;
    gap: 25px;
  }
  .mobile-nav-links a {
    font-size: 1.5rem;
    color: #fff;
    font-weight: 800;
  }

  /* Submenus Mobile */
  .mobile-nav-links .sub-menu {
    display: none;
    flex-direction: column;
    gap: 15px;
    padding-left: 20px;
    margin-top: 15px;
  }

  .mobile-nav-links .menu-item-has-children.open > .sub-menu {
    display: flex;
  }

  .mobile-nav-links .sub-menu a {
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
  }

  .mobile-nav-links .sub-menu a:hover {
    color: var(--accent);
  }

  /* Arrow for items with submenu */
  .mobile-nav-links .menu-item-has-children > a::after {
    content: " ▼";
    font-size: 0.8rem;
    margin-left: 8px;
    transition: transform 0.3s;
  }

  .mobile-nav-links .menu-item-has-children.open > a::after {
    transform: rotate(180deg);
  }

  /* Mobile Grid - SAME as Desktop: 1 large + 4 small */
  .news-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    height: auto !important;
    margin-bottom: 40px;
  }

  /* Main Post - Occupies 2 rows on left */
  .main-story {
    grid-column: 1;
    grid-row: 1 / 3;
    height: 100%;
    min-height: 320px;
    width: 100%;
    margin-bottom: 0;
  }

  /* Container for 4 small posts - 2x2 Grid */
  .sub-stories {
    grid-column: 2;
    grid-row: 1 / 3;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    height: 100%;
  }

  /* Small cards - auto height */
  .sub-card {
    height: 100%;
    min-height: 155px;
    width: 100%;
  }

  /* MOBILE MENU - Accordion styles */
  .mobile-nav-links ul {
    list-style: none !important;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }

  .mobile-nav-links li {
    width: 100%;
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .mobile-nav-links > ul > li > a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: fit-content;
    min-width: 240px;
    font-size: 1rem;
    font-weight: 700;
    color: #e0e0e0;
    background: rgba(255, 255, 255, 0.15);
    padding: 12px 25px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
  }

  .mobile-nav-links > ul > li > a:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.02);
  }

  .menu-item-has-children > a::after {
    content: "▼";
    font-size: 0.7rem;
    color: var(--accent);
    transition: transform 0.3s;
  }

  .menu-item-has-children.active > a::after {
    transform: rotate(180deg);
  }

  .mobile-nav-links .sub-menu {
    display: none;
    background: transparent;
    margin-top: 5px !important;
    padding: 0 !important;
    gap: 6px;
    align-items: center;
  }

  .menu-item-has-children.active .sub-menu {
    display: flex;
    flex-direction: column;
  }

  .mobile-nav-links .sub-menu a {
    display: block;
    width: fit-content;
    min-width: 160px;
    font-size: 0.95rem;
    padding: 8px 20px;
    color: #ccc;
    text-transform: capitalize;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    text-align: center;
    transition: all 0.2s;
  }

  .mobile-nav-links .sub-menu a:hover {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.05);
  }

  /* Remove any incorrect fixed highlight */
  .mobile-nav-links > ul > li > a {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
  }

  /* Highlight ONLY for currently active item */
  .mobile-nav-links .current-menu-item > a,
  .mobile-nav-links .current_page_item > a,
  .mobile-nav-links .current_page_ancestor > a {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
  }

  /* Hover maintains default style EXCEPT for active item */
  .mobile-nav-links
    > ul
    > li:not(.current-menu-item):not(.current_page_item)
    > a:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: scale(1.02);
  }
}

/* --- 6. HOT TOPICS GRID --- */
.hot-grid,
.hot-topics-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr; /* Card esquerdo menor | Grid direito maior */
  gap: 15px;
  margin-bottom: 50px;
}

/* Featured Post - Large on left */
.hot-featured {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-bg);
  height: 100%; /* Matches the height of the 2x2 grid on the right */
  min-height: 500px; /* Fallback minimum */
  transition: transform 0.3s ease;
}

.hot-featured:hover {
  transform: translateY(-5px);
}

.hot-featured img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hot-featured .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.7) 50%,
    transparent 100%
  );
  padding: 30px;
}

.hot-featured h2 {
  font-size: 2rem;
  margin: 10px 0;
  color: #fff;
  line-height: 1.2;
  font-weight: 800;
}

/* 2x2 Grid - Smaller posts on right */
.hot-small-wrapper,
.hot-grid-small {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 15px;
}

.hot-small-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-bg);
  aspect-ratio: 1 / 1; /* Quadrado proporcional */
  transition: transform 0.3s ease;
}

.hot-small-card:hover {
  transform: translateY(-5px);
}

.hot-small-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hot-small-card .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.6) 60%,
    transparent 100%
  );
  padding: 20px;
}

.hot-small-card h3 {
  font-size: 1rem;
  margin: 8px 0 0 0;
  color: #fff;
  line-height: 1.3;
  font-weight: 700;
}

/* Rating Badge - Smaller Perfect Circle */
.rating-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid #fff;
  color: #fff;
  padding: 0;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.85rem;
  z-index: 10;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}

/* ========== TEMA CLARO - AJUSTES DE LEGIBILIDADE ========== */

/* Overlays no tema claro - gradiente mais forte para legibilidade */
body.light-theme .hot-featured .overlay {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.65) 50%,
    transparent 100%
  );
}

body.light-theme .hot-small-card .overlay {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.55) 60%,
    transparent 100%
  );
}

/* Ensures titles remain white/readable in light theme */
body.light-theme .hot-featured h2,
body.light-theme .hot-small-card h3 {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Badge permanece com bom contraste */
body.light-theme .badge {
  background: var(--accent);
  color: #fff;
}

/* Rating badge no tema claro */
body.light-theme .rating-badge {
  background: rgba(255, 13, 13, 0.95);
  border-color: #fff;
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 13, 13, 0.4);
}

/* Responsivo - Mobile */
@media (max-width: 900px) {
  .hot-topics-grid {
    grid-template-columns: 1fr; /* Single column */
    gap: 15px;
  }

  .hot-featured {
    height: 400px;
  }

  .hot-featured h2 {
    font-size: 1.5rem;
  }

  .hot-grid-small {
    grid-template-columns: 1fr 1fr; /* Keeps 2x2 on mobile */
    gap: 10px;
  }

  .hot-small-card h3 {
    font-size: 0.85rem;
  }

  .hot-small-card .overlay {
    padding: 12px;
  }

  /* Rating Badge Mobile - Menor e no topo direito */
  .rating-badge {
    width: 28px;
    height: 28px;
    font-size: 0.65rem;
    padding: 0;
    top: 6px;
    right: 6px;
    border-width: 1px; /* Borda mais fina no mobile */
  }

  /* Topic Badge Mobile - Smaller and top left (doesn't overlap rating) */
  .topic-badge {
    top: 8px;
    left: 8px;
    bottom: auto; /* Remove posicionamento inferior */
    font-size: 0.55rem;
    padding: 3px 7px;
  }

  /* Meta info geral mobile - aplica para todos os cards */
  .meta-info {
    font-size: 0.7rem !important;
    gap: 4px !important;
    flex-wrap: nowrap;
  }

  .meta-info .author,
  .meta-info .date {
    font-size: 0.7rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px; /* Limita largura */
  }

  .meta-info .separator {
    flex-shrink: 0;
    margin: 0 2px;
  }
}

/* --- 6.5. SPOTLIGHT & EXCLUSIVES GRID --- */
/* Section Title with Underline */
.section-title-wrapper {
  margin-bottom: 30px;
}

.section-title {
  font-size: 1.8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* Cor controlada pelas regras globais body h1-h6 e body.light-theme h1-h6 */
  margin: 0 0 8px 0;
  display: inline-block;
}

.section-underline {
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin-bottom: 30px;
}

/* Grid Container Principal - Lado a Lado */
.spotlight-exclusives-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}

/* Spotlight Section - Esquerda */
.spotlight-section {
  display: flex;
  flex-direction: column;
}

/* Spotlight Carousel Container */
.spotlight-carousel {
  position: relative;
}

.spotlight-featured {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-bg);
  height: 600px;
  transition:
    transform 0.3s ease,
    opacity 0.5s ease;
  opacity: 1;
}

/* Fade Out Animation - Forces opacity 0 */
.spotlight-featured.fading-out,
.exclusive-card.fading-out {
  opacity: 0 !important;
  transition: opacity 0.5s ease-in-out !important;
}

/* Fade In Animation - Forces opacity 1 */
.spotlight-featured.fading-in,
.exclusive-card.fading-in {
  opacity: 1 !important;
  transition: opacity 0.5s ease-in-out !important;
}

.spotlight-featured:hover {
  transform: translateY(-5px);
}

.spotlight-featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spotlight-featured .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.7) 50%,
    transparent 100%
  );
  padding: 30px;
}

.spotlight-featured h2 {
  font-size: 2rem;
  margin: 10px 0;
  color: #fff;
  line-height: 1.2;
  font-weight: 800;
}

/* Exclusives Section - Direita */
.exclusives-section {
  display: flex;
  flex-direction: column;
}

.exclusives-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 15px;
  height: 600px;
}

/* FORCE: Only 4 cards visible in Exclusives */
.exclusives-grid .exclusive-card:nth-child(n + 5) {
  display: none !important;
}

.exclusive-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-bg);
  transition:
    transform 0.3s ease,
    opacity 0.5s ease;
  opacity: 1;
}

.exclusive-card:hover {
  transform: translateY(-5px);
}

.exclusive-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exclusive-card .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.6) 60%,
    transparent 100%
  );
  padding: 20px;
}

.exclusive-card h4 {
  font-size: 1rem;
  margin: 8px 0 0 0;
  color: #fff;
  line-height: 1.3;
  font-weight: 700;
}

/* Badges de Categorias - Sistema de Cores Automáticas */

/* Badge base - shared styles */
.badge,
[class*="badge-color-"] {
  display: inline-block;
  color: #fff;
  padding: 4px 10px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 3px;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  width: fit-content; /* Ajusta ao tamanho do texto */
  max-width: 100%; /* Não excede o container */
  white-space: nowrap; /* Mantém em uma única linha */
  overflow: hidden; /* Esconde o que passar */
  text-overflow: ellipsis; /* Adiciona ... se truncar */
}

/* Responsivo Mobile */
@media (max-width: 900px) {
  .spotlight-exclusives-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .spotlight-featured {
    height: 400px;
  }

  .spotlight-featured h2 {
    font-size: 1.5rem;
  }

  .exclusives-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 250px);
    height: auto;
    gap: 15px;
  }

  .exclusive-card h4 {
    font-size: 0.9rem;
  }
}

/* --- 7. RESTANTE DO DESIGN --- */
.category-carousel {
  margin: 30px auto;
}
.carousel-track {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding-bottom: 20px;
  scroll-behavior: smooth;
}

.carousel-card {
  min-width: 180px;
  height: 280px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.carousel-card:hover {
  transform: scale(1.05);
}
.carousel-card img,
.main-story img,
.sub-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-overlay,
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, #000 20%, transparent 100%);
  padding: 15px;
}
.carousel-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

/* Ensures h4 and carousel titles are white */
h4 {
  color: #fff;
  margin: 0;
}

/* h3 titles inside cards should be white */
.overlay h3,
.carousel-overlay h3 {
  color: #fff !important;
  font-size: 0.9rem;
}

/* --- 7.5. NEWS GRID HORIZONTAL COM SIDEBAR --- */

/* Main container - 2 columns: content + sidebar */
.news-grid-section {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 40px;
  margin-bottom: 60px;
}

/* Main news column */
.news-main-column {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Horizontal news card */
.news-horizontal-card {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 25px;
  background: var(--card-bg);
  border-radius: 12px;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  border: 1px solid var(--border);
}

.news-horizontal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(255, 13, 13, 0.15);
}

/* News image */
.news-card-image {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.news-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-horizontal-card:hover .news-card-image img {
  transform: scale(1.05);
}

/* News content */
.news-card-content {
  padding: 20px 25px 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.news-category-tag {
  background: #ff0000;
  color: #fff;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  display: inline-block;
  border-radius: 3px;
  width: fit-content; /* Ajusta ao tamanho do texto */
}

.news-card-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
  margin: 0 0 12px 0;
  transition: color 0.2s ease;
}

.news-horizontal-card:hover .news-card-title {
  color: var(--accent);
}

.news-card-excerpt {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 15px;
}

body.light-theme .news-card-excerpt {
  color: rgba(0, 0, 0, 0.6);
}

.news-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

body.light-theme .news-card-meta {
  color: rgba(0, 0, 0, 0.5);
}

/* Sidebar "Viu isso?" */
.news-sidebar {
  position: sticky;
  top: 90px;
  height: fit-content;
}

.sidebar-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text);
  margin: 0 0 20px 0;
  padding-bottom: 15px;
  border-bottom: 3px solid var(--accent);
}

.sidebar-posts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Small sidebar card */
.sidebar-mini-card {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 15px;
  transition: transform 0.2s ease;
}

.sidebar-mini-card:hover {
  transform: translateX(5px);
}

.sidebar-mini-image {
  position: relative;
  width: 100px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
}

.sidebar-mini-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-mini-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sidebar-mini-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  margin: 0 0 8px 0;
  transition: color 0.2s ease;
}

.sidebar-mini-card:hover .sidebar-mini-title {
  color: var(--accent);
}

.sidebar-mini-meta {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

body.light-theme .sidebar-mini-meta {
  color: rgba(0, 0, 0, 0.5);
}

.sidebar-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 700;
  margin-top: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: gap 0.2s ease;
}

.sidebar-more:hover {
  gap: 12px;
}

/* Responsivo Mobile */
@media (max-width: 900px) {
  .news-grid-section {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .news-horizontal-card {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .news-card-image {
    height: 200px;
  }

  .news-card-content {
    padding: 20px;
  }

  .news-card-title {
    font-size: 1.3rem;
  }

  .news-sidebar {
    position: relative;
    top: 0;
  }

  .sidebar-mini-card {
    grid-template-columns: 90px 1fr;
    gap: 12px;
  }

  .sidebar-mini-image {
    width: 90px;
    height: 70px;
  }
}

/* --- GENERAL STYLES (OUTSIDE OF MOBILE) --- */

.main-story,
.sub-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-bg);
}
.main-story h2 {
  font-size: 2rem;
  margin: 10px 0;
  color: #fff;
  line-height: 1.1;
}

/* Layout Desktop - Hot Topics */
.news-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}

.main-story {
  grid-column: 1; /* Primeira coluna - post grande */
  grid-row: 1 / 3; /* Ocupa 2 linhas */
  height: 600px;
}

.sub-stories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  grid-column: 2; /* Segunda coluna */
  grid-row: 1 / 3;
}

.sub-card {
  height: 290px;
}

.badge {
  background: var(--accent);
  color: white;
  padding: 4px 8px;
  font-size: 0.6rem;
  font-weight: 800;
  border-radius: 4px;
  text-transform: uppercase;
  margin-bottom: 5px;
  display: inline-block;
}

/* Section titles with decorative line */
.section-title-wrapper h3,
.sidebar h3,
.widget h3 {
  font-size: 1.2rem;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-weight: 700;
}

.section-title-wrapper h3::after,
.sidebar h3::after,
.widget h3::after {
  content: "";
  height: 1px;
  width: 100%;
  background: #333;
  display: block;
}

/* Article/Post content headings - allow word wrap */
article h3,
.post-content h3,
.entry-content h3,
main h3:not(.section-title-wrapper h3):not(.sidebar h3):not(.widget h3) {
  font-size: 1.5rem;
  color: var(--text-color, #fff);
  font-weight: 700;
  margin: 30px 0 15px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* --- MOST VIEWED CAROUSEL --- */
.most-viewed-section {
  margin: 60px auto 40px;
}

.most-viewed-wrapper {
  position: relative;
}

.carousel-arrow {
  background: linear-gradient(145deg, #ff1a1a, #cc0000);
  color: #fff;
  border: none;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  font-size: 2.5rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Posicionamento absoluto */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  /* 3D Effect */
  box-shadow:
    0 8px 15px rgba(255, 13, 13, 0.4),
    0 4px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.carousel-arrow.prev-arrow {
  left: 20px;
}

.carousel-arrow.next-arrow {
  right: 20px;
}

.carousel-arrow::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent);
  border-radius: 10px 10px 0 0;
  pointer-events: none;
}

.carousel-arrow:hover {
  background: linear-gradient(145deg, #ff3333, #ff0000);
  box-shadow:
    0 12px 25px rgba(255, 13, 13, 0.6),
    0 6px 10px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  transform: translateY(-50%) scale(1.05);
}

.carousel-arrow:active {
  transform: translateY(-50%) scale(0.95);
  box-shadow:
    0 4px 8px rgba(255, 13, 13, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(0, 0, 0, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

/* MOST VIEWED CAROUSEL - 3D INFINITE STORIES STYLE */
.most-viewed-carousel {
  position: relative;
  width: 100%;
  height: 420px; /* Enough height for larger card + shadows */
  display: flex;
  justify-content: center;
  overflow: hidden; /* Hides what goes off screen */
  perspective: 1000px; /* For 3D effect if you want to improve in the future */
}

/* CARDS - Absolute Positioning for Smooth Animation */
.popular-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5); /* Default: hidden in center */
  width: 220px; /* Base width of central card */
  height: 380px;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth transition */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  opacity: 0;
  z-index: 0;
  pointer-events: none; /* Not clickable when hidden */
}

.popular-card img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- VISUAL POSITIONS --- */

/* CENTER (Active) */
.most-viewed-carousel .popular-card.pos-0 {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 10;
  filter: blur(0);
  pointer-events: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* RIGHT 1 */
.most-viewed-carousel .popular-card.pos-1 {
  transform: translate(calc(-50% + 140px), -50%) scale(0.85);
  opacity: 0.8;
  z-index: 5;
  filter: blur(1px);
  pointer-events: auto;
}

/* LEFT 1 */
.most-viewed-carousel .popular-card.pos--1 {
  transform: translate(calc(-50% - 140px), -50%) scale(0.85);
  opacity: 0.8;
  z-index: 5;
  filter: blur(1px);
  pointer-events: auto;
}

/* RIGHT 2 */
.most-viewed-carousel .popular-card.pos-2 {
  transform: translate(calc(-50% + 260px), -50%) scale(0.7);
  opacity: 0.4;
  z-index: 2;
  filter: blur(2px);
}

/* LEFT 2 */
.most-viewed-carousel .popular-card.pos--2 {
  transform: translate(calc(-50% - 260px), -50%) scale(0.7);
  opacity: 0.4;
  z-index: 2;
  filter: blur(2px);
}

/* Hidden but ready to enter (prevents visible teleportation) */
.most-viewed-carousel .popular-card.pos-3 {
  transform: translate(calc(-50% + 350px), -50%) scale(0.5);
  opacity: 0;
  z-index: 0;
}

.most-viewed-carousel .popular-card.pos--3 {
  transform: translate(calc(-50% - 350px), -50%) scale(0.5);
  opacity: 0;
  z-index: 0;
}

/* ===== CSS FALLBACK: Show cards even without JS ===== */
/* First card (center) - visible by default */
.popular-card:first-child {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 10;
  filter: blur(0);
  pointer-events: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Second card (right) - visible by default */
.popular-card:nth-child(2) {
  transform: translate(calc(-50% + 140px), -50%) scale(0.85);
  opacity: 0.8;
  z-index: 5;
  filter: blur(1px);
  pointer-events: auto;
}

/* Third card (left) - visible by default */
.popular-card:nth-child(3) {
  transform: translate(calc(-50% - 140px), -50%) scale(0.85);
  opacity: 0.8;
  z-index: 5;
  filter: blur(1px);
  pointer-events: auto;
}

/* When JS adds pos- classes, they override the :nth-child fallback */
.popular-card[class*="pos-"] {
  /* JS classes take precedence because they're more specific for visibility */
}

/* Remove empty ruleset - hover effect only on centered card */
.most-viewed-carousel .popular-card.pos-0:hover {
  transform: translate(-50%, -50%) scale(1.02);
}

/* Mobile: Responsive grid with horizontal scroll "Stories" style */
@media (max-width: 900px) {
  .carousel-arrow {
    display: none;
  }

  .most-viewed-section {
    margin: 30px auto;
  }

  .most-viewed-carousel {
    display: flex;
    gap: 15px;
    justify-content: flex-start;
    padding: 20px 20px 40px 20px; /* Extra bottom padding so shadow doesn't cut off */
    overflow-x: auto;
    overflow-y: hidden;
    min-height: auto;
    height: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    perspective: none;
  }

  .most-viewed-carousel::-webkit-scrollbar {
    display: none;
  }

  /* RESET TOTAL DOS CARDS NO MOBILE - Visual Premium */
  .popular-card,
  .popular-card.pos-0,
  .popular-card.pos-1,
  .popular-card.pos-2,
  .popular-card.pos-3,
  .popular-card.pos--1,
  .popular-card.pos--2,
  .popular-card.pos--3 {
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: 1 !important;
    pointer-events: auto !important;

    /* Tamanho fixo e visual - Mais largo */
    min-width: 280px;
    max-width: 280px;
    height: 380px; /* Increased height slightly to maintain proportion */

    flex-shrink: 0;
    scroll-snap-align: start; /* Aligns at start to facilitate "peek" of next item */
    border-radius: 16px;
    margin: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden;
    background-color: #000 !important;
    border: none !important;
  }

  /* Indicador de Rolagem Mobile */
  .mobile-scroll-hint {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    animation: pulseArrow 2s infinite;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  @keyframes pulseArrow {
    0% {
      transform: translateY(-50%) translateX(0);
      opacity: 0.8;
    }
    50% {
      transform: translateY(-50%) translateX(5px);
      opacity: 1;
    }
    100% {
      transform: translateY(-50%) translateX(0);
      opacity: 0.8;
    }
  }

  /* Force full fill */
  .popular-card a,
  .popular-card-inner {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  .popular-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important; /* Prevents theme restrictions */
  }

  /* Overlay de texto fixo na base */
  .popular-content-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 20px 15px !important;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.6) 60%,
      transparent 100%
    ) !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    height: auto !important;
  }

  .popular-card h4 {
    font-size: 1.2rem;
    margin: 5px 0;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  .popular-card .meta-info {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
  }

  .rating-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
  }

  /* Overlay text styling for mobile */
  .popular-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  .popular-meta {
    font-size: 0.75rem !important;
    gap: 6px !important;
    flex-wrap: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
  }

  .popular-author,
  .popular-date {
    font-size: 0.75rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.9);
  }

  .popular-meta .separator {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.6);
  }
}

.popular-card.hidden {
  display: flex; /* Mostra todos no mobile */
}

/* Scrollbar styles for carousel */
.most-viewed-carousel::-webkit-scrollbar {
  height: 6px;
}

.most-viewed-carousel::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.most-viewed-carousel::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 10px;
}

.most-viewed-carousel::-webkit-scrollbar-thumb:hover {
  background: #ff3333;
}

.popular-card-inner {
  position: relative;
  height: 100%; /* Alterado de 320px para preencher todo o card */
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.popular-card-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.popular-card:hover .popular-card-inner img {
  transform: scale(1.05);
}

.popular-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.7) 60%,
    transparent 100%
  );
  padding: 20px 15px 15px;
}

.popular-overlay h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2; /* Standard property for compatibility */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Titles remain white for readability over dark overlay */
body.light-theme .popular-overlay h4 {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Ajusta gradient do overlay no tema claro - permanece escuro para contraste */
body.light-theme .popular-overlay {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.65) 60%,
    transparent 100%
  );
}

/* Rating Badge (reutilizado) */
.rating-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border: 2px solid var(--accent);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
  z-index: 2;
}

/* NOTE: Mobile carousel styles are already defined above (line 2772-2931) */
/* This duplicate section has been removed to fix carousel bugs */

/* --- HOT TOPICS CAROUSEL (SIMPLES) --- */
.hot-carousel-wrapper {
  max-width: 1000px;
  margin: 0 auto 40px;
  position: relative; /* To position the arrows */
}

.hot-carousel {
  position: relative;
  width: 100%;
  height: 1000px;
  overflow: hidden;
  border-radius: 16px;
}

.hot-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
}

.hot-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.hot-slide a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.hot-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dots */
.hot-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.hot-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.hot-dots .dot.active {
  background: var(--accent);
  width: 30px;
  border-radius: 6px;
}

/* Mobile */
@media (max-width: 900px) {
  .hot-carousel {
    height: 500px;
  }
}

/* =========================================
   FOOTER STYLES
   ========================================= */

.site-footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 50px 20px;
  margin-top: 0; /* REMOVED gap */
}

.site-footer .container {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

/* Footer Brand/Logo */
.footer-brand {
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
}

.footer-brand span {
  color: var(--accent);
}

/* Footer Social Icons */
.footer-social {
  display: flex;
  gap: 15px;
  margin: 5px 0;
}

.footer-social .social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #fff;
  transition: all 0.3s ease;
  text-decoration: none;
}

.footer-social .social-icon:hover {
  background: var(--accent);
  transform: translateY(-3px);
}

/* Light Theme Social Icons */
body.light-theme .footer-social .social-icon {
  background: rgba(0, 0, 0, 0.05);
  color: #333;
}

body.light-theme .footer-social .social-icon:hover {
  background: var(--accent);
  color: #fff;
}

/* Footer Links Navigation */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.9rem;
}

.footer-links a {
  color: #999;
  text-decoration: none;
  transition: color 0.3s ease;
  padding: 5px 8px;
}

.footer-links a:hover {
  color: var(--accent);
}

.footer-divider {
  color: #555;
  user-select: none;
}

/* Footer Copyright */
.footer-copyright {
  color: #666;
  font-size: 0.85rem;
  margin: 0;
}

/* Light Theme Adjustments */
body.light-theme .site-footer {
  background-color: #f5f5f5;
  border-top-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .footer-brand {
  color: #000;
}

body.light-theme .footer-links a {
  color: #666;
}

body.light-theme .footer-links a:hover {
  color: var(--accent);
}

body.light-theme .footer-divider {
  color: #ccc;
}

body.light-theme .footer-copyright {
  color: #999;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .site-footer {
    padding: 40px 20px;
    margin-top: 60px;
  }

  .footer-brand {
    font-size: 1.3rem;
  }

  .footer-links {
    font-size: 0.85rem;
    gap: 10px;
  }

  /* On mobile, hide pipes and increase spacing or stack if needed */
  .footer-divider {
    display: none;
  }

  .footer-links a {
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
  }

  .footer-copyright {
    font-size: 0.8rem;
    text-align: center;
  }
}

/* ===== PÁGINAS DE CATEGORIA/ARQUIVO ===== */
.category-header {
  margin: 40px 0 50px 0;
  padding-bottom: 20px;
  border-bottom: 3px solid #ff0000;
}

.category-title {
  font-size: 2.5rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  letter-spacing: 2px;
}

.category-underline {
  width: 60px;
  height: 4px;
  background: #ff0000;
  margin-top: 10px;
}

/* LISTA DE POSTS */
.posts-list {
  max-width: 1200px;
  margin: 0 auto;
}

.post-item {
  display: flex;
  gap: 30px;
  margin-bottom: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid #222;
}

.post-item:last-child {
  border-bottom: none;
}

.post-thumbnail {
  position: relative;
  flex-shrink: 0;
  width: 400px;
  height: 280px;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.post-thumbnail:hover {
  transform: scale(1.02);
}

.post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #ff0000;
  color: #fff;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 4px;
  letter-spacing: 1px;
  white-space: nowrap;
  max-width: calc(100% - 30px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.post-title {
  font-size: 1.8rem;
  font-weight: 900;
  margin: 0 0 15px 0;
  line-height: 1.3;
}

.post-title a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.post-title a:hover {
  color: #ff0000;
}

.post-meta {
  font-size: 0.85rem;
  color: #999;
  margin-bottom: 15px;
}

.post-meta .separator {
  margin: 0 8px;
}

.post-excerpt {
  color: #ccc;
  line-height: 1.7;
  margin-bottom: 20px;
}

.read-more-btn {
  display: inline-block;
  background: rgba(255, 13, 13, 0.1);
  color: #fff;
  padding: 12px 24px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 13, 13, 0.3);
  letter-spacing: 1px;
  align-self: flex-start;
}

.read-more-btn:hover {
  background: rgba(255, 13, 13, 0.25);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 13, 13, 0.3);
  color: #fff;
}

/* Light theme read-more button */
body.light-theme .read-more-btn {
  background: rgba(255, 13, 13, 0.1);
  color: #333;
  border-color: rgba(255, 13, 13, 0.3);
}

body.light-theme .read-more-btn:hover {
  background: rgba(255, 13, 13, 0.15);
  border-color: var(--accent);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 13, 13, 0.2);
}

/* Pagination */
.pagination {
  margin-top: 60px;
  text-align: center;
}

.pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.pagination a,
.pagination .current {
  display: inline-block;
  padding: 10px 16px;
  background: #1a1a1a;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
  border: 1px solid #333;
}

.pagination a:hover,
.pagination .current {
  background: #ff0000;
  border-color: #ff0000;
}

.no-posts {
  text-align: center;
  padding: 60px 20px;
  color: #999;
  font-size: 1.2rem;
}

/* Mobile Responsivo */
@media (max-width: 900px) {
  .post-item {
    flex-direction: column;
    gap: 20px;
  }

  .post-thumbnail {
    width: 100%;
    height: 240px;
  }

  .category-title {
    font-size: 1.8rem;
  }

  .post-title {
    font-size: 1.4rem;
  }
}

/* ===== DEFAULT PAGES (page.php) ===== */
.page-content {
  max-width: 1000px;
  margin: 0 auto 60px auto;
}

.page-header {
  margin: 40px 0 50px 0;
  padding-bottom: 20px;
  border-bottom: 3px solid #ff0000;
}

.page-title {
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  letter-spacing: 2px;
}

.page-underline {
  width: 80px;
  height: 4px;
  background: #ff0000;
  margin-top: 10px;
}

.page-body {
  color: #ccc;
  line-height: 1.8;
  font-size: 1.1rem;
}

.page-body h2 {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  margin: 40px 0 20px 0;
}

.page-body h3 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 30px 0 15px 0;
}

.page-body p {
  margin-bottom: 1.5rem;
}

.page-body a {
  color: #ff0000;
  text-decoration: underline;
}

.page-body a:hover {
  color: #ff4444;
}

@media (max-width: 900px) {
  .page-title {
    font-size: 2rem;
  }

  .page-body {
    font-size: 1rem;
  }
}

/* ===== PÁGINA DE POST INDIVIDUAL (single.php) - NOVO DESIGN ===== */

/* Breadcrumb */
.breadcrumb {
  color: #777;
  font-size: 0.95rem;
  margin: 20px 0 30px 0;
}

.breadcrumb a {
  color: #999;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: #ff0000;
}

/* Layout 2 Colunas */
.post-layout {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 50px;
  margin-bottom: 80px;
}

/* Coluna Principal */
.post-main-column {
  min-width: 0;
}

/* Tags Pills */
.post-tag-pills {
  margin-bottom: 20px;
}

.tag-pill {
  display: inline-block;
  background: #ff0000;
  color: #fff;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: capitalize;
  text-decoration: none;
  border-radius: 3px;
  margin-right: 8px;
  margin-bottom: 8px;
  transition: background 0.3s ease;
}

.tag-pill:hover {
  background: #cc0000;
}

/* Main Title */
.post-main-title {
  font-size: 2.5rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 20px 0;
}

/* Meta Bar */
.post-meta-bar {
  display: flex;
  gap: 20px;
  color: #999;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.meta-icon {
  font-style: normal;
}

/* Social Buttons */
.social-share-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}

.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 38px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.shareبtn.facebook {
  background: #1877f2;
  color: #fff;
}

.share-btn.facebook:hover {
  background: #0c63d4;
}

.share-btn.twitter {
  background: #1da1f2;
  color: #fff;
}

.share-btn.twitter:hover {
  background: #0c8bd9;
}

.share-btn.reddit {
  background: #ff4500;
  color: #fff;
}

.share-btn.reddit:hover {
  background: #e03d00;
}

.share-btn.threads {
  background: #000;
  color: #fff;
  border: 1px solid #333;
}

.share-btn.threads:hover {
  background: #1a1a1a;
}

.share-btn.more {
  background: #666;
  color: #fff;
}

.share-btn.more:hover {
  background: #555;
}

/* Imagem Principal */
.post-main-image {
  margin-bottom: 30px;
  border-radius: 8px;
  overflow: hidden;
}

.post-main-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Post Content */
.post-text-content {
  color: #ccc;
  font-size: 1.05rem;
  line-height: 1.8;
}

.post-text-content p {
  margin-bottom: 1.5rem;
}

.post-text-content h2 {
  color: #fff;
  font-size: 1.9rem;
  font-weight: 700;
  margin: 40px 0 20px 0;
}

.post-text-content h3 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 30px 0 15px 0;
}

.post-text-content a {
  color: #ff0000;
  text-decoration: underline;
}

.post-text-content a:hover {
  color: #ff4444;
}

.post-text-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 25px 0;
}

.post-text-content blockquote {
  border-left: 4px solid #ff0000;
  padding-left: 20px;
  margin: 25px 0;
  font-style: italic;
  color: #ddd;
}

/* SIDEBAR HOT TOPICS */
.post-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
}

.sidebar-title {
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 8px 0;
  letter-spacing: 1px;
}

.sidebar-underline {
  width: 50px;
  height: 3px;
  background: #ff0000;
  margin-bottom: 25px;
}

/* Hot Post GRANDE (primeiro) */
.hot-post-featured {
  margin-bottom: 30px;
}

.hot-post-img {
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 15px;
}

.hot-post-img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.hot-post-img:hover img {
  transform: scale(1.05);
}

.rating-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 0, 0, 0.95);
  color: #fff;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.1rem;
}

.topic-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: #ff0000;
  color: #fff;
  padding: 4px 10px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 3px;
  letter-spacing: 0.5px;
  width: fit-content; /* Ajusta ao tamanho do texto */
}

.hot-post-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.hot-post-title a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.hot-post-title a:hover {
  color: #ff0000;
}

.hot-post-meta {
  font-size: 0.8rem;
  color: #999;
}

/* Hot Posts PEQUENOS */
.hot-post-small {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.hot-small-img {
  position: relative;
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  border-radius: 8px;
  overflow: hidden;
}

.hot-small-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.hot-small-img:hover img {
  transform: scale(1.1);
}

.rating-badge-small {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(255, 0, 0, 0.95);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.85rem;
}

.topic-badge-small {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: #ff0000;
  color: #fff;
  padding: 3px 8px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 3px;
  letter-spacing: 0.5px;
  width: fit-content; /* Ajusta ao tamanho do texto */
}

.hot-small-content {
  flex: 1;
  min-width: 0;
}

.hot-small-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 10px 0;
  line-height: 1.35;
}

.hot-small-title a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.hot-small-title a:hover {
  color: #ff0000;
}

.hot-small-date {
  font-size: 0.8rem;
  color: #777;
}

/* Mobile Responsivo */
@media (max-width: 1024px) {
  .post-layout {
    grid-template-columns: 1fr;
  }

  .post-sidebar {
    position: static;
    margin-top: 60px;
  }
}

@media (max-width: 768px) {
  .post-main-title {
    font-size: 1.8rem;
  }

  .post-meta-bar {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Post grande da sidebar - reduzido no mobile */
  .hot-post-img {
    height: 200px;
  }

  /* Small posts - compact horizontal layout */
  .hot-post-small {
    flex-direction: row;
    margin-bottom: 20px;
  }

  .hot-small-img {
    width: 80px;
    height: 80px;
  }

  .rating-badge-small {
    width: 26px;
    height: 26px;
    font-size: 0.7rem;
  }

  .topic-badge-small {
    font-size: 0.55rem;
    padding: 2px 6px;
  }

  .hot-small-title {
    font-size: 0.95rem;
  }
}

/* =========================================
   SECTION TITLE STYLES (STANDARDIZATION)
   ========================================= */
.section-title-wrapper {
  margin-bottom: 25px;
  position: relative;
  width: 100%;
}

.section-title {
  font-size: 1.8rem;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 0 8px 0;
  display: inline-block;
  letter-spacing: -0.5px;
  /* Color is controlled by global rules (white/black) */
}

.section-underline {
  width: 100%;
  height: 1px;
  background-color: #333; /* Linha base escura */
  position: relative;
  margin-top: 5px;
}

/* Linha vermelha destaque */
.section-underline::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px; /* Centraliza verticalmente com a linha base */
  height: 3px;
  width: 60px;
  background-color: var(--accent);
}

/* Ajuste para Light Mode */
body.light-theme .section-underline {
  background-color: #ccc;
}

/* =========================================
   CRITICAL FIX: TITLES ON OVERLAYS
   ========================================= */
/* These titles are over dark images, so they should ALWAYS be WHITE */
body.light-theme .hot-featured .overlay h2,
body.light-theme .hot-small-card .overlay h4,
body.light-theme .popular-card .popular-overlay h4,
body.light-theme .spotlight-featured .overlay h2,
body.light-theme .exclusive-card .overlay h4,
body.light-theme .overlay h2,
body.light-theme .overlay h3,
body.light-theme .overlay h4 {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); /* Sombra para garantir leitura */
}

/* Ensures links inside these titles are also white */
body.light-theme .hot-featured .overlay a,
body.light-theme .hot-small-card .overlay a,
body.light-theme .popular-card .popular-overlay a,
body.light-theme .spotlight-featured .overlay a,
body.light-theme .exclusive-card .overlay a {
  color: #ffffff !important;
}

/* ================================================
   CONTACT PAGE STYLES
   ================================================ */

.contact-page-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.contact-intro {
  text-align: center;
  margin-bottom: 60px;
}

.contact-intro h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: var(--text-color);
}

.contact-intro p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Grid de 2 Colunas */
.contact-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}

.contact-form-column h3,
.contact-info-column h3 {
  font-size: 1.8rem;
  margin-bottom: 30px;
  color: var(--text-color);
}

/* Contact Info Items */
.contact-info-item {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.contact-info-item:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}

body.light-theme .contact-info-item {
  background: rgba(0, 0, 0, 0.03);
}

body.light-theme .contact-info-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.contact-icon {
  font-size: 2rem;
  min-width: 50px;
}

.contact-details h4 {
  font-size: 1.2rem;
  margin-bottom: 8px;
  color: var(--text-color);
}

.contact-details p {
  color: var(--text-secondary);
  line-height: 1.6;
}

.contact-details a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.contact-details a:hover {
  opacity: 0.8;
}

/* Social Links in Contact */
.social-links-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.social-links-contact a {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(255, 0, 0, 0.1);
  border-radius: 8px;
  color: var(--text-color);
  text-decoration: none;
  transition: all 0.3s ease;
  width: fit-content;
}

.social-links-contact a:hover {
  background: var(--accent);
  color: #fff;
  transform: translateX(5px);
}

/* Form Placeholder */
.form-placeholder {
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  color: var(--text-secondary);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.light-theme .form-placeholder {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.2);
}

/* FAQ Section */
.contact-faq {
  background: rgba(255, 255, 255, 0.03);
  padding: 40px;
  border-radius: 12px;
  margin-top: 40px;
}

body.light-theme .contact-faq {
  background: rgba(0, 0, 0, 0.03);
}

.contact-faq h3 {
  font-size: 2rem;
  margin-bottom: 30px;
  color: var(--text-color);
}

.faq-item {
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.faq-item h4 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: var(--text-color);
}

.faq-item p {
  color: var(--text-secondary);
  line-height: 1.7;
}

.faq-item a {
  color: var(--accent);
  text-decoration: none;
}

.faq-item a:hover {
  text-decoration: underline;
}

/* Mobile Responsive */
@media (max-width: 900px) {
  .contact-content-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-intro h2 {
    font-size: 2rem;
  }

  .contact-form-column h3,
  .contact-info-column h3 {
    font-size: 1.5rem;
  }

  .contact-icon {
    font-size: 1.5rem;
    min-width: 40px;
  }

  .form-placeholder {
    padding: 30px 20px;
    min-height: 300px;
  }

  .contact-faq {
    padding: 30px 20px;
  }

  .contact-faq h3 {
    font-size: 1.6rem;
  }
}

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

.about-page .page-body {
  max-width: 1000px;
  margin: 0 auto;
}

.about-intro {
  text-align: center;
  margin-bottom: 60px;
}

.about-intro h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  color: var(--text-color);
}

.about-intro .lead {
  font-size: 1.3rem;
  color: var(--accent);
  font-weight: 500;
}

.about-mission,
.about-vision,
.about-cta {
  margin-bottom: 50px;
}

.about-mission h3,
.about-vision h3,
.about-cta h3 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: var(--text-color);
}

.about-mission p,
.about-vision p,
.about-cta p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 15px;
}

/* Categories Grid */
.about-categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin: 50px 0;
}

.category-item {
  background: rgba(255, 255, 255, 0.03);
  padding: 30px;
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.category-item:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

body.light-theme .category-item {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .category-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.category-icon {
  font-size: 3rem;
  margin-bottom: 15px;
}

.category-item h4 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: var(--text-color);
}

.category-item p {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* CTA Section */
.about-cta {
  background: linear-gradient(
    135deg,
    rgba(255, 0, 0, 0.1),
    rgba(255, 0, 0, 0.05)
  );
  padding: 40px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid rgba(255, 0, 0, 0.2);
}

.about-cta .cta-text {
  font-size: 1.3rem;
  color: var(--accent);
  font-weight: 600;
}

/* Mobile */
@media (max-width: 900px) {
  .about-categories {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .about-intro h2 {
    font-size: 2rem;
  }

  .about-mission h3,
  .about-vision h3,
  .about-cta h3 {
    font-size: 1.6rem;
  }

  .category-icon {
    font-size: 2.5rem;
  }
}

/* ================================================
   CONTACT FORM STYLES
   ================================================ */

.contact-form {
  width: 100%;
}

.form-group {
  margin-bottom: 25px;
}

.form-group label {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text-color);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-color);
  font-family: inherit;
  transition: all 0.3s ease;
}

body.light-theme .form-group input[type="text"],
body.light-theme .form-group input[type="email"],
body.light-theme .form-group textarea {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.2);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 0, 0, 0.05);
}

.form-group textarea {
  resize: vertical;
  min-height: 150px;
}

.contact-submit-btn {
  background: var(--accent);
  color: #fff;
  padding: 14px 40px;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.contact-submit-btn:hover {
  background: #cc0000;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(255, 0, 0, 0.4);
}

/* Success/Error Messages */
.contact-success,
.contact-error {
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 25px;
  font-weight: 500;
}

.contact-success {
  background: rgba(0, 255, 0, 0.1);
  border: 1px solid rgba(0, 255, 0, 0.3);
  color: #00ff00;
}

.contact-error {
  background: rgba(255, 0, 0, 0.1);
  border: 1px solid rgba(255, 0, 0, 0.3);
  color: #ff6b6b;
}

.contact-success p,
.contact-error p {
  margin: 0;
}

/* Mobile */
@media (max-width: 900px) {
  .contact-submit-btn {
    padding: 12px 30px;
    font-size: 1rem;
  }
}

/* ================================================
   AUTHOR BOX STYLES
   ================================================ */

.author-box {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin: 40px 0;
  position: relative;
}

body.light-theme .author-box {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

.author-avatar {
  flex-shrink: 0;
}

.author-avatar img {
  border-radius: 8px;
  width: 80px;
  height: 80px;
}

.author-info {
  flex-grow: 1;
}

.author-name {
  font-size: 1.3rem;
  margin: 0 0 10px 0;
  color: var(--text-color);
}

.author-bio {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.author-email {
  flex-shrink: 0;
}

.author-email a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text-secondary);
  transition: all 0.3s ease;
}

.author-email a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.1);
}

body.light-theme .author-email a {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

/* Mobile */
@media (max-width: 900px) {
  .author-box {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .author-email {
    margin-top: 10px;
  }
}

/* ================================================
   COMMENTS SECTION STYLES
   ================================================ */

.comments-section {
  margin-top: 60px;
}

.comments-area {
  background: rgba(255, 255, 255, 0.02);
  padding: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.light-theme .comments-area {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
}

.comments-title {
  font-size: 1.8rem;
  margin-bottom: 30px;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.comments-title::before {
  content: "💬";
  font-size: 1.5rem;
}

/* Comment List */
.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
}

.comment-list .comment {
  margin-bottom: 30px;
}

.comment-body {
  background: rgba(255, 255, 255, 0.03);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.light-theme .comment-body {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

.comment-author vcard {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 15px;
}

.comment-author img {
  border-radius: 50%;
  flex-shrink: 0;
}

.comment-metadata-wrapper {
  flex-grow: 1;
}

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

.comment-metadata {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 3px;
}

.comment-metadata time {
  color: var(--text-secondary);
}

.comment-content {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 15px;
}

.comment-content p {
  margin: 0 0 10px 0;
}

.reply-link {
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.reply-link:hover {
  opacity: 0.8;
}

/* Nested Comments */
.comment-list .children {
  list-style: none;
  padding-left: 40px;
  margin-top: 20px;
}

/* Comment Form */
.comment-reply-title {
  font-size: 1.6rem;
  margin-bottom: 25px;
  color: var(--text-color);
}

.reply-icon {
  font-size: 1.3rem;
  margin-right: 8px;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-form-comment,
.comment-form-author,
.comment-form-email {
  margin: 0;
}

.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"] {
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-color);
  font-family: inherit;
  transition: all 0.3s ease;
}

body.light-theme .comment-form textarea,
body.light-theme .comment-form input[type="text"],
body.light-theme .comment-form input[type="email"] {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.2);
}

.comment-form textarea:focus,
.comment-form input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 0, 0, 0.05);
}

.comment-form textarea {
  resize: vertical;
  min-height: 120px;
}

.submit-comment-btn {
  background: var(--accent);
  color: #fff;
  padding: 12px 35px;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.submit-comment-btn:hover {
  background: #cc0000;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(255, 0, 0, 0.4);
}

.no-comments {
  padding: 20px;
  text-align: center;
  color: var(--text-secondary);
  font-style: italic;
}

/* Comment Navigation */
.comment-navigation {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.comment-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.comment-navigation a {
  color: var(--accent);
  font-weight: 600;
  transition: opacity 0.3s ease;
}

.comment-navigation a:hover {
  opacity: 0.8;
}

/* Mobile */
@media (max-width: 900px) {
  .comments-area {
    padding: 25px 20px;
  }

  .comment-list .children {
    padding-left: 20px;
  }

  .comments-title {
    font-size: 1.5rem;
  }

  .comment-reply-title {
    font-size: 1.3rem;
  }

  .submit-comment-btn {
    width: 100%;
  }
}

/* ================================================
   LEGAL PAGES STYLES (Privacy Policy, Terms, etc.)
   ================================================ */

.legal-page {
  background: var(--bg);
  padding: 60px 0;
  min-height: 100vh;
}

.legal-page .container {
  max-width: 1400px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
  position: relative;
}

/* ===== LEGAL HEADER ===== */
.legal-header {
  margin-bottom: 50px;
  grid-column: 1 / -1;
}

.legal-title {
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  margin: 0 0 15px 0;
}

.legal-underline {
  width: 100px;
  height: 3px;
  background: var(--accent);
  margin-bottom: 20px;
}

.legal-date {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}

/* ===== SIDEBAR NAVIGATION ===== */
.legal-sidebar {
  position: sticky;
  top: 100px;
  height: fit-content;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 25px 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.legal-nav-title {
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  margin: 0 0 15px 0;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--accent);
}

.legal-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.legal-nav-list li {
  margin-bottom: 10px;
}

.legal-nav-list a {
  display: block;
  padding: 8px 12px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  border-radius: 6px;
}

.legal-nav-list a:hover {
  background: rgba(255, 0, 0, 0.1);
  color: var(--accent);
  padding-left: 18px;
}

.legal-nav-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 20px 0;
}

.legal-nav-subtitle {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
  margin: 15px 0 10px 0;
}

.legal-nav-related {
  list-style: none;
  padding: 0;
  margin: 0;
}

.legal-nav-related li {
  margin-bottom: 8px;
}

.legal-nav-related a {
  display: block;
  padding: 6px 12px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 0.85rem;
  transition: all 0.3s ease;
  border-left: 2px solid transparent;
}

.legal-nav-related a:hover {
  border-left-color: var(--accent);
  color: var(--accent);
  padding-left: 16px;
}

/* ===== MAIN CONTENT ===== */
.legal-body {
  grid-column: 2;
  max-width: 900px;
}

.legal-section {
  margin-bottom: 50px;
}

.legal-section h2 {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 20px 0;
}

.legal-section h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin: 30px 0 15px 0;
}

.legal-section p {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 15px;
}

.legal-section ul {
  margin: 15px 0 15px 25px;
  padding: 0;
}

.legal-section li {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 10px;
}

.legal-section li strong {
  color: var(--accent);
}

.legal-section a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.legal-section a:hover {
  border-bottom-color: var(--accent);
}

.legal-warning {
  background: rgba(255, 0, 0, 0.1);
  border-left: 4px solid var(--accent);
  padding: 15px 20px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.9);
}

.legal-highlight {
  background: rgba(255, 255, 255, 0.05);
  border-left: 4px solid var(--accent);
  padding: 15px 20px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.9);
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 25px 0;
  background: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
}

.legal-table thead {
  background: rgba(255, 0, 0, 0.15);
}

.legal-table th {
  padding: 15px 20px;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
}

.legal-table td {
  padding: 15px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
}

.legal-table tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.legal-contact {
  background: var(--card-bg);
  padding: 25px 30px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.legal-contact p {
  margin-bottom: 10px;
}

.legal-contact strong {
  color: var(--accent);
}

.legal-footer {
  margin-top: 60px;
  padding-top: 30px;
  border-top: 2px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.legal-footer p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

.legal-footer strong {
  color: #fff;
}

/* Light Theme */
body.light-theme .legal-page {
  background: var(--bg);
}

body.light-theme .legal-title {
  color: #1a1a1a;
}

body.light-theme .legal-date {
  color: rgba(0, 0, 0, 0.6);
}

body.light-theme .legal-sidebar {
  background: var(--card-bg);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-theme .legal-nav-title {
  color: #1a1a1a;
}

body.light-theme .legal-nav-list a {
  color: rgba(0, 0, 0, 0.7);
}

body.light-theme .legal-nav-list a:hover {
  background: rgba(255, 0, 0, 0.05);
  color: var(--accent);
}

body.light-theme .legal-nav-divider {
  background: rgba(0, 0, 0, 0.1);
}

body.light-theme .legal-nav-subtitle {
  color: rgba(0, 0, 0, 0.5);
}

body.light-theme .legal-nav-related a {
  color: rgba(0, 0, 0, 0.6);
}

body.light-theme .legal-section h2,
body.light-theme .legal-section h3 {
  color: #1a1a1a;
}

body.light-theme .legal-section p,
body.light-theme .legal-section li {
  color: rgba(0, 0, 0, 0.85);
}

body.light-theme .legal-warning {
  background: rgba(255, 0, 0, 0.05);
}

body.light-theme .legal-highlight {
  background: rgba(0, 0, 0, 0.03);
}

body.light-theme .legal-table {
  background: var(--card-bg);
}

body.light-theme .legal-table thead {
  background: rgba(255, 0, 0, 0.1);
}

body.light-theme .legal-table td {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.85);
}

body.light-theme .legal-table tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

body.light-theme .legal-contact {
  background: var(--card-bg);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-theme .legal-footer {
  border-top: 2px solid rgba(0, 0, 0, 0.1);
}

body.light-theme .legal-footer p {
  color: rgba(0, 0, 0, 0.6);
}

body.light-theme .legal-footer strong {
  color: #1a1a1a;
}

/* Mobile */
@media (max-width: 900px) {
  .legal-page .container {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 20px;
  }

  .legal-header {
    grid-column: 1;
  }

  .legal-title {
    font-size: 2rem;
  }

  .legal-sidebar {
    position: static;
    order: -1;
  }

  .legal-body {
    grid-column: 1;
  }

  .legal-section h2 {
    font-size: 1.5rem;
  }

  .legal-section h3 {
    font-size: 1.2rem;
  }

  .legal-table {
    font-size: 0.85rem;
  }

  .legal-table th,
  .legal-table td {
    padding: 10px 12px;
  }
}

/* ================================================
   SITE FOOTER (Nvidia Style)
   ================================================ */

.site-footer {
  background: var(--nav-bg); /* Black bar same as header */
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 25px 0 20px; /* Reduced from 40px 0 30px */
  margin-top: 0; /* REMOVED gap */
  backdrop-filter: blur(10px); /* Blur effect same as header */
}

.site-footer .container {
  max-width: 1280px;
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Reduced from 15px */
}

.footer-brand {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
}

.footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--accent);
}

.footer-divider {
  color: rgba(255, 255, 255, 0.3);
  user-select: none;
}

.footer-copyright {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  margin: 0;
}

/* Light Theme - Footer com fundo escuro igual ao header */
body.light-theme .site-footer {
  background: rgba(5, 5, 5, 0.95); /* Mesmo fundo do header */
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 25px 0 20px; /* Mesmo padding do tema escuro */
  margin-top: 60px; /* Mesmo margin do tema escuro */
}

/* Force white text in footer (background always dark) */
body.light-theme .footer-brand {
  color: #fff !important;
}

body.light-theme .footer-links a {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.light-theme .footer-links a:hover {
  color: var(--accent) !important;
}

body.light-theme .footer-divider {
  color: rgba(255, 255, 255, 0.3) !important;
}

body.light-theme .footer-copyright {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Mobile */
@media (max-width: 900px) {
  .site-footer {
    padding: 30px 0 100px;
    margin-top: 50px;
  }

  .footer-content {
    padding: 0 20px;
  }

  .footer-brand {
    font-size: 1.3rem;
  }

  .footer-links {
    gap: 8px;
    font-size: 0.85rem;
  }

  .footer-links a {
    font-size: 0.85rem;
  }
}
/* =========================================
   LOGO STYLES - CONSOLIDADO E SEM CONFLITOS
   ========================================= */

/* Logo container - Visibility styles - DON'T define position here (already defined in header) */
/* .site-branding position is defined in header styles above */

/* Logo link - ALWAYS VISIBLE */
.custom-logo-link {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-decoration: none;
}

/* Logo images - Base configuration */
.site-logo {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto;
  width: 300px;
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
  margin: 0;
  transform-origin: center;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  filter: brightness(1) saturate(1) drop-shadow(0 0 0px transparent);
}

/* Logo DARK - Visible in dark theme (default) */
.logo-dark,
.site-logo.logo-dark {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Logo LIGHT - Hidden in dark theme */
.logo-light,
.site-logo.logo-light {
  display: none !important;
}

/* Logo LIGHT - Visible in light theme */
body.light-theme .logo-light,
body.light-theme .site-logo.logo-light {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Logo DARK - Hidden in light theme */
body.light-theme .logo-dark,
body.light-theme .site-logo.logo-dark {
  display: none !important;
}

/* Hover effect on logo */
.custom-logo-link:hover .site-logo {
  filter: brightness(1.2) saturate(1.5)
    drop-shadow(0 0 10px rgba(255, 13, 13, 0.6));
  transform: scale(1.05);
  animation: pulse-glow 0.8s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
  from {
    filter: brightness(1.2) saturate(1.6)
      drop-shadow(0 0 10px rgba(255, 13, 13, 0.6));
  }
  to {
    filter: brightness(1.5) saturate(2)
      drop-shadow(0 0 20px rgba(255, 13, 13, 1));
  }
}

/* Mobile - Logo menor */
@media (max-width: 768px) {
  .site-logo {
    width: 280px;
    max-height: 100px;
    margin: 0;
  }

  .custom-logo-link:hover .site-logo {
    transform: scale(1.03);
  }
}

/* =========================================
   FOOTER LOGO STYLES - THEME TOGGLE
   ========================================= */
.footer-logo {
  margin-bottom: 15px; /* Reduced from 30px */
}

.footer-logo a {
  display: inline-block;
}

/* Footer logos - REDUCED size */
.footer-logo img {
  height: auto;
  width: 200px; /* Reduced from 300px */
  max-width: 100%;
  max-height: 70px; /* Reduced from 100px */
  object-fit: contain;
  transition: all 0.3s ease;
}

.footer-logo a:hover img {
  opacity: 0.8;
  transform: scale(1.05);
}

/* Logo DARK - Visible in dark theme */
.footer-logo-dark {
  display: block;
}

/* Logo LIGHT - Hidden in dark theme */
.footer-logo-light {
  display: none;
}

/* Logo DARK - Hidden in light theme */
body.light-theme .footer-logo-dark {
  display: none;
}

/* Logo LIGHT - Visible in light theme */
body.light-theme .footer-logo-light {
  display: block;
}

/* Footer Social Icons */
.footer-social {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
}

.footer-social .social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}

.footer-social .social-icon:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-3px);
}

/* Light Theme Social Icons - BRANCOS (fundo escuro) */
body.light-theme .footer-social .social-icon {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

body.light-theme .footer-social .social-icon:hover {
  background: var(--accent) !important;
  color: #fff !important;
}

/* Mobile Footer Logo - AJUSTADO */
@media (max-width: 768px) {
  .footer-logo img {
    width: 200px; /* Ajustado mobile */
    max-height: 80px;
  }
}

/* =========================================
   MOBILE RESPONSIVE - LOGO GRANDE & HAMBURGUER
   ========================================= */

@media (max-width: 768px) {
  /* HEADER - Layout centralizado APENAS MOBILE */
  .header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    min-height: 90px;
    position: relative;
  }

  /* THEME BUTTON - Absolute left position ONLY ON MOBILE */
  .header-right {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 10;
  }

  /* Hide social links on mobile */
  .header-right .social-links {
    display: none;
  }

  /* Theme button - Mobile size PROPORTIONAL TO LOGO */
  .theme-toggle {
    width: 55px;
    height: 55px;
    font-size: 1.5rem;
    padding: 0;
    margin: 0;
    transition: all 0.3s ease;
  }

  .theme-toggle:hover {
    transform: scale(1.1);
  }

  /* LOGO - Absolute center - MOBILE ONLY 768px or less */
  .site-branding {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
    width: auto;
    margin: 0;
  }

  .custom-logo-link {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .site-logo {
    width: auto !important;
    max-width: 320px !important;
    max-height: 80px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    transition: all 0.3s ease !important;
  }

  /* HAMBURGER MENU - Modern Design PROPORTIONAL TO LOGO */
  .mobile-menu-btn {
    position: relative !important;
    width: 55px !important;
    height: 55px !important;
    background: rgba(255, 13, 13, 0.1) !important;
    border: 2px solid rgba(255, 13, 13, 0.3) !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 100000 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    overflow: hidden !important;
    pointer-events: auto !important;
  }

  .mobile-menu-btn:hover {
    background: rgba(255, 13, 13, 0.2) !important;
    border-color: var(--accent) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 5px 15px rgba(255, 13, 13, 0.3) !important;
  }

  /* Linhas do Hamburguer - 3 linhas horizontais PROPORCIONAIS */
  .hamburger-line {
    display: block !important;
    width: 28px !important;
    height: 3.5px !important;
    background: linear-gradient(90deg, #ff0d0d, #ff3333) !important;
    border-radius: 3px !important;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    box-shadow: 0 0 8px rgba(255, 13, 13, 0.6) !important;
    position: relative !important;
  }

  /* Hover animation - lines expand */
  .mobile-menu-btn:hover .hamburger-line {
    width: 30px !important;
    box-shadow: 0 0 12px rgba(255, 13, 13, 0.8) !important;
  }

  /* First line - slight rotation */
  .hamburger-line:nth-child(1) {
    transform-origin: left !important;
  }

  /* Middle line - pulse effect */
  .hamburger-line:nth-child(2) {
    animation: pulse 2s ease-in-out infinite !important;
  }

  /* Third line - slight opposite rotation */
  .hamburger-line:nth-child(3) {
    transform-origin: left !important;
  }

  @keyframes pulse {
    0%,
    100% {
      opacity: 1;
      transform: scaleX(1);
    }
    50% {
      opacity: 0.8;
      transform: scaleX(0.95);
    }
  }

  /* Hide desktop navigation */
  .site-nav.desktop-only {
    display: none !important;
  }

  /* PREVENIR OVERFLOW */
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  * {
    max-width: 100% !important;
  }

  /* CONTAINERS - Width mobile */
  .site-content,
  .content-wrap,
  .footer-wrap {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* TABLETS - Layout intermediário */
@media (min-width: 769px) and (max-width: 1024px) {
  .site-logo {
    width: 250px !important;
    max-height: 60px !important;
  }

  .header-wrap {
    padding: 5px 25px !important;
  }
}

/* =========================================
   SEO FIX - Styles for post titles in cards
   Replacement of h2/h4 with <p> for correct hierarchy
   ========================================= */

/* Hot Topics - Card principal (era h2) */
.post-card-title {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 10px 0;
  padding: 0;
}

/* Hot Topics - Small cards (was h4) */
.post-card-title-small {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 8px 0;
  padding: 0;
}

/* Most Viewed - Card titles (was h4) */
.popular-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 8px 0;
  padding: 0;
}

/* Spotlight - Featured title (was h2) */
.spotlight-featured-title {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 10px 0;
  padding: 0;
}

/* Exclusives - Card titles (was h4) */
.exclusive-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 8px 0;
  padding: 0;
}

/* Sidebar Must See - Titles (was h4) */
.sidebar-mini-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 5px 0;
  padding: 0;
}

/* Light Theme - Adaptations */
/* REMOVED: These titles appear over dark overlays, so they should ALWAYS be white */
/* to ensure readability, regardless of active theme */
/*
body.light-theme .post-card-title,
body.light-theme .post-card-title-small,
body.light-theme .popular-card-title,
body.light-theme .spotlight-featured-title,
body.light-theme .exclusive-card-title,
body.light-theme .sidebar-mini-title {
  color: #1a1a1a;
}
*/

/* EXCEPTION: Sidebar titles (MUST SEE) are on LIGHT background, not on overlay */
/* so they need to be black in light theme to be visible */
body.light-theme .sidebar-mini-title,
body.light-theme .news-card-title {
  color: #1a1a1a !important;
}

/* Mobile - Ajustes de tamanho */
@media (max-width: 768px) {
  .post-card-title {
    font-size: 1.4rem;
  }

  .spotlight-featured-title {
    font-size: 1.5rem;
  }

  .post-card-title-small,
  .popular-card-title,
  .exclusive-card-title {
    font-size: 1rem;
  }

  .sidebar-mini-title {
    font-size: 0.9rem;
  }
}

/* =========================================
   SINGLE POST - CATEGORY TAG PILLS
   ========================================= */

/* Container for category tag pills */
.post-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

/* Individual category pill badge */
.tag-pill {
  display: inline-block;
  padding: 8px 20px;
  background: var(--accent);
  color: #ffffff !important; /* Always white text */
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(255, 13, 13, 0.3);
}

.tag-pill:hover {
  background: #ff3333;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 13, 13, 0.5);
  color: #ffffff !important; /* Keep white on hover */
}

/* Light Theme - Keep white text for visibility */
body.light-theme .tag-pill {
  color: #ffffff !important; /* White text even in light theme */
  background: var(--accent);
}

body.light-theme .tag-pill:hover {
  color: #ffffff !important;
  background: #ff3333;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .tag-pill {
    font-size: 0.75rem;
    padding: 6px 16px;
  }
}

/* =========================================
   SOCIAL SHARE BUTTONS - MODERN DESIGN
   ========================================= */

.social-share-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 25px 0;
  flex-wrap: wrap;
}

/* Individual share button - modern circular style matching header */
.share-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px; /* Rounded like category badges, not fully circular */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ccc;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  text-decoration: none;
  cursor: pointer;
}

.share-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: all 0.3s ease;
}

/* Neon hover effect - Dark theme */
.share-btn:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.15) rotate(5deg);
  box-shadow:
    0 0 20px rgba(255, 13, 13, 0.6),
    inset 0 0 8px rgba(255, 13, 13, 0.3);
  text-shadow: 0 0 8px rgba(255, 13, 13, 0.9);
}

/* Light Theme Styling */
body.light-theme .share-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.15);
  color: #555;
}

body.light-theme .share-btn:hover {
  background: rgba(255, 13, 13, 0.1);
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.15) rotate(5deg);
  box-shadow:
    0 0 20px rgba(255, 13, 13, 0.5),
    inset 0 0 8px rgba(255, 13, 13, 0.2);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .social-share-buttons {
    gap: 10px;
    margin: 20px 0;
  }

  .share-btn {
    width: 40px;
    height: 40px;
  }

  .share-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* =========================================
   HOT TOPICS - CATEGORY BADGES
   ========================================= */

/* Category badges - base styles */
.overlay span[class*="badge"] {
  display: inline-block;
  padding: 6px 14px;
  background: var(--accent);
  color: #ffffff !important;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 4px;
  margin-bottom: 12px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* GLOBAL FIX: Force ALL category badges to single line */
[class*="badge-color-"],
.badge,
.post-badge,
.category-badge,
.topic-badge,
span[class*="badge"] {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  display: inline-block !important;
}

/* CRITICAL FIX: Prevent badges from inheriting link hover color */
/* This prevents red text on red background when hovering cards */
a:hover .overlay span[class*="badge"],
a .overlay span[class*="badge"]:hover,
.hot-featured:hover .overlay span[class*="badge"],
.hot-small-card:hover .overlay span[class*="badge"],
.spotlight-featured:hover .overlay span[class*="badge"],
.exclusive-card:hover .overlay span[class*="badge"],
.news-card:hover .overlay span[class*="badge"],
.post-card:hover .overlay span[class*="badge"] {
  color: #ffffff !important; /* Always white, never red */
}

/* Specific colors for each category are generated automatically via PHP */
/* Veja functions.php -> sytechzone_category_colors_css() */

/* Default badge fallback */
.badge {
  background: var(--accent) !important;
}

/* Mobile - smaller badges to prevent overflow */
@media (max-width: 768px) {
  .overlay span[class*="badge"] {
    padding: 4px 10px;
    font-size: 0.6rem;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
  }

  /* Hot Topics small cards - even smaller badges */
  .hot-small-card .overlay span[class*="badge"] {
    padding: 3px 8px;
    font-size: 0.55rem;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .overlay span[class*="badge"] {
    padding: 3px 8px;
    font-size: 0.55rem;
  }

  .hot-small-card .overlay span[class*="badge"] {
    padding: 2px 6px;
    font-size: 0.5rem;
  }
}

/* ================================================
   CATEGORY TAG PILLS (Single Post Page)
   ================================================ */
.post-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 15px 0 20px 0;
}

.tag-pill {
  display: inline-block;
  background: var(--accent);
  color: #ffffff !important; /* Branco para melhor leitura */
  padding: 8px 18px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 25px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.tag-pill:hover {
  background: #cc0000;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4);
  color: #ffffff !important;
}

/* Light theme - keeps text white */
body.light-theme .tag-pill {
  color: #ffffff !important;
}

body.light-theme .tag-pill:hover {
  color: #ffffff !important;
}

/* ============================================
   HEADER SEARCH BUTTON & OVERLAY
   ============================================ */

/* Desktop Search Button - Large, next to theme toggle */
.header-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(255, 13, 13, 0.15),
    rgba(255, 13, 13, 0.05)
  );
  border: 2px solid rgba(255, 13, 13, 0.25);
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.header-search-toggle:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 13, 13, 0.3),
    rgba(255, 13, 13, 0.1)
  );
  border-color: rgba(255, 13, 13, 0.5);
  box-shadow: 0 0 20px rgba(255, 13, 13, 0.4);
  transform: scale(1.05);
}

.header-search-toggle svg {
  fill: #fff;
}

/* Mobile Search Button - next to hamburger */
.mobile-search-btn {
  display: none; /* Hidden on desktop */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mobile-search-btn:hover {
  background: rgba(255, 13, 13, 0.2);
  border-color: rgba(255, 13, 13, 0.4);
}

.mobile-search-btn svg {
  fill: #fff;
}

/* Search Overlay - HIDDEN by default */
.header-search-overlay {
  display: none; /* Completely hidden */
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  background: rgba(10, 10, 10, 0.98);
  padding: 20px;
  z-index: 99999;
  border-bottom: 2px solid var(--accent);
}

/* Show overlay when active */
.header-search-overlay.active {
  display: block;
}

body.light-theme .header-search-overlay {
  background: rgba(250, 250, 250, 0.98);
  border-bottom-color: var(--accent);
}

/* Search Overlay Container */
.search-overlay-container {
  display: flex;
  align-items: center;
  max-width: 700px;
  margin: 0 auto;
  gap: 15px;
}

/* Search Form */
.header-search-form {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 10px;
}

.header-search-form input[type="search"] {
  flex: 1;
  padding: 14px 20px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s ease;
}

.header-search-form input[type="search"]:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
}

.header-search-form input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

body.light-theme .header-search-form input[type="search"] {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.05);
  color: #1a1a1a;
}

body.light-theme .header-search-form input[type="search"]::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

/* Search Submit Button */
.header-search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.header-search-submit:hover {
  background: #cc0000;
  transform: scale(1.05);
}

.header-search-submit svg {
  fill: #fff;
}

/* Close Button */
.search-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #aaa;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.search-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

body.light-theme .search-close-btn {
  background: rgba(0, 0, 0, 0.08);
  color: #666;
}

body.light-theme .search-close-btn:hover {
  background: rgba(0, 0, 0, 0.12);
  color: #333;
}

/* Mobile Responsive */
@media (max-width: 900px) {
  /* Hide desktop search button on mobile */
  .header-search-toggle {
    display: none;
  }

  /* HIDE mobile search button in header - now inside mobile menu */
  .mobile-search-btn {
    display: none !important;
  }

  .header-search-overlay {
    top: 60px;
  }

  .search-overlay-container {
    flex-direction: row;
    gap: 10px;
  }

  .header-search-form input[type="search"] {
    padding: 12px 16px;
    font-size: 0.95rem;
  }

  .header-search-submit {
    width: 44px;
    height: 44px;
  }

  .search-close-btn {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
}

/* ============================================
   MOBILE MENU OVERLAY - FULL SCREEN
   ============================================ */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 5, 5, 0.98);
  z-index: 100001;
  padding: 80px 30px 30px 30px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease;
}

.mobile-nav-overlay.active {
  display: block;
}

/* Close button */
.mobile-nav-overlay .close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: rgba(255, 13, 13, 0.1);
  border: 2px solid rgba(255, 13, 13, 0.3);
  border-radius: 50%;
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mobile-nav-overlay .close-btn:hover {
  background: rgba(255, 13, 13, 0.2);
  transform: scale(1.1);
}

/* Mobile Menu Search Form */
.mobile-menu-search {
  margin-bottom: 30px;
}

.mobile-search-form {
  display: flex;
  gap: 10px;
  width: 100%;
}

.mobile-search-form input[type="search"] {
  flex: 1;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s ease;
}

.mobile-search-form input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.mobile-search-form input[type="search"]:focus {
  border-color: var(--accent);
  background: rgba(255, 13, 13, 0.05);
}

.mobile-search-form button[type="submit"] {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #ff0d0d, #cc0000);
  border: none;
  border-radius: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.mobile-search-form button[type="submit"]:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 20px rgba(255, 13, 13, 0.4);
}

.mobile-search-form button svg {
  fill: #fff;
}

/* Mobile Nav Links */
.mobile-nav-links {
  display: flex;
  flex-direction: column;
}

.mobile-nav-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav-links li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-nav-links li a {
  display: block;
  padding: 18px 0;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.mobile-nav-links li a:hover {
  color: var(--accent);
  padding-left: 10px;
}

/* Submenu in mobile */
.mobile-nav-links ul ul {
  padding-left: 20px;
  display: none;
}

.mobile-nav-links li.menu-item-has-children > a {
  position: relative;
}

.mobile-nav-links li.menu-item-has-children > a::after {
  content: "▾";
  position: absolute;
  right: 0;
  font-size: 0.8rem;
  color: #fff; /* Explicit white for dark theme */
  transition: transform 0.3s ease;
}

.mobile-nav-links li.menu-item-has-children.active > a::after {
  transform: rotate(180deg);
  color: #fff; /* Maintain white when active in dark theme */
}

.mobile-nav-links li.menu-item-has-children.active > ul {
  display: block;
}

.mobile-nav-links ul ul li a {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  padding: 12px 0;
}

/* Light theme mobile menu */
body.light-theme .mobile-nav-overlay {
  background: rgba(255, 255, 255, 0.98);
}

body.light-theme .mobile-nav-overlay .close-btn {
  background: rgba(255, 13, 13, 0.1);
  color: #333;
}

body.light-theme .mobile-search-form input[type="search"] {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: #333;
}

body.light-theme .mobile-search-form input[type="search"]::placeholder {
  color: rgba(0, 0, 0, 0.5);
}

body.light-theme .mobile-nav-links li {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

body.light-theme .mobile-nav-links li a {
  color: #333;
}

body.light-theme .mobile-nav-links li a:hover {
  color: var(--accent);
}

body.light-theme .mobile-nav-links ul ul li a {
  color: rgba(0, 0, 0, 0.6);
}

/* Light theme - submenu arrows */
body.light-theme .mobile-nav-links li.menu-item-has-children > a::after {
  color: #333 !important; /* Dark arrow for light theme */
}

body.light-theme .mobile-nav-links li.menu-item-has-children.active > a::after {
  color: #333 !important; /* Dark arrow when active in light theme */
}

/* ============================================
   MOBILE CAROUSEL - MOST VIEWED (IMPROVED)
   ============================================ */
@media (max-width: 900px) {
  .most-viewed-carousel {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    position: relative;
    width: 100%;
    display: flex !important;
    gap: 15px;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
  }

  .most-viewed-carousel .popular-card {
    flex-shrink: 0;
    min-width: 280px;
    width: 280px;
    scroll-snap-align: start;
  }

  /* Prevent text selection during drag */
  .most-viewed-carousel * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

  /* Smooth touch scrolling */
  .most-viewed-carousel {
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-x pan-y;
  }
}

/* ============================================
   CLS FIX - CUMULATIVE LAYOUT SHIFT PREVENTION
   ============================================ */

/* Reserve space for main content to prevent layout shift */
main {
  min-height: auto; /* FIXED: was causing layout issues */
  contain: layout style;
}

/* Hot Topics Grid - Reserve space with aspect-ratio */
.hot-grid {
  contain: layout;
  min-height: 600px; /* Matches .hot-featured height */
}

/* Hot Featured - Ensure proper containment */
.hot-featured {
  contain: layout style;
  /* Removed aspect-ratio: 5/3 - it was forcing width to 1000px */
}

.hot-featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Small cards - already have aspect-ratio: 1/1, add contain */
.hot-small-card {
  contain: layout style;
}

/* Section title - Reserve space */
.section-title-wrapper {
  min-height: 60px;
  contain: layout;
}

.section-title {
  min-height: 40px;
}

/* Header - Prevent layout shift */
.site-header {
  contain: layout style;
}

.header-right {
  contain: layout;
  min-width: 200px;
}

/* Logo - Fixed dimensions to prevent CLS */
.site-branding {
  min-width: 180px;
  min-height: 50px;
  contain: layout;
}

.site-logo {
  width: 180px;
  height: 50px;
  aspect-ratio: 180/50;
}

/* Post thumbnails - Reserve space */
.post-card img,
.exclusive-card img,
.popular-card img,
.spotlight-card img {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
  object-fit: cover;
  background-color: var(--card-bg);
}

/* Sidebar posts - Reserve space */
.sidebar-post img {
  aspect-ratio: 1/1;
  width: 80px;
  height: 80px;
  object-fit: cover;
  flex-shrink: 0;
  background-color: var(--card-bg);
}

/* Web fonts should use font-display: swap - already configured in Google Fonts URL */

/* Skeleton loading placeholder for images */
img:not([src]),
img[src=""] {
  background: linear-gradient(
    90deg,
    var(--card-bg) 25%,
    #1a1a1a 50%,
    var(--card-bg) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Mobile specific CLS fixes */
@media (max-width: 768px) {
  .hot-grid {
    min-height: 400px;
  }

  .hot-featured {
    height: auto;
    min-height: 300px;
    /* Removed aspect-ratio: 16/9 to prevent potential layout breaking */
  }

  .site-logo {
    width: 150px;
    height: auto;
    max-height: 200px;
  }

  .header-right {
    min-width: auto;
  }
}

/* Hide Dashboard link from public navigation */
.main-navigation a[href*="growth-report"],
.main-navigation a[href*="dashboard"],
.menu-item a[href*="growth-report"],
.menu-item a[href*="dashboard"],
.main-navigation li:has(a[href*="growth-report"]),
.main-navigation li:has(a[href*="dashboard"]) {
  display: none !important;
}

/* ============================================
   IMAGE CONTAINMENT FIX - SAFE VERSION
   Prevents large images from breaking layout
   without interfering with existing styles
   ============================================ */

/* === CONTAINER OVERFLOW PROTECTION === */
.hot-grid,
.hot-topics-grid,
.spotlight-exclusives-wrapper,
.exclusives-grid,
.hot-small-wrapper,
.hot-grid-small {
  overflow: hidden;
}

/* === IMAGE SAFETY - All card images === */
/* Using position absolute ensures images don't escape their containers */
.hot-featured img,
.hot-small-card img,
.spotlight-featured img,
.exclusive-card img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
  display: block;
}

.carousel-card img,
.popular-card img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
  display: block;
}

/* === GENERAL IMAGE OVERFLOW PREVENTION === */
img {
  max-width: 100%;
}

/* Ensure cards with images have proper containment */
.hot-featured,
.hot-small-card,
.spotlight-featured,
.exclusive-card,
.carousel-card {
  position: relative !important;
  overflow: hidden !important;
}

/* Popular-card needs position: absolute for carousel, but overflow: hidden for images */
.popular-card {
  overflow: hidden !important;
}

/* ===========================================
   HIDE DASHBOARD IN MOBILE MENU
   Only show Dashboard on desktop for admins
   =========================================== */
@media (max-width: 1200px) {
  /* Hide Dashboard link in mobile menu */
  .mobile-nav-overlay .menu-item a[href*="dashboard"],
  .mobile-nav-overlay .menu-item a[href*="growth-dashboard"],
  .mobile-nav-overlay li a[href*="dashboard"],
  .mobile-nav-links .menu-item a[href*="dashboard"],
  .mobile-nav-links li a[href*="dashboard"] {
    display: none !important;
  }

  /* Also hide by menu item text content (backup) */
  .mobile-nav-overlay .menu-item:has(a[href*="dashboard"]),
  .mobile-nav-links .menu-item:has(a[href*="dashboard"]) {
    display: none !important;
  }
}

/* Hide specifically the Dashboard menu item by class if WordPress adds one */
.mobile-nav-overlay .menu-item-dashboard,
.mobile-nav-links .menu-item-dashboard {
  display: none !important;
}

/* ===========================================
   CARD TITLES - MAX 2 LINES (LINE CLAMP)
   Prevents long titles from breaking layouts
   =========================================== */

/* All card titles limited to 2 lines */
.exclusive-card-title,
.post-card-title,
.post-card-title-small,
.popular-card-title,
.spotlight-featured-title,
.sidebar-mini-title,
.news-card-title,
.hot-featured .overlay h3,
.hot-small-card .overlay h4 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word;
  max-height: 2.8em; /* fallback for browsers without line-clamp */
}

/* Sidebar titles - 2 lines max */
.sidebar-mini-title {
  -webkit-line-clamp: 2 !important;
  max-height: 2.6em;
}

/* Spotlight featured - 2 lines max (larger title) */
.spotlight-featured-title {
  -webkit-line-clamp: 2 !important;
  max-height: 2.6em;
}

/* Mobile - Same 2 line limit */
@media (max-width: 900px) {
  .exclusive-card-title,
  .post-card-title,
  .post-card-title-small,
  .popular-card-title,
  .spotlight-featured-title,
  .sidebar-mini-title,
  .news-card-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: 2.8em;
  }
}

/* ===========================================
   HOT TOPICS BADGE FIX - Small, proper size
   =========================================== */

/* Badges inside Hot Topics cards - small pill style */
.hot-featured .overlay > span[class*="badge"],
.hot-small-card .overlay > span[class*="badge"],
.hot-featured .overlay > span:first-child,
.hot-small-card .overlay > span:first-child {
  display: inline-block !important;
  width: auto !important;
  max-width: fit-content !important;
  padding: 4px 12px !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 10px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: #e31b23 !important; /* Fallback red */
  color: #fff !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Mobile Hot Topics Cards */
@media (max-width: 900px) {
  .hot-featured .overlay > span[class*="badge"],
  .hot-small-card .overlay > span[class*="badge"],
  .hot-featured .overlay > span:first-child,
  .hot-small-card .overlay > span:first-child {
    padding: 3px 8px !important;
    font-size: 0.55rem !important;
    margin-bottom: 6px !important;
  }
}

/* ===========================================
   LIGHT THEME READABILITY FIXES
   Article content, lists, author, dates, etc.
   =========================================== */

/* Article/Post content - improved contrast for text */
body.light-theme article,
body.light-theme .post-content,
body.light-theme .entry-content,
body.light-theme .site-content {
  color: #2d2d2d !important;
}

/* Lists in light theme - better visibility */
body.light-theme article ul,
body.light-theme article ol,
body.light-theme .post-content ul,
body.light-theme .post-content ol,
body.light-theme .entry-content ul,
body.light-theme .entry-content ol {
  color: #333333 !important;
}

body.light-theme article li,
body.light-theme .post-content li,
body.light-theme .entry-content li {
  color: #333333 !important;
  margin-bottom: 8px;
}

/* Emphasized/Italic text - darker in light theme */
body.light-theme article em,
body.light-theme article i,
body.light-theme .post-content em,
body.light-theme .post-content i,
body.light-theme .entry-content em,
body.light-theme .entry-content i {
  color: #4a4a4a !important;
  font-style: italic;
}

/* Strong/Bold text */
body.light-theme article strong,
body.light-theme article b,
body.light-theme .post-content strong,
body.light-theme .post-content b,
body.light-theme .entry-content strong,
body.light-theme .entry-content b {
  color: #1a1a1a !important;
  font-weight: 700;
}

/* Paragraphs */
body.light-theme article p,
body.light-theme .post-content p,
body.light-theme .entry-content p {
  color: #333333 !important;
  line-height: 1.8;
}

/* Author/Date/Meta in article header (NOT on overlays) */
body.light-theme .post-header .author,
body.light-theme .post-header .date,
body.light-theme .post-header .post-date,
body.light-theme .post-header .post-author,
body.light-theme .post-header .meta-info,
body.light-theme .post-header time,
body.light-theme .single-post .author,
body.light-theme .single-post .date,
body.light-theme .single-post time,
body.light-theme .single-post .post-meta,
body.light-theme .single-meta,
body.light-theme .single-meta span,
body.light-theme .byline,
body.light-theme .posted-on,
body.light-theme .updated-on {
  color: #555555 !important;
}

/* Updated info */
body.light-theme .updated,
body.light-theme .last-updated,
body.light-theme [class*="updated"] {
  color: #666666 !important;
}

/* Breadcrumbs in light theme */
body.light-theme .breadcrumbs,
body.light-theme .breadcrumbs a,
body.light-theme .breadcrumb,
body.light-theme .breadcrumb a {
  color: #555555 !important;
}

body.light-theme .breadcrumbs a:hover,
body.light-theme .breadcrumb a:hover {
  color: var(--accent) !important;
}

/* Post categories in header */
body.light-theme .post-categories a,
body.light-theme .cat-links a,
body.light-theme .entry-categories a {
  color: #555555 !important;
}

/* Code and pre blocks */
body.light-theme article code,
body.light-theme article pre,
body.light-theme .post-content code,
body.light-theme .post-content pre,
body.light-theme .entry-content code,
body.light-theme .entry-content pre {
  background: #f0f0f0 !important;
  color: #333333 !important;
  border: 1px solid #ddd;
}

/* Blockquotes */
body.light-theme article blockquote,
body.light-theme .post-content blockquote,
body.light-theme .entry-content blockquote {
  color: #444444 !important;
  border-left: 4px solid var(--accent);
  background: #f8f8f8;
}

/* Table of contents if any */
body.light-theme .toc,
body.light-theme .table-of-contents {
  color: #333333 !important;
  background: #f8f8f8;
}

/* Related posts dates */
body.light-theme .related-posts .date,
body.light-theme .related-posts time {
  color: #666666 !important;
}

/* Single Post Specific - Light Theme Fixes */
body.light-theme .meta-author-line,
body.light-theme .meta-date-line,
body.light-theme .meta-by,
body.light-theme .author-link,
body.light-theme .author-location,
body.light-theme .meta-separator,
body.light-theme .meta-updated,
body.light-theme .post-meta-g1,
body.light-theme .post-meta-g1 span,
body.light-theme .post-meta-g1 a,
body.light-theme .hot-post-meta,
body.light-theme .hot-small-date {
  color: #555555 !important;
}

body.light-theme .author-link:hover {
  color: var(--accent) !important;
}

/* Post text content area */
body.light-theme .post-text-content,
body.light-theme .post-text-content p,
body.light-theme .post-text-content li,
body.light-theme .post-text-content h2,
body.light-theme .post-text-content h3,
body.light-theme .post-text-content h4 {
  color: #2d2d2d !important;
}

/* Post text links */
body.light-theme .post-text-content a {
  color: var(--accent) !important;
}

body.light-theme .post-text-content a:hover {
  text-decoration: underline;
}

/* Category links at the top of single posts */
body.light-theme .post-categories-top a,
body.light-theme .category-link {
  color: #666666 !important;
  text-decoration: none;
}

body.light-theme .post-categories-top a:hover,
body.light-theme .category-link:hover {
  color: var(--accent) !important;
}

/* Author box in light theme */
body.light-theme .author-box {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
}

body.light-theme .author-name {
  color: #1a1a1a !important;
}

body.light-theme .author-bio {
  color: #444444 !important;
}