/*
Theme Name: Passionate Living (Twenty Twenty-Five Child)
Theme URI: https://passionateliving.local
Description: A modern, vibrant child theme for Passionate Living, built on Twenty Twenty-Five.
Author: Antigravity
Template: twentytwentyfive
Version: 2.2.3
Text Domain: passionate-living
*/

/* Auto-deployment active - webhook + git hook + rsync */

/* EMERGENCY FIX: Hide the oval logo that shouldn't be on staging */
.hero-logo-glow,
.hero-logo.hero-logo-glow,
figure.hero-logo-glow {
  display: none !important;
  visibility: hidden !important;
}

/* ========================================
   GOOGLE FONTS
   Note: Fonts loaded via theme.json fontFace definitions (not @import)
   ======================================== */

/* ========================================
   CSS CUSTOM PROPERTIES (Brand Kit)
   ======================================== */
:root {
  /* PRIMARY: Pure Gold Palette (2025 Gold-Only Update) */
  --golden-yellow: #ffd700; /* PRIMARY - Bright Gold */
  --gold-bright: #ffc700; /* Shimmer Highlights */
  --gold-deep: #b8860b; /* Deep Gold for Depth */
  --gold-metallic: #d4af37; /* Metallic Gold */

  /* NEUTRALS - WCAG AA COMPLIANT */
  --cream: #fff8f0; /* Cream Background - 19.5:1 contrast on dark */
  --warm-beige: #f5e6d3; /* Gold-tinted Beige - 16.8:1 contrast on dark */
  --warm-gray: #c0c0c0; /* Body Text Gray - WCAG AA compliant (7.1:1 on dark) */
  --dark-charcoal: #2d2d2d; /* Headlines */
  --rich-black: #1a1a1a; /* Dark Backgrounds for Gold */
  --white: #ffffff; /* Pure White - 21:1 contrast on black */

  /* WCAG AA Text Colors for Gold Particles Background */
  --text-on-gold-primary: #ffffff; /* Primary text - highest contrast */
  --text-on-gold-secondary: #fff8f0; /* Secondary text - cream for softer appearance */
  --text-on-gold-accent: #ffd700; /* Accent text - gold with strong shadow required */

  /* Gradients - Gold Only */
  --gradient-hero: linear-gradient(
    135deg,
    #1a1a1a 0%,
    #2d2d2d 50%,
    #1a1a1a 100%
  );
  --gradient-gold-shimmer: linear-gradient(
    135deg,
    #b8860b 0%,
    #ffd700 50%,
    #ffc700 100%
  );
  --gradient-gold-to-dark: linear-gradient(
    135deg,
    #ffd700 0%,
    #d4af37 50%,
    #b8860b 100%
  );
  --gradient-gold-wash: linear-gradient(135deg, #fff8f0 0%, #f5e6d3 100%);
  --gradient-burgundy-orange: linear-gradient(
    135deg,
    #800020 0%,
    #cc5500 100%
  ); /* Added for Mobile Menu */

  /* Typography */
  --font-heading: "Montserrat", sans-serif;
  --font-body: "Open Sans", sans-serif;

  /* Shadows - Gold Glow */
  --shadow-soft: 0 10px 30px rgba(255, 215, 0, 0.15);
  --shadow-card: 0 4px 20px rgba(255, 215, 0, 0.2);
  --shadow-button: 0 4px 12px rgba(255, 215, 0, 0.3);
  --shadow-gold: 0 8px 24px rgba(255, 215, 0, 0.5);
  --shadow-gold-glow: 0 0 40px rgba(255, 215, 0, 0.4);

  /* Missing Brand Colors */
  --burgundy-red: #800020; /* Deep Burgundy */
  --warm-orange: #cc5500; /* Burnt Orange (Accessible with White) */

  /* Rich Reds (from newbg.jpg - 2025 Brand Kit) */
  --deep-crimson: #4a0a1a; /* Dark red backgrounds */
  --rich-ruby: #8b1e3f; /* Mid-tone red */
  --vibrant-scarlet: #c41e3a; /* Bright accents */
  --warm-coral-glow: #d64545; /* Glowing highlights */

  /* 2025 New Colors */
  --rose-gold: #b76e79; /* Feminine luxury */
  --deep-plum: #4a1942; /* Rich contrast */
  --champagne: #f7e7ce; /* Soft highlights */
  --ember: #e25822; /* Energetic CTA */

  /* New Gradients */
  --gradient-burgundy-orange: linear-gradient(135deg, #800020 0%, #cc5500 100%);
  --gradient-rich-ruby: linear-gradient(
    135deg,
    #4a0a1a 0%,
    #8b1e3f 30%,
    #c41e3a 60%,
    #d64545 100%
  );
  --gradient-deep-luxury: linear-gradient(
    135deg,
    #4a1942 0%,
    #800020 50%,
    #cc5500 100%
  );
  --gradient-rose-gold-glow: linear-gradient(135deg, #b76e79 0%, #d4af37 100%);

  /* Glass Morphism Variables (2025 Header) */
  --glass-bg-light: rgba(26, 26, 26, 0.15); /* Very light - more transparent */
  --glass-bg-dark: rgba(
    26,
    26,
    26,
    0.2
  ); /* Still light when scrolled - glass visible over white */
  --glass-blur: blur(20px);
  --glass-blur-strong: blur(30px);
  --glass-saturate: saturate(180%);
  --glass-border-gold: rgba(255, 215, 0, 0.25);
  --glass-border-subtle: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  --glass-shadow-gold:
    0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 215, 0, 0.1);
  --glass-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   GOLDEN DESIGN SYSTEM — UTILITY CLASSES
   See DESIGN-SYSTEM.md for full documentation
   ========================================================================== */

/* --- Gold Effects --- */
.u-gold-glow {
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.4);
}
.u-gold-glow-subtle {
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}
.u-gold-border {
  border: 1px solid rgba(255, 215, 0, 0.3);
}
.u-gold-border-strong {
  border: 2px solid var(--wp--preset--color--gold-deep, #b8860b);
}

/* --- Glass Morphism --- */
.u-glass {
  background: linear-gradient(
    135deg,
    rgba(26, 26, 26, 0.75) 0%,
    rgba(45, 45, 45, 0.65) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 215, 0, 0.2);
}
.u-glass-dark {
  background: rgba(26, 26, 26, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* --- Text Colors (Gold Hierarchy) --- */
.u-text-gold {
  color: var(--wp--preset--color--gold-bright, #ffd700) !important;
}
.u-text-gold-deep {
  color: var(--wp--preset--color--gold-deep, #b8860b) !important;
}
.u-text-cream {
  color: var(--wp--preset--color--cream, #fff8f0) !important;
}
.u-text-muted {
  color: var(--wp--preset--color--warm-gray, #c0c0c0) !important;
}
.u-text-white {
  color: #ffffff !important;
}

/* --- Background Colors --- */
.u-bg-dark {
  background-color: var(--wp--preset--color--rich-black, #1a1a1a) !important;
}
.u-bg-charcoal {
  background-color: var(--wp--preset--color--dark-charcoal, #2d2d2d) !important;
}
.u-bg-cream {
  background-color: var(--wp--preset--color--cream, #fff8f0) !important;
}

/* --- Gradients --- */
.u-gradient-gold {
  background: var(
    --wp--preset--gradient--gold-luxury,
    linear-gradient(135deg, #b8860b 0%, #ffd700 50%, #ffc700 100%)
  ) !important;
}
.u-gradient-cta {
  background: var(
    --wp--preset--gradient--burgundy-orange,
    linear-gradient(135deg, #800020 0%, #cc5500 100%)
  ) !important;
}
.u-gradient-dark {
  background: var(
    --wp--preset--gradient--hero-dark,
    linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%)
  ) !important;
}

/* --- Layout Helpers --- */
.u-full-width {
  width: 100% !important;
  max-width: none !important;
}
.u-rounded {
  border-radius: 12px !important;
}
.u-rounded-pill {
  border-radius: 50px !important;
}
.u-rounded-lg {
  border-radius: 20px !important;
}

/* --- Spacing --- */
.u-p-sm {
  padding: 1rem !important;
}
.u-p-md {
  padding: 2rem !important;
}
.u-p-lg {
  padding: 3rem !important;
}
.u-m-0 {
  margin: 0 !important;
}
.u-mt-md {
  margin-top: 2rem !important;
}
.u-mb-md {
  margin-bottom: 2rem !important;
}

/* --- Animations --- */
.u-fade-in {
  animation: fadeIn 0.5s ease-out;
}
.u-glow-pulse {
  animation: goldPulse 2s ease-in-out infinite;
}

@keyframes goldPulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.5);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --- Particle Section (existing, documented) --- */
.u-particle-section {
  position: relative;
  overflow: hidden;
}

/* ========================================
   ACCESSIBILITY & WCAG AA COMPLIANCE
   ======================================== */

/* Skip Links for Keyboard Navigation */
.skip-links {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 10000;
  width: 100%;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  background: #ffd700 !important;
  color: #1a1a1a !important;
  padding: 12px 20px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transition: top 0.3s ease !important;
  z-index: 10001;
}

.skip-link:focus {
  top: 0 !important;
  outline: 3px solid #1a1a1a !important;
  outline-offset: 2px !important;
}

.skip-link:nth-child(2) {
  left: 200px;
}

/* Ensure minimum font sizes for readability */
body {
  font-size: 16px; /* Base font size for accessibility */
}

/* Focus indicators for keyboard navigation - Enhanced for glass effects */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 3px solid #ffd700 !important;
  outline-offset: 2px !important;

  /* Ensure focus is visible through glass effects */
  position: relative !important;
  z-index: 1 !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .hero-section .has-white-color,
  .about-section .has-white-color {
    color: #ffffff !important;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 1) !important;
  }

  .hero-section .has-gold-bright-color,
  .about-section .has-gold-deep-color {
    color: #ffff00 !important; /* Pure yellow for maximum contrast */
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 1) !important;
  }
}

/* ========================================
   REDUCED MOTION SUPPORT - ACCESSIBILITY COMPLIANCE
   Task 5.1: Respect prefers-reduced-motion settings
   Requirements: 2.2
   ======================================== */

/* ========================================
   BASE STYLES
   ======================================== */
body {
  font-family: var(--font-body);
  background-color: var(--rich-black);
  color: var(--warm-gray);
  line-height: 1.6;
}

/* Remove any top margin/padding that creates the beige bar */
body,
html {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.wp-site-blocks {
  padding-top: 0 !important;
  margin-top: 0 !important;
  overflow-x: hidden; /* Ensure site blocks don't restrict width */
}

/* ========================================
   WORDPRESS COLOR CLASSES - GOLD ONLY
   ======================================== */
.has-gold-bright-color {
  color: #ffd700 !important;
}
.has-gold-shimmer-color {
  color: var(--gold-bright);
}
.has-gold-deep-color {
  color: var(--gold-deep);
}
.has-gold-metallic-color {
  color: var(--gold-metallic);
}
.has-rich-black-color {
  color: var(--rich-black);
}
.has-dark-charcoal-color {
  color: var(--dark-charcoal);
}
.has-cream-color {
  color: var(--cream);
}
.has-warm-gray-color {
  color: var(--warm-gray); /* Updated to #C0C0C0 for WCAG AA compliance */
}

/* WCAG AA Compliant Text Colors */
.has-text-on-gold-primary-color {
  color: var(--text-on-gold-primary) !important;
}

.has-text-on-gold-secondary-color {
  color: var(--text-on-gold-secondary) !important;
}

.has-text-on-gold-accent-color {
  color: var(--text-on-gold-accent) !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}
.has-white-color {
  color: var(--white);
}

/* Legacy color classes - MUST use !important to override parent theme (TwentyTwentyFive) */
/* WordPress uses .has-text-color.has-gold-color combo - we MUST match and override */
.has-gold-color,
.has-text-color.has-gold-color,
h1.has-gold-color,
h1.has-text-color.has-gold-color,
h2.has-gold-color,
h2.has-text-color.has-gold-color,
h3.has-gold-color,
.wp-block-heading.has-gold-color,
.wp-block-heading.has-text-color.has-gold-color,
h1.wp-block-heading.has-gold-color,
h1.wp-block-heading.has-text-color.has-gold-color,
h2.wp-block-heading.has-gold-color,
h2.wp-block-heading.has-text-color.has-gold-color,
h1.wp-block-heading.has-text-align-center.has-gold-color.has-text-color,
.wp-block-heading.has-text-align-center.has-gold-color.has-text-color {
  color: #ffd700 !important; /* Use raw hex for maximum specificity */
}

/* NUCLEAR OPTION: Force gold color on ALL elements with .has-gold-color in body context */
body .has-gold-color,
body .has-text-color.has-gold-color,
body h1.has-gold-color,
body h2.has-gold-color,
body h1.wp-block-heading.has-gold-color,
body h2.wp-block-heading.has-gold-color,
body .wp-block-heading.has-gold-color,
html body .has-gold-color,
html body h1.has-gold-color,
html body .wp-block-heading.has-text-align-center.has-gold-color {
  color: #ffd700 !important;
}

.has-charcoal-color {
  color: var(--dark-charcoal);
}

.has-gold-bright-background-color {
  background-color: var(--golden-yellow);
}
.has-gold-shimmer-background-color {
  background-color: var(--gold-bright);
}
.has-gold-deep-background-color {
  background-color: var(--gold-deep);
}
.has-gold-metallic-background-color {
  background-color: var(--gold-metallic);
}
.has-rich-black-background-color {
  background-color: var(--rich-black);
}
.has-dark-charcoal-background-color {
  background-color: var(--dark-charcoal);
}
.has-cream-background-color {
  background-color: var(--cream);
}
.has-warm-gray-background-color {
  background-color: var(--warm-gray);
}
.has-white-background-color {
  background-color: var(--white);
}

/* Legacy background color classes */
.has-gold-background-color {
  background-color: var(--golden-yellow);
}
.has-charcoal-background-color {
  background-color: var(--dark-charcoal);
}

/* Ensure readable text when using dark backgrounds */
.has-rich-black-background-color,
.has-dark-charcoal-background-color {
  color: var(--white);
}

.has-rich-black-background-color a,
.has-dark-charcoal-background-color a {
  color: var(--golden-yellow);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Ensure readable text when using gold backgrounds */
.has-gold-bright-background-color,
.has-gold-shimmer-background-color,
.has-gold-metallic-background-color {
  color: var(--rich-black);
}

.has-burgundy-background-color {
  background-color: var(--burgundy-red);
  color: var(--white);
}

.has-orange-background-color {
  background-color: var(--warm-orange);
  color: var(--white);
}

/* ========================================
   HEADER STYLES - 2025 REDESIGN
   ======================================== */

/* Ensure header template part is sticky and starts transparent */
header.wp-block-template-part {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  background: transparent;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}

/* Header wrapper scrolled state - keep transparent, glass effect is on inner .site-header-2025 */
header.wp-block-template-part.is-scrolled {
  background: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* 2025 Header - Base positioning (glass styles applied later in file) */
.site-header-2025 {
  z-index: 1000;
  /* Glass morphism styles are defined in GLASS MORPHISM HEADER section below */
}

/* Scrolled state - padding adjustment */
.site-header-2025.is-scrolled {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

/* Solid Header variant for Category/Search pages */
.site-header-2025.header-solid {
  background: rgba(26, 26, 26, 0.7) !important; /* Translucent dark */
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Auto-adjust header opacity on white backgrounds (join, follow, baby-steps pages) */
.site-header-2025.auto-solid-on-white {
  background: rgba(26, 26, 26, 0.85) !important; /* More opaque by default */
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
}

/* === REMOVED: FORCE HAMBURGER MENU - See glass-navigation-base.css === */
/* ========================================
   HERO VIDEO STYLES
   ======================================== */
.hero-video-wrapper {
  position: relative;
  width: 100%;
  max-width: 1000px; /* INCREASED to fill wide screens */
  border-radius: 12px;
  overflow: visible;
  background: transparent;
  /* Removed box-shadow and border - no more visible box */
}

/* ========================================
   CATEGORY SELECTOR STYLES (Episodes Page)
   ======================================== */
.pl-category-selector {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 40px;
}

.pl-category-btn {
  background: transparent;
  border: 1px solid var(--gold-bright);
  color: var(--white);
  padding: 12px 24px;
  border-radius: 50px;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.pl-category-btn:hover {
  background: rgba(255, 215, 0, 0.1);
  color: var(--gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
}

.pl-category-btn.active {
  background: var(--gold-bright);
  color: var(--rich-black);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
  transform: translateY(-2px);
  border-color: var(--gold-bright);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .pl-category-selector {
    gap: 10px;
    margin-bottom: 30px;
  }

  .pl-category-btn {
    padding: 10px 16px;
    font-size: 0.8rem;
  }
}

.hero-video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: transparent;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); /* Shadow on video itself, not wrapper */
}

/* === REMOVED: LIQUID GLASS NAVIGATION - BROWSER - See glass-navigation-base.css === */
/* === REMOVED: LIQUID GLASS NAVIGATION - STAGGERED - See glass-navigation-base.css === */
/* ========================================
   GLASS MORPHISM HEADER - 2025 LUXURY UPGRADE
   Applied directly to .site-header-2025
   ======================================== */

/* Glass Header Base - Frosted glass effect */
.site-header-2025 {
  position: relative;
  background: var(--glass-bg-light) !important;
  -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate);
  backdrop-filter: var(--glass-blur) var(--glass-saturate);
  border-bottom: 1px solid var(--glass-border-subtle);
  box-shadow: var(--glass-shadow);
  transition: var(--glass-transition);
}

/* Glass Header - Scrolled state (darker, more opaque) */
.site-header-2025.is-scrolled,
header.wp-block-template-part.is-scrolled .site-header-2025 {
  background: var(--glass-bg-dark) !important;
  -webkit-backdrop-filter: var(--glass-blur-strong) var(--glass-saturate);
  backdrop-filter: var(--glass-blur-strong) var(--glass-saturate);
  border-bottom-color: var(--glass-border-gold);
  box-shadow: var(--glass-shadow-gold);
}

/* Gold accent line under header - gradient fade from center */
.site-header-2025::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 215, 0, 0.4) 20%,
    rgba(255, 215, 0, 0.6) 50%,
    rgba(255, 215, 0, 0.4) 80%,
    transparent 100%
  );
  opacity: 0.6;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.site-header-2025.is-scrolled::after,
header.wp-block-template-part.is-scrolled .site-header-2025::after {
  opacity: 1;
}

/* Gold shimmer effect - subtle animated highlights */
.site-header-2025::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 600px 100px at 20% 50%,
      rgba(255, 215, 0, 0.06) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 600px 100px at 80% 50%,
      rgba(255, 215, 0, 0.04) 0%,
      transparent 70%
    );
  pointer-events: none;
  opacity: 0.8;
  animation: headerShimmer 12s ease-in-out infinite;
}

@keyframes headerShimmer {
  0%,
  100% {
    opacity: 0.5;
    background-position:
      0% 50%,
      100% 50%;
  }
  50% {
    opacity: 1;
    background-position:
      100% 50%,
      0% 50%;
  }
}

/* Mobile adjustments for glass header */
@media (max-width: 768px) {
  .site-header-2025 {
    -webkit-backdrop-filter: blur(15px) var(--glass-saturate);
    backdrop-filter: blur(15px) var(--glass-saturate);
  }

  .site-header-2025::before {
    display: none; /* Disable shimmer on mobile for performance */
  }
}

/* ========================================
   GLASS HEADER - BROWSER COMPATIBILITY FALLBACKS
   Task 2.3: Fallbacks for browsers without backdrop-filter support
   Requirements: 5.5
   ======================================== */

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(20px)) {
  .site-header-2025 {
    background: rgba(26, 26, 26, 0.85) !important; /* More opaque background */
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; /* Enhanced shadow and inner highlight */
    border-bottom: 1px solid rgba(255, 215, 0, 0.3) !important; /* Stronger border */
  }

  .site-header-2025.is-scrolled,
  header.wp-block-template-part.is-scrolled .site-header-2025 {
    background: rgba(
      26,
      26,
      26,
      0.95
    ) !important; /* Even more opaque when scrolled */
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.5),
      0 0 20px rgba(255, 215, 0, 0.2),
      inset 0 1px 0 rgba(255, 215, 0, 0.1) !important; /* Gold glow effect */
    border-bottom-color: rgba(255, 215, 0, 0.4) !important;
  }

  .site-header-2025.header-solid {
    background: rgba(26, 26, 26, 0.95) !important; /* Solid fallback */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  }
}

/* Fallback for browsers without -webkit-backdrop-filter support */
@supports not (-webkit-backdrop-filter: blur(20px)) {
  .site-header-2025 {
    background: rgba(26, 26, 26, 0.85) !important;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3) !important;
  }

  .site-header-2025.is-scrolled,
  header.wp-block-template-part.is-scrolled .site-header-2025 {
    background: rgba(26, 26, 26, 0.95) !important;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.5),
      0 0 20px rgba(255, 215, 0, 0.2),
      inset 0 1px 0 rgba(255, 215, 0, 0.1) !important;
    border-bottom-color: rgba(255, 215, 0, 0.4) !important;
  }

  .site-header-2025.header-solid {
    background: rgba(26, 26, 26, 0.95) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  }
}

/* Mobile fallbacks for older mobile browsers */
@media (max-width: 768px) {
  @supports not (backdrop-filter: blur(15px)) {
    .site-header-2025 {
      background: rgba(26, 26, 26, 0.9) !important; /* More opaque on mobile */
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    }
  }

  @supports not (-webkit-backdrop-filter: blur(15px)) {
    .site-header-2025 {
      background: rgba(26, 26, 26, 0.9) !important;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    }
  }
}

/* ========================================
   HERO SECTION - 2025 REDESIGN
   Task 8.2: Updated layout with logo, video, and content positioning
   Requirements: 2.2, 3.5, 4.3
   ======================================== */
.hero-section {
  position: relative;
  overflow-x: hidden; /* Only clip horizontal to prevent horizontal scroll */
  overflow-y: visible; /* Allow vertical content to flow naturally - fixes cutoff issues */
  /* min-height: 100vh removed - was causing black box below hero content */
}

/* Fix cover block flex layout - ensure background stays behind content */
.hero-section.wp-block-cover {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
}

.hero-section .wp-block-cover__background,
.hero-section .wp-block-cover__image-background {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
}

/* Hero Section Layout - New Structure with Logo at Top */
.hero-section .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 0 !important; /* NUCLEAR: No padding at all */
  min-height: auto !important; /* Don't force height calculation that might center */
  max-width: 1500px;
  margin: 0 auto;
  position: relative;
}

/* Logo positioning at top - enhanced spacing and responsive sizing */
.hero-section .hero-logo-centered,
.hero-section .hero-logo-top {
  margin-top: -80px !important; /* Pull up to hide top transparent space */
  margin-bottom: -80px !important; /* Pull content below up significantly */
  padding: 0 !important;
  z-index: 10;
  position: relative;
  text-align: center;
  width: 100%;
}

.hero-section .hero-logo-centered img,
.hero-section .hero-logo-top img {
  max-width: 350px !important; /* REDUCED from 400px/675px */
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.3));
  transition: all 0.3s ease;
}

.hero-section .hero-logo-centered:hover img {
  filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.5));
  transform: scale(1.02);
}

/* Content columns below logo - improved spacing and alignment */
/* Content columns below logo - improved spacing and alignment */
.hero-section .wp-block-columns {
  display: grid !important; /* Force Grid over Flexbox */
  grid-template-columns: 55fr 45fr !important; /* Exact proportions */
  width: 100% !important;
  max-width: 100% !important; /* Unconstrained width */
  margin: 0 auto;
  gap: 40px; /* Tighter gap */
  align-items: center; /* Vertically center */
  position: relative;
}

/* Text column (left) */
.hero-section .wp-block-column:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding-right: 20px;
  grid-column: 1; /* Explicit grid placement */
  width: 100% !important;
  max-width: 100% !important;
}

/* Image column (right) */
.hero-section .wp-block-column:last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: 2; /* Explicit grid placement */
  width: 100% !important;
  max-width: 100% !important;
}

/* Video positioning within text column - improved spacing and styling */
.hero-section .hero-trailer {
  margin: 40px 0;
  width: 100%;
  max-width: 500px;
  position: relative;
}

.hero-section .hero-trailer video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(255, 215, 0, 0.1);
  transition: all 0.4s ease;
  background: #000;
}

.hero-section .hero-trailer video:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(255, 215, 0, 0.2);
}

/* Video play button overlay enhancement */
.hero-section .hero-trailer::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: rgba(255, 215, 0, 0.9);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 32px;
}

.hero-section .hero-trailer:hover::before {
  opacity: 1;
}

/* ========================================
   TEXT CONTRAST COMPLIANCE - WCAG AA STANDARDS
   Gold Particles Background Optimization
   
   CONTRAST RATIOS (WCAG AA requires 4.5:1 for normal text, 3:1 for large text):
   - White (#FFFFFF) on dark areas: 21:1 ✓
   - Gold (#FFD700) on dark areas: 7.5:1 ✓  
   - Cream (#FFF8F0) on dark areas: 19.5:1 ✓
   - Warm Gray (#C0C0C0) on dark areas: 7.1:1 ✓
   
   All colors exceed WCAG AA requirements with text shadows for enhanced readability
   ======================================== */

/* WCAG AA Compliant Text Colors on Gold Particles Background */
.hero-section .has-white-color,
.hero-section .wp-block-heading.has-white-color,
.hero-section .wp-block-paragraph.has-white-color,
.hero-section p.has-white-color,
.hero-section h1.has-white-color,
.hero-section h2.has-white-color {
  color: #ffffff !important; /* Pure white - 21:1 contrast ratio on dark areas */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Strong shadow for readability on gold particles */
}

/* Gold text with enhanced contrast */
.hero-section .has-gold-bright-color,
.hero-section .wp-block-heading.has-gold-bright-color,
.hero-section span[style*="color:#FFD700"],
.hero-section .has-primary-color {
  color: #ffd700 !important; /* Bright gold - 7.5:1 contrast on dark backgrounds */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9); /* Strong shadow for gold text visibility */
  font-weight: 600 !important; /* Increased weight for better readability */
}

/* Champagne/cream text with improved contrast */
.hero-section .has-champagne-color,
.hero-section .wp-block-quote.has-champagne-color,
.hero-section .wp-block-quote p {
  color: #fff8f0 !important; /* Cream color - better contrast than champagne */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  font-weight: 500 !important; /* Slightly bolder for better readability */
}

/* About section on gold particles background - same compliance */
.about-section .has-white-color,
.about-section .wp-block-heading.has-white-color,
.about-section .wp-block-paragraph.has-white-color,
.about-section p.has-white-color,
.about-section h2.has-white-color {
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.about-section .has-gold-deep-color,
.about-section .section-eyebrow.has-gold-deep-color {
  color: #ffd700 !important; /* Use brighter gold instead of deep gold for better contrast */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);
  font-weight: 600 !important;
}

/* Ensure all text elements on gold particles background meet WCAG AA */
.hero-section *,
.about-section * {
  /* Fallback text shadow for any unspecified elements */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

/* Quote styling with enhanced visibility */
.hero-section .wp-block-quote,
.about-section .wp-block-quote {
  border-left-color: #ffd700 !important;
  border-left-width: 4px !important;
  background: rgba(
    0,
    0,
    0,
    0.2
  ) !important; /* Semi-transparent background for better text contrast */
  padding: 20px 30px !important;
  border-radius: 0 8px 8px 0 !important;
}

/* Button text contrast on gold particles background */
.hero-section .wp-block-button__link,
.about-section .wp-block-button__link {
  text-shadow: none !important; /* Remove text shadow from buttons as they have solid backgrounds */
}

/* Ensure proper contrast for inline styled elements */
.hero-section span[style*="color"],
.about-section span[style*="color"] {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* Hero columns - side by side layout (text left, Cat right) */
.hero-section .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.hero-section .wp-block-columns {
  flex-direction: row !important;
  align-items: center !important;
  max-width: 1200px;
  margin: 0 auto;
  gap: 60px;
}

.hero-section .wp-block-column {
  flex-basis: 50% !important;
  width: 50% !important;
}

/* Text column - left-aligned for reference layout */
.hero-section .wp-block-column:first-child {
  text-align: left !important;
}

.hero-section .wp-block-column:first-child p,
.hero-section .wp-block-column:first-child h1,
.hero-section .wp-block-column:first-child h2 {
  text-align: left !important;
}

.hero-section .wp-block-column:first-child .wp-block-buttons {
  justify-content: flex-start !important;
}

.hero-section .wp-block-column:first-child .wp-block-quote {
  text-align: left;
  border-left: 4px solid #ffd700 !important;
  padding-left: 30px !important;
  padding-top: 0 !important;
}

/* Image column - Cat on right */
.hero-section .wp-block-column:last-child {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-section .wp-block-image {
  display: flex;
  justify-content: center;
}

/* Hero logo centering */
.hero-section .hero-logo,
.hero-section figure.hero-logo {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.hero-section .hero-logo img {
  margin: 0 auto !important;
}

/* Hero logo at top - optimized for above-the-fold layout */
.hero-section .hero-logo-top,
.hero-section figure.hero-logo-top {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 auto 0 auto !important; /* Reduced from 10px to 0 */
  text-align: center !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: none !important;
  background-color: transparent !important;
}

.hero-section .hero-logo-top img {
  width: auto !important;
  height: clamp(140px, 20vh, 220px) !important; /* Balanced size */
  max-width: none !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
  border-radius: 0 !important;
  clip-path: inset(
    22% 2% 22% 2%
  ) !important; /* ESSENTIAL - crops the rectangular logo */
  transform: scale(1.5) !important; /* Scale back up after cropping */
  background: none !important;
  background-color: transparent !important;
  object-fit: contain !important;
}

/* Above-the-fold specific optimizations */
.hero-section.hero-above-fold {
  min-height: 100vh;
  max-height: none; /* Removed constraint - allow content to extend beyond viewport if needed */
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* Only clip horizontal overflow */
  overflow-y: visible; /* Allow vertical content flow - fixes cutoff issues */
}

.hero-section.hero-above-fold .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
  min-height: 0;
  padding-top: 10px;
  overflow: visible; /* Allow video controls to render */
}

.hero-section.hero-above-fold .wp-block-columns {
  flex: 1;
  min-height: 0;
  max-height: none; /* Removed constraint - allow natural sizing based on content */
  overflow: visible; /* Allow video controls to render */
}

/* Ensure left column (with video) doesn't clip content */
.hero-section.hero-above-fold .wp-block-column:first-child {
  overflow: visible !important;
}

/* Cat Miller image styles - exclude logo */
.hero-section .wp-block-image:not(.hero-logo) img,
.hero-section .hero-cat-image img {
  width: 100% !important; /* FILL THE COLUMN */
  max-width: none !important; /* UNCONSTRAINED */
  height: auto !important;
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(255, 215, 0, 0.3);
}

/* Above-the-fold optimizations for video */
.hero-section.hero-above-fold .hero-video-wrapper {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
  /* No fixed height - video sizes naturally */
}

.hero-section.hero-above-fold .hero-video-wrapper .wp-block-video,
.hero-section.hero-above-fold .wp-block-video {
  overflow: visible !important; /* Ensure controls aren't clipped */
}

.hero-section.hero-above-fold .hero-video-wrapper video,
.hero-section.hero-above-fold .wp-block-video video {
  width: 100% !important;
  max-width: 1000px !important; /* INCREASED to massive size */
  height: auto !important; /* Natural height based on aspect ratio - no box */
  object-fit: contain !important;
  border-radius: 12px;
  background: transparent !important; /* No black bars */
}

/* Ensure video figure doesn't clip the controls */
.hero-section.hero-above-fold .wp-block-video figure,
.hero-section.hero-above-fold figure.wp-block-video {
  overflow: visible !important;
  margin: 0 !important;
}

/* GLOBAL VIDEO CONTROLS PROTECTION - Ensure controls are ALWAYS visible at all breakpoints */
.hero-section video,
.hero-section .wp-block-video video,
.hero-section .hero-video-wrapper video {
  /* Ensure minimum height for controls visibility */
  min-height: 100px;
  /* Allow native controls to render fully */
  overflow: visible;
}

/* Prevent any ancestor from clipping video controls */
.hero-section .wp-block-group:has(video),
.hero-section .wp-block-video,
.hero-section .hero-video-wrapper,
.hero-section figure.wp-block-video {
  overflow: visible !important;
  clip-path: none !important;
}

/* Quote optimization for above-the-fold */
.hero-section.hero-above-fold .wp-block-quote {
  margin-top: 10px !important;
  margin-bottom: 15px !important;
  padding: 12px 20px !important;
}

.hero-section.hero-above-fold .wp-block-quote p {
  font-size: clamp(0.9rem, 1.5vw, 1.2rem) !important;
  line-height: 1.4 !important;
}

/* Heading optimization for above-the-fold */
.hero-section.hero-above-fold h1.wp-block-heading,
.hero-section.hero-above-fold .wp-block-heading[class*="has-white-color"] {
  font-size: clamp(2rem, 5vw, 4rem) !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  line-height: 1.1 !important;
}

/* "with" text optimization */
.hero-section.hero-above-fold .wp-block-column:first-child > p:first-child {
  margin-bottom: 0 !important;
}

/* ========================================
   SECTION TRANSITIONS - PREVENT VISUAL CUTOFF
   Ensures smooth flow between hero and subsequent sections
   ======================================== */

/* Smooth transition from hero to premiere banner */
.hero-section + .premiere-banner-section,
.hero-section ~ .wp-block-group[id="premiere-banner"],
#premiere-banner {
  position: relative;
  z-index: 10;
  margin-top: 0; /* Ensure no gap between sections */
}

/* Ensure premiere banner is never clipped by hero overflow changes */
.premiere-banner-section,
.wp-block-group.premiere-banner-section {
  overflow: visible;
}

/* ========================================
   HERO SECTION - RESPONSIVE BREAKPOINTS
   Task 8.2: Updated responsive behavior for new layout
   Requirements: 2.2, 3.5, 4.3
   ======================================== */

/* Extra Large Desktop (1440px+) - Maximum impact layout */
@media (min-width: 1440px) {
  .hero-section .wp-block-cover__inner-container {
    padding-top: 10px;
    min-height: calc(100vh - 320px);
    max-width: 100%; /* UNCONSTRAINED */
  }

  .hero-section .hero-logo-centered {
    margin-bottom: 40px;
  }

  .hero-section .hero-logo-centered img {
    max-width: 550px;
  }

  .hero-section .wp-block-columns {
    max-width: 100%; /* UNCONSTRAINED */
    gap: 80px;
    align-items: center;
  }

  .hero-section .hero-trailer {
    max-width: 1000px;
    margin: 60px 0;
  }

  /* Reset for Tablet/Mobile - Switch back to Stacked Layout */
  @media (max-width: 960px) {
    .hero-section .wp-block-columns {
      display: flex !important;
      flex-direction: column !important;
      gap: 30px !important;
    }

    .hero-section .wp-block-column:first-child,
    .hero-section .wp-block-column:last-child {
      grid-column: auto !important;
      width: 100% !important;
    }

    .hero-section .hero-video-wrapper video,
    .hero-section .hero-cat-image img {
      max-width: 100% !important;
    }
  }

  /* Enhanced typography for extra large screens */
  .hero-section h1.wp-block-heading {
    font-size: 5.5rem !important;
    line-height: 1.05;
    margin-bottom: 30px !important;
  }

  .hero-section .wp-block-quote p {
    font-size: 2rem !important;
    line-height: 1.5;
  }

  /* Enhanced spacing for content elements */
  .hero-section .wp-block-column:first-child > p:first-child {
    font-size: 1.1rem !important;
    margin-bottom: 20px !important;
  }
}

/* Large Desktop (1200px - 1439px) - Standard desktop layout */
@media (min-width: 1200px) and (max-width: 1439px) {
  .hero-section .wp-block-cover__inner-container {
    padding-top: 25px;
    max-width: 1400px;
  }

  .hero-section .hero-logo-centered {
    margin-bottom: 35px;
  }

  .hero-section .hero-logo-centered img {
    max-width: 480px;
  }

  .hero-section .wp-block-columns {
    max-width: 100%; /* UNCONSTRAINED */
    gap: 70px;
    align-items: center;
  }

  .hero-section .hero-trailer {
    max-width: 900px;
    margin: 50px 0;
  }

  /* Typography adjustments */
  .hero-section h1.wp-block-heading {
    font-size: 4.8rem !important;
    line-height: 1.1;
    margin-bottom: 25px !important;
  }

  .hero-section .wp-block-quote p {
    font-size: 1.7rem !important;
  }
}

/* Desktop (1024px - 1199px) - Compact desktop layout */
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero-section .wp-block-cover__inner-container {
    padding-top: 20px;
    max-width: 1200px;
  }

  .hero-section .hero-logo-centered {
    margin-bottom: 30px;
  }

  .hero-section .hero-logo-centered img {
    max-width: 420px;
  }

  .hero-section .wp-block-columns {
    max-width: 1100px;
    gap: 100px;
    align-items: flex-start;
  }

  .hero-section .hero-trailer {
    max-width: 520px;
    margin: 45px 0;
  }

  /* Maintain visual hierarchy on smaller desktops */
  .hero-section h1.wp-block-heading {
    font-size: 4.2rem !important;
    line-height: 1.1;
    margin-bottom: 22px !important;
  }

  .hero-section .wp-block-quote p {
    font-size: 1.6rem !important;
  }
}

/* Tablet Landscape (768px - 1023px) - Adjusted for smaller screens */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section .wp-block-cover__inner-container {
    padding-top: 50px;
    min-height: calc(100vh - 220px);
    max-width: 100%;
  }

  .hero-section .hero-logo-centered {
    margin-bottom: 60px;
  }

  .hero-section .hero-logo-centered img {
    max-width: 380px;
  }

  .hero-section .wp-block-columns {
    gap: 80px;
    max-width: 100%;
    padding: 0 30px;
    flex-direction: row;
    align-items: center;
  }

  .hero-section .wp-block-column:first-child {
    padding-right: 20px;
    flex-basis: 58%;
    max-width: 58%;
  }

  .hero-section .wp-block-column:last-child {
    flex-basis: 42%;
    max-width: 42%;
  }

  .hero-section .hero-trailer {
    max-width: 100%;
    margin: 40px 0;
    overflow: visible !important;
  }

  /* Ensure video controls visible on tablet */
  .hero-section .hero-trailer video,
  .hero-section .wp-block-video video {
    min-height: 150px !important;
  }

  .hero-section .hero-video-wrapper,
  .hero-section .wp-block-video,
  .hero-section figure.wp-block-video {
    overflow: visible !important;
  }

  /* Typography adjustments for tablet */
  .hero-section h1.wp-block-heading {
    font-size: 3.8rem !important;
    line-height: 1.15;
    margin-bottom: 20px !important;
  }

  .hero-section .wp-block-quote p {
    font-size: 1.4rem !important;
    line-height: 1.5;
  }

  /* Cat Miller image sizing for tablet */
  .hero-section .wp-block-image:not(.hero-logo) img,
  .hero-section .hero-cat-image img {
    max-width: 320px !important;
    width: 320px !important;
    height: 320px !important;
  }

  /* Enhanced spacing for tablet */
  .hero-section .wp-block-column:first-child > p:first-child {
    font-size: 0.95rem !important;
    margin-bottom: 15px !important;
  }
}

/* Mobile Portrait & Landscape (320px - 767px) - Stacked layout */
@media (max-width: 767px) {
  .hero-section {
    min-height: auto;
  }

  .hero-section .wp-block-cover__inner-container {
    padding-top: 40px;
    min-height: auto;
    padding-bottom: 80px;
    max-width: 100%;
  }

  .hero-section .hero-logo-centered {
    margin-bottom: 50px;
  }

  .hero-section .hero-logo-centered img {
    max-width: 300px;
  }

  .hero-section .wp-block-columns {
    flex-direction: column-reverse !important;
    gap: 50px;
    padding: 0 20px;
    max-width: 100%;
    align-items: center;
  }

  .hero-section .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .hero-section .wp-block-column:first-child {
    padding-right: 0;
    text-align: center !important;
  }

  .hero-section .wp-block-column:first-child p,
  .hero-section .wp-block-column:first-child h1,
  .hero-section .wp-block-column:first-child h2 {
    text-align: center !important;
  }

  .hero-section .wp-block-column:first-child .wp-block-buttons {
    justify-content: center !important;
    margin-top: 35px;
  }

  .hero-section .wp-block-column:first-child .wp-block-quote {
    text-align: center;
    border-left: none !important;
    border-top: 4px solid #ffd700 !important;
    padding: 25px 25px !important;
    margin: 35px auto;
    max-width: 95%;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    backdrop-filter: blur(10px);
  }

  /* Typography adjustments for mobile */
  .hero-section h1.wp-block-heading {
    font-size: 3.2rem !important;
    line-height: 1.15;
    margin-bottom: 25px !important;
  }

  .hero-section .wp-block-quote p {
    font-size: 1.3rem !important;
    line-height: 1.5;
  }

  .hero-section .wp-block-column:first-child > p:first-child {
    font-size: 0.95rem !important;
    letter-spacing: 3px !important;
    margin-bottom: 18px !important;
  }

  /* Video positioning on mobile - enhanced styling */
  .hero-section .hero-trailer {
    max-width: 100%;
    margin: 35px auto;
    overflow: visible !important; /* Ensure controls aren't clipped */
  }

  .hero-section .hero-trailer video {
    border-radius: 16px;
    box-shadow:
      0 15px 50px rgba(0, 0, 0, 0.5),
      0 0 25px rgba(255, 215, 0, 0.1);
    min-height: 140px !important; /* Ensure enough space for controls */
  }

  /* Ensure video wrapper and figure don't clip controls */
  .hero-section .hero-video-wrapper,
  .hero-section .wp-block-video,
  .hero-section figure.wp-block-video {
    overflow: visible !important;
  }

  /* Cat Miller image on mobile - exclude logo */
  .hero-section .wp-block-image:not(.hero-logo) img,
  .hero-section .hero-cat-image img {
    max-width: 280px !important;
    width: 280px !important;
    height: 280px !important;
    margin-bottom: 25px;
  }
}

/* Small Mobile (320px - 480px) - Compact layout */
@media (max-width: 480px) {
  .hero-section .wp-block-cover__inner-container {
    padding-top: 30px;
    padding-bottom: 60px;
  }

  .hero-section .hero-logo-centered {
    margin-bottom: 40px;
  }

  .hero-section .hero-logo-centered img {
    max-width: 260px;
  }

  .hero-section .wp-block-columns {
    gap: 40px;
    padding: 0 15px;
  }

  /* Compact typography for small screens */
  .hero-section h1.wp-block-heading {
    font-size: 2.6rem !important;
    line-height: 1.2;
    margin-bottom: 20px !important;
  }

  .hero-section .wp-block-quote p {
    font-size: 1.15rem !important;
    line-height: 1.4;
  }

  .hero-section .wp-block-column:first-child > p:first-child {
    font-size: 0.85rem !important;
    letter-spacing: 2px !important;
    margin-bottom: 15px !important;
  }

  .hero-section .hero-trailer {
    margin: 30px auto;
    overflow: visible !important;
  }

  /* Ensure video controls visible on small mobile */
  .hero-section .hero-trailer video,
  .hero-section .wp-block-video video {
    min-height: 120px !important;
  }

  .hero-section .hero-video-wrapper,
  .hero-section .wp-block-video,
  .hero-section figure.wp-block-video {
    overflow: visible !important;
  }

  /* Smaller Cat Miller image on small mobile */
  .hero-section .wp-block-image:not(.hero-logo) img,
  .hero-section .hero-cat-image img {
    max-width: 220px !important;
    width: 220px !important;
    height: 220px !important;
  }

  /* Compact quote styling */
  .hero-section .wp-block-column:first-child .wp-block-quote {
    padding: 20px !important;
    margin: 30px auto !important;
    border-radius: 12px;
  }

  /* Enhanced button styling for small mobile */
  .hero-section .wp-block-button__link {
    font-size: 0.95rem !important;
    padding: 14px 28px !important;
  }
}

/* ========================================
   HERO SECTION - DESKTOP ENHANCEMENTS
   Task 8.2: Enhanced desktop layout with proper visual hierarchy
   Requirements: 2.2, 3.5, 4.3
   ======================================== */
@media (min-width: 1024px) {
  .hero-section {
    min-height: 100vh !important;
  }

  /* Enhanced typography hierarchy for desktop */
  .hero-section h1.wp-block-heading {
    font-size: 4.5rem !important;
    margin-bottom: 28px !important;
    letter-spacing: -1px;
    line-height: 1.08;
    font-weight: 700 !important;
  }

  /* "with" eyebrow text - enhanced styling */
  .hero-section .wp-block-column:first-child > p:first-child {
    font-size: 1rem !important;
    letter-spacing: 4px !important;
    margin-bottom: 18px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    opacity: 0.9;
  }

  /* Quote section - enhanced readability and visual appeal */
  .hero-section .wp-block-quote {
    margin: 45px 0 !important;
    padding: 35px 40px !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(20px) !important;
    border-left: 5px solid #ffd700 !important;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  }

  .hero-section .wp-block-quote::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      135deg,
      rgba(255, 215, 0, 0.08) 0%,
      transparent 60%
    );
    border-radius: 20px;
    pointer-events: none;
  }

  .hero-section .wp-block-quote p {
    font-size: 1.6rem !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    font-style: italic;
    position: relative;
    z-index: 2;
    font-weight: 300;
  }

  /* Video enhancement for desktop - premium styling */
  .hero-section .hero-trailer {
    margin: 55px 0 !important;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
  }

  .hero-section .hero-trailer video {
    border-radius: 24px;
    box-shadow:
      0 25px 80px rgba(0, 0, 0, 0.6),
      0 0 50px rgba(255, 215, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hero-section .hero-trailer:hover video {
    transform: translateY(-8px);
    box-shadow:
      0 35px 100px rgba(0, 0, 0, 0.7),
      0 0 70px rgba(255, 215, 0, 0.3);
  }

  /* Cat Miller photo - enhanced for desktop with premium effects */
  .hero-section .wp-block-image:not(.hero-logo) img,
  .hero-section .hero-cat-image img {
    /* Fixed: Removed hardcoded 420px dimensions to prevent cutoff */
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    box-shadow:
      0 0 100px rgba(255, 215, 0, 0.4),
      0 25px 80px rgba(0, 0, 0, 0.4);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border: 4px solid rgba(255, 215, 0, 0.25);
  }

  .hero-section .wp-block-image:not(.hero-logo):hover img,
  .hero-section .hero-cat-image:hover img {
    transform: scale(1.04);
    box-shadow:
      0 0 140px rgba(255, 215, 0, 0.6),
      0 35px 100px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 215, 0, 0.5);
  }

  /* Enhanced button styling for desktop */
  .hero-section .wp-block-button__link {
    font-size: 1.15rem !important;
    padding: 20px 45px !important;
    font-weight: 600 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 50px !important;
  }

  .hero-section .wp-block-button__link:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
  }

  /* Enhanced content spacing and alignment */
  .hero-section .wp-block-column:first-child {
    padding-right: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Ensure proper text alignment on desktop - left-aligned for reference layout */
  .hero-section .wp-block-column:first-child p,
  .hero-section .wp-block-column:first-child h1,
  .hero-section .wp-block-column:first-child h2 {
    text-align: left !important;
  }

  .hero-section .wp-block-column:first-child .wp-block-buttons {
    justify-content: flex-start !important;
    margin-top: 40px;
  }

  /* Enhanced visual hierarchy spacing */
  .hero-section .wp-block-columns {
    align-items: flex-start;
    margin-top: 0;
  }
}

/* Extra large screens - maximum impact layout */
@media (min-width: 1440px) {
  /* Enhanced typography for extra large screens */
  .hero-section h1.wp-block-heading {
    font-size: 5.5rem !important;
  }

  .hero-section .wp-block-quote p {
    font-size: 1.8rem !important;
  }

  /* Larger video for extra large screens */
  .hero-section .hero-trailer {
    max-width: 650px;
  }

  /* Extra large Cat Miller photo - exclude logo */
  .hero-section .wp-block-image:not(.hero-logo) img,
  .hero-section .hero-cat-image img {
    width: 450px !important;
    height: 450px !important;
    max-width: 450px !important;
  }

  /* Enhanced content spacing for extra large screens */
  .hero-section .wp-block-column:first-child {
    padding-right: 40px;
  }
}

/* ========================================
   HERO LOGO RESPONSIVE ENHANCEMENTS
   Task 8.2: Logo scaling and positioning improvements
   Requirements: 2.2, 2.4
   ======================================== */

/* Logo responsive scaling using clamp for fluid sizing */
.hero-section .hero-logo-centered img {
  width: clamp(260px, 32vw, 550px) !important;
  max-width: none !important;
  height: auto !important;
}

/* Logo hover effects - subtle and elegant */
.hero-section .hero-logo-centered {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.hero-section .hero-logo-centered:hover {
  transform: translateY(-4px);
}

/* Logo glow effect enhancement */
@media (min-width: 768px) {
  .hero-section .hero-logo-centered img {
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.35))
      drop-shadow(0 12px 25px rgba(0, 0, 0, 0.25));
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hero-section .hero-logo-centered:hover img {
    filter: drop-shadow(0 0 50px rgba(255, 215, 0, 0.6))
      drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
    transform: scale(1.02);
  }
}

/* Ensure logo maintains aspect ratio and quality */
.hero-section .hero-logo-centered img {
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Logo positioning enhancements */
.hero-section .hero-logo-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Enhanced logo spacing for different screen sizes */
@media (min-width: 1200px) {
  .hero-section .hero-logo-centered {
    margin-bottom: 90px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .hero-section .hero-logo-centered {
    margin-bottom: 70px;
  }
}

@media (max-width: 767px) {
  .hero-section .hero-logo-centered {
    margin-bottom: 50px;
  }

  .hero-section .hero-logo-centered img {
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.3))
      drop-shadow(0 8px 15px rgba(0, 0, 0, 0.2));
  }
}

/* Hero Main Logo - Large Centered Logo */
.hero-logo-wrapper {
  text-align: center;
}

/* ========================================
   BLOG LAYOUT OVERRIDES (User Provided)
   ======================================== */
/* Overall */
.pl-blog-wrapper {
  background: #000000;
}

/* Hero */
.pl-blog-title {
  color: #ffd93d;
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(2.8rem, 4vw, 3.5rem);
}
.pl-blog-subtitle {
  color: rgba(255, 248, 231, 0.85);
  max-width: 720px;
  margin: 0 auto;
}

/* Search + pills */
.pl-blog-search-row .wp-block-search__input {
  border-radius: 999px;
}
.pl-topic-pill .wp-block-button__link {
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255, 217, 61, 0.8);
  color: #ffd93d;
}

/* Feature card */
.pl-blog-feature-card {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
.pl-feature-image img {
  border-radius: 18px;
  object-fit: cover;
  height: 100%;
}
.pl-feature-title {
  color: #3d3d3d;
  font-size: 2rem;
}
.pl-feature-button .wp-block-button__link {
  background: #8b0031;
  border-radius: 999px;
}

/* Grid cards */
.pl-blog-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.pl-card-image img {
  border-radius: 14px;
}
.pl-card-title {
  font-size: 1.1rem;
}

.hero-main-logo {
  margin: 0 auto !important;
}

.hero-main-logo img {
  max-width: 400px !important;
  width: 100% !important;
  height: auto !important;
  /* Clean look - no heavy glow effects */
}

/* Desktop: Larger logo */
@media (min-width: 1024px) {
  .hero-main-logo img {
    max-width: 500px !important;
  }

  .hero-logo-wrapper {
    margin-bottom: 60px !important;
  }
}

/* Extra large: Even larger logo */
@media (min-width: 1440px) {
  .hero-main-logo img {
    max-width: 600px !important;
  }
}

/* Hero with Sparkle Particles */
.hero-with-particles::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(255, 215, 0, 0.4), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255, 215, 0, 0.3), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255, 215, 0, 0.5), transparent),
    radial-gradient(2px 2px at 130px 80px, rgba(255, 215, 0, 0.4), transparent),
    radial-gradient(
      1px 1px at 160px 120px,
      rgba(255, 215, 0, 0.3),
      transparent
    ),
    radial-gradient(
      2px 2px at 200px 50px,
      rgba(255, 215, 0, 0.35),
      transparent
    ),
    radial-gradient(1px 1px at 250px 100px, rgba(255, 215, 0, 0.4), transparent);
  background-size: 200px 200px;
  animation: sparkle 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* Hero Logo with Glow */
.hero-logo-glow img {
  max-width: 500px !important;
  height: auto !important;
  filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.4));
  animation:
    fadeInUp 1s ease-out,
    logoGlow 3s ease-in-out infinite;
}

@keyframes logoGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 50px rgba(255, 215, 0, 0.6));
  }
}

/* Hero Title Animation */
.hero-title {
  animation: fadeInUp 1s ease-out;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
}

/* Hero Tagline */
.hero-tagline {
  animation: fadeInUp 1s ease-out 0.2s backwards;
}

/* Hero Description */
.hero-description {
  animation: fadeInUp 1s ease-out 0.4s backwards;
  opacity: 0.85;
  max-width: 650px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hero Stats Row */
.hero-section .wp-block-columns {
  animation: fadeInUp 1s ease-out 0.6s backwards;
}

/* Hero Stats Numbers - Bright Yellow */
.hero-section .has-gold-bright-color,
.wp-block-cover .has-gold-bright-color {
  color: #ffd700 !important;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

/* Episode Video Cards */
.episode-card {
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.episode-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.episode-video {
  margin: 0 !important;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

.episode-video .wp-block-embed__wrapper {
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

.episode-video iframe {
  border-radius: 20px 20px 0 0;
}

/* Hero Buttons */
.hero-buttons {
  animation: fadeInUp 1s ease-out 0.8s backwards;
}

/* Hero Secondary Button - Gold outline with gold text */
.hero-btn-secondary .wp-block-button__link {
  background: transparent !important;
  border: 2px solid #ffd700 !important;
  color: #ffd700 !important;
}

.hero-btn-secondary .wp-block-button__link:hover {
  background: rgba(255, 215, 0, 0.1) !important;
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
  opacity: 0.7;
  z-index: 10;
}

.scroll-indicator svg {
  fill: var(--golden-yellow);
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

/* ========================================
   ABOUT SECTION - 2025 REDESIGN
   ======================================== */
.about-section {
  position: relative;
}

/* About section with dark/video background - white text */
.about-section.has-dark-background,
.about-section[style*="background"],
.about-section .wp-block-cover {
  color: #ffffff;
}

.about-section.has-dark-background h2,
.about-section.has-dark-background h3,
.about-section.has-dark-background p,
.about-section .wp-block-cover h2,
.about-section .wp-block-cover h3,
.about-section .wp-block-cover p {
  color: #ffffff !important;
}

/* Force white text on About section content when on dark background */
.about-section .has-warm-gray-color,
.about-section .has-dark-charcoal-color,
.about-section .has-rich-black-color,
.about-section .has-white-color {
  color: #ffffff !important;
}

/* Keep gold accent for section eyebrow */
.about-section .section-eyebrow.has-gold-deep-color {
  color: #ffd700 !important;
}

/* Keep Passion word in gold/burgundy */
.about-section h2 span[style*="color:#800020"],
.about-section h2 span[style*="color: #800020"] {
  color: #ffd700 !important;
}

/* About Image with Gold Accent */
.about-image-wrapper {
  position: relative;
}

/* ========================================
   COMPREHENSIVE GLASS EFFECTS - BROWSER COMPATIBILITY FALLBACKS
   Task 2.3: Complete fallback system for all glass morphism effects
   Requirements: 5.5
   ======================================== */

/* Fallbacks for legacy header styles */
@supports not (backdrop-filter: blur(10px)) {
  .site-header {
    background: var(--rich-black) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
  }

  .site-header.is-scrolled {
    background: rgba(26, 26, 26, 0.98) !important;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4) !important;
  }
}

/* Fallbacks for hero section glass elements */
@supports not (backdrop-filter: blur(10px)) {
  .hero-section .wp-block-column:first-child .wp-block-quote {
    background: rgba(0, 0, 0, 0.4) !important; /* More opaque background */
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
  }

  .hero-badge {
    background: rgba(0, 0, 0, 0.8) !important; /* Solid background */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
  }
}

/* Fallbacks for desktop hero quote glass effects */
@supports not (backdrop-filter: blur(20px)) {
  @media (min-width: 1024px) {
    .hero-section .wp-block-quote {
      background: rgba(0, 0, 0, 0.4) !important; /* More opaque */
      border: 1px solid rgba(255, 215, 0, 0.4) !important;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
    }
  }
}

/* Fallbacks for about section glass elements */
@supports not (backdrop-filter: blur(20px)) {
  .about-section .about-content-wrapper {
    background: rgba(26, 26, 26, 0.85) !important; /* More opaque */
    border: 1px solid rgba(255, 215, 0, 0.2) !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4) !important;
  }
}

/* Fallbacks for feature cards and other glass elements */
@supports not (backdrop-filter: blur(10px)) {
  .feature-card {
    background: rgba(255, 255, 255, 0.98) !important; /* Nearly opaque */
    border: 3px solid rgba(212, 175, 55, 0.4) !important;
    box-shadow: 0 10px 35px rgba(212, 175, 55, 0.2) !important;
  }

  .episode-filter-pill {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
  }

  .episode-card-overlay {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
  }

  .season-card-overlay {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
  }
}

/* Internet Explorer 11 specific fallbacks */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* DISABLED: Navigation container styling causes double menu bug
  .wp-block-navigation__responsive-container.is-menu-open {
    background: rgba(26, 26, 26, 0.98) !important;
    border: 2px solid rgba(255, 215, 0, 0.4) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
  }
  */

  .site-header-2025 {
    background: rgba(26, 26, 26, 0.9) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.4) !important;
  }

  .site-header-2025.is-scrolled {
    background: rgba(26, 26, 26, 0.98) !important;
  }
}

/* Edge Legacy (EdgeHTML) fallbacks */
@supports (-ms-ime-align: auto) {
  /* DISABLED: Navigation container styling causes double menu bug
  .wp-block-navigation__responsive-container.is-menu-open {
    background: rgba(26, 26, 26, 0.98) !important;
    border: 2px solid rgba(255, 215, 0, 0.4) !important;
  }
  */

  .site-header-2025 {
    background: rgba(26, 26, 26, 0.9) !important;
  }
}

.about-image-wrapper::after {
  content: "";
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #b8860b 0%, #ffd700 50%, #ffc700 100%);
  border-radius: 20px;
  z-index: -1;
}

.about-image-main img {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.about-image-main:hover img {
  transform: scale(1.02);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);
}

/* Section Eyebrow */
.section-eyebrow {
  font-family: var(--font-heading) !important;
}

/* Feature Items with Gradient Icons */
.about-section .has-burgundy-orange-gradient-background {
  box-shadow: 0 4px 12px rgba(128, 0, 32, 0.3);
}

/* About Section - Larger Video Embed on Desktop */
.about-section .wp-block-embed-youtube,
.about-section .about-image-wrapper .wp-block-embed {
  width: 100%;
}

.about-section .wp-block-embed-youtube .wp-block-embed__wrapper,
.about-section .about-image-wrapper .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(255, 215, 0, 0.15);
}

.about-section .wp-block-embed-youtube .wp-block-embed__wrapper iframe,
.about-section .about-image-wrapper .wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

/* Desktop: Make video column wider */
@media (min-width: 1024px) {
  .about-section .wp-block-columns {
    gap: 80px !important;
  }

  /* Give video column more space - 55% vs 45% */
  .about-section > .wp-block-columns > .wp-block-column:first-child {
    flex-basis: 55% !important;
  }

  .about-section > .wp-block-columns > .wp-block-column:last-child {
    flex-basis: 45% !important;
  }

  .about-section .about-image-wrapper {
    min-height: 350px;
  }
}

/* Extra large screens - even larger */
@media (min-width: 1440px) {
  .about-section .wp-block-columns {
    max-width: 1400px;
    margin: 0 auto;
    gap: 100px !important;
  }

  .about-section > .wp-block-columns > .wp-block-column:first-child {
    flex-basis: 58% !important;
  }

  .about-section > .wp-block-columns > .wp-block-column:last-child {
    flex-basis: 42% !important;
  }

  .about-section .about-image-wrapper {
    min-height: 400px;
  }
}

/* ========================================
   EPISODES SECTION - 2025 REDESIGN
   ======================================== */
.episodes-section {
  position: relative;
}

/* Episodes Grid - Make cards larger */
.episodes-section .wp-block-columns {
  gap: 30px !important;
  max-width: 1400px;
  margin: 0 auto;
}

.episodes-section .wp-block-column {
  flex: 1 1 380px !important;
  max-width: 450px;
}

/* YouTube Embed Cards */
.episodes-section .wp-block-group {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.episodes-section .wp-block-group:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* YouTube iframe container */
.episodes-section figure.wp-block-embed {
  margin: 0 !important;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.episodes-section figure.wp-block-embed iframe {
  width: 100% !important;
  height: 100% !important;
  border: none;
}

/* Card content below video */
.episodes-section .wp-block-group .wp-block-group {
  padding: 16px 20px;
  background: var(--white);
  box-shadow: none;
}

.episodes-section .wp-block-group .wp-block-group:hover {
  transform: none;
  box-shadow: none;
}

/* Episode title */
.episodes-section h3.wp-block-heading {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.4 !important;
  color: var(--dark-charcoal) !important;
}

/* Episode meta (Season X Episode Y) */
.episodes-section .wp-block-group p.has-warm-gray-color {
  font-size: 0.9rem !important;
  margin: 0 !important;
}

/* NEW badge */
.episodes-section .wp-block-group p.has-burgundy-red-background-color {
  display: inline-block;
  padding: 4px 12px !important;
  border-radius: 4px;
  font-size: 0.75rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px !important;
}

/* Episode Cards - legacy */
.episode-card {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
}

.episode-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Episode Thumbnail with Play Button */
.episode-card .wp-block-cover {
  position: relative;
}

.episode-card .wp-block-cover::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23800020'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px;
}

.episode-card:hover .wp-block-cover::after {
  opacity: 1;
}

/* Episode Badge */
.episode-card .has-gold-bright-background-color {
  padding: 6px 14px !important;
  border-radius: 20px !important;
  display: inline-block;
}

/* ========================================
   HOST SECTION - 2025 REDESIGN
   ======================================== */
.host-section {
  position: relative;
  overflow: hidden;
}

/* Force white text in host section */
.host-section .has-white-color,
.host-section h2.wp-block-heading,
.host-section p {
  color: #ffffff !important;
}

/* Keep the gold "Miller" highlight */
.host-section h2 span[style*="color:#FFD700"],
.host-section h2 span[style*="color: #FFD700"] {
  color: #ffd700 !important;
}

/* Champagne quote text */
.host-section .wp-block-quote,
.host-section .wp-block-quote p {
  color: var(--champagne) !important;
}

/* Host Background Accent */
.host-section::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #b8860b 0%, #ffd700 50%, #ffc700 100%);
  border-radius: 50%;
  opacity: 0.1;
  pointer-events: none;
}

/* Host Quote */
.host-section .wp-block-quote {
  border-left: 4px solid var(--golden-yellow) !important;
  padding-left: 30px !important;
  margin: 40px 0 !important;
}

/* Host Image */
.host-image img {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.host-image:hover img {
  transform: scale(1.02);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4);
}

/* ========================================
   CTA SECTION - 2025 REDESIGN
   ======================================== */
.wp-block-cover.has-burgundy-orange-gradient-background {
  position: relative;
}

/* CTA Button - White outline style */
.wp-block-cover.has-burgundy-orange-gradient-background .wp-block-button__link {
  transition: all 0.3s ease !important;
}

.wp-block-cover.has-burgundy-orange-gradient-background
  .wp-block-button__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* ========================================
   JOIN / FOLLOW / BABY-STEPS HERO SECTIONS
   Force dark backgrounds
   ======================================== */
.join-hero,
.follow-hero,
.baby-steps-hero {
  background-color: #1a1a1a !important;
}

.join-hero .wp-block-cover__background,
.follow-hero .wp-block-cover__background,
.baby-steps-hero .wp-block-cover__background {
  background-color: #1a1a1a !important;
  opacity: 1 !important;
}

/* Ensure overlay is dark */
.join-hero.wp-block-cover .wp-block-cover__background,
.follow-hero.wp-block-cover .wp-block-cover__background,
.baby-steps-hero.wp-block-cover .wp-block-cover__background {
  background-color: var(--rich-black) !important;
}

/* Fix for has-background-dim-100 class not applying */
.join-hero.has-background-dim-100 .wp-block-cover__background,
.follow-hero.has-background-dim-100 .wp-block-cover__background,
.baby-steps-hero.has-background-dim-100 .wp-block-cover__background {
  opacity: 1 !important;
  background-color: #1a1a1a !important;
}

/* Force sections AFTER hero to also be dark (not cream) */
.page-id-3763 .wp-block-group.has-cream-background-color,
.page-id-3764 .wp-block-group.has-cream-background-color,
.page-id-3765 .wp-block-group.has-cream-background-color {
  background-color: #1a1a1a !important;
}

/* Ensure all text on these pages has proper contrast on dark backgrounds */
.page-id-3763 .has-warm-gray-color,
.page-id-3764 .has-warm-gray-color,
.page-id-3765 .has-warm-gray-color {
  color: #c0c0c0 !important;
}

/* ========================================
   FOOTER - 2025 REDESIGN
   ======================================== */
footer.wp-block-template-part {
  position: relative;
}

/* Footer Logo */
footer .wp-block-site-logo img {
  max-width: 200px !important;
  height: auto !important;
}

/* Footer Headings */
footer h4.has-gold-bright-color {
  margin-bottom: 16px !important;
}

/* Footer Navigation Links */
footer .wp-block-navigation-item__content {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.9rem !important;
  transition: all 0.3s ease !important;
}

footer .wp-block-navigation-item__content:hover {
  color: var(--golden-yellow) !important;
  transform: translateX(5px);
}

/* Footer Social Links */
footer .wp-block-social-links {
  gap: 20px !important;
}

footer .wp-block-social-link {
  width: 50px !important;
  height: 50px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

footer .wp-block-social-link:hover {
  background: var(--golden-yellow) !important;
  transform: translateY(-3px);
}

footer .wp-block-social-link:hover svg {
  fill: var(--rich-black) !important;
}

/* Footer Copyright */
footer .wp-block-separator {
  opacity: 0.3;
}

/* 2025 Footer Specific Styles */
.site-footer-2025 {
  text-align: center;
}

.site-footer-2025 .footer-logo img {
  max-width: 200px !important;
  height: auto !important;
  margin-bottom: 30px;
}

.site-footer-2025 .footer-social {
  justify-content: center !important;
  gap: 20px !important;
}

.site-footer-2025 .footer-social .wp-block-social-link {
  width: 50px !important;
  height: 50px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
}

.site-footer-2025 .footer-social .wp-block-social-link:hover {
  background: var(--golden-yellow) !important;
}

.site-footer-2025 .footer-social .wp-block-social-link:hover a {
  color: var(--rich-black) !important;
}

.site-footer-2025 .footer-nav .wp-block-navigation-item__content {
  color: rgba(255, 255, 255, 0.7) !important;
  transition: color 0.3s ease !important;
}

.site-footer-2025 .footer-nav .wp-block-navigation-item__content:hover {
  color: var(--golden-yellow) !important;
}

/* Force Hero Text Contrast */
.wp-block-cover .wp-block-heading.has-white-color,
.wp-block-cover p.has-white-color,
.wp-block-cover .wp-block-button__link.has-white-color {
  color: #ffffff !important;
}

/* Force Footer Contrast */
.has-black-background-color {
  background-color: var(--rich-black) !important;
  color: var(--white) !important;
}

footer.wp-block-template-part .has-white-color,
footer.wp-block-template-part p,
footer.wp-block-template-part li {
  color: var(--white) !important;
}

/* Hero Buttons */
.hero-btn-primary .wp-block-button__link {
  box-shadow: var(--shadow-gold) !important;
  transition: all 0.3s ease !important;
}

.hero-btn-primary .wp-block-button__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(212, 175, 55, 0.5) !important;
}

.hero-btn-secondary .wp-block-button__link {
  border-color: var(--white) !important;
  color: var(--white);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease !important;
}

.hero-btn-secondary .wp-block-button__link:hover {
  background: var(--white) !important;
  color: var(--burgundy-red);
  transform: translateY(-3px);
}

/* Hero Badge */
.hero-badge {
  animation: fadeInUp 1s ease-out;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

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

/* Animated Particles Effect (CSS-only version) - Bright Gold */
.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(
      circle at 10% 20%,
      rgba(255, 215, 0, 0.4) 0%,
      transparent 8px
    ),
    radial-gradient(
      circle at 90% 45%,
      rgba(255, 199, 0, 0.3) 0%,
      transparent 6px
    ),
    radial-gradient(
      circle at 30% 70%,
      rgba(255, 215, 0, 0.35) 0%,
      transparent 10px
    ),
    radial-gradient(
      circle at 70% 15%,
      rgba(255, 199, 0, 0.3) 0%,
      transparent 7px
    ),
    radial-gradient(
      circle at 50% 80%,
      rgba(255, 215, 0, 0.4) 0%,
      transparent 9px
    );
  animation: floatParticles 4s ease-in-out infinite;
  pointer-events: none;
}

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

/* Glowing Orbs - Bright Gold */
.hero-section::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(255, 215, 0, 0.4) 0%,
    transparent 70%
  );
  top: -100px;
  left: -100px;
  filter: blur(60px);
  pointer-events: none;
}

/* ========================================
   PREMIERE BANNER
   ======================================== */
.premiere-banner {
  animation: slideIn 0.5s ease-out;
}

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

/* ========================================
   CONTENT CARDS
   ======================================== */
.promo-card,
.blog-card {
  box-shadow: var(--shadow-card);
  transition: all 0.3s ease;
}

.promo-card:hover,
.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Video Placeholder */
.promo-video-placeholder {
  background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%) !important;
  cursor: pointer;
  transition: all 0.3s ease;
}

.promo-video-placeholder:hover {
  background: linear-gradient(135deg, #ebebeb 0%, #d5d5d5 100%) !important;
}

/* ========================================
   CTA SECTIONS
   ======================================== */
.baby-steps-cta {
  position: relative;
  overflow: hidden;
}

.baby-steps-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 70%
  );
  animation: shimmer 1.5s infinite;
}

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

/* ========================================
   BUTTON STYLES
   ======================================== */
.wp-block-button__link,
.wp-block-post-excerpt__more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  min-height: 44px;
  border-radius: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  text-decoration: none !important; /* Force remove underline */
  transition: all 0.3s ease !important;
}

.wp-block-button__link:hover,
.wp-block-post-excerpt__more-link:hover {
  transform: translateY(-2px);
}

.wp-block-post-excerpt__more-link {
  background: var(--burgundy-red);
  color: var(--white);
  box-shadow: var(--shadow-button);
  text-decoration: none !important;
  padding-left: 22px;
  padding-right: 22px;
}

.wp-block-post-excerpt__more-link:hover,
.wp-block-post-excerpt__more-link:focus-visible {
  background: #a02222;
  color: var(--white);
}

/* Outline Button Style */
.is-style-outline .wp-block-button__link {
  border: 2px solid var(--burgundy-red) !important;
  color: var(--burgundy-red);
  background: transparent !important;
}

.is-style-outline .wp-block-button__link:hover {
  background: var(--burgundy-red) !important;
  color: var(--white);
}

.wp-block-query-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers {
  display: flex;
  gap: 8px;
}

.wp-block-query-pagination a,
.wp-block-query-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  min-width: 88px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--burgundy-red);
  background: var(--white);
  color: var(--burgundy-red);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.wp-block-query-pagination .current {
  background: var(--burgundy-red);
  color: var(--white);
}

.wp-block-query-pagination a:hover,
.wp-block-query-pagination a:focus-visible {
  background: var(--burgundy-red);
  color: var(--white);
}

/* ========================================
   CONTACT PAGE STYLES - PREMIUM 2025
   ======================================== */

/* Contact Page Background - Match homepage dark gradient */
.page-id-contact-us,
body.page-id-36,
body[class*="contact"] .wp-site-blocks {
  background: var(--gradient-hero) !important;
  min-height: 100vh;
}

/* Add subtle gold particle effect like homepage */
body.page-id-36 .wp-site-blocks::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(
      2px 2px at 20% 30%,
      rgba(255, 215, 0, 0.4) 0%,
      transparent 100%
    ),
    radial-gradient(
      2px 2px at 80% 20%,
      rgba(255, 215, 0, 0.3) 0%,
      transparent 100%
    ),
    radial-gradient(
      2px 2px at 40% 70%,
      rgba(255, 215, 0, 0.35) 0%,
      transparent 100%
    ),
    radial-gradient(
      2px 2px at 70% 60%,
      rgba(255, 215, 0, 0.25) 0%,
      transparent 100%
    );
  pointer-events: none;
  z-index: 0;
  animation: particleFloat 20s ease-in-out infinite;
}

/* Main content wrapper - ensure proper z-index */
body.page-id-36 main {
  position: relative;
  z-index: 1;
  padding-top: 120px !important; /* Account for fixed header */
  padding-bottom: 80px !important;
}

/* Page Title - Premium gold styling (ALL HEADINGS) */
body.page-id-36 .wp-block-post-title,
body.page-id-36 h1.wp-block-heading,
body.page-id-36 h1,
body.page-id-36 .entry-title,
.page-id-36 h1 {
  font-family: var(--font-heading) !important;
  font-size: 3.5rem !important;
  font-weight: 700 !important;
  color: var(--golden-yellow) !important;
  text-align: center !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(212, 175, 55, 0.6) !important;
  margin-bottom: 20px !important;
  animation: fadeInUp 0.6s ease-out;
}

/* Section Headings like "GET IN TOUCH" - Gold styling */
body.page-id-36 h2.wp-block-heading,
body.page-id-36 h2,
body.page-id-36 h3.wp-block-heading,
body.page-id-36 h3,
.page-id-36 h2,
.page-id-36 h3 {
  font-family: var(--font-heading) !important;
  color: var(--golden-yellow) !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Smaller h2 styling */
body.page-id-36 h2,
.page-id-36 h2 {
  font-size: 1.5rem !important;
  margin-bottom: 15px !important;
}

/* Subtitle/Description text - All paragraphs cream/white */
body.page-id-36 .wp-block-post-content > p:first-of-type,
body.page-id-36 .contact-intro {
  font-family: var(--font-body) !important;
  font-size: 1.2rem !important;
  color: var(--cream) !important;
  text-align: center !important;
  max-width: 600px !important;
  margin: 0 auto 50px auto !important;
  line-height: 1.8 !important;
  opacity: 0.9;
}

/* Ensure ALL text on Contact page is visible (white/cream) */
.page-id-36 main,
.page-id-36 main p,
.page-id-36 .wpcf7-form label,
.page-id-36 .wpcf7-form-control-wrap,
.page-id-36 .wpcf7-form p,
.page-id-36 .wp-block-column p,
.page-id-36 .wp-block-group p,
body.page-id-36 p {
  color: var(--white) !important;
}

/* Form Container - Constrained width with glass effect */
body.page-id-36 .wpcf7,
body.page-id-36 .wp-block-contact-form-7-contact-form-selector {
  max-width: 650px !important;
  margin: 0 auto !important;
  background: rgba(26, 26, 26, 0.6) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 20px !important;
  padding: 26px !important;
  border: 1px solid rgba(255, 215, 0, 0.2) !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 215, 0, 0.1) !important;
}

/* Contact form field labels - Gold accent */
.page-id-36 .wpcf7-form label {
  color: var(--golden-yellow) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
  display: block !important;
}

/* Contact form input fields - Premium styling */
.page-id-36 .wpcf7-form input[type="text"],
.page-id-36 .wpcf7-form input[type="email"],
.page-id-36 .wpcf7-form textarea {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: var(--dark-charcoal) !important;
  border: 2px solid rgba(255, 215, 0, 0.3) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  width: 100% !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.page-id-36 .wpcf7-form input[type="text"]:focus,
.page-id-36 .wpcf7-form input[type="email"]:focus,
.page-id-36 .wpcf7-form textarea:focus {
  border-color: var(--golden-yellow) !important;
  outline: none !important;
  box-shadow:
    0 0 0 4px rgba(255, 215, 0, 0.2),
    0 4px 20px rgba(255, 215, 0, 0.15) !important;
  transform: translateY(-2px) !important;
}

/* Textarea specific styling */
.page-id-36 .wpcf7-form textarea {
  min-height: 90px !important;
  resize: vertical !important;
}

/* Form field spacing */
.page-id-36 .wpcf7-form p {
  margin-bottom: 14px !important;
}

/* Checkbox styling */
.page-id-36 .wpcf7-form .wpcf7-acceptance {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.page-id-36 .wpcf7-form input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  accent-color: var(--golden-yellow) !important;
  cursor: pointer !important;
}

/* Submit Button - Premium gradient matching homepage CTAs */
/* Submit Button - Updated to Gold Gradient per client request */
.page-id-36 .wpcf7-form input[type="submit"],
.page-id-36 .wpcf7-form .wpcf7-submit {
  background: var(--gradient-gold-shimmer) !important;
  color: var(--rich-black) !important;
  font-family: var(--font-heading) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 12px 22px !important; /* Adjusted for better fit */
  border: none !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  text-align: center !important; /* Explicitly center text */
  box-sizing: border-box !important; /* Ensure padding doesn't push width */
  transition: all 0.3s ease !important;
  box-shadow: var(--shadow-button) !important;
  display: block !important;
  width: 100% !important;
  margin-top: 14px !important;
}

.page-id-36 .wpcf7-form input[type="submit"]:hover,
.page-id-36 .wpcf7-form .wpcf7-submit:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-gold) !important;
  background: var(--gradient-gold-to-dark) !important;
}

.page-id-36 .wpcf7-form input[type="submit"]:active,
.page-id-36 .wpcf7-form .wpcf7-submit:active {
  transform: translateY(-1px) !important;
}

/* Form validation messages */
.page-id-36 .wpcf7-response-output {
  border-radius: 12px !important;
  padding: 15px 20px !important;
  margin-top: 20px !important;
  font-family: var(--font-body) !important;
}

.page-id-36 .wpcf7-mail-sent-ok {
  background: rgba(46, 204, 113, 0.2) !important;
  border-color: #2ecc71 !important;
  color: #2ecc71 !important;
}

.page-id-36 .wpcf7-validation-errors {
  background: rgba(231, 76, 60, 0.2) !important;
  border-color: #e74c3c !important;
  color: #e74c3c !important;
}

/* Spinner styling */
.page-id-36 .wpcf7-spinner {
  margin: 10px auto !important;
  display: block !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  body.page-id-36 .wp-block-post-title,
  body.page-id-36 h1.wp-block-heading {
    font-size: 2.2rem !important;
    letter-spacing: 1px !important;
  }

  body.page-id-36 .wpcf7,
  body.page-id-36 .wp-block-contact-form-7-contact-form-selector {
    padding: 30px 25px !important;
    margin: 0 15px !important;
  }

  .page-id-36 .wpcf7-form input[type="submit"] {
    padding: 16px 30px !important;
    font-size: 1rem !important;
  }
}

/* Premium Form Container - Glass Effect */
.contact-form-premium {
  background: rgba(26, 26, 26, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 215, 0, 0.25) !important;
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 215, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Contact Hero Image Enhancement */
.contact-hero-image img {
  box-shadow:
    0 12px 40px rgba(255, 215, 0, 0.15),
    0 4px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease;
}

.contact-hero-image:hover img {
  transform: scale(1.02);
  box-shadow:
    0 16px 50px rgba(255, 215, 0, 0.25),
    0 6px 25px rgba(0, 0, 0, 0.35);
}

/* Phone Input Styling */
.page-id-36 .wpcf7-form input[type="tel"] {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: var(--dark-charcoal) !important;
  border: 2px solid rgba(255, 215, 0, 0.3) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  width: 100% !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.page-id-36 .wpcf7-form input[type="tel"]:focus {
  border-color: var(--golden-yellow) !important;
  outline: none !important;
  box-shadow:
    0 0 0 4px rgba(255, 215, 0, 0.2),
    0 4px 20px rgba(255, 215, 0, 0.15) !important;
  transform: translateY(-2px) !important;
}

/* Select Dropdown - Premium Gold Styling */
.page-id-36 .wpcf7-form select,
.page-id-36 .wpcf7-form .wpcf7-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23B8860B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 20px !important;
  color: var(--dark-charcoal) !important;
  border: 2px solid rgba(255, 215, 0, 0.3) !important;
  border-radius: 12px !important;
  padding: 16px 50px 16px 18px !important;
  width: 100% !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.page-id-36 .wpcf7-form select:focus,
.page-id-36 .wpcf7-form .wpcf7-select:focus {
  border-color: var(--golden-yellow) !important;
  outline: none !important;
  box-shadow:
    0 0 0 4px rgba(255, 215, 0, 0.2),
    0 4px 20px rgba(255, 215, 0, 0.15) !important;
  transform: translateY(-2px) !important;
}

.page-id-36 .wpcf7-form select:hover,
.page-id-36 .wpcf7-form .wpcf7-select:hover {
  border-color: rgba(255, 215, 0, 0.5) !important;
}

/* Select Option Styling */
.page-id-36 .wpcf7-form select option {
  padding: 12px 16px !important;
  background: #ffffff !important;
  color: var(--dark-charcoal) !important;
}

/* Form Row Styling */
.page-id-36 .wpcf7-form .form-row {
  margin-bottom: 24px !important;
}

.page-id-36 .wpcf7-form .form-row label {
  color: var(--golden-yellow) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
  display: block !important;
}

.page-id-36 .wpcf7-form .form-row .required {
  color: #e74c3c !important;
  margin-left: 3px !important;
}

/* Form Message Textarea */
.page-id-36 .wpcf7-form .form-message textarea {
  min-height: 120px !important;
}

/* Form Submit Button Row */
.page-id-36 .wpcf7-form .form-submit {
  margin-top: 32px !important;
}

/* ========================================
   FOOTER STYLES
   ======================================== */
.site-footer {
  position: relative;
}

/* Footer Logo */
.footer-logo {
  transition: all 0.3s ease;
}

/* Footer Links */
.footer-links {
  list-style: none !important;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  transition: all 0.3s ease !important;
  display: inline-block;
}

.footer-links a:hover {
  color: var(--warm-orange);
  transform: translateX(5px);
}

/* Social Links */
.site-footer .wp-block-social-links .wp-block-social-link {
  transition: all 0.3s ease;
}

.site-footer .wp-block-social-links .wp-block-social-link:hover {
  transform: translateY(-3px);
}

/* Newsletter Form */
.footer-newsletter-form input:focus {
  outline: none;
  border-color: var(--warm-orange) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.footer-newsletter-form button:hover {
  background: var(--warm-orange) !important;
  transform: scale(1.05);
}

/* ========================================
   FRONT PAGE STYLES
   ======================================== */

/* Cat Miller Hero Section - Clean Two Columns */
.cat-miller-hero-section {
  position: relative;
  z-index: 2;
}

.cat-miller-hero-section .wp-block-column {
  transition: all 0.3s ease;
}

.cat-hero-image img {
  box-shadow: 0 8px 30px rgba(61, 40, 23, 0.3);
  transition: all 0.3s ease;
}

.cat-hero-image img:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 40px rgba(212, 175, 55, 0.4);
}

.cat-hero-name {
  text-shadow:
    0 3px 10px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(212, 175, 55, 0.3);
  margin-bottom: 12px !important;
}

.cat-hero-tagline {
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(212, 175, 55, 0.2);
  opacity: 0.95;
}

/* Enhanced CTA Buttons */
.cta-buttons-row-improved .cta-button-enhanced .wp-block-button__link {
  box-shadow: var(--shadow-button);
  transition: all 0.3s ease !important;
}

.cta-buttons-row-improved .cta-button-enhanced .wp-block-button__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(61, 40, 23, 0.4);
  background-color: #2a1810 !important;
}

.cta-buttons-row-improved .cta-button-golden .wp-block-button__link {
  box-shadow: var(--shadow-gold);
  transition: all 0.3s ease !important;
}

.cta-buttons-row-improved .cta-button-golden .wp-block-button__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(212, 175, 55, 0.5);
  background-color: #e5c04b !important;
}

/* Feature Cards */
.feature-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 3px solid rgba(212, 175, 55, 0.3) !important;
  box-shadow:
    0 10px 35px rgba(212, 175, 55, 0.15),
    0 8px 25px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
  cursor: pointer;
}

/* Allow background color overrides */
.feature-card.has-orange-background-color {
  background-color: var(--warm-orange) !important;
  color: var(--white) !important;
}

.feature-card.has-orange-background-color h3 {
  color: var(--golden-yellow) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 15px 45px rgba(212, 175, 55, 0.25),
    0 12px 35px rgba(0, 0, 0, 0.3);
  background: #ffffff;
}

.feature-card.has-orange-background-color:hover {
  background-color: #e65c00 !important; /* Slightly lighter orange on hover */
}

.video-feature:hover {
  border-color: rgba(212, 175, 55, 0.7) !important;
  box-shadow:
    0 15px 45px rgba(212, 175, 55, 0.4),
    0 12px 35px rgba(61, 40, 23, 0.25);
}

.blog-feature:hover {
  border-color: rgba(212, 175, 55, 0.7) !important;
  box-shadow:
    0 15px 45px rgba(212, 175, 55, 0.4),
    0 12px 35px rgba(61, 40, 23, 0.25);
}

.gift-feature {
  background: linear-gradient(
    135deg,
    rgba(245, 239, 231, 0.95),
    rgba(255, 255, 255, 0.95)
  );
  border-color: rgba(212, 175, 55, 0.5) !important;
}

.gift-feature:hover {
  border-color: rgba(212, 175, 55, 0.8) !important;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), #ffffff);
  box-shadow:
    0 15px 45px rgba(212, 175, 55, 0.5),
    0 12px 35px rgba(61, 40, 23, 0.2);
}

/* Discover More Section Title */
h2.has-gold-color {
  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(212, 175, 55, 0.6);
  animation: fadeInUp 0.6s ease-out;
}

/* Add gold glow to headings */
.feature-card h3 {
  text-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
  transition: all 0.3s ease;
}

.feature-card:hover h3 {
  text-shadow: 0 3px 12px rgba(212, 175, 55, 0.4);
}

@media (max-width: 968px) {
  .cat-miller-hero-section {
    flex-direction: column !important;
  }

  .cat-hero-name {
    font-size: 3rem !important;
  }

  .cat-hero-tagline {
    font-size: 1.1rem !important;
  }

  .cta-buttons-row-improved {
    flex-direction: column;
    gap: 15px !important;
  }

  .cta-button-enhanced,
  .cta-button-golden {
    width: 100%;
  }

  .content-cards-enhanced {
    flex-direction: column !important;
  }
}

/* ========================================
   ORIGINAL FRONT PAGE STYLES
   ======================================== */

/* Front Page Wrapper (Global Background) */
.front-page-wrapper {
  position: relative;
  overflow: hidden;
  background: var(--gradient-hero) !important;
  min-height: 100vh;
}

/* Remove default block padding on homepage to prevent gaps */
.home .wp-site-blocks > header {
  margin-bottom: 0 !important;
}

.home .wp-site-blocks > .wp-block-post-content {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.home .wp-site-blocks > footer {
  margin-top: 0 !important;
}

/* Also ensure the first/last children of content don't add gaps */
.home .wp-block-post-content > :first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.home .wp-block-post-content > :last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Animated Particles Effect on Wrapper - Bright Gold */
.front-page-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(
      circle at 10% 20%,
      rgba(255, 215, 0, 0.4) 0%,
      transparent 8px
    ),
    radial-gradient(
      circle at 90% 45%,
      rgba(255, 199, 0, 0.3) 0%,
      transparent 6px
    ),
    radial-gradient(
      circle at 30% 70%,
      rgba(255, 215, 0, 0.35) 0%,
      transparent 10px
    ),
    radial-gradient(
      circle at 70% 15%,
      rgba(255, 199, 0, 0.3) 0%,
      transparent 7px
    ),
    radial-gradient(
      circle at 50% 80%,
      rgba(255, 215, 0, 0.4) 0%,
      transparent 9px
    );
  animation: floatParticles 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* Glowing Orbs on Wrapper - Bright Gold */
.front-page-wrapper::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    rgba(255, 215, 0, 0.3) 0%,
    transparent 70%
  );
  top: -100px;
  left: -100px;
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
}

/* Logo Section - Transparent */
.logo-section {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  position: relative;
  z-index: 2;
}

.logo-section:hover {
  box-shadow: none !important;
}

.logo-section h1,
.logo-section p {
  color: var(--white) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ========================================
   VIDEO CAROUSEL & SEARCH
   ======================================== */

.video-search-section {
  position: relative;
  z-index: 10;
}

.video-search-input {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: block;
  padding: 15px 25px;
  font-size: 1.1rem;
  border: 2px solid rgba(255, 215, 0, 0.2);
  border-radius: 50px;
  background: var(--dark-charcoal);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  color: var(--white);
}

.video-search-input:focus {
  outline: none;
  border-color: var(--golden-yellow);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
  transform: translateY(-2px);
}

.video-carousel-container {
  position: relative;
  padding: 20px 0;
}

.video-carousel-query .wp-block-post-template {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 30px;
  padding: 20px 5px 40px 5px; /* Bottom padding for shadow */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  margin: 0; /* Reset default list margin */
  list-style: none; /* Remove bullets */
}

.video-carousel-query .wp-block-post-template::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.video-carousel-query .wp-block-post-template li {
  flex: 0 0 320px;
  scroll-snap-align: center;
  transform-origin: center center;
  transition: all 0.3s ease;
}

/* Target the inner card for hover effects */
.video-carousel-query .wp-block-post-template li .carousel-item {
  height: 100%;
  cursor: pointer;
}

.video-carousel-query .wp-block-post-template li:hover {
  transform: translateY(-10px) scale(1.02);
  z-index: 5;
}

.video-carousel-query .wp-block-post-template li:hover .carousel-item {
  box-shadow: 0 15px 40px rgba(61, 40, 23, 0.15) !important;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--dark-charcoal);
  border: 1px solid rgba(255, 215, 0, 0.2);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: var(--golden-yellow);
}

.carousel-nav:hover {
  background: var(--burgundy-red);
  color: white;
  transform: translateY(-50%) scale(1.1);
}

.carousel-nav.prev {
  left: -25px;
}

.carousel-nav.next {
  right: -25px;
}

@media (max-width: 768px) {
  .carousel-nav {
    display: none; /* Hide nav buttons on mobile, use swipe */
  }
  .carousel-item {
    flex: 0 0 280px;
  }
}

/* ========================================
   HERO LOGO - RESPONSIVE SCALING (Task 3.2)
   Fluid logo sizing using clamp() for optimal readability
   across all viewport sizes
   ======================================== */

/* Base hero logo styling with fluid scaling */
.hero-logo img,
.hero-logo.size-large img,
figure.hero-logo img,
figure.hero-logo.size-large img {
  /* Fluid scaling: min 200px, preferred 35vw, max 450px */
  width: clamp(200px, 35vw, 450px) !important;
  height: auto !important;
  max-width: none !important; /* Override WordPress default max-width constraints */
  margin-bottom: 20px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
  /* Ensure aspect ratio is maintained */
  object-fit: contain;
  /* Smooth transitions for any size changes */
  transition: all 0.3s ease;
  /* Ensure logo is always centered */
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* Prevent logo from being too small on any device */
  min-width: 180px;
  /* Ensure logo maintains readability with proper contrast */
  background: transparent;
}

/* Enhanced responsive scaling for different viewport ranges */

/* Large desktop screens (1200px+) - Larger logo for impact */
@media (min-width: 1200px) {
  .hero-logo img,
  .hero-logo.size-large img,
  figure.hero-logo img,
  figure.hero-logo.size-large img {
    width: clamp(350px, 30vw, 500px) !important;
  }
}

/* Desktop screens (1024px - 1199px) - Standard size */
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero-logo img,
  .hero-logo.size-large img,
  figure.hero-logo img,
  figure.hero-logo.size-large img {
    width: clamp(300px, 32vw, 420px) !important;
  }
}

/* Tablet landscape (768px - 1023px) - Balanced scaling */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-logo img,
  .hero-logo.size-large img,
  figure.hero-logo img,
  figure.hero-logo.size-large img {
    width: clamp(250px, 40vw, 350px) !important;
  }
}

/* Tablet portrait (481px - 767px) - Optimized for readability */
@media (min-width: 481px) and (max-width: 767px) {
  .hero-logo img,
  .hero-logo.size-large img,
  figure.hero-logo img,
  figure.hero-logo.size-large img {
    width: clamp(220px, 50vw, 320px) !important;
    margin-bottom: 25px;
  }
}

/* Mobile devices (320px - 480px) - Ensure readability */
@media (max-width: 480px) {
  .hero-logo img,
  .hero-logo.size-large img,
  figure.hero-logo img,
  figure.hero-logo.size-large img {
    /* Minimum 180px ensures logo remains readable on smallest screens */
    width: clamp(180px, 60vw, 280px) !important;
    margin-bottom: 20px;
    /* Slightly stronger shadow for better visibility on mobile */
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.4));
  }
}

/* Extra small mobile devices (below 320px) - Fallback */
@media (max-width: 319px) {
  .hero-logo img,
  .hero-logo.size-large img,
  figure.hero-logo img,
  figure.hero-logo.size-large img {
    width: clamp(160px, 70vw, 240px) !important;
    margin-bottom: 15px;
    /* Ensure minimum readability on very small screens */
    min-width: 160px;
  }
}

/* Ultra-wide screens (1920px+) - Prevent logo from becoming too large */
@media (min-width: 1920px) {
  .hero-logo img,
  .hero-logo.size-large img,
  figure.hero-logo img,
  figure.hero-logo.size-large img {
    width: clamp(400px, 25vw, 600px) !important;
    max-width: 600px !important;
  }
}

/* High DPI displays - Ensure crisp rendering */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero-logo img,
  .hero-logo.size-large img,
  figure.hero-logo img,
  figure.hero-logo.size-large img {
    /* Ensure sharp rendering on retina displays */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* Enhanced shadow for better visibility on high-DPI screens */
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
  }
}

/* Reduced motion accessibility - Disable transitions for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-logo img,
  .hero-logo.size-large img,
  figure.hero-logo img,
  figure.hero-logo.size-large img {
    transition: none !important;
  }
}

/* Print styles - Ensure logo is appropriately sized for print */
@media print {
  .hero-logo img,
  .hero-logo.size-large img,
  figure.hero-logo img,
  figure.hero-logo.size-large img {
    width: 300px !important;
    max-width: 300px !important;
    filter: none !important;
    box-shadow: none !important;
  }
}

/* ========================================
   CENTERED HERO LOGO - ENHANCED SIZE (Task 8.2)
   Requirements: 2.2 - Adjust spacing and positioning for logo
   ======================================== */

/* Centered Logo at Top - Much Larger and More Prominent */
.hero-section .hero-logo-centered,
.hero-section figure.hero-logo-centered {
  text-align: center;
  margin: 0 auto 50px auto;
  z-index: 10;
  position: relative;
  width: 100%;
  max-width: none;
  display: block;
}

.hero-section .hero-logo-centered img,
.hero-section figure.hero-logo-centered img {
  /* Much larger logo - responsive scaling across the top */
  width: clamp(500px, 60vw, 800px) !important;
  height: auto !important;
  max-width: none !important;

  /* Enhanced visual effects */
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.4));
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* Ensure crisp rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;

  /* Center the image */
  display: block;
  margin: 0 auto;
}

.hero-section .hero-logo-centered:hover img,
.hero-section figure.hero-logo-centered:hover img {
  filter: drop-shadow(0 16px 48px rgba(255, 215, 0, 0.5));
  transform: translateY(-6px) scale(1.02);
}

/* Responsive scaling for centered logo */
@media (min-width: 1920px) {
  .hero-section .hero-logo-centered img,
  .hero-section figure.hero-logo-centered img {
    width: clamp(600px, 50vw, 900px) !important;
  }
}

@media (min-width: 1440px) and (max-width: 1919px) {
  .hero-section .hero-logo-centered img,
  .hero-section figure.hero-logo-centered img {
    width: clamp(550px, 55vw, 750px) !important;
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  .hero-section .hero-logo-centered img,
  .hero-section figure.hero-logo-centered img {
    width: clamp(500px, 60vw, 700px) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .hero-section .hero-logo-centered img,
  .hero-section figure.hero-logo-centered img {
    width: clamp(450px, 65vw, 600px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section .hero-logo-centered img,
  .hero-section figure.hero-logo-centered img {
    width: clamp(400px, 70vw, 550px) !important;
    margin-bottom: 40px;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .hero-section .hero-logo-centered img,
  .hero-section figure.hero-logo-centered img {
    width: clamp(350px, 75vw, 450px) !important;
    margin-bottom: 35px;
  }
}

@media (max-width: 480px) {
  .hero-section .hero-logo-centered img,
  .hero-section figure.hero-logo-centered img {
    width: clamp(300px, 80vw, 400px) !important;
    margin-bottom: 30px;
  }
}

@media (max-width: 320px) {
  .hero-section .hero-logo-centered img,
  .hero-section figure.hero-logo-centered img {
    width: clamp(250px, 85vw, 350px) !important;
    margin-bottom: 25px;
  }
}

.hero-with-text {
  margin-bottom: 20px !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-cat-name {
  font-family: var(--font-heading) !important;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  line-height: 1.1;
  margin: 0 !important;
}

.hero-cat-image img {
  width: 100% !important; /* FILL CONTAINER */
  max-width: none !important;
  height: auto !important;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  margin-bottom: 0 !important;
}

.hero-cta-button .wp-block-button__link {
  background: var(--gradient-gold-shimmer) !important;
  color: var(--burgundy-red) !important;
  padding: 16px 40px !important;
  box-shadow: var(--shadow-gold);
  transition: all 0.3s ease !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
}

.hero-cta-button .wp-block-button__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  filter: brightness(1.1);
}

/* Content Cards Section */
.content-cards-section {
  align-items: stretch !important;
  position: relative;
  z-index: 2;
}

.content-card {
  min-height: 220px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.content-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  background: #ffffff !important;
}

.content-card h2 {
  font-family: var(--font-heading) !important;
  color: var(--burgundy-red) !important;
}

/* CTA Buttons Row */
.cta-buttons-row {
  gap: 20px !important;
  position: relative;
  z-index: 2;
}

.cta-button-primary .wp-block-button__link {
  padding: 14px 28px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  font-family: var(--font-heading) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease !important;
  color: var(--white) !important;
  background-color: var(--burgundy-red) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.cta-button-primary .wp-block-button__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(61, 40, 23, 0.4);
  background-color: #2a1810 !important;
  border-color: var(--golden-yellow) !important;
}

/* Gold CTA Button */
.cta-button-yellow .wp-block-button__link {
  background-color: var(--golden-yellow) !important;
  color: var(--dark-charcoal) !important;
  box-shadow: var(--shadow-gold) !important;
  padding: 14px 28px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  font-family: var(--font-heading) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.cta-button-yellow .wp-block-button__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(212, 175, 55, 0.5) !important;
  background-color: #e5c04b !important;
}

/* Premiere Banner */
.premiere-banner {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  position: relative;
  z-index: 2;
}

.premiere-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  background: #ffffff !important;
}

.premiere-banner h2 {
  color: var(--burgundy-red) !important;
  font-family: var(--font-heading) !important;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */
@media (max-width: 968px) {
  .hero-section {
    min-height: 500px !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }

  .hero-title {
    font-size: 3rem !important;
  }

  .hero-tagline {
    font-size: 1.2rem !important;
  }

  .hero-description {
    font-size: 1rem !important;
  }

  .baby-steps-cta .wp-block-columns {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .site-header {
    padding: 16px 20px !important;
  }

  .hero-section {
    padding: 60px 20px !important;
    min-height: 450px !important;
  }

  .hero-title {
    font-size: 2.2rem !important;
  }

  .hero-tagline {
    font-size: 1rem !important;
    letter-spacing: 2px !important;
  }

  .hero-btn-primary .wp-block-button__link,
  .hero-btn-secondary .wp-block-button__link {
    width: 100% !important;
    text-align: center !important;
  }

  .this-week-section .wp-block-columns,
  .about-section .wp-block-columns,
  .connect-section .wp-block-columns {
    flex-direction: column !important;
  }

  .this-week-section .wp-block-column,
  .about-section .wp-block-column,
  .connect-section .wp-block-column {
    flex-basis: 100% !important;
  }

  /* Front Page Mobile Styles */
  .logo-section {
    padding: 30px 25px !important;
  }

  .logo-section h1 {
    font-size: 2rem !important;
  }

  .logo-section p {
    font-size: 1.2rem !important;
  }

  .cat-miller-section,
  .content-cards-section {
    flex-direction: column !important;
  }

  .cat-miller-section .wp-block-column,
  .content-cards-section .wp-block-column {
    flex-basis: 100% !important;
    margin-bottom: 20px;
  }

  .cat-miller-card h2 {
    font-size: 2.5rem !important;
  }

  .cta-buttons-row {
    flex-direction: column !important;
    width: 100%;
  }

  .cta-button-primary {
    width: 100%;
  }

  .cta-button-primary .wp-block-button__link {
    width: 100% !important;
  }

  .premiere-banner h2 {
    font-size: 1.4rem !important;
  }

  .site-footer {
    padding: 40px 20px 20px !important;
  }

  .site-footer .wp-block-columns {
    flex-direction: column !important;
  }

  .site-footer .wp-block-column {
    flex-basis: 100% !important;
    margin-bottom: 30px;
  }

  .footer-newsletter-form {
    flex-direction: column !important;
  }

  .footer-newsletter-form input,
  .footer-newsletter-form button {
    width: 100% !important;
  }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
a:focus,
button:focus,
.wp-block-navigation-item__content:focus,
.wp-block-button__link:focus {
  outline: 3px solid var(--golden-yellow) !important;
  outline-offset: 2px !important;
}

/* Screen Reader Text */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   UTILITY: Hide reCAPTCHA badge on localhost
   ======================================== */
.grecaptcha-badge {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ========================================
   CRITICAL: Front Page Text Visibility
   ======================================== */
.front-page-wrapper .hero-with-text,
.front-page-wrapper .logo-section p {
  color: #ffd700 !important;
}

.front-page-wrapper .cat-hero-name,
.front-page-wrapper h1.cat-hero-name {
  color: #ffffff !important;
}

.front-page-wrapper .cat-hero-tagline,
.front-page-wrapper p.cat-hero-tagline {
  color: #fff8f0 !important;
}

.front-page-wrapper h2.has-text-align-center {
  color: #ffd700 !important;
}

/* ========================================
   EPISODE VIDEO STYLES
   ======================================== */
.episode-video-container {
  width: 100%;
  max-width: 854px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  margin-top: var(--wp--preset--spacing--40);
  aspect-ratio: 16 / 9;
  background: #000;
}

.episode-video-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.episode-featured-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-top: var(--wp--preset--spacing--40);
  box-shadow: var(--shadow-card);
}

/* ========================================
   WATCH PAGE - HERO SECTION
   ======================================== */

.watch-page {
  background-color: var(--rich-black);
}

.watch-hero {
  position: relative;
  text-align: center;
  overflow: hidden;
}

/* Compact hero for carousel-first layout */
.watch-hero--compact {
  padding-top: var(--wp--preset--spacing--60) !important;
  padding-bottom: var(--wp--preset--spacing--40) !important;
}

.watch-hero__title {
  margin-bottom: 12px !important;
  line-height: 1.1;
}

.watch-hero__subtitle {
  margin-bottom: 0 !important;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Gold Shimmer Text Animation */
.gold-shimmer-text {
  background: linear-gradient(
    90deg,
    var(--gold-deep) 0%,
    var(--golden-yellow) 25%,
    var(--gold-bright) 50%,
    var(--golden-yellow) 75%,
    var(--gold-deep) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 3s linear infinite;
}

@keyframes goldShimmer {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* ========================================
   WATCH PAGE - PROMINENT CAROUSEL SECTION
   ======================================== */

.watch-carousel-section--prominent {
  position: relative;
  z-index: 10;
}

/* Results Header - Above Carousel */
.pl-results-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.pl-results-header__count {
  font-size: 18px;
  font-weight: 600;
  color: var(--warm-gray);
  font-family: var(--font-heading);
}

.pl-results-header__search-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 20px;
  color: var(--golden-yellow);
  font-size: 14px;
  font-weight: 500;
  animation: fadeIn 0.3s ease;
}

.pl-results-header__search-icon {
  font-size: 14px;
}

.pl-results-header.has-search-results .pl-results-header__count {
  color: var(--golden-yellow);
}

.pl-results-header.has-no-results .pl-results-header__count {
  color: var(--warm-gray);
}

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

/* Prominent Carousel Styling */
.pl-carousel--prominent {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 20px;
  padding: 20px;
  border: 1px solid rgba(255, 215, 0, 0.1);
}

.pl-carousel--prominent .pl-carousel__nav {
  background: var(--golden-yellow);
  color: var(--rich-black);
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
}

.pl-carousel--prominent .pl-carousel__nav:hover:not(.disabled) {
  background: var(--gold-bright);
  transform: scale(1.15);
  box-shadow: 0 8px 30px rgba(255, 215, 0, 0.5);
}

/* ========================================
   WATCH PAGE - FILTER UI (Below Carousel)
   ======================================== */

.watch-filters {
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 20;
}

.watch-filters--below-carousel {
  margin-top: 0;
  border-radius: 16px;
}

.pl-filters {
  width: 100%;
}

.pl-filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.pl-filters__row:last-child {
  margin-bottom: 0;
}

.pl-filters__row--search {
  align-items: center;
}

/* Primary search row - larger and more prominent */
.pl-filters__row--primary {
  margin-bottom: 24px;
}

.pl-filters__row--dropdowns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  align-items: end;
}

.pl-filters__group--clear {
  display: flex;
  align-items: flex-end;
}

.pl-filters__group {
  flex: 1;
  min-width: 180px;
}

.pl-filters__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--golden-yellow); /* Changed from warm-gray for more pop on dark */
  margin-bottom: 6px;
  font-family: var(--font-heading);
}

.pl-filters__label.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pl-filters__select {
  width: 100%;
  padding: 12px 40px 12px 16px;
  font-size: 15px;
  font-family: var(--font-body);
  border: 2px solid rgba(255, 215, 0, 0.2);
  border-radius: 10px;
  background-color: var(--dark-charcoal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FFD700' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  appearance: none;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--white);
}

.pl-filters__select:hover {
  border-color: var(--gold-metallic);
}

.pl-filters__select:focus {
  outline: none;
  border-color: var(--golden-yellow);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
}

.pl-filters__search-group {
  flex: 2;
  min-width: 280px;
  position: relative;
  display: flex;
  align-items: center;
}

/* Large search group for primary search */
.pl-filters__search-group--large {
  flex: 1;
  min-width: 100%;
  max-width: 700px;
  margin: 0 auto;
  position: relative !important; /* Ensure positioning context */
  display: flex;
  align-items: center;
}

.pl-filters__input {
  width: 100%;
  padding: 14px 90px 14px 20px; /* Large right padding to clear absolute icon */
  font-size: 16px;
  font-family: var(--font-body);
  border: 2px solid rgba(255, 215, 0, 0.2);
  border-radius: 50px;
  background-color: var(--dark-charcoal);
  transition: all 0.3s ease;
  color: var(--white);
}

/* Large input for primary search */
.pl-filters__input--large {
  padding: 18px 60px 18px 28px;
  font-size: 18px;
  border-width: 3px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.pl-filters__input::placeholder {
  color: var(--warm-gray);
}

.pl-filters__input:hover {
  border-color: var(--gold-metallic);
}

.pl-filters__input:focus {
  outline: none;
  border-color: var(--golden-yellow);
  box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.2);
}

.pl-filters__input--large:focus {
  box-shadow:
    0 0 0 4px rgba(255, 215, 0, 0.25),
    0 8px 30px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* Integrated search icon - making it look like part of the input box */
.pl-filters__search-btn {
  position: absolute !important; /* Force absolute to override global button styles */
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  border: none;
  background: transparent;
  color: var(--warm-gray);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  z-index: 5;
  padding: 8px;
}

.pl-filters__search-btn--large {
  right: 22px;
}

.pl-filters__search-btn:hover,
.pl-filters__search-btn:focus {
  background: transparent;
  color: var(--golden-yellow);
  transform: translateY(-50%) scale(1.1);
  outline: none;
}

.pl-filters__search-btn:active {
  transform: translateY(-50%) scale(0.95);
  transition: transform 0.1s ease;
}

.pl-filters__clear {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-heading);
  border: 2px solid var(--warm-gray);
  border-radius: 8px;
  background: transparent;
  color: var(--warm-gray);
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.pl-filters__clear:hover {
  border-color: var(--burgundy-red);
  color: var(--burgundy-red);
}

/* Active Filters Tags */
.pl-filters__active {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.pl-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  background: var(--warm-beige);
  border-radius: 20px;
  color: var(--dark-charcoal);
}

.pl-filter-tag__remove {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--warm-gray);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  transition: background 0.2s ease;
}

.pl-filter-tag__remove:hover {
  background: var(--burgundy-red);
}

/* Results Info */
.pl-results-info {
  font-size: 14px;
  color: var(--warm-gray);
  font-family: var(--font-heading);
  font-weight: 500;
}

.pl-results-info__count.error {
  color: var(--burgundy-red);
}

/* ========================================
   WATCH PAGE - CAROUSEL
   ======================================== */

.pl-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* PRD 5.3: Enable smooth horizontal scrolling */
.pl-carousel__track-wrapper {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 12px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  /* Hide scrollbar for cleaner look */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.pl-carousel__track-wrapper::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* PRD 5.3: Cards flow naturally with scroll-snap */
.pl-carousel__track {
  display: flex;
  gap: 24px;
  padding: 10px 0; /* Room for hover shadow */
}

.pl-carousel__nav {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--white);
  color: var(--gold-deep);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.pl-carousel__nav:hover:not(.disabled) {
  background: var(--golden-yellow);
  color: var(--rich-black);
  transform: scale(1.1);
}

.pl-carousel__nav.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pl-carousel__nav svg {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  stroke: currentColor !important;
}

.pl-carousel__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  color: var(--warm-gray);
}

.pl-carousel__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(212, 175, 55, 0.2);
  border-top-color: var(--golden-yellow);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.pl-carousel__empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--warm-gray);
}

.pl-carousel__empty p {
  margin-bottom: 16px;
  font-size: 16px;
}

.pl-carousel__empty-btn {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-heading);
  border: 2px solid var(--golden-yellow);
  border-radius: 8px;
  background: transparent;
  color: var(--gold-deep);
  cursor: pointer;
  transition: all 0.3s ease;
}

.pl-carousel__empty-btn:hover {
  background: var(--golden-yellow);
  color: var(--rich-black);
}

/* Pagination Dots */
.pl-carousel__pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.pl-carousel__dot {
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.3);
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}

.pl-carousel__dot:hover {
  background: var(--gold-metallic);
}

.pl-carousel__dot.active {
  background: var(--golden-yellow);
  transform: scale(1.2);
}

/* ========================================
   WATCH PAGE - EPISODE CARDS
   ======================================== */

/* Support both class names - PRD 5.1: Larger cards */
.pl-card,
.pl-episode-card {
  flex: 0 0 calc(25% - 18px);
  min-width: 320px; /* Increased from 280px */
  max-width: 400px; /* Increased from 360px */
  background: var(--rich-black); /* PRD 5.6: Dark background */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  border: none; /* US-103: Removed border for cleaner look */
  scroll-snap-align: start; /* PRD 5.3: Snap cards when scrolling */
}

.pl-card:hover,
.pl-episode-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(212, 175, 55, 0.25);
}

.pl-card__link,
.pl-episode-card__link,
.has-rich-black-background-color .pl-card__link,
.has-rich-black-background-color .pl-episode-card__link {
  display: block;
  text-decoration: none !important;
  color: inherit;
  box-shadow: none !important;
  border-bottom: none !important;
}

.pl-card__image-wrapper,
.pl-episode-card__thumbnail {
  position: relative;
  aspect-ratio: 16 / 9; /* Updated to 16:9 to match YouTube thumbnail format */
  overflow: hidden;
  background: linear-gradient(135deg, var(--rich-black) 0%, #2a2a2a 100%);
}

.pl-card__image,
.pl-episode-card__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.pl-card:hover .pl-card__image,
.pl-episode-card:hover .pl-episode-card__thumbnail img {
  transform: scale(1.08);
}

/* Placeholder when no image */
.pl-episode-card__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--rich-black) 0%, #333 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pl-episode-card__placeholder::after {
  content: "▶";
  font-size: 48px;
  color: var(--golden-yellow);
  opacity: 0.3;
}

.pl-card__badge,
.pl-episode-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--golden-yellow);
  color: var(--rich-black);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 5;
}

.pl-card__overlay,
.pl-episode-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pl-card:hover .pl-card__overlay,
.pl-episode-card:hover .pl-episode-card__overlay {
  opacity: 1;
}

.pl-card__play-icon,
.pl-episode-card__play-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--golden-yellow);
  color: var(--rich-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transform: scale(0.8);
  transition: transform 0.3s ease;
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
}

.pl-card:hover .pl-card__play-icon,
.pl-episode-card:hover .pl-episode-card__play-icon {
  transform: scale(1);
}

.pl-card__content,
.pl-episode-card__content {
  padding: 12px 16px; /* PRD 5.5: Reduced padding for more thumbnail space */
  background: var(--rich-black); /* PRD 5.6: Dark background */
}

.pl-card__title,
.pl-episode-card__title {
  font-size: 14px; /* PRD 5.5: Slightly smaller for compact look */
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--golden-yellow); /* PRD 5.6: Gold text on dark */
  margin: 0 0 8px 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Episode Card Meta Section */
.pl-episode-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.pl-episode-card__meta-icon {
  margin-right: 6px;
  font-size: 12px;
  opacity: 0.85;
}

.pl-card__guests,
.pl-episode-card__guests {
  font-size: 12px;
  color: var(--gold-bright); /* PRD 5.6: Bright gold on dark */
  font-weight: 600;
  display: flex;
  align-items: center;
}

.pl-episode-card__location {
  font-size: 12px;
  color: var(--warm-gray);
  display: flex;
  align-items: center;
}

.pl-card__excerpt,
.pl-episode-card__excerpt {
  font-size: 12px;
  color: var(--warm-gray);
  margin: 6px 0 0 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pl-episode-card__date {
  font-size: 11px;
  color: var(--warm-gray);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  opacity: 0.75;
}

/* Pagination Styles */
.pl-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.pl-pagination__btn {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-heading);
  border: 2px solid var(--golden-yellow);
  border-radius: 8px;
  background: transparent;
  color: var(--golden-yellow);
  cursor: pointer;
  transition: all 0.3s ease;
}

.pl-pagination__btn:hover {
  background: var(--golden-yellow);
  color: var(--rich-black);
}

.pl-pagination__btn--prev,
.pl-pagination__btn--next {
  padding: 10px 20px;
}

.pl-pagination__arrow {
  font-size: 12px;
}

.pl-pagination__current {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-heading);
  background: var(--golden-yellow);
  color: var(--rich-black);
  border-radius: 8px;
}

.pl-pagination__ellipsis {
  padding: 0 8px;
  color: var(--warm-gray);
}

/* Active Filter Tags */
.pl-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.pl-active-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 20px;
  color: var(--gold-deep);
}

.pl-active-filter__remove {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--warm-gray);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  transition: background 0.2s ease;
}

.pl-active-filter__remove:hover {
  background: var(--burgundy-red);
}

/* ========================================
   WATCH PAGE - MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 1200px) {
  .pl-card,
  .pl-episode-card {
    flex: 0 0 calc(33.333% - 16px);
    min-width: 260px;
  }
}

@media (max-width: 900px) {
  .pl-card,
  .pl-episode-card {
    flex: 0 0 calc(50% - 12px);
    min-width: 240px;
  }

  .pl-carousel__nav {
    width: 40px;
    height: 40px;
  }

  .pl-filters__row--dropdowns {
    grid-template-columns: repeat(2, 1fr);
  }

  .pl-pagination {
    gap: 6px;
  }

  .pl-pagination__btn {
    padding: 8px 12px;
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .pl-filters__row {
    flex-direction: column;
    gap: 12px;
  }

  .pl-filters__group {
    min-width: 100%;
  }

  .pl-filters__row--dropdowns {
    grid-template-columns: 1fr;
  }

  .pl-filters__search-group {
    min-width: 100%;
  }

  .pl-filters__search-group--large {
    max-width: 100%;
  }

  .pl-filters__input--large {
    padding: 16px 55px 16px 20px;
    font-size: 16px;
  }

  .pl-filters__search-btn--large {
    width: 44px;
    height: 44px;
  }

  .pl-filters__clear {
    width: 100%;
  }

  .pl-carousel {
    flex-direction: column;
  }

  .pl-carousel--prominent {
    padding: 16px;
    border-radius: 16px;
  }

  /* Hide arrow nav on mobile - use touch scroll instead */
  .pl-carousel__nav--prev,
  .pl-carousel__nav--next {
    display: none;
  }

  .pl-card,
  .pl-episode-card {
    flex: 0 0 85%;
    min-width: 260px;
    max-width: 340px;
  }

  /* Enable horizontal touch scrolling on mobile */
  .pl-carousel__track {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 10px;
    transform: none !important; /* Disable JS transform on mobile */
  }

  .pl-carousel__track::-webkit-scrollbar {
    display: none;
  }

  .pl-card,
  .pl-episode-card {
    scroll-snap-align: center;
  }

  .watch-hero__title {
    font-size: clamp(24px, 5vw, 40px) !important;
  }

  .watch-hero--compact {
    padding-top: var(--wp--preset--spacing--40) !important;
    padding-bottom: var(--wp--preset--spacing--30) !important;
  }

  .pl-results-header {
    flex-direction: column;
    gap: 10px;
  }

  .pl-results-header__count {
    font-size: 16px;
  }

  .pl-pagination__btn--prev,
  .pl-pagination__btn--next {
    padding: 8px 14px;
  }
}

@media (max-width: 480px) {
  .watch-filters {
    padding: 20px 16px !important;
  }

  .pl-card__content,
  .pl-episode-card__content {
    padding: 14px;
  }

  .pl-card__title,
  .pl-episode-card__title {
    font-size: 14px;
  }

  .pl-episode-card__meta {
    gap: 2px;
  }

  .pl-episode-card__guests {
    font-size: 12px;
  }

  .pl-episode-card__excerpt {
    display: none; /* Hide excerpt on very small screens */
  }

  .pl-filters__input--large {
    padding: 14px 50px 14px 18px;
    font-size: 15px;
  }

  .pl-card,
  .pl-episode-card {
    flex: 0 0 90%;
    min-width: 240px;
  }
}

/* ========================================
   SINGLE EPISODE PAGE STYLES
   ======================================== */

.single-episode {
  background-color: var(--cream);
}

/* Breadcrumb Styles */
.single-episode .pl-breadcrumbs {
  font-size: 14px;
  color: var(--warm-gray);
  font-family: var(--font-body);
}

.single-episode .pl-breadcrumbs a {
  color: var(--gold-deep);
  text-decoration: none;
  transition: color 0.2s ease;
}

.single-episode .pl-breadcrumbs a:hover {
  color: var(--golden-yellow);
  text-decoration: underline;
}

.single-episode .pl-breadcrumbs .separator {
  margin: 0 10px;
  color: var(--warm-gray);
  opacity: 0.6;
}

.single-episode .pl-breadcrumbs .current {
  color: var(--dark-charcoal);
  font-weight: 600;
}

/* Episode Hero - Enhanced */
.episode-hero {
  position: relative;
  overflow: hidden;
}

/* Add subtle gold accent to hero */
.episode-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--gold-deep),
    var(--golden-yellow),
    var(--gold-deep)
  );
}

.episode-title {
  line-height: 1.2 !important;
  margin-bottom: 12px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Episode Meta Info */
.episode-hero .wp-block-post-date,
.episode-hero .wp-block-post-terms {
  font-family: var(--font-heading);
  letter-spacing: 0.5px;
}

.episode-hero .wp-block-post-terms a {
  color: var(--golden-yellow) !important;
  text-decoration: none;
  transition: all 0.2s ease;
}

.episode-hero .wp-block-post-terms a:hover {
  text-decoration: underline;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Two Column Layout */
.episode-content-columns {
  align-items: flex-start !important;
}

.episode-main-content {
  min-width: 0;
}

/* Episode Description */
.episode-description h2,
.episode-topics h3,
.episode-location h3 {
  color: var(--gold-bright) !important;
  font-family: var(--font-heading);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.episode-description h2 {
  margin-bottom: 24px !important;
  position: relative;
  padding-bottom: 12px;
  color: var(--golden-yellow) !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.episode-description h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--gradient-gold-shimmer);
  border-radius: 2px;
}

/* Topic Tags - hide comma separators */
.episode-topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0; /* Collapse comma text nodes */
}

.episode-topic-tags a {
  display: inline-block;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(45, 45, 45, 0.6);
  color: var(--cream);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.episode-topic-tags a:hover {
  background: var(--gradient-gold-shimmer);
  color: var(--rich-black);
  border-color: var(--golden-yellow);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold-glow);
}

/* Location Tags - hide comma separators */
.episode-location-tags {
  font-size: 0; /* Collapse comma text nodes */
}

.episode-location-tags a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--warm-gray);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s ease;
}

.episode-location-tags a:hover {
  color: var(--golden-yellow);
  transform: translateX(5px);
}

.episode-location-tags a::before {
  content: "📍";
}

/* ========================================
   GUEST SIDEBAR (F11)
   ======================================== */

.episode-sidebar {
  position: sticky;
  top: 120px;
}

.episode-guests-section {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.episode-guests-section h3 {
  margin-bottom: 20px !important;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--warm-beige);
}

/* Guest Sidebar from Shortcode */
.pl-guest-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pl-guest-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px;
  background: var(--rich-black);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.pl-guest-card:hover {
  background: var(--warm-beige);
  transform: translateY(-2px);
}

.pl-guest-card__image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--golden-yellow);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
  margin-bottom: 12px;
}

.pl-guest-card__name {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--dark-charcoal);
  margin: 0 0 6px 0;
}

.pl-guest-card__bio {
  font-size: 13px;
  color: var(--warm-gray);
  line-height: 1.5;
  margin: 0 0 12px 0;
}

.pl-guest-card__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.pl-guest-card__link {
  font-size: 12px;
  color: var(--gold-deep);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.pl-guest-card__link:hover {
  background: rgba(212, 175, 55, 0.15);
  color: var(--golden-yellow);
}

.pl-guest-sidebar__empty {
  text-align: center;
  padding: 20px;
  color: var(--warm-gray);
  font-style: italic;
}

/* Guest Sidebar Links */
.pl-guest-sidebar__name a {
  color: var(--gold-bright);
  text-decoration: none;
  transition: all 0.2s ease;
}

.pl-guest-sidebar__name a:hover {
  color: var(--golden-yellow);
  text-decoration: underline;
}

/* ========================================
   RELATED CONTENT (F12)
   ======================================== */

.related-content-section h2 {
  margin-bottom: 8px !important;
}

.pl-related-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.pl-related-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.pl-related-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.2);
}

.pl-related-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.pl-related-card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--rich-black);
}

.pl-related-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.pl-related-card:hover .pl-related-card__image img {
  transform: scale(1.08);
}

.pl-related-card__content {
  padding: 20px;
}

.pl-related-card__type {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold-deep);
  margin-bottom: 8px;
}

.pl-related-card__title {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--dark-charcoal);
  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;
}

.pl-related-card__excerpt {
  font-size: 14px;
  color: var(--warm-gray);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pl-related-content__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: var(--warm-gray);
  font-style: italic;
}

/* Episode Navigation - matches Related Content section */
.episode-navigation {
  background: var(--dark-charcoal);
  border-top: 2px solid var(--gold-deep);
}

.episode-nav-prev,
.episode-nav-next {
  display: block;
}

.episode-nav-prev a,
.episode-nav-next a {
  display: block;
  padding: 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.episode-nav-prev a:hover,
.episode-nav-next a:hover {
  background: rgba(212, 175, 55, 0.15);
}

.wp-block-post-navigation-link .post-navigation-link__label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  opacity: 0.7;
}

.wp-block-post-navigation-link .post-navigation-link__title {
  font-size: 15px;
  font-weight: 600;
}

/* ========================================
   SINGLE EPISODE - MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
  .episode-content-columns {
    flex-direction: column !important;
  }

  .episode-main-content,
  .episode-sidebar {
    flex-basis: 100% !important;
    width: 100%;
  }

  .episode-sidebar {
    position: static;
    margin-top: var(--wp--preset--spacing--40);
  }

  .pl-related-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .pl-related-content {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .episode-guests-section {
    padding: 20px !important;
  }

  .pl-guest-card {
    flex-direction: row;
    text-align: left;
    gap: 16px;
  }

  .pl-guest-card__image {
    width: 60px;
    height: 60px;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .pl-guest-card__content {
    flex: 1;
  }

  .pl-guest-card__links {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .episode-navigation .wp-block-columns {
    flex-direction: column !important;
    gap: 16px;
  }

  .episode-nav-next a {
    text-align: left !important;
  }
}

/* Landing Page Styles */
.has-shadow {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.has-shadow:hover {
  box-shadow:
    0 12px 32px rgba(255, 215, 0, 0.3),
    0 6px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* ========================================
   LANDING PAGE CAROUSEL
   ======================================== */

.landing-carousel-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.landing-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.landing-carousel__track-wrapper {
  flex: 1;
  overflow: hidden;
  border-radius: 20px;
}

.landing-carousel__track {
  display: flex;
  gap: 30px;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.landing-carousel__nav {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--white);
  color: var(--burgundy-red);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.landing-carousel__nav:hover:not(:disabled) {
  background: var(--golden-yellow);
  color: var(--rich-black);
  transform: scale(1.1);
  box-shadow: 0 8px 30px rgba(255, 215, 0, 0.4);
}

.landing-carousel__nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.landing-carousel__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px 20px;
  color: var(--warm-gray);
}

.landing-carousel__spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 215, 0, 0.2);
  border-top-color: var(--golden-yellow);
  border-radius: 50%;
  animation: landingCarouselSpin 1s linear infinite;
}

@keyframes landingCarouselSpin {
  to {
    transform: rotate(360deg);
  }
}

.landing-carousel__pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.landing-carousel__dot {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: rgba(128, 0, 32, 0.3);
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}

.landing-carousel__dot:hover {
  background: var(--burgundy-red);
}

.landing-carousel__dot.active {
  background: var(--golden-yellow);
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Landing Page Episode Cards */
.landing-card {
  flex: 0 0 calc(33.333% - 20px);
  min-width: 340px;
  max-width: 420px;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.landing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.landing-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.landing-card__image-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--gradient-rich-ruby);
}

.landing-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.landing-card:hover .landing-card__image {
  transform: scale(1.1);
}

.landing-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--golden-yellow);
  color: var(--rich-black);
  border-radius: 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.landing-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(128, 0, 32, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.landing-card:hover .landing-card__overlay {
  opacity: 1;
}

.landing-card__play-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--white);
  color: var(--burgundy-red);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.8);
  transition: all 0.3s ease;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.landing-card:hover .landing-card__play-icon {
  transform: scale(1);
}

.landing-card__content {
  padding: 16px 12px;
}

.landing-card__title {
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--dark-charcoal);
  margin: 0 0 6px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.landing-card__meta {
  font-size: 0.85rem;
  color: var(--warm-gray);
  margin: 0;
}

.landing-card__guests {
  font-size: 0.85rem;
  color: var(--warm-gray);
  margin: 0;
}

.landing-carousel__error {
  text-align: center;
  padding: 60px 20px;
  color: var(--warm-gray);
}

.episodes-cta {
  text-align: center;
  margin-top: 50px;
}

/* Landing Carousel Mobile */
@media (max-width: 1024px) {
  .landing-card {
    flex: 0 0 calc(50% - 15px);
    min-width: 280px;
  }
}

@media (max-width: 768px) {
  .landing-carousel {
    flex-direction: column;
  }

  .landing-carousel__nav--prev,
  .landing-carousel__nav--next {
    display: none;
  }

  .landing-carousel__track-wrapper {
    width: 100%;
  }

  .landing-carousel__track {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .landing-carousel__track::-webkit-scrollbar {
    display: none;
  }

  .landing-card {
    flex: 0 0 calc(100% - 40px);
    min-width: 280px;
    scroll-snap-align: center;
  }
}

/* ========================================
   GOLD SHIMMER TEXT EFFECT
   ======================================== */
.gold-shimmer-text {
  background: linear-gradient(
    135deg,
    #b8860b 0%,
    #ffd700 25%,
    #ffc700 50%,
    #ffd700 75%,
    #b8860b 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 3s linear infinite;
}

@keyframes goldShimmer {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* ========================================
   WATCH PAGE STYLES
   ======================================== */
.watch-page {
  background: var(--rich-black);
}

.watch-hero {
  text-align: center;
}

.watch-hero__title {
  text-align: center;
}

.watch-hero__subtitle {
  text-align: center;
}

/* ========================================
   PAGE-SPECIFIC STYLES
   ======================================== */

/* Ensure content is readable on dark backgrounds */
.has-rich-black-background-color h1,
.has-rich-black-background-color h2,
.has-rich-black-background-color h3,
.has-rich-black-background-color h4 {
  color: var(--golden-yellow);
}

.has-rich-black-background-color p,
.has-rich-black-background-color li {
  color: var(--white) !important;
}

/* Explicit color classes should override default dark background colors */
.has-rich-black-background-color .has-white-color,
.has-rich-black-background-color h1.has-white-color,
.has-rich-black-background-color h2.has-white-color,
.has-rich-black-background-color h3.has-white-color,
.has-rich-black-background-color h4.has-white-color,
.has-rich-black-background-color p.has-white-color {
  color: #ffffff !important;
}

.has-rich-black-background-color .has-champagne-color,
.has-rich-black-background-color p.has-champagne-color {
  color: #f7e7ce !important;
}

.has-rich-black-background-color .has-gold-bright-color,
.has-rich-black-background-color h1.has-gold-bright-color,
.has-rich-black-background-color h2.has-gold-bright-color,
.has-rich-black-background-color h3.has-gold-bright-color,
.has-rich-black-background-color p.has-gold-bright-color {
  color: #ffd700 !important;
}

.has-rich-black-background-color .has-gold-deep-color,
.has-rich-black-background-color p.has-gold-deep-color {
  color: #b8860b !important;
}

/* Override warm-gray on dark backgrounds for accessibility */
.has-rich-black-background-color .has-warm-gray-color,
.has-rich-black-background-color p.has-warm-gray-color {
  color: #c0c0c0 !important; /* Light gray for subtitles - WCAG AA compliant */
}

/* Same overrides for dark-charcoal backgrounds */
.has-dark-charcoal-background-color .has-white-color,
.has-dark-charcoal-background-color h1.has-white-color,
.has-dark-charcoal-background-color h2.has-white-color,
.has-dark-charcoal-background-color h3.has-white-color,
.has-dark-charcoal-background-color h4.has-white-color,
.has-dark-charcoal-background-color p.has-white-color {
  color: #ffffff !important;
}

.has-dark-charcoal-background-color .has-champagne-color,
.has-dark-charcoal-background-color p.has-champagne-color {
  color: #f7e7ce !important;
}

.has-dark-charcoal-background-color .has-gold-bright-color,
.has-dark-charcoal-background-color h1.has-gold-bright-color,
.has-dark-charcoal-background-color h2.has-gold-bright-color,
.has-dark-charcoal-background-color h3.has-gold-bright-color,
.has-dark-charcoal-background-color p.has-gold-bright-color {
  color: #ffd700 !important;
}

.has-dark-charcoal-background-color .has-gold-deep-color,
.has-dark-charcoal-background-color p.has-gold-deep-color {
  color: #b8860b !important;
}

.has-dark-charcoal-background-color .has-warm-gray-color,
.has-dark-charcoal-background-color p.has-warm-gray-color {
  color: #c0c0c0 !important;
}

/* Image styling on dark backgrounds */
.has-rich-black-background-color .wp-block-image img {
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* Ensure proper text colors on white/light backgrounds */
.has-white-background-color .has-warm-gray-color,
.has-white-background-color p.has-warm-gray-color,
.has-cream-background-color .has-warm-gray-color,
.has-cream-background-color p.has-warm-gray-color {
  color: #6b6b6b !important;
}

.has-white-background-color .has-dark-charcoal-color,
.has-white-background-color h1.has-dark-charcoal-color,
.has-white-background-color h2.has-dark-charcoal-color,
.has-white-background-color h3.has-dark-charcoal-color,
.has-white-background-color h4.has-dark-charcoal-color,
.has-white-background-color p.has-dark-charcoal-color,
.has-cream-background-color .has-dark-charcoal-color,
.has-cream-background-color h1.has-dark-charcoal-color,
.has-cream-background-color h2.has-dark-charcoal-color,
.has-cream-background-color h3.has-dark-charcoal-color,
.has-cream-background-color h4.has-dark-charcoal-color,
.has-cream-background-color p.has-dark-charcoal-color {
  color: #2d2d2d !important;
}

/* ========================================
   SINGLE EPISODE PAGE STYLES
   ======================================== */
.single-episode {
  background: var(--rich-black);
}

/* Episode Hero Section */
.single-episode .episode-hero {
  background: var(--gradient-hero);
  position: relative;
}

.single-episode .episode-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(
      circle at 10% 20%,
      rgba(255, 215, 0, 0.15) 0%,
      transparent 8px
    ),
    radial-gradient(
      circle at 90% 45%,
      rgba(255, 199, 0, 0.1) 0%,
      transparent 6px
    ),
    radial-gradient(
      circle at 30% 70%,
      rgba(255, 215, 0, 0.12) 0%,
      transparent 10px
    );
  pointer-events: none;
}

.single-episode .episode-title {
  color: var(--white) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Episode Video Container in Hero - YouTube-style 16:9 */
.single-episode .episode-hero .episode-video-container {
  margin-top: var(--wp--preset--spacing--30);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  width: 100%;
  max-width: 854px;
  margin-left: auto;
  margin-right: auto;
  background: #000;
  aspect-ratio: 16 / 9;
}

.single-episode .episode-hero .episode-video-container iframe {
  width: 100% !important;
  height: 100% !important;
  border: none;
  border-radius: 12px;
  display: block;
}

/* Hide any duplicate video embeds in the episode content area */
.single-episode .episode-description iframe,
.single-episode .episode-description .wp-block-embed,
.single-episode .episode-description .wp-block-video,
.single-episode .episode-description video,
.single-episode .episode-main-content iframe,
.single-episode .episode-main-content .wp-block-embed,
.single-episode .episode-main-content .wp-block-video,
.single-episode .episode-main-content video,
.single-episode .episode-main-content figure.wp-block-embed-youtube {
  display: none !important;
}

/* Episode Content Columns */
.single-episode .episode-content-columns {
  margin-top: var(--wp--preset--spacing--50);
}

.single-episode .episode-main-content {
  background: var(--dark-charcoal);
  padding: 50px;
  border-radius: 20px;
  border: 1px solid rgba(255, 215, 0, 0.15);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

.single-episode .episode-main-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-gold-shimmer);
  opacity: 0.5;
}

.single-episode .episode-sidebar {
  position: sticky;
  top: 120px;
}

/* Episode Guests Section */
.single-episode .episode-guests-section {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.2);
}

/* Episode Topic Tags */
.single-episode .episode-topic-tags a {
  display: inline-block;
  background: var(--warm-beige);
  color: var(--dark-charcoal);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  margin: 4px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.single-episode .episode-topic-tags a:hover {
  background: var(--golden-yellow);
  color: var(--rich-black);
}

/* Episode Location Tags */
.single-episode .episode-location-tags a {
  display: inline-flex;
  align-items: center;
  color: var(--warm-gray);
  font-size: 0.9rem;
  text-decoration: none;
}

.single-episode .episode-location-tags a::before {
  content: "📍";
  margin-right: 6px;
}

.single-episode .episode-location-tags a:hover {
  color: var(--gold-deep);
}

/* Related Content Section */
.single-episode .related-content-section {
  margin-top: var(--wp--preset--spacing--50);
}

/* Episode Navigation */
.single-episode .episode-navigation {
  background: transparent;
}

.single-episode .episode-nav-prev a,
.single-episode .episode-nav-next a {
  color: var(--gold-deep);
  text-decoration: none;
  transition: all 0.3s ease;
}

.single-episode .episode-nav-prev a:hover,
.single-episode .episode-nav-next a:hover {
  color: var(--golden-yellow);
}

/* Back to Shows Button */
.single-episode .back-to-shows-btn .wp-block-button__link {
  background: var(--golden-yellow) !important;
  color: var(--rich-black) !important;
  font-weight: 600;
  transition: all 0.3s ease;
}

.single-episode .back-to-shows-btn .wp-block-button__link:hover {
  background: var(--gold-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3);
}

/* Breadcrumb Styling */
.single-episode .wp-block-group.has-warm-beige-background-color {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.single-episode .pl-breadcrumbs {
  font-size: 0.9rem;
}

.single-episode .pl-breadcrumbs a {
  color: var(--gold-deep);
  text-decoration: none;
}

.single-episode .pl-breadcrumbs a:hover {
  color: var(--golden-yellow);
  text-decoration: underline;
}

/* ========================================
   ABOUT/WHO WE ARE PAGE STYLES
   ======================================== */
.page-template-page-who-we-are main,
.page-template-page-history main {
  padding-top: 90px;
}

/* Ensure headings on dark backgrounds are gold */
.page-template-page-who-we-are .has-gold-bright-color,
.page-template-page-history .has-gold-bright-color {
  color: var(--golden-yellow) !important;
}

/* ========================================
   EPISODE FILTERS & CARDS (Watch Page)
   ======================================== */

/* Episode Filter Styles */
.pl-filters {
  padding: 0;
}

.pl-filters__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.pl-filters__row--search {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
}

.pl-filters__group {
  display: flex;
  flex-direction: column;
}

.pl-filters__label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--golden-yellow);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pl-filters__select,
.pl-filters__input {
  padding: 12px 16px;
  border: 2px solid rgba(255, 215, 0, 0.2);
  border-radius: 8px;
  font-size: 16px;
  font-family: var(--font-body);
  background: var(--dark-charcoal);
  color: var(--white);
  transition: all 0.3s ease;
}

.pl-filters__select:focus,
.pl-filters__input:focus {
  outline: none;
  border-color: var(--golden-yellow);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.pl-filters__search-group {
  position: relative;
  flex: 1;
}

/* Ensure Watch Page Carousel Wrapper supports smooth horizontal scroll */
.pl-carousel__track-wrapper {
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pl-carousel__track-wrapper::-webkit-scrollbar {
  display: none;
}

/* Duplicate definition removed - consolidated above */

.pl-filters__clear {
  padding: 12px 24px;
  background: transparent;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pl-filters__clear:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

/* Active Filters */
.pl-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.pl-active-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 12px;
  background: var(--golden-yellow);
  color: var(--rich-black);
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

.pl-active-filter__remove {
  background: none;
  border: none;
  color: var(--rich-black);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.pl-active-filter__remove:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* Results Info */
.pl-results-info {
  text-align: center;
  padding: 1rem 0;
}

.pl-results-info__count {
  font-size: 18px;
  font-weight: 600;
  color: var(--warm-gray);
}

/* Episode Cards - restored to flex for carousel support */
.pl-carousel__track {
  display: flex !important;
  gap: 24px;
  padding: 10px 0;
  min-width: 100%;
}

.pl-episode-card {
  background: var(--dark-charcoal);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border: none; /* US-103: Removed border for cleaner look */
}

.pl-episode-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.pl-episode-card__link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.pl-episode-card__thumbnail {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1a1a1a;
}

.pl-episode-card__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.pl-episode-card:hover .pl-episode-card__thumbnail img {
  transform: scale(1.05);
}

.pl-episode-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--golden-yellow);
  color: var(--rich-black);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pl-episode-card__content {
  padding: 1.5rem;
}

.pl-episode-card__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: var(--white);
  line-height: 1.4;
}

.pl-episode-card__guests {
  font-size: 14px;
  color: var(--warm-gray);
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.pl-episode-card__excerpt {
  font-size: 14px;
  color: var(--warm-gray);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Loading State */
.pl-carousel__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  gap: 1rem;
}

.pl-carousel__spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #f3f4f6;
  border-top-color: var(--golden-yellow);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Empty State */
.pl-carousel__empty {
  text-align: center;
  padding: 4rem 2rem;
}

.pl-carousel__empty p {
  font-size: 18px;
  color: var(--warm-gray);
  margin-bottom: 1.5rem;
}

.pl-carousel__empty-btn {
  padding: 12px 24px;
  background: var(--golden-yellow);
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pl-carousel__empty-btn:hover {
  background: var(--gold-deep);
  transform: scale(1.05);
}

/* Pagination */
.pl-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 0;
}

.pl-pagination__btn {
  padding: 8px 16px;
  background: var(--dark-charcoal);
  border: 2px solid rgba(255, 215, 0, 0.2);
  border-radius: 6px;
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pl-pagination__btn:hover {
  background: var(--golden-yellow);
  border-color: var(--golden-yellow);
  color: var(--rich-black);
}

.pl-pagination__current {
  padding: 8px 16px;
  background: var(--golden-yellow);
  color: var(--rich-black);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .pl-filters__row {
    grid-template-columns: 1fr;
  }

  .pl-filters__row--search {
    flex-direction: column;
    align-items: stretch;
  }

  .pl-carousel__track {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    transform: none !important;
  }
}

@media (max-width: 480px) {
  .pl-episode-card__title {
    font-size: 16px;
  }

  .pl-episode-card__content {
    padding: 1rem;
  }
}

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ========================================
   PRIVACY POLICY PAGE STYLES
   ======================================== */
.privacy-policy-page {
  background: var(--gradient-hero) !important;
}

.privacy-policy-page .privacy-content-container {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 215, 0, 0.1);
}

.privacy-policy-page h1 {
  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(212, 175, 55, 0.6);
}

.privacy-policy-page h2 {
  margin-top: 40px;
  margin-bottom: 20px;
}

.privacy-policy-page h3 {
  margin-top: 25px;
  margin-bottom: 15px;
}

.privacy-policy-page ul {
  padding-left: 25px;
  line-height: 1.8;
}

.privacy-policy-page ul li {
  margin-bottom: 8px;
}

.privacy-policy-page .wp-block-separator {
  opacity: 0.3;
  margin: 40px 0;
}

/* ========================================
   SPONSORSHIP PAGE STYLES
   ======================================== */
.sponsorship-page {
  background: var(--rich-black);
}

/* Hero Section */
.sponsorship-hero {
  position: relative;
}

.sponsorship-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(
      2px 2px at 20% 30%,
      rgba(255, 215, 0, 0.4) 0%,
      transparent 100%
    ),
    radial-gradient(
      2px 2px at 80% 20%,
      rgba(255, 215, 0, 0.3) 0%,
      transparent 100%
    ),
    radial-gradient(
      2px 2px at 40% 70%,
      rgba(255, 215, 0, 0.35) 0%,
      transparent 100%
    );
  pointer-events: none;
  z-index: 0;
  animation: particleFloat 20s ease-in-out infinite;
}

/* Stats Section */
.sponsorship-stats .wp-block-column {
  text-align: center;
  padding: 20px;
  transition: transform 0.3s ease;
}

.sponsorship-stats .wp-block-column:hover {
  transform: translateY(-5px);
}

/* Benefits Card */
.benefits-card {
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 215, 0, 0.15);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.benefits-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 15px 50px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 215, 0, 0.3);
}

.sponsorship-benefits-list li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sponsorship-benefits-list li:last-child {
  border-bottom: none;
}

/* Demographics Cards */
.demo-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.demo-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.15),
    0 0 0 2px rgba(184, 134, 11, 0.3);
}

/* Package Cards */
.package-card {
  background: var(--dark-charcoal);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  height: 100%;
}

.package-card:hover {
  transform: translateY(-8px);
}

/* Featured Package (Gold tier) */
.package-card-featured {
  background: linear-gradient(
    135deg,
    rgba(45, 45, 45, 1) 0%,
    rgba(26, 26, 26, 1) 100%
  );
  box-shadow:
    0 15px 50px rgba(255, 215, 0, 0.2),
    0 0 0 1px rgba(255, 215, 0, 0.3);
  position: relative;
}

.package-card-featured::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #ffd700, #b8860b, #ffd700);
  border-radius: 22px;
  z-index: -1;
  opacity: 0.6;
}

.package-card-featured:hover {
  box-shadow:
    0 20px 60px rgba(255, 215, 0, 0.3),
    0 0 0 1px rgba(255, 215, 0, 0.5);
}

/* Package Lists */
.package-card ul {
  padding-left: 20px;
  margin-top: 20px;
}

.package-card ul li {
  padding: 6px 0;
}

/* Sponsorship Form Section - Side by Side Layout */
.sponsorship-form-section {
  position: relative;
}

.sponsorship-form-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(
      2px 2px at 20% 30%,
      rgba(255, 215, 0, 0.15) 0%,
      transparent 100%
    ),
    radial-gradient(
      2px 2px at 80% 20%,
      rgba(255, 215, 0, 0.1) 0%,
      transparent 100%
    ),
    radial-gradient(
      2px 2px at 40% 70%,
      rgba(255, 215, 0, 0.12) 0%,
      transparent 100%
    );
  pointer-events: none;
  z-index: 0;
}

.sponsorship-image-column {
  position: relative;
  z-index: 1;
}

.sponsorship-image-wrapper {
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 215, 0, 0.2);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.sponsorship-image-wrapper:hover {
  transform: translateY(-5px);
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.6),
    0 0 0 2px rgba(255, 215, 0, 0.4);
}

.sponsorship-cta-image img {
  width: 100%;
  height: auto;
  display: block;
}

.sponsorship-form-column {
  position: relative;
  z-index: 1;
}

/* Sponsorship Form Container - Dark Theme */
.sponsorship-form-container {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 215, 0, 0.15);
}

.sponsorship-form-container input[type="text"],
.sponsorship-form-container input[type="email"],
.sponsorship-form-container input[type="tel"],
.sponsorship-form-container textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  font-size: 1rem;
  margin-bottom: 15px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.sponsorship-form-container input[type="text"]::placeholder,
.sponsorship-form-container input[type="email"]::placeholder,
.sponsorship-form-container input[type="tel"]::placeholder,
.sponsorship-form-container textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.sponsorship-form-container input[type="text"]:focus,
.sponsorship-form-container input[type="email"]:focus,
.sponsorship-form-container input[type="tel"]:focus,
.sponsorship-form-container textarea:focus {
  border-color: var(--golden-yellow);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
  background: rgba(255, 255, 255, 0.12);
}

.sponsorship-form-container input[type="submit"],
.sponsorship-form-container button[type="submit"] {
  width: 100%;
  background: var(--gold-luxury-gradient);
  color: #000;
  padding: 16px 30px;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.sponsorship-form-container input[type="submit"]:hover,
.sponsorship-form-container button[type="submit"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4);
}

/* Form Labels - Dark Theme */
.sponsorship-form-container label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: block;
}

/* Responsive Styles for Sponsorship Form Section */
@media (max-width: 1024px) {
  .sponsorship-form-section .wp-block-columns {
    flex-direction: column;
    gap: 50px;
  }

  .sponsorship-image-column,
  .sponsorship-form-column {
    flex-basis: 100% !important;
  }

  .sponsorship-image-column {
    max-width: 500px;
    margin: 0 auto;
  }

  .sponsorship-cta-image img {
    height: auto;
  }
}

@media (max-width: 782px) {
  .sponsorship-hero {
    padding-top: 140px !important;
    padding-bottom: 60px !important;
  }

  .sponsorship-hero h1 {
    font-size: 2.2rem !important;
  }

  .sponsorship-stats .wp-block-columns {
    flex-direction: column;
    gap: 20px;
  }

  .sponsorship-stats .wp-block-column {
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    padding-bottom: 25px;
  }

  .sponsorship-stats .wp-block-column:last-child {
    border-bottom: none;
  }

  .why-sponsor-section .wp-block-columns,
  .packages-section .wp-block-columns {
    flex-direction: column;
    gap: 30px;
  }

  .package-card-featured {
    order: -1;
  }

  .audience-section .wp-block-columns {
    flex-direction: column;
    gap: 20px;
  }

  .sponsorship-form-container {
    padding: 25px 20px !important;
  }

  .sponsorship-form-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ========================================
   CONTACT FORM 7 - SPONSORSHIP FORM STYLES
   ======================================== */

/* Form Grid Layout */
.sponsorship-form-container .wpcf7-form .sponsorship-form-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sponsorship-form-container .wpcf7-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sponsorship-form-container .wpcf7-form .form-row.two-col {
  flex-direction: row;
  gap: 15px;
}

.sponsorship-form-container .wpcf7-form .form-row.two-col .form-field {
  flex: 1;
}

.sponsorship-form-container .wpcf7-form .form-field {
  display: flex;
  flex-direction: column;
}

.sponsorship-form-container .wpcf7-form .form-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Input Fields - Dark Theme */
.sponsorship-form-container .wpcf7-form input[type="text"],
.sponsorship-form-container .wpcf7-form input[type="email"],
.sponsorship-form-container .wpcf7-form input[type="tel"],
.sponsorship-form-container .wpcf7-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: var(--font-body);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
  margin-bottom: 10px;
}

.sponsorship-form-container .wpcf7-form input[type="text"]:focus,
.sponsorship-form-container .wpcf7-form input[type="email"]:focus,
.sponsorship-form-container .wpcf7-form input[type="tel"]:focus,
.sponsorship-form-container .wpcf7-form textarea:focus {
  border-color: var(--golden-yellow);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
  background: rgba(255, 255, 255, 0.12);
}

.sponsorship-form-container .wpcf7-form input::placeholder,
.sponsorship-form-container .wpcf7-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Textarea */
.sponsorship-form-container .wpcf7-form textarea {
  min-height: 80px;
  resize: vertical;
}

/* Submit Button - Gold Theme */
.sponsorship-form-container .wpcf7-form .submit-row {
  margin-top: 10px;
}

.sponsorship-form-container .wpcf7-form input[type="submit"],
.sponsorship-form-container .wpcf7-form .sponsor-submit-btn {
  width: 100%;
  background: var(--gold-luxury-gradient);
  color: #000;
  padding: 16px 30px;
  border: none;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sponsorship-form-container .wpcf7-form input[type="submit"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4);
}

/* Validation Messages */
.sponsorship-form-container .wpcf7-not-valid-tip {
  color: #dc2626;
  font-size: 0.8rem;
  margin-top: 5px;
}

.sponsorship-form-container .wpcf7-response-output {
  margin-top: 20px;
  padding: 15px;
  border-radius: 8px;
  font-size: 0.9rem;
}

.sponsorship-form-container .wpcf7-mail-sent-ok {
  background: #dcfce7;
  border: 1px solid #22c55e;
  color: #166534;
}

.sponsorship-form-container .wpcf7-validation-errors {
  background: #fef2f2;
  border: 1px solid #ef4444;
  color: #dc2626;
}

/* Responsive */
@media (max-width: 600px) {
  .sponsorship-form-container .wpcf7-form .form-row.two-col {
    flex-direction: column;
  }
}

/* Sponsorship Benefits Card - New Compact Layout */
.sponsorship-benefits-card {
  margin-top: 380px !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 215, 0, 0.15);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.sponsorship-benefits-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 215, 0, 0.25);
}

/* Gold Bullet Styling - Replace emoji with CSS */
.sponsorship-benefits-card .wp-block-group[style*="flex"] > p:first-child {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px;
  background: var(--gold-bright);
  border-radius: 50%;
  font-size: 0 !important;
  margin-top: 5px;
  margin-right: 15px !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Sponsor CTA Button */
.sponsor-cta-button .wp-block-button__link {
  background: var(--gold-bright) !important;
  color: var(--rich-black) !important;
  padding: 16px 32px;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.sponsor-cta-button .wp-block-button__link:hover {
  background: var(--gold-shimmer) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
}

/* Sponsor Video Wrapper */
.sponsor-video-wrapper {
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.3s ease;
}

.sponsor-video-wrapper:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Responsive - Sponsorship Page Compact Layout */
@media (max-width: 1024px) {
  .sponsorship-page .wp-block-columns.are-vertically-aligned-top {
    flex-direction: column;
  }

  .sponsorship-page
    .wp-block-columns.are-vertically-aligned-top
    > .wp-block-column {
    flex-basis: 100% !important;
    max-width: 100%;
  }

  .sponsorship-benefits-card {
    margin-top: 40px;
  }
}

@media (max-width: 768px) {
  .sponsorship-page h1.wp-block-heading {
    font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
  }

  .sponsorship-benefits-card {
    padding: 25px !important;
  }

  .sponsorship-benefits-card h4 {
    font-size: 1rem !important;
  }
}

/* ========================================
   AUDIENCE ANALYTICS SECTION STYLES
   ======================================== */

.audience-analytics-section {
  position: relative;
}

/* Lifestyle & Products Table */
.lifestyle-table-container {
  overflow-x: auto;
}

.audience-lifestyle-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  color: #fff;
}

.audience-lifestyle-table thead {
  border-bottom: 2px solid var(--burgundy);
}

.audience-lifestyle-table th {
  padding: 12px 10px;
  text-align: center;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--burgundy);
}

.audience-lifestyle-table th.lifestyle-header {
  text-align: left;
  color: var(--burgundy);
}

.audience-lifestyle-table td {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.audience-lifestyle-table td:first-child {
  text-align: left;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.audience-lifestyle-table td.highlight {
  color: var(--burgundy);
  font-weight: 600;
}

.audience-lifestyle-table td.index {
  color: var(--golden-yellow);
  font-weight: 700;
}

.audience-lifestyle-table tbody tr:hover {
  background: rgba(255, 215, 0, 0.05);
}

.table-footnote {
  margin-top: 15px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* Stats Sidebar */
.stats-sidebar {
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(128, 0, 32, 0.3);
}

.stat-block {
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.stat-block p {
  margin: 0 0 4px 0;
}

/* Gender Pie Chart Styles */
.gender-pie-container {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
}

.pie-chart {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.gender-pie {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.gender-pie circle {
  fill: none;
  stroke-width: 20;
}

.pie-bg {
  stroke: rgba(255, 255, 255, 0.1);
}

.pie-women {
  stroke: var(--burgundy);
}

.pie-men {
  stroke: var(--golden-yellow);
}

.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-dot.women {
  background: var(--burgundy);
}

.legend-dot.men {
  background: var(--golden-yellow);
}

/* Responsive Styles for Audience Analytics */
@media (max-width: 1024px) {
  .audience-analytics-section .wp-block-columns {
    flex-direction: column;
    gap: 40px;
  }

  .audience-analytics-section .wp-block-column {
    flex-basis: 100% !important;
  }

  .stats-sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .stat-block {
    padding-bottom: 0;
    border-bottom: none;
  }

  .gender-chart-block {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .audience-lifestyle-table {
    font-size: 0.8rem;
  }

  .audience-lifestyle-table th,
  .audience-lifestyle-table td {
    padding: 8px 5px;
  }

  .stats-sidebar {
    grid-template-columns: 1fr;
  }

  .gender-chart-block {
    grid-column: span 1;
  }

  .gender-pie-container {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ========================================
   PREMIERE BANNER - FRONT PAGE
   Thursday 8PM ET Weekly Stream
   ======================================== */
.premiere-banner {
  position: relative;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d1a1a 50%, #1a1a1a 100%);
  border: 2px solid var(--golden-yellow);
  border-radius: 20px;
  padding: 18px 48px;
  margin: 30px auto;
  max-width: 1100px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 0 10px 40px rgba(255, 215, 0, 0.2);
}

.premiere-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 215, 0, 0.1),
    transparent
  );
  animation: shimmer 3s infinite;
}

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

.premiere-banner:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(255, 215, 0, 0.35);
  border-color: var(--gold-bright);
}

.premiere-banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  position: relative;
  z-index: 1;
}

.premiere-banner-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.premiere-banner-icon {
  width: 60px;
  height: 60px;
  background: var(--gradient-burgundy-orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 0 20px rgba(128, 0, 32, 0.5);
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(128, 0, 32, 0.5);
  }
  50% {
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.6);
  }
}

.premiere-banner-text h3 {
  color: var(--golden-yellow) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  margin: 0 0 5px 0 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.premiere-banner-text p {
  color: var(--white);
  font-size: 1rem;
  margin: 0;
  opacity: 0.9;
}

.premiere-banner-countdown {
  display: flex;
  gap: 12px;
  align-items: center;
}

.banner-countdown-unit {
  text-align: center;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 60px;
}

.banner-countdown-number {
  display: block;
  color: var(--golden-yellow);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  font-family: var(--font-heading);
}

.banner-countdown-label {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}

.banner-countdown-separator {
  color: var(--golden-yellow);
  font-size: 1.5rem;
  font-weight: 700;
  opacity: 0.5;
}

.premiere-banner-cta {
  background: var(--gradient-burgundy-orange);
  color: var(--white) !important;
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
  text-decoration: none !important;
  transition: all 0.3s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.premiere-banner-cta:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(128, 0, 32, 0.5);
}

/* Live state for banner */
.premiere-banner.is-live {
  border-color: #ff3333;
  animation: live-border-pulse 1.5s infinite;
}

@keyframes live-border-pulse {
  0%,
  100% {
    border-color: #ff3333;
    box-shadow: 0 0 20px rgba(255, 51, 51, 0.4);
  }
  50% {
    border-color: #ff6666;
    box-shadow: 0 0 40px rgba(255, 51, 51, 0.6);
  }
}

.premiere-banner.is-live .banner-live-badge {
  display: flex;
}

.banner-live-badge {
  display: none;
  align-items: center;
  gap: 8px;
  background: #ff3333;
  color: white;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.banner-live-dot {
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* Mobile responsive for banner */
@media (max-width: 900px) {
  .premiere-banner-content {
    flex-direction: column;
    text-align: center;
  }

  .premiere-banner-left {
    flex-direction: column;
  }

  .premiere-banner-countdown {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .premiere-banner {
    padding: 20px;
    margin: 20px 15px;
  }

  .banner-countdown-unit {
    padding: 8px 10px;
    min-width: 50px;
  }

  .banner-countdown-number {
    font-size: 1.2rem;
  }
}

/* ========================================
   PREMIERE PAGE STYLES
   ======================================== */
.premiere-page {
  min-height: 100vh;
}

.premiere-hero {
  position: relative;
}

/* Status Banner with countdown */
.premiere-status-banner {
  text-align: center;
  margin-bottom: 20px;
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}

.premiere-status-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Live indicator */
.premiere-live-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #ff3333, #cc0000);
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 10px;
  animation: live-pulse 2s infinite;
}

@keyframes live-pulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(255, 51, 51, 0.5);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 51, 51, 0.8);
  }
}

.live-dot {
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  animation: blink 1s infinite;
}

.live-text {
  color: white;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* Countdown Timer */
.premiere-countdown {
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 16px;
  padding: 8px 56px;
  min-width: 520px;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 8px;
}

.countdown-label {
  color: var(--champagne);
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
}

.countdown-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.countdown-unit {
  text-align: center;
  min-width: 70px;
}

.countdown-number {
  display: block;
  color: var(--golden-yellow);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  font-family: var(--font-heading);
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}

.countdown-text {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 8px;
}

.countdown-separator {
  color: var(--golden-yellow);
  font-size: 2.5rem;
  font-weight: 300;
  opacity: 0.5;
  margin-bottom: 6px;
}

.countdown-date {
  color: var(--white);
  font-size: 1rem;
  margin: 4px 0 0 0;
  opacity: 0.9;
}

.premiere-countdown .notify-btn {
  margin-top: 4px !important;
  padding: 10px 22px;
  font-size: 0.85rem;
  line-height: 1;
}

/* Video Player Container */
.premiere-player-container {
  max-width: 1000px;
  margin: 0 auto;
}

.premiere-player-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 100px rgba(255, 215, 0, 0.1);
  border: 2px solid rgba(255, 215, 0, 0.2);
}

/* Placeholder before live */
.premiere-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d1a1a 50%, #1a1a1a 100%);
}

.premiere-placeholder-content {
  text-align: center;
  padding: 40px;
}

.premiere-logo img {
  max-width: 250px;
  margin-bottom: 30px;
  filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.4));
}

.premiere-placeholder h2 {
  color: var(--golden-yellow);
  font-size: 1.5rem;
  margin: 0 0 10px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.premiere-placeholder .episode-title {
  color: var(--white);
  font-size: 1.1rem;
  margin: 0 0 30px 0;
  opacity: 0.9;
}

.premiere-schedule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 25px;
}

.schedule-icon {
  font-size: 1.5rem;
}

.premiere-schedule p {
  color: var(--champagne);
  margin: 0;
  font-size: 1rem;
}

.notify-btn {
  background: var(--gradient-burgundy-orange);
  color: white;
  border: none;
  padding: 14px 30px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.notify-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(128, 0, 32, 0.5);
}

.notify-icon {
  font-size: 1.2rem;
}

/* Video iframe */
.premiere-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.premiere-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Episode info section */
.premiere-episode-info {
  max-width: 800px;
  margin: 40px auto 0;
  text-align: center;
}

.episode-meta {
  background: rgba(255, 215, 0, 0.05);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 16px;
  padding: 30px;
}

.episode-badge {
  display: inline-block;
  background: var(--gradient-burgundy-orange);
  color: white;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.episode-meta h3 {
  color: var(--white);
  font-size: 1.5rem;
  margin: 0 0 10px 0;
}

.episode-meta p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  line-height: 1.7;
}

/* Responsive for premiere page */
@media (max-width: 768px) {
  .premiere-status-banner {
    padding: 0 12px;
  }

  .premiere-countdown {
    width: 100%;
    max-width: 360px;
    min-width: 0;
    padding: 10px 10px;
    box-sizing: border-box;
    height: auto;
    min-height: 180px;
    margin-left: auto;
    margin-right: auto;
  }

  .countdown-unit {
    width: auto;
    min-width: 0;
    background: rgba(255, 215, 0, 0.06);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 14px;
    padding: 9px 6px;
    width: clamp(60px, 18vw, 78px);
    flex: 1 1 0;
  }

  .countdown-separator {
    display: block;
    font-size: 1.2rem;
    margin-bottom: 0;
    opacity: 0.35;
  }

  .countdown-timer {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
  }

  .countdown-number {
    font-size: 1.55rem;
  }

  .countdown-text {
    font-size: 0.6rem;
    letter-spacing: 1px;
    margin-top: 4px;
    white-space: nowrap;
  }

  .premiere-countdown .notify-btn {
    padding: 10px 18px;
    font-size: 0.8rem;
  }

  .premiere-logo img {
    max-width: 180px;
  }

  .premiere-placeholder h2 {
    font-size: 1.2rem;
  }
}

@media (max-width: 420px) {
  .countdown-unit {
    padding: 9px 6px;
    width: clamp(54px, 19vw, 70px);
  }

  .countdown-number {
    font-size: 1.4rem;
  }

  .countdown-text {
    font-size: 0.58rem;
  }

  .countdown-timer {
    gap: 5px;
  }

  .countdown-separator {
    font-size: 1.05rem;
  }
}

/* ========================================
   YOUTUBE VIDEO PLAYER STYLES
   ======================================== */

/* Video Player Container */
.premiere-video-player {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  margin-bottom: 30px;
  background: var(--dark-charcoal);
}

.premiere-video-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
}

/* YouTube Source Badge */
.premiere-youtube-source .premiere-episode-badge {
  background: var(--gradient-gold-shimmer);
  color: var(--rich-black);
}

/* WordPress Source Badge */
.premiere-wordpress-source .premiere-episode-badge {
  background: var(--gradient-burgundy-orange);
  color: var(--white);
}

/* Support Message & Membership CTA Styles */
.premiere-episode-support-message {
  margin: 25px 0 20px;
  padding: 0 20px;
  text-align: center;
}

.premiere-episode-support-message p {
  color: var(--cream, #fdfaf4);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.7;
  margin: 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.premiere-member-cta {
  text-align: center;
  margin-bottom: 20px;
}

.premiere-member-cta .become-member-link {
  display: inline-block;
  background: linear-gradient(135deg, #ffd700 0%, #d4af37 50%, #b8860b 100%);
  color: var(--rich-black, #1a1a1a);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 32px;
  border-radius: 50px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.premiere-member-cta .become-member-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
  background: linear-gradient(135deg, #ffe14d 0%, #ffd700 50%, #d4af37 100%);
}

/* Error Message Styling */
.premiere-episode-error {
  background: rgba(255, 0, 0, 0.05);
  border: 2px solid rgba(255, 0, 0, 0.2);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
}

.premiere-error-content h3 {
  color: #c41e3a;
  margin: 0 0 15px 0;
  font-size: 1.5rem;
}

.premiere-error-content p {
  color: var(--dark-charcoal);
  margin: 10px 0;
  line-height: 1.6;
}

.premiere-error-content .description {
  font-size: 0.9rem;
  color: var(--warm-gray);
}

.premiere-error-content a {
  color: var(--golden-yellow);
  text-decoration: underline;
  font-weight: 600;
}

.premiere-error-content a:hover {
  color: var(--gold-bright);
}

/* Responsive Video Player */
@media (max-width: 768px) {
  .premiere-video-player {
    margin-bottom: 20px;
  }

  .premiere-episode-error {
    padding: 20px;
  }

  .premiere-error-content h3 {
    font-size: 1.2rem;
  }
}

/* ========================================
   LANDING PAGE BANNER REMIND BUTTON
   ======================================== */

.notify-btn-landing .wp-block-button__link {
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
  font-weight: 700 !important;
}

.notify-btn-landing .wp-block-button__link:hover {
  background-color: var(--golden-yellow) !important;
  color: var(--rich-black) !important;
  border-color: var(--golden-yellow) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255, 215, 0, 0.6);
}

.notify-btn-landing .wp-block-button__link:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

/* Mobile responsiveness for premiere banner buttons */
@media (max-width: 768px) {
  .premiere-banner-section .wp-block-columns {
    flex-direction: column !important;
  }

  .premiere-banner-section .wp-block-column {
    flex-basis: 100% !important;
    margin-bottom: 20px;
  }

  .premiere-banner-section .wp-block-buttons {
    margin-top: 15px;
  }
}

/* ========================================
   BLOG STYLES - 2025 REDESIGN
   Premium Magazine Aesthetic
   ======================================== */

/* Blog Post Cards - Homepage & Archive */
.blog-post-card {
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.blog-post-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(255, 215, 0, 0.2);
}

.blog-post-card img {
  transition: transform 0.5s ease;
  object-position: center 20%; /* Prioritize showing faces/heads */
}

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

/* Blog Cards Grid - Proper aspect ratio for featured images */
.blog-cards-grid .wp-block-post-featured-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.blog-cards-grid .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%; /* Show upper portion of image to avoid cutting off heads */
}

/* Featured Post Card */
.blog-featured-card {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.blog-featured-card:hover {
  box-shadow: 0 12px 50px rgba(255, 215, 0, 0.25);
}

.blog-featured-card img {
  transition: transform 0.6s ease;
}

.blog-featured-card:hover img {
  transform: scale(1.08);
}

/* Blog Post Content Styling */
.blog-post-content {
  font-size: 18px;
  line-height: 1.8;
  color: var(--dark-charcoal);
}

.blog-post-content h2 {
  color: var(--gold-deep);
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  margin-top: 60px;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}

.blog-post-content h3 {
  color: var(--gold-deep);
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 15px;
}

.blog-post-content p {
  margin-bottom: 20px;
}

.blog-post-content a {
  color: var(--gold-deep);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: all 0.2s ease;
}

.blog-post-content a:hover {
  color: var(--golden-yellow);
  text-decoration-thickness: 3px;
}

.blog-post-content ul,
.blog-post-content ol {
  margin: 25px 0;
  padding-left: 30px;
}

.blog-post-content li {
  margin-bottom: 15px;
  line-height: 1.8;
}

.blog-post-content li::marker {
  color: var(--gold-deep);
  font-weight: 700;
}

.blog-post-content blockquote {
  background: var(--burgundy-red);
  color: var(--white);
  border-left: 4px solid var(--golden-yellow);
  padding: 40px;
  margin: 60px 0;
  border-radius: 8px;
  font-style: italic;
  font-size: 24px;
  line-height: 1.6;
}

.blog-post-content blockquote cite {
  display: block;
  margin-top: 20px;
  font-size: 16px;
  color: var(--golden-yellow);
  font-style: normal;
  font-weight: 700;
}

/* Blog Featured Image */
.blog-post-featured-image {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* Social Share Buttons */
.social-share-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
}

.social-share-buttons .share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  color: var(--dark-charcoal);
  transition: all 0.3s ease;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.social-share-buttons .share-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
  background: var(--golden-yellow);
  color: var(--rich-black);
}

.social-share-buttons .share-btn.facebook:hover {
  background: #1877f2;
  color: white;
}

.social-share-buttons .share-btn.twitter:hover {
  background: #1da1f2;
  color: white;
}

.social-share-buttons .share-btn.linkedin:hover {
  background: #0a66c2;
  color: white;
}

.social-share-buttons .share-btn.copy-link:hover {
  background: var(--golden-yellow);
  color: var(--rich-black);
}

/* Author Bio Card */
.author-bio-card {
  box-shadow: var(--shadow-card);
  border-width: 2px !important;
  transition: all 0.3s ease;
}

.author-bio-card:hover {
  box-shadow: var(--shadow-gold-glow);
  transform: translateY(-2px);
}

.author-bio-card img.author-avatar,
.author-bio-card .author-avatar img {
  object-fit: cover;
  box-shadow: var(--shadow-soft);
  border: 2px solid var(--gold-metallic) !important;
}

.pl-latest-videos {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pl-latest-videos__featured {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pl-latest-videos__thumb img {
  width: 100%;
  height: auto;
  min-height: 150px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--rich-black);
}

.pl-latest-videos__title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--gold-bright);
  text-decoration: none;
}

.pl-latest-videos__title:hover,
.pl-latest-videos__item-title:hover {
  color: var(--gold-deep);
}

.pl-latest-videos__cta {
  display: inline-block;
  text-align: center;
  padding: 10px 16px;
  border-radius: 8px;
  background: linear-gradient(90deg, #ffd700 0%, #b8860b 100%);
  color: var(--rich-black);
  font-weight: 700;
  text-decoration: none;
}

.pl-latest-videos__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}

.pl-latest-videos__item {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  align-items: center;
}

.pl-latest-videos__item-thumb img {
  width: 84px;
  height: 64px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--warm-beige);
}

.pl-latest-videos__item-title {
  color: var(--white);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

/* Query Pagination */
.wp-block-query-pagination {
  margin-top: 60px;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--white);
  color: var(--dark-charcoal);
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.wp-block-query-pagination a:hover,
.wp-block-query-pagination .page-numbers:hover {
  background: var(--golden-yellow);
  color: var(--rich-black);
  border-color: var(--gold-deep);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.wp-block-query-pagination .page-numbers.current {
  background: var(--golden-yellow);
  color: var(--rich-black);
  border-color: var(--gold-deep);
}

/* Blog Comments Styling */
.blog-comments {
  background: var(--white);
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.blog-comments .wp-block-comment-template {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-bottom: 30px;
  margin-bottom: 30px;
}

.blog-comments .wp-block-comment-author-name {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--gold-deep);
  font-size: 18px;
}

.blog-comments .wp-block-comment-content {
  color: var(--dark-charcoal);
  line-height: 1.8;
  margin-top: 15px;
}

.blog-comments .wp-block-comment-date {
  font-size: 14px;
  color: var(--warm-gray);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.blog-comments .wp-block-comment-reply-link {
  color: var(--gold-deep);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-comments .wp-block-comment-reply-link:hover {
  color: var(--golden-yellow);
}

/* Post Comment Form */
.blog-comments .wp-block-post-comments-form {
  margin-top: 40px;
}

.blog-comments .wp-block-post-comments-form input[type="text"],
.blog-comments .wp-block-post-comments-form input[type="email"],
.blog-comments .wp-block-post-comments-form input[type="url"],
.blog-comments .wp-block-post-comments-form textarea {
  width: 100%;
  padding: 15px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  transition: all 0.3s ease;
  margin-bottom: 15px;
}

.blog-comments .wp-block-post-comments-form input:focus,
.blog-comments .wp-block-post-comments-form textarea:focus {
  border-color: var(--golden-yellow);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.blog-comments .wp-block-post-comments-form input[type="submit"] {
  background: var(--gradient-burgundy-orange);
  color: var(--white);
  border: none;
  padding: 15px 40px;
  border-radius: 50px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(128, 0, 32, 0.3);
}

.blog-comments .wp-block-post-comments-form input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(128, 0, 32, 0.4);
}

/* Post Navigation */
.post-navigation a {
  color: var(--gold-deep);
  text-decoration: none;
  transition: all 0.2s ease;
  font-family: var(--font-heading);
}

.post-navigation a:hover {
  color: var(--golden-yellow);
}

.post-navigation .post-navigation-link-previous {
  text-align: left;
}

.post-navigation .post-navigation-link-next {
  text-align: right;
}

/* Blog Search Form */
.wp-block-search {
  max-width: 600px;
  margin: 0 auto;
}

.wp-block-search__input {
  font-size: 18px;
  padding: 18px 25px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.wp-block-search__input:focus {
  border-color: var(--golden-yellow);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
  outline: none;
}

.wp-block-search__button {
  background: var(--golden-yellow);
  color: var(--rich-black);
  font-family: var(--font-heading);
  font-weight: 700;
  padding: 18px 30px;
  border: none;
  transition: all 0.3s ease;
}

.wp-block-search__button:hover {
  background: var(--gold-bright);
  transform: scale(1.05);
}

/* Mobile Responsiveness */
@media (max-width: 782px) {
  .blog-post-content {
    font-size: 16px;
  }

  .blog-post-content h2 {
    font-size: 28px;
    margin-top: 40px;
  }

  .blog-post-content h3 {
    font-size: 22px;
    margin-top: 30px;
  }

  .blog-post-content blockquote {
    font-size: 20px;
    padding: 30px 20px;
    margin: 40px 0;
  }

  .blog-featured-card .wp-block-columns {
    flex-direction: column !important;
  }

  .blog-featured-card .wp-block-column {
    flex-basis: 100% !important;
  }

  .social-share-buttons {
    gap: 12px;
  }

  .social-share-buttons .share-btn {
    width: 40px;
    height: 40px;
  }

  .blog-comments {
    padding: 25px 20px;
  }

  .post-navigation {
    flex-direction: column !important;
    gap: 20px !important;
  }

  .post-navigation .post-navigation-link-previous,
  .post-navigation .post-navigation-link-next {
    text-align: center !important;
    width: 100%;
  }
}

/* Tablet Breakpoint */
@media (max-width: 1199px) and (min-width: 783px) {
  .blog-post-content {
    font-size: 17px;
  }

  .blog-post-content h2 {
    font-size: 30px;
  }
}

/* Enhanced Read More Links - Matching Global Buttons */
/* Enhanced Read More Links - Matching Global Buttons - FORCE OVERRIDES */
body .wp-block-read-more {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  font-family: var(--wp--preset--font-family--heading) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 12px 30px !important;
  border-radius: 50px !important;
  background-color: var(--wp--preset--color--gold-bright) !important;
  color: var(--wp--preset--color--rich-black) !important;
  text-decoration: none !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
  line-height: 1.2 !important;
  border: none !important;
  box-shadow: none !important;

  /* Centering Fixes */
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
}

body .wp-block-read-more:hover {
  transform: translateY(-2px) !important;
  background-color: var(--wp--preset--color--gold-deep) !important;
  color: var(--wp--preset--color--rich-black) !important;
  text-decoration: none !important;
}

/* Blog Page Specific Overrides */
body.blog main,
body.single-post main,
body.page-template-page-blog main {
  background: var(--rich-black);
}

/* Ensure blog post titles are properly sized */
.blog-post-card .wp-block-post-title {
  min-height: 70px;
  display: flex;
  align-items: center;
}

/* Add subtle animation to cards on load */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.blog-post-card {
  animation: fadeInUp 0.6s ease forwards;
}

.blog-post-card:nth-child(1) {
  animation-delay: 0.1s;
}

.blog-post-card:nth-child(2) {
  animation-delay: 0.2s;
}

.blog-post-card:nth-child(3) {
  animation-delay: 0.3s;
}

/* Button Style Overrides for Dark Backgrounds */
.wp-block-button.is-style-fill .wp-block-button__link {
  border: 2px solid transparent; /* Ensure sizing matches outline */
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  border: 2px solid currentColor !important;
}
.has-rich-black-background-color
  .wp-block-button.is-style-outline
  .wp-block-button__link {
  color: var(--wp--preset--color--golden-yellow, #ffd700) !important;
}
.has-rich-black-background-color
  .wp-block-button.is-style-fill
  .wp-block-button__link.has-gold-deep-background-color {
  background-color: var(--wp--preset--color--gold-deep, #b8860b) !important;
  color: #fff !important;
}

/* Blog Page Search Bar - Dark Theme with Gold */
/* Blog Page Search Bar - Dark Theme with Gold */
.blog-search-dark .wp-block-search__inside-wrapper {
  background: transparent !important;
  border: 1px solid #ffd700 !important;
  border-radius: 6px;
  max-width: 400px;
  margin: 0 auto; /* Center it */
}

.blog-search-dark .wp-block-search__input {
  background: transparent !important;
  color: #ffffff !important; /* White text for better contrast on dark bg */
  border: none !important;
  font-size: 0.85rem;
}

.blog-search-dark .wp-block-search__input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important; /* Lighter white placeholder */
}

.blog-search-dark .wp-block-search__button {
  background: transparent !important;
  border: none !important;
  padding: 8px;
  cursor: pointer;
}

.blog-search-dark .wp-block-search__button:hover svg {
  fill: #fff !important;
}

.blog-search-dark .wp-block-search__button svg {
  fill: #ffd700 !important;
  width: 18px;
  height: 18px;
  transition: fill 0.3s ease;
}

/* ========================================
   HERO VIDEO STYLES
   ======================================== */

/* Hero Video Container */
.hero-trailer {
  margin-bottom: 30px;
}

.hero-trailer video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  transition: all 0.3s ease;
}

.hero-trailer video:hover {
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

/* Ensure video controls are accessible */
.hero-trailer video::-webkit-media-controls-panel {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Responsive video sizing */
@media (max-width: 1024px) {
  .hero-trailer {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .hero-trailer video {
    border-radius: 8px;
  }

  .hero-media-wrapper {
    gap: 20px !important;
  }
}

/* Hero Media Wrapper - Stack video and image vertically */
.hero-media-wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

@media (max-width: 768px) {
  .hero-media-wrapper {
    gap: 20px;
  }
}

/* ========================================
   CONTENT LAYERING & Z-INDEX SYSTEM
   Ensures proper stacking of content elements
   ======================================== */

/* Text content gets higher z-index for readability */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
button,
input,
textarea,
select {
  position: relative;
  z-index: 10;
}

/* Interactive elements get highest z-index */
a,
button,
input,
textarea,
select,
[tabindex],
[onclick],
[role="button"] {
  position: relative;
  z-index: 20;
}

/* Ensure text readability on dark backgrounds */
.has-rich-black-background-color h1,
.has-rich-black-background-color h2,
.has-rich-black-background-color h3,
.has-rich-black-background-color h4,
.has-rich-black-background-color h5,
.has-rich-black-background-color h6,
.has-rich-black-background-color p,
.has-rich-black-background-color span,
.has-black-background-color h1,
.has-black-background-color h2,
.has-black-background-color h3,
.has-black-background-color h4,
.has-black-background-color h5,
.has-black-background-color h6,
.has-black-background-color p,
.has-black-background-color span,
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section h4,
.hero-section h5,
.hero-section h6,
.hero-section p,
.hero-section span,
.about-section h1,
.about-section h2,
.about-section h3,
.about-section h4,
.about-section h5,
.about-section h6,
.about-section p,
.about-section span,
.premiere-banner-section h1,
.premiere-banner-section h2,
.premiere-banner-section h3,
.premiere-banner-section h4,
.premiere-banner-section h5,
.premiere-banner-section h6,
.premiere-banner-section p,
.premiere-banner-section span {
  position: relative;
  z-index: 15;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Subtle shadow for better readability */
}

/* Ensure buttons and links are always clickable */
.has-rich-black-background-color a,
.has-rich-black-background-color button,
.has-black-background-color a,
.has-black-background-color button,
.hero-section a,
.hero-section button,
.about-section a,
.about-section button,
.premiere-banner-section a,
.premiere-banner-section button {
  position: relative;
  z-index: 25;
}

/* Video elements should be above background effects */
video,
iframe,
.wp-block-video,
.hero-trailer {
  position: relative;
  z-index: 12;
}

/* Images should be above background effects */
img,
.wp-block-image,
figure {
  position: relative;
  z-index: 8;
}

/* ========================================
   ACTION CARDS - LIQUID GLASS MORPHISM
   Requirements: Glass morphism effect for Take Action section cards
   ======================================== */

/* Liquid Glass Card Effect */
.action-card-glass {
  /* Glass morphism background */
  background: linear-gradient(
    135deg,
    rgba(26, 26, 26, 0.85) 0%,
    rgba(45, 45, 45, 0.75) 50%,
    rgba(26, 26, 26, 0.85) 100%
  ) !important;

  /* Backdrop blur for glass effect */
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);

  /* Gold border with transparency */
  border: 1px solid rgba(255, 215, 0, 0.2) !important;

  /* Layered shadows for depth */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 215, 0, 0.1) !important;

  /* Smooth transitions */
  transition: all 0.3s ease;
}

/* Glass card hover effect */
.action-card-glass:hover {
  /* Enhanced glow on hover */
  border-color: rgba(255, 215, 0, 0.4) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(255, 215, 0, 0.2),
    inset 0 1px 0 rgba(255, 215, 0, 0.15) !important;

  /* Subtle lift */
  transform: translateY(-4px);
}

/* Baby Steps Image - Centered with proper fit */
.baby-steps-card-image img {
  object-fit: contain !important;
  object-position: center !important;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
}

/* Form inputs in glass cards */
.action-card-glass input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.action-card-glass input:focus {
  border-color: rgba(255, 215, 0, 0.5) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.1);
}

/* Fix blog card button text overflow */
#latest-blog-card-content a {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure button fits properly on smaller cards */
@media (max-width: 1200px) {
  #latest-blog-card-content a {
    font-size: 0.9rem !important;
    padding: 12px 20px !important;
  }
}

@media (max-width: 992px) {
  #latest-blog-card-content a {
    font-size: 0.85rem !important;
    padding: 12px 16px !important;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .action-card-glass {
    /* Slightly less blur on mobile for performance */
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    backdrop-filter: blur(15px) saturate(180%);
  }

  .baby-steps-card-image img {
    padding: 15px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .action-card-glass {
    transition: none !important;
  }

  .action-card-glass:hover {
    transform: none !important;
  }
}

/* Background image fallbacks - Requirements 1.4 */
.hero-section {
  /* Fallback background color if image fails to load */
  background-color: #1a1a1a !important;
}

.hero-section .wp-block-cover__image-background {
  /* Graceful degradation for background images */
  transition: opacity 0.3s ease;
}

.hero-section .wp-block-cover__image-background:not([src]),
.hero-section .wp-block-cover__image-background[src=""] {
  /* Hide broken images */
  opacity: 0;
}

/* Enhanced background image error handling */
.hero-section.bg-image-error {
  /* Applied by JavaScript when background image fails to load */
  background: linear-gradient(
    135deg,
    #1a1a1a 0%,
    #2d2d2d 50%,
    #1a1a1a 100%
  ) !important;
}

/* Blog post featured image styles */
.blog-post-card .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Specific fallback for Awakening Giants post */
.post-spryte-loriano-awakening-giants .blog-post-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 250px;
  background: url("/wp-content/uploads/2025/12/awakening-giants-thumbnail.jpg")
    center/cover;
  border-radius: 16px 16px 0 0;
  z-index: 1;
}

.post-spryte-loriano-awakening-giants .blog-post-card {
  position: relative;
}

.post-spryte-loriano-awakening-giants
  .blog-post-card
  > *:not(.wp-block-post-featured-image) {
  position: relative;
  z-index: 2;
}

.hero-section.bg-image-error::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(255, 215, 0, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(255, 215, 0, 0.08) 0%,
      transparent 50%
    );
  pointer-events: none;
}

/* About section background fallback */
.about-section {
  background-color: #1a1a1a !important;
}

.about-section.bg-image-error {
  background: linear-gradient(
    135deg,
    #1a1a1a 0%,
    #2d2d2d 50%,
    #1a1a1a 100%
  ) !important;
}

/* Video error handling and fallbacks - Requirements 3.3 */
.hero-trailer video {
  /* Ensure video has a minimum height even if it fails to load */
  min-height: 200px;
  background-color: #2d2d2d;
  background-image:
    linear-gradient(45deg, #2d2d2d 25%, transparent 25%),
    linear-gradient(-45deg, #2d2d2d 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #2d2d2d 75%),
    linear-gradient(-45deg, transparent 75%, #2d2d2d 75%);
  background-size: 20px 20px;
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0px;
}

.hero-trailer video::before {
  content: "Video loading...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1rem;
  z-index: 1;
}

/* Video fallback poster styling */
.video-fallback-poster {
  border-radius: 16px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.4s ease !important;
}

.video-fallback-poster:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

/* Enhanced video error state */
.hero-trailer.video-error video {
  display: none;
}

.hero-trailer.video-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
  border-radius: 16px;
  border: 2px dashed rgba(255, 215, 0, 0.3);
}

/* JavaScript failure fallbacks - Requirements 1.4 */
.no-js .hero-section,
.js-error .hero-section {
  /* Ensure hero section still looks good without JavaScript */
  background-color: #1a1a1a;
}

/* Enhanced JavaScript error fallbacks */
.js-error .premiere-banner-countdown,
.no-js .premiere-banner-countdown {
  /* Hide countdown if JavaScript fails */
  display: none !important;
}

.js-error .landing-carousel,
.no-js .landing-carousel {
  /* Show fallback message for carousel */
  display: none;
}

.js-error .landing-carousel + .landing-carousel__error,
.no-js .landing-carousel + .landing-carousel__error {
  display: block !important;
}

/* Fallback message for JavaScript-dependent features */
.js-fallback-message {
  display: none;
  text-align: center;
  padding: 40px 20px;
  background: rgba(255, 215, 0, 0.1);
  border: 2px solid rgba(255, 215, 0, 0.3);
  border-radius: 12px;
  color: var(--white);
  margin: 20px 0;
}

.js-error .js-fallback-message,
.no-js .js-fallback-message {
  display: block;
}

/* Ensure interactive elements remain accessible without JavaScript */
.no-js .wp-block-button,
.js-error .wp-block-button {
  /* Buttons should still work for navigation */
  opacity: 1;
  pointer-events: auto;
}

/* Hide JavaScript-dependent loading states when JS fails */
.js-error .landing-carousel__loading,
.no-js .landing-carousel__loading {
  display: none !important;
}

/* ========================================
   HERO SECTION - FINAL LAYOUT ENHANCEMENTS
   Task 8.2: Final spacing and visual hierarchy improvements
   Requirements: 2.2, 3.5, 4.3
   ======================================== */

/* Enhanced content flow and spacing */
.hero-section .wp-block-column:first-child {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
}

/* Improved element spacing within text column */
.hero-section .wp-block-column:first-child > * {
  margin-top: 0;
  margin-bottom: 0;
}

.hero-section .wp-block-column:first-child > *:not(:last-child) {
  margin-bottom: 25px;
}

.hero-section .wp-block-column:first-child h1 {
  margin-bottom: 30px !important;
}

.hero-section .wp-block-column:first-child .wp-block-quote {
  margin: 35px 0 !important;
}

.hero-section .wp-block-column:first-child .hero-trailer {
  margin: 40px 0 !important;
}

.hero-section .wp-block-column:first-child .wp-block-buttons {
  margin-top: 35px !important;
}

/* Enhanced Cat Miller image column positioning */
.hero-section .wp-block-column:last-child {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20px;
}

/* Improved responsive content alignment */
@media (min-width: 1024px) {
  .hero-section .wp-block-column:first-child {
    justify-content: center;
    padding-top: 40px;
  }

  .hero-section .wp-block-column:last-child {
    align-items: center;
    padding-top: 0;
  }
}

/* Enhanced mobile content flow */
@media (max-width: 767px) {
  .hero-section .wp-block-column:first-child > *:not(:last-child) {
    margin-bottom: 20px;
  }

  .hero-section .wp-block-column:first-child h1 {
    margin-bottom: 25px !important;
  }

  .hero-section .wp-block-column:first-child .wp-block-quote {
    margin: 30px 0 !important;
  }

  .hero-section .wp-block-column:first-child .hero-trailer {
    margin: 30px 0 !important;
  }
}

/* Performance optimization for hero section */
.hero-section {
  will-change: transform;
  transform: translateZ(0);
}

.hero-section .hero-logo-centered,
.hero-section .hero-trailer,
.hero-section .wp-block-image:not(.hero-logo) {
  will-change: transform;
  transform: translateZ(0);
}

/* ========================================
   HERO QUOTE - LEFT-ALIGNED WITH GOLD BORDER
   ======================================== */

.hero-section .hero-quote-left,
.hero-section .wp-block-quote.hero-quote-left {
  border: none !important;
  border-left: 4px solid #ffd700 !important;
  padding-left: 30px !important;
  text-align: left;
  margin: 30px 0 40px 0 !important;
}

.hero-section .hero-quote-left p,
.hero-section .wp-block-quote.hero-quote-left p {
  color: var(--champagne, #f7e7ce) !important;
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.8;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Responsive quote sizing */
@media (max-width: 768px) {
  .hero-section .hero-quote-left p,
  .hero-section .wp-block-quote.hero-quote-left p {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .hero-section .hero-quote-left p,
  .hero-section .wp-block-quote.hero-quote-left p {
    font-size: 1rem;
  }
}

/* ==========================================================================
   BLOG REDESIGN - Pull Quotes & Author Cards (2025)
   ========================================================================== */

/* Pull Quote Block - Full Gold Border Box */
.pull-quote-block {
  border: 3px solid var(--wp--preset--color--gold-deep) !important;
  background: var(--wp--preset--color--white) !important;
  padding: 24px 28px !important;
  margin: 40px 0 !important;
  border-radius: 8px !important;
}

.pull-quote-block p {
  font-style: italic !important;
  font-size: 1.15rem !important;
  line-height: 1.7 !important;
  color: var(--wp--preset--color--burgundy, #800020) !important;
  margin: 0 !important;
  text-align: center !important;
}

/* Responsive pull quote sizing */
@media (max-width: 768px) {
  .pull-quote-block {
    padding: 20px 24px !important;
    margin: 30px 0 !important;
  }

  .pull-quote-block p {
    font-size: 1.05rem !important;
  }
}

@media (max-width: 480px) {
  .pull-quote-block {
    padding: 16px 20px !important;
  }

  .pull-quote-block p {
    font-size: 1rem !important;
  }
}

/* Author Card Social Icons */
.author-bio-card .wp-social-links,
.author-bio-card .wp-block-social-links {
  justify-content: flex-start;
  gap: 12px;
  margin-top: 12px;
}

.author-bio-card .wp-social-link {
  width: 32px;
  height: 32px;
  transition: transform 0.3s ease;
}

.author-bio-card .wp-social-link:hover {
  transform: scale(1.1);
}

.author-bio-card .wp-social-link a {
  color: var(--gold-deep) !important;
}

.author-bio-card .wp-social-link:hover a {
  color: var(--gold-bright) !important;
}

@media screen and (max-width: 600px) {
  .author-bio-card {
    padding: 20px !important;
  }

  .author-bio-card .wp-block-columns {
    flex-direction: column !important;
    text-align: center;
  }

  .author-bio-card .author-avatar {
    margin-bottom: 20px;
  }

  .author-bio-card .wp-social-links,
  .author-bio-card .wp-block-social-links {
    justify-content: center;
  }
}

/* Full-Width Featured Image on Single Posts */
.single .wp-block-post-featured-image.alignfull {
  margin-left: 0;
  margin-right: 0;
  max-width: 100vw;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.single .wp-block-post-featured-image.alignfull img {
  border-radius: 0 !important;
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
}

/* Responsive featured image */
@media (max-width: 768px) {
  .single .wp-block-post-featured-image.alignfull img {
    max-height: 350px;
  }
}

@media (max-width: 480px) {
  .single .wp-block-post-featured-image.alignfull img {
    max-height: 250px;
  }
}

/* Blog Card Hover Effect */
.blog-post-card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.blog-post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* ========================================
   DARK BLOG CARDS - 2025 Dark Theme
   ======================================== */

/* Dark Blog Post Cards */
.blog-post-card-dark {
  background: var(--dark-charcoal);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.blog-post-card-dark:hover {
  transform: translateY(-8px);
  box-shadow:
    0 12px 40px rgba(255, 215, 0, 0.15),
    0 0 0 1px rgba(255, 215, 0, 0.1);
}

/* Dark Card Title Links */
.blog-post-card-dark .wp-block-post-title a {
  color: var(--gold-bright);
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-post-card-dark .wp-block-post-title a:hover {
  color: var(--cream);
}

/* Dark Card Excerpt */
.blog-post-card-dark .wp-block-post-excerpt__excerpt {
  color: var(--warm-gray);
}

/* Dark Card Date and Meta */
.blog-post-card-dark .wp-block-post-date,
.blog-post-card-dark .wp-block-post-author-name {
  color: var(--warm-gray);
}

/* Dark Card Read More */
.blog-post-card-dark .wp-block-read-more {
  color: var(--gold-bright);
  transition: color 0.2s ease;
}

.blog-post-card-dark .wp-block-read-more:hover {
  color: var(--cream);
}

/* Dark Card Image Hover */
.blog-post-card-dark img {
  transition: transform 0.5s ease;
}

.blog-post-card-dark:hover img {
  transform: scale(1.05);
}

/* Dark Theme Pagination */
.has-rich-black-background-color .wp-block-query-pagination a,
.has-rich-black-background-color .wp-block-query-pagination .page-numbers {
  background: var(--dark-charcoal);
  color: var(--cream);
  border: 1px solid rgba(255, 215, 0, 0.2);
}

.has-rich-black-background-color .wp-block-query-pagination a:hover,
.has-rich-black-background-color
  .wp-block-query-pagination
  .page-numbers:hover {
  background: var(--gold-bright);
  color: var(--rich-black);
  border-color: var(--gold-bright);
}

.has-rich-black-background-color
  .wp-block-query-pagination
  .page-numbers.current {
  background: var(--gold-bright);
  color: var(--rich-black);
  border-color: var(--gold-bright);
}

/* Dark Sidebar Widgets */
.has-rich-black-background-color .sidebar-widget {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Dark Theme Post Content */
.has-rich-black-background-color .wp-block-post-content {
  color: var(--cream);
}

.has-rich-black-background-color .wp-block-post-content h2,
.has-rich-black-background-color .wp-block-post-content h3,
.has-rich-black-background-color .wp-block-post-content h4 {
  color: var(--gold-bright);
}

.has-rich-black-background-color .wp-block-post-content a {
  color: var(--gold-bright);
}

.has-rich-black-background-color .wp-block-post-content a:hover {
  color: var(--cream);
}

/* ========================================
   FRONT PAGE OVERRIDES (2025 Layout)
   Refactored from inline styles
   ======================================== */

/* Force removal of all top spacing on Home */
body.home #main-content,
body.home main.wp-block-group {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.home header,
body.home .site-header-2025 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Pull hero up slightly into header line */
body.home .hero-section.hero-above-fold {
  margin-top: -5px !important;
  padding-top: 0 !important;
}

/* Hero Logo Positioning - Responsive */
body.home .hero-logo-top,
body.home .hero-logo-top figure {
  z-index: 10;
  position: relative;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 0 !important;

  /* Desktop Default */
  margin-top: 120px !important;
  margin-bottom: 20px !important;
  max-width: 350px !important;
}

body.home .hero-logo-top img {
  margin-top: 0 !important;
  padding-top: 0 !important;
  width: 100% !important; /* Allow container to control width */
  height: auto !important;
  max-height: 80px !important;
  object-fit: contain !important;
  transform: none !important;
  clip-path: none !important;
  filter: none !important;
}

/* Ensure inner container doesn't push down */
body.home .hero-section .wp-block-cover__inner-container {
  padding-top: 0 !important;
  justify-content: flex-start !important;
}

/* Mobile Adjustments (< 782px matches WP admin bar break) */
@media screen and (max-width: 782px) {
  body.home .hero-logo-top,
  body.home .hero-logo-top figure {
    margin-top: 80px !important; /* Reduced top margin */
    max-width: 250px !important; /* Smaller logo width */
    margin-bottom: 15px !important;
  }
}

/* Small Mobile (< 480px) */
@media screen and (max-width: 480px) {
  body.home .hero-logo-top,
  body.home .hero-logo-top figure {
    margin-top: 70px !important;
    max-width: 200px !important;
  }
}

/* Footer Newsletter Form Styling */
.site-footer-2025 .mc4wp-form {
  display: flex;
  align-items: center;
  gap: 15px;
}

.site-footer-2025 .mc4wp-form-fields {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  justify-content: flex-end;
}

.site-footer-2025 .mc4wp-form p {
  margin: 0;
  flex-grow: 1;
  max-width: 300px;
}

.site-footer-2025 .mc4wp-form label {
  display: none; /* Hide labels for a cleaner look as requested */
}

.site-footer-2025 .mc4wp-form input[type="email"],
.site-footer-2025 .mc4wp-form input[type="text"] {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-bottom: 2px solid rgba(255, 215, 0, 0.3);
  color: #ffffff;
  padding: 10px 15px;
  font-size: 0.95rem;
  transition: border-color 0.3s ease;
}

.site-footer-2025 .mc4wp-form input[type="email"]:focus,
.site-footer-2025 .mc4wp-form input[type="text"]:focus {
  outline: none;
  border-bottom-color: #ffd700;
}

.site-footer-2025 .mc4wp-form input[type="submit"] {
  background: linear-gradient(135deg, #b8860b 0%, #ffd700 50%, #ffc700 100%);
  color: #1a1a1a;
  border: none;
  border-radius: 50px;
  padding: 10px 25px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
  white-space: nowrap;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.site-footer-2025 .mc4wp-form input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.footer-form-label {
  margin-right: 15px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .site-footer-2025 .wp-block-columns {
    flex-direction: column;
    text-align: center;
  }

  .site-footer-2025 .mc4wp-form-fields {
    flex-direction: column;
    justify-content: center;
  }

  .site-footer-2025 .mc4wp-form p {
    max-width: 100%;
  }

  .site-footer-2025 .wp-block-group.layout-flex {
    justify-content: center !important;
    flex-direction: column;
    gap: 10px;
  }
}

/* ========================================
   UTILITY CLASSES - TEXT GRADIENTS
   Fixes issues with background-clip: text not applying correctly in some contexts
   ======================================== */
.text-gradient-gold {
  background: linear-gradient(
    135deg,
    #b8860b 0%,
    #ffd700 50%,
    #ffc700 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block !important;
}

/* ========================================
   FLIP CARDS - TEAM SECTION
   3D card flip effect for About Us / Meet the Team
   ======================================== */

.team-flip-cards-section {
  padding: 80px 20px;
}

.team-flip-cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Force all buttons to have black text */
.wp-block-button__link,
.wp-block-button__link:visited,
.wp-block-button__link:active,
.wp-block-button__link:focus,
.wp-block-button__link.has-white-color,
.wp-block-button__link.has-text-color {
  color: #000000 !important;
}

@media (max-width: 680px) {
  .team-flip-cards-container {
    gap: 30px;
  }
}

/* Individual Flip Card Container */
.flip-card {
  perspective: 1500px;
  height: 360px; /* Reduced to align with text height */
  width: 240px; /* Fixed width to match circular photo size */
  cursor: pointer;
  position: relative; /* Establish stacking context */
  z-index: 1; /* Default z-index */
  transition: z-index 0s linear 0.4s; /* Delay z-index reset so it stays high during flip back */
}

/* Float hovered card to top */
.flip-card:hover {
  z-index: 20; /* High z-index when hovering/flipping */
  transition-delay: 0s; /* Immediate z-index promotion */
}

/* Inner wrapper for the flip */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

/* Flip on hover */
.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner {
  transform: rotateY(180deg);
}

/* Both sides styling - IDENTICAL BOX MODEL */
.flip-card-front,
.flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box; /* Ensure padding doesn't affect valid size */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Front of card - Photo */
.flip-card-front {
  background: linear-gradient(145deg, #2d2d2d 0%, #1a1a1a 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border: 2px solid rgba(255, 215, 0, 0.2);
}

.flip-card-front::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.3) 0%,
    transparent 50%,
    rgba(255, 215, 0, 0.1) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.flip-card:hover .flip-card-front::before {
  opacity: 1;
}

/* Photo container - Circular Design */
.flip-card-photo {
  width: 180px; /* Reduced circular photo */
  height: 180px;
  border-radius: 50%;
  margin: 25px auto 12px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0; /* Prevent shrinking */
  border: 4px solid rgba(255, 215, 0, 0.3);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  background: var(--dark-charcoal);
}

.flip-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.5s ease;
}

.flip-card:hover .flip-card-photo img {
  transform: scale(1.05);
}

/* Name and Role on front */
.flip-card-info {
  padding: 8px 18px 22px;
  text-align: center;
  width: 100%;
  flex-grow: 1; /* Fill remaining space */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flip-card-name {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0;
  letter-spacing: 0.5px;
}

.flip-card-role {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
}

/* Flip hint icon */
.flip-card-hint {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  background: rgba(255, 215, 0, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 215, 0, 0.3);
  transition: all 0.3s ease;
  z-index: 2;
}

.flip-card:hover .flip-card-hint {
  background: rgba(255, 215, 0, 0.3);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.flip-card-hint svg {
  width: 20px;
  height: 20px;
  fill: #ffd700;
  transition: transform 0.3s ease;
}

.flip-card:hover .flip-card-hint svg {
  transform: rotate(180deg);
}

/* Back of card - Bio */
.flip-card-back {
  background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
  transform: rotateY(180deg);
  padding: 32px 26px; /* Reduced padding for smaller card */
  display: flex;
  flex-direction: column;
  border: 2px solid rgba(255, 215, 0, 0.3);
  position: relative;
}

/* Gold gradient accent on back */
.flip-card-back::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #b8860b 0%, #ffd700 50%, #ffc700 100%);
}

.flip-card-back-name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffd700;
  margin: 0 0 5px 0;
  letter-spacing: 0.5px;
}

.flip-card-back-role {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--champagne, #f7e7ce);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0 0 20px 0;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.flip-card-bio {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: #ffffff;
  margin: 0;
  flex-grow: 1;
  overflow-y: auto;
}

.flip-card-bio::-webkit-scrollbar {
  width: 10px;
}

.flip-card-bio::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.flip-card-bio::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.3);
  border-radius: 10px;
}

/* Back to front hint - hidden */
.flip-card-back-hint {
  display: none;
}

/* Mobile touch support - tap to flip */
/* Mobile touch support & Click-to-flip (Global) */
.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card.is-flipped:hover .flip-card-inner {
  transform: rotateY(180deg);
}

@media (hover: none) {
  .flip-card:hover .flip-card-inner {
    transform: none;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .flip-card-inner {
    transition: none;
  }

  .flip-card:hover .flip-card-inner {
    transform: none;
  }

  /* Show both sides for reduced motion users */
  .flip-card-front,
  .flip-card-back {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }

  .flip-card-back {
    transform: none;
    position: relative;
    margin-top: 20px;
  }

  .flip-card {
    height: auto;
  }
}

/* ========================================
   FIX: Remove cream bar above footer
   Ensure no gap/margin between main content and footer
   ======================================== */
footer.wp-block-template-part,
.wp-block-template-part[data-type="footer"],
footer[class*="site-footer"] {
  margin-top: 0 !important;
  border-top: none !important;
}

/* Ensure body and site blocks have dark background to prevent cream bleeding */
body,
.wp-site-blocks {
  background-color: var(--rich-black, #1a1a1a) !important;
}

/* Remove any bottom margin from main elements before footer */
main.wp-block-group,
.wp-block-group[role="main"],
main {
  margin-bottom: 0 !important;
}

/* Specifically target pages that might have cream sections at bottom */
/* Page-specific overrides using ID and standard classes */
.page-id-3701 main, /* Sponsorship */
.page-id-3989 main, /* Premiere */
.page-id-3762 main, /* Watch */
.page-id-36 main,   /* Contact */
.page-id-315 main,  /* Blog Page */
.blog main,         /* Blog Index */
.page-id-935 main,  /* About */
.sponsorship-page main,
.premiere-page main,
.watch-page main,
.contact-page main,
.blog-page main,
.post-type-archive-pl_episode main {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ========================================
   BLOG PAGINATION - MODERN MINIMAL REDESIGN
   Elegant, evenly-sized navigation for dark theme
   ======================================== */

/* Pagination Container */
.has-rich-black-background-color .wp-block-query-pagination,
.wp-block-query-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding: 20px 0 !important;
  margin-top: 40px !important;
}

/* Reset and base styles for ALL pagination elements */
.has-rich-black-background-color .wp-block-query-pagination a,
.has-rich-black-background-color .wp-block-query-pagination .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid rgba(255, 215, 0, 0.3) !important;
  background: rgba(30, 30, 30, 0.8) !important;
  color: var(--cream) !important;
  min-width: auto !important;
  padding: 0 !important;
}

/* Page Number Buttons - Compact Circles */
.has-rich-black-background-color .wp-block-query-pagination-numbers a,
.has-rich-black-background-color .wp-block-query-pagination-numbers span,
.has-rich-black-background-color
  .wp-block-query-pagination-numbers
  .page-numbers {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Current/Active Page - Gold Highlight */
.has-rich-black-background-color
  .wp-block-query-pagination
  .page-numbers.current,
.has-rich-black-background-color .wp-block-query-pagination-numbers .current {
  background: linear-gradient(
    135deg,
    var(--gold-bright) 0%,
    var(--gold-deep) 100%
  ) !important;
  color: var(--rich-black) !important;
  border-color: var(--gold-bright) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3) !important;
}

/* Hover State for Page Numbers */
.has-rich-black-background-color .wp-block-query-pagination-numbers a:hover,
.has-rich-black-background-color
  .wp-block-query-pagination
  .page-numbers:hover:not(.current) {
  background: rgba(255, 215, 0, 0.15) !important;
  border-color: var(--gold-bright) !important;
  color: var(--gold-bright) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2) !important;
}

/* Previous & Next Buttons - Pill Shape with Icon */
.has-rich-black-background-color .wp-block-query-pagination-previous,
.has-rich-black-background-color .wp-block-query-pagination-next {
  padding: 10px 20px !important;
  border-radius: 25px !important;
  gap: 6px !important;
  min-width: auto !important;
  width: auto !important;
  height: 40px !important;
}

/* Prev/Next Hover Effects */
.has-rich-black-background-color .wp-block-query-pagination-previous:hover,
.has-rich-black-background-color .wp-block-query-pagination-next:hover {
  background: rgba(255, 215, 0, 0.15) !important;
  border-color: var(--gold-bright) !important;
  color: var(--gold-bright) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2) !important;
}

/* Arrow Icons within Prev/Next */
.has-rich-black-background-color .wp-block-query-pagination-previous-arrow,
.has-rich-black-background-color .wp-block-query-pagination-next-arrow {
  font-size: 1rem !important;
  line-height: 1 !important;
}

/* Pagination Numbers Container */
.has-rich-black-background-color .wp-block-query-pagination-numbers {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}

/* Ellipsis Dots */
.has-rich-black-background-color .wp-block-query-pagination-numbers .dots,
.has-rich-black-background-color .wp-block-query-pagination .page-numbers.dots {
  width: 40px !important;
  height: 40px !important;
  background: transparent !important;
  border: none !important;
  color: var(--cream) !important;
  opacity: 0.6 !important;
  cursor: default !important;
}

/* Focus States for Accessibility */
.has-rich-black-background-color .wp-block-query-pagination a:focus-visible,
.has-rich-black-background-color
  .wp-block-query-pagination
  .page-numbers:focus-visible {
  outline: 2px solid var(--gold-bright) !important;
  outline-offset: 2px !important;
}

/* Mobile Responsive Pagination */
@media (max-width: 640px) {
  .has-rich-black-background-color .wp-block-query-pagination {
    gap: 6px !important;
  }

  .has-rich-black-background-color .wp-block-query-pagination-numbers a,
  .has-rich-black-background-color .wp-block-query-pagination-numbers span,
  .has-rich-black-background-color
    .wp-block-query-pagination-numbers
    .page-numbers {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.8rem !important;
  }

  .has-rich-black-background-color .wp-block-query-pagination-previous,
  .has-rich-black-background-color .wp-block-query-pagination-next {
    padding: 8px 16px !important;
    height: 36px !important;
    font-size: 0.8rem !important;
  }
}

/* ========================================
   GLOBAL BUTTON CONSISTENCY PRESET
   Matches Header "WATCH NOW" Button
   ======================================== */
.wp-block-button__link,
.wp-block-button > a,
.wp-element-button,
.btn,
.button,
button:not(.landing-carousel__nav),
input[type="submit"],
#latest-blog-card-content a {
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 0.95rem !important;
  border-radius: 50px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* Specific fix (force background and typography) for the dynamic blog card */
#latest-blog-card-content a {
  background: var(--wp--preset--gradient--gold-luxury) !important;
  color: #1a1a1a !important;
  font-family: "Montserrat", sans-serif !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 0.9rem !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Ensure hovered buttons maintain consistency */
.wp-block-button__link:hover,
.wp-block-button > a:hover,
.wp-element-button:hover,
.btn:hover,
.button:hover,
button:not(.landing-carousel__nav):hover,
input[type="submit"]:hover,
#latest-blog-card-content a:hover {
  letter-spacing: 1px !important;
  text-decoration: none !important;
}

/* ============================================
   DEMOGRAPHICS MODAL - Sponsorship Page
   ============================================ */

/* Modal Container - Hidden by default */
.demographics-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  pointer-events: none;
}

.demographics-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Backdrop */
.demographics-modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  z-index: 1; /* Below container */
}

/* Modal Content Container */
.demographics-modal__container {
  position: relative;
  width: 90%;
  max-width: 900px;
  max-height: 75vh; /* Fits within viewport with margins */
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border-radius: 20px;
  border: 2px solid rgba(212, 175, 55, 0.4);
  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(212, 175, 55, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden; /* Clip content to container */
  display: flex;
  flex-direction: column;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10;
}

.demographics-modal.is-open .demographics-modal__container {
  transform: scale(1) translateY(0);
}

/* Close Button */
.demographics-modal__close {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  width: 44px !important;
  height: 44px !important;
  background: rgba(212, 175, 55, 0.15) !important;
  border: 2px solid rgba(212, 175, 55, 0.5) !important;
  border-radius: 50% !important;
  color: #d4af37 !important;
  font-size: 28px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 2147483647 !important; /* Max z-index to stay above ALL content */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  pointer-events: auto !important; /* Explicitly allow clicks */
}

.demographics-modal__close:hover {
  background: rgba(212, 175, 55, 0.3);
  border-color: #d4af37;
  transform: rotate(90deg);
}

/* Modal Title */
.demographics-modal__title {
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: #d4af37;
  margin: 0;
  padding: 25px 60px 5px;
  background: linear-gradient(90deg, #d4af37, #ffd700, #d4af37);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.demographics-modal__subtitle {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 20px;
  font-style: italic;
}

/* Carousel Container */
.demographics-modal__carousel {
  padding: 0 20px;
}

/* Slides Container */
.demographics-modal__slides {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
}

/* Individual Slide */
.demographics-modal__slide {
  display: none;
  animation: fadeIn 0.4s ease;
}

.demographics-modal__slide.active {
  display: block;
}

.demographics-modal__slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Navigation */
.demographics-modal__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px 0;
}

.demographics-modal__nav-btn {
  width: 44px;
  height: 44px;
  background: rgba(212, 175, 55, 0.15);
  border: 2px solid rgba(212, 175, 55, 0.5);
  border-radius: 50%;
  color: #d4af37;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.demographics-modal__nav-btn:hover {
  background: rgba(212, 175, 55, 0.3);
  border-color: #d4af37;
  transform: scale(1.1);
}

/* Dots */
.demographics-modal__dots {
  display: flex;
  gap: 10px;
}

.demographics-modal__dot {
  width: 12px;
  height: 12px;
  background: rgba(212, 175, 55, 0.3);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.demographics-modal__dot.active,
.demographics-modal__dot:hover {
  background: #d4af37;
  transform: scale(1.2);
}

/* CTA Section */
.demographics-modal__cta {
  padding: 0 20px 25px;
  text-align: center;
}

.demographics-modal__cta-btn {
  display: inline-block;
  background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
  color: #1a1a1a !important;
  padding: 14px 40px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.demographics-modal__cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
  background: linear-gradient(135deg, #ffd700 0%, #d4af37 100%);
}

/* Demographics Trigger Button Styling */
.demographics-modal-trigger .wp-block-button__link {
  background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%) !important;
  color: #1a1a1a !important;
  border: none !important;
  padding: 16px 40px !important;
  font-size: 1rem !important;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
  transition: all 0.3s ease;
}

.demographics-modal-trigger .wp-block-button__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(212, 175, 55, 0.5);
  background: linear-gradient(135deg, #ffd700 0%, #d4af37 100%) !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .demographics-modal__container {
    width: 95%;
    max-height: 95vh;
    border-radius: 16px;
  }

  .demographics-modal__title {
    font-size: 1.3rem;
    padding: 20px 50px 5px;
  }

  .demographics-modal__carousel {
    padding: 0 10px;
  }

  .demographics-modal__cta-btn {
    padding: 12px 30px;
    font-size: 0.85rem;
  }
}

/* Body scroll lock when modal is open */
body.demographics-modal-open {
  overflow: hidden;
}

/* ============================================
   DEMOGRAPHICS MODAL - Data Display Styles
   ============================================ */

/* Content Container with Scroll */
.demographics-modal__content {
  padding: 20px 25px 25px;
  flex: 1;
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: calc(75vh - 20px);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

/* Stats Row - Key Metrics */
.demo-stats-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 15px;
  margin-bottom: 30px;
}

.demo-stat-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 12px;
  padding: 20px 15px;
  text-align: center;
  transition: all 0.3s ease;
}

.demo-stat-card:hover {
  border-color: rgba(212, 175, 55, 0.5);
  transform: translateY(-2px);
}

.demo-stat-card--featured {
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.15) 0%,
    rgba(184, 134, 11, 0.1) 100%
  );
  border-color: rgba(212, 175, 55, 0.4);
}

.demo-stat-value {
  display: block;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  background: linear-gradient(135deg, #ffd700 0%, #d4af37 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.demo-stat-label {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 8px;
}

/* Insights Grid */
.demo-insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 35px;
}

.demo-insight {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 18px 15px;
  text-align: center;
  transition: all 0.3s ease;
}

.demo-insight:hover {
  background: rgba(212, 175, 55, 0.08);
  border-color: rgba(212, 175, 55, 0.3);
}

.demo-insight-icon {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.demo-insight-value {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: #d4af37;
  line-height: 1.2;
}

.demo-insight-label {
  display: block;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6px;
  line-height: 1.3;
}

/* Section Titles */
.demo-section-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #d4af37;
  margin: 0 0 5px;
  text-align: center;
}

.demo-section-subtitle {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin: 0 0 20px;
}

/* Lifestyle Table */
.demo-table-wrapper {
  overflow-x: auto;
  margin-bottom: 15px;
}

.demo-lifestyle-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.demo-lifestyle-table th {
  background: rgba(212, 175, 55, 0.15);
  color: #d4af37;
  font-weight: 600;
  text-align: left;
  padding: 12px 15px;
  border-bottom: 2px solid rgba(212, 175, 55, 0.3);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

.demo-lifestyle-table th:nth-child(2),
.demo-lifestyle-table th:nth-child(3),
.demo-lifestyle-table th:nth-child(4) {
  text-align: center;
  width: 100px;
}

.demo-lifestyle-table td {
  padding: 12px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}

.demo-lifestyle-table td:nth-child(2),
.demo-lifestyle-table td:nth-child(3),
.demo-lifestyle-table td:nth-child(4) {
  text-align: center;
}

.demo-lifestyle-table tbody tr:hover {
  background: rgba(212, 175, 55, 0.05);
}

.demo-table-highlight {
  background: rgba(212, 175, 55, 0.08);
}

/* Index Badges */
.demo-index {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.demo-index--high {
  background: linear-gradient(
    135deg,
    rgba(76, 175, 80, 0.3) 0%,
    rgba(76, 175, 80, 0.15) 100%
  );
  color: #81c784;
  border: 1px solid rgba(76, 175, 80, 0.4);
}

.demo-index--medium {
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.3) 0%,
    rgba(212, 175, 55, 0.15) 100%
  );
  color: #d4af37;
  border: 1px solid rgba(212, 175, 55, 0.4);
}

/* Index Note */
.demo-index-note {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  font-style: italic;
  margin: 15px 0 25px;
}

/* Modal Container Adjustments for larger content */
.demographics-modal__container {
  max-width: 950px;
  max-height: 95vh;
}

/* Mobile Responsive - Demographics Data */
@media (max-width: 768px) {
  .demo-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .demo-insights-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .demo-lifestyle-table {
    font-size: 0.8rem;
  }

  .demo-lifestyle-table th,
  .demo-lifestyle-table td {
    padding: 10px 8px;
  }

  .demographics-modal__content {
    padding: 20px 15px;
  }
}

@media (max-width: 480px) {
  .demo-stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .demo-stat-card--featured {
    grid-column: span 2;
  }

  .demo-insights-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .demo-lifestyle-table th:first-child,
  .demo-lifestyle-table td:first-child {
    min-width: 150px;
  }
}