/*
Theme Name: YourSite.biz - SaaS Store Builder
Description: A modern WordPress theme for SaaS eCommerce platform businesses, clean and conversion-focused design. Features include drag & drop customization, pricing tables, testimonials, and complete eCommerce integration.
Version: 1.0.0
Author: YourSite.biz
Author URI: https://yoursite.biz
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yoursite
Tags: ecommerce, business, saas, modern, responsive, customizer-ready, block-styles, wide-blocks
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
*/ 

/* Import Tailwind CSS */
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');

/* Custom CSS Variables */
:root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --accent-color: #f093fb;
    --text-color: #374151;
    --text-light: #6b7280;
    --background-color: #ffffff;
    --border-color: #e5e7eb;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
}

/* Base Typography */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
}

/* WordPress specific overrides */
.wp-block-image {
    margin: 0;
}

.aligncenter {
    text-align: center;
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* Custom gradient for hero section */
.hero-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}

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

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Hover effects */
.hover-lift:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

/* Button Styles - CRITICAL FIXES */
.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 6px !important;
    color: white !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3) !important;
    color: white !important;
    text-decoration: none !important;
}

.btn-primary:visited {
    color: white !important;
}

.btn-secondary {
    background: white !important;
    border: 2px solid #e5e7eb !important;
    padding: 12px 24px !important;
    border-radius: 6px !important;
    color: #374151 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.btn-secondary:hover {
    border-color: #667eea !important;
    color: #667eea !important;
    text-decoration: none !important;
}

.btn-secondary:visited {
    color: #374151 !important;
}

/* Hero section text visibility */
.hero-gradient h1,
.hero-gradient h2,
.hero-gradient h3,
.hero-gradient h4,
.hero-gradient h5,
.hero-gradient h6,
.hero-gradient p,
.hero-gradient span,
.hero-gradient div {
    color: white !important;
}

/* ==========================================================================
   LOGO AUTO-SCALING STYLES
   ========================================================================== */

/* Custom Logo Scaling */
.custom-logo-link {
    display: inline-block !important;
    max-width: 200px !important; /* Maximum logo width */
    width: auto !important;
    height: auto !important;
}

.custom-logo {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: 60px !important; /* Maximum logo height */
    object-fit: contain !important;
    display: block !important;
}

/* Mobile responsive logo */
@media (max-width: 768px) {
    .custom-logo-link {
        max-width: 150px !important;
    }
    
    .custom-logo {
        max-height: 40px !important;
    }
}

@media (max-width: 480px) {
    .custom-logo-link {
        max-width: 120px !important;
    }
    
    .custom-logo {
        max-height: 32px !important;
    }
}

/* Site branding container adjustments */
.site-branding {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.site-logo {
    flex-shrink: 0 !important;
}

.site-title-wrapper {
    min-width: 0 !important; /* Allows text to wrap if needed */
}

/* Ensure logo doesn't interfere with navigation on smaller screens */
@media (max-width: 1024px) {
    .site-branding {
        flex: 1 !important;
        min-width: 0 !important;
    }
}

/* High DPI display support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .custom-logo {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }
}

/* Dark mode logo adjustments */
body.dark-mode .custom-logo {
    /* You can add filters here if your logo needs adjustment in dark mode */
    /* filter: brightness(1.1) contrast(0.9); */
}

/* Logo loading state */
.custom-logo {
    transition: opacity 0.3s ease !important;
}

.custom-logo:not([src]) {
    opacity: 0 !important;
}

/* Fix for logos with transparent backgrounds */
.custom-logo {
    background: transparent !important;
}

/* Ensure proper spacing in header */
.site-header .container .flex {
    align-items: center !important;
    min-height: 64px !important; /* Minimum header height */
}

/* Logo hover effect (optional) */
.custom-logo-link:hover .custom-logo {
    opacity: 0.8 !important;
    transition: opacity 0.2s ease !important;
}

/* Print styles for logo */
@media print {
    .custom-logo {
        max-height: 40px !important;
        max-width: 150px !important;
    }
}

/* ==========================================================================
   GENERAL STYLING CONTINUES
   ========================================================================== */

/* Footer Breadcrumbs - Subtle styling */
.breadcrumbs-footer {
    font-size: 0.75rem !important;
    color: #9ca3af !important;
    opacity: 0.8 !important;
    text-align: center !important;
}

.breadcrumbs-footer a {
    color: #9ca3af !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.breadcrumbs-footer a:hover {
    color: #d1d5db !important;
    text-decoration: none !important;
}

.breadcrumbs-footer .breadcrumb-separator {
    margin: 0 8px !important;
    color: #6b7280 !important;
    opacity: 0.6 !important;
}

/* Responsive adjustments for breadcrumbs */
@media (max-width: 768px) {
    .breadcrumbs-footer {
        font-size: 0.7rem !important;
        text-align: center !important;
        margin-bottom: 8px !important;
    }
}

/* Ensure text is visible on gradients */
.text-white {
    color: white !important;
}

.text-gray-900 {
    color: #111827 !important;
}

.text-gray-600 {
    color: #4b5563 !important;
}

.text-gray-300 {
    color: #d1d5db !important;
}

/* Card hover effects */
.feature-card {
    transition: all 0.3s ease !important;
}

.feature-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px) !important;
}

/* Background colors */
.bg-white {
    background-color: white !important;
}

.bg-gray-50 {
    background-color: #f9fafb !important;
}

.bg-gray-100 {
    background-color: #f3f4f6 !important;
}

.bg-gray-900 {
    background-color: #111827 !important;
}

/* Ensure proper contrast */
.bg-gray-900 * {
    color: white !important;
}

.bg-gray-900 h1,
.bg-gray-900 h2,
.bg-gray-900 h3,
.bg-gray-900 h4,
.bg-gray-900 h5,
.bg-gray-900 h6 {
    color: white !important;
}

/* Form styles */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 12px !important;
    font-size: 14px !important;
    background-color: white !important;
    color: #374151 !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

/* Navigation styles */
.site-header {
    background-color: white !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.site-header a {
    color: #374151 !important;
    text-decoration: none !important;
}

.site-header a:hover {
    color: #667eea !important;
}

/* Footer styles */
.site-footer {
    background-color: #111827 !important;
    color: white !important;
}

.site-footer * {
    color: white !important;
}

.site-footer a {
    color: #d1d5db !important;
}

.site-footer a:hover {
    color: white !important;
}

/* Responsive utilities */
@media (max-width: 768px) {
    .hero-gradient {
        padding: 60px 0 !important;
    }
    
    .hero-gradient h1 {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
    }
    
    .hero-gradient p {
        font-size: 1.1rem !important;
    }
}

/* Pricing table styles */
.pricing-card {
    background: white !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 32px !important;
    position: relative !important;
}

.pricing-card.featured {
    border-color: #667eea !important;
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.15) !important;
}

/* Icon backgrounds */
.bg-blue-100 {
    background-color: #dbeafe !important;
}

.bg-green-100 {
    background-color: #dcfce7 !important;
}

.bg-purple-100 {
    background-color: #f3e8ff !important;
}

.bg-orange-100 {
    background-color: #fed7aa !important;
}

.bg-red-100 {
    background-color: #fee2e2 !important;
}

.bg-yellow-100 {
    background-color: #fef3c7 !important;
}

/* Icon colors */
.text-blue-600 {
    color: #2563eb !important;
}

.text-green-600 {
    color: #16a34a !important;
}

.text-purple-600 {
    color: #9333ea !important;
}

.text-orange-600 {
    color: #ea580c !important;
}

.text-red-600 {
    color: #dc2626 !important;
}

.text-yellow-600 {
    color: #d97706 !important;
}

/* Search form styles */
.search-form {
    max-width: 400px !important;
    margin: 0 auto !important;
}

.search-field {
    flex: 1 !important;
    border: 1px solid #d1d5db !important;
    border-right: none !important;
    border-radius: 6px 0 0 6px !important;
    padding: 12px 16px !important;
}

.search-submit {
    background: #667eea !important;
    color: white !important;
    border: none !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
}

.search-submit:hover {
    background: #5b21b6 !important;
}

/* Ensure all text is readable */
h1, h2, h3, h4, h5, h6 {
    color: #111827 !important;
    font-weight: bold !important;
}

p {
    color: #374151 !important;
    line-height: 1.6 !important;
}

/* Override any white text on white backgrounds */
.bg-white h1,
.bg-white h2,
.bg-white h3,
.bg-white h4,
.bg-white h5,
.bg-white h6 {
    color: #111827 !important;
}

.bg-white p,
.bg-white span,
.bg-white div {
    color: #374151 !important;
}

/* Specific hero section fixes */
.hero-gradient .btn-primary {
    background: white !important;
    color: #764ba2 !important;
}

.hero-gradient .btn-primary:hover {
    background: #f9fafb !important;
    color: #764ba2 !important;
}

.hero-gradient .btn-secondary {
    background: transparent !important;
    border: 2px solid white !important;
    color: white !important;
}

.hero-gradient .btn-secondary:hover {
    background: white !important;
    color: #764ba2 !important;
}

/* Link styles */
a {
    color: #667eea !important;
    text-decoration: none !important;
}

a:hover {
    color: #5b21b6 !important;
    text-decoration: underline !important;
}

/* Make sure all content is visible */
* {
    box-sizing: border-box;
}

/* Container styles */
.container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
}

/* Grid fixes */
.grid {
    display: grid !important;
}

.flex {
    display: flex !important;
}

/* Spacing utilities */
.py-20 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.py-16 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}

.mb-6 {
    margin-bottom: 24px !important;
}

.mb-8 {
    margin-bottom: 32px !important;
}

.mt-16 {
    margin-top: 64px !important;
}

/* Rounded corners */
.rounded-lg {
    border-radius: 8px !important;
}

/* Shadows */
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* Ensure WordPress admin bar doesn't interfere */
html {
    margin-top: 0 !important;
}

#wpadminbar {
    position: fixed !important;
    top: 0 !important;
}

/* Fix for sticky header on webinars page */
/* Remove sticky positioning from header globally */
.site-header,
#masthead,
header,
.main-navigation {
    position: relative !important;
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    transform: none !important;
}

/* ==========================================================================
   YOUTUBE MODAL - COMPLETE STYLES
   ========================================================================== */

/* Video Modal - Base Overlay */
#video-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
    z-index: 99999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* When modal is active */
#video-modal.active {
    display: flex !important;
}

/* Video Modal Container */
#video-modal .absolute.inset-0.flex {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

/* Video wrapper with proper aspect ratio */
#video-modal .relative.max-w-4xl {
    position: relative !important;
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}

/* Video container with 16:9 aspect ratio */
#video-modal .bg-black.rounded-lg {
    background-color: #000 !important;
    border-radius: 8px !important;
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important; /* 16:9 aspect ratio */
    overflow: hidden !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}

/* Video iframe positioning */
#video-modal #video-iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 8px !important;
    background: #000 !important;
}

/* Close button positioning */
#video-modal #close-video-modal {
    position: absolute !important;
    top: -50px !important;
    right: 0 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    padding: 12px !important;
    cursor: pointer !important;
    z-index: 100000 !important;
    transition: background-color 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#video-modal #close-video-modal:hover {
    background: rgba(0, 0, 0, 0.9) !important;
}

#video-modal #close-video-modal svg {
    width: 24px !important;
    height: 24px !important;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden !important;
    height: 100vh !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    #video-modal {
        padding: 10px !important;
    }
    
    #video-modal .relative.max-w-4xl {
        max-width: 100% !important;
    }
    
    #video-modal #close-video-modal {
        top: -40px !important;
        right: -10px !important;
        padding: 10px !important;
    }
    
    #video-modal #close-video-modal svg {
        width: 20px !important;
        height: 20px !important;
    }
}

@media (max-width: 480px) {
    #video-modal {
        padding: 5px !important;
    }
    
    #video-modal #close-video-modal {
        top: -35px !important;
        right: -5px !important;
        padding: 8px !important;
    }
}

/* Animation for modal appearance */
#video-modal {
    opacity: 0 !important;
    transition: opacity 0.3s ease-out !important;
}

#video-modal.active {
    opacity: 1 !important;
}

#video-modal .relative.max-w-4xl {
    transform: scale(0.9) !important;
    transition: transform 0.3s ease-out !important;
}

#video-modal.active .relative.max-w-4xl {
    transform: scale(1) !important;
}

/* Loading state */
#video-modal.loading #video-iframe {
    background: #000 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="20" fill="none" stroke="%23fff" stroke-width="2" stroke-dasharray="31.416" stroke-dashoffset="31.416"><animate attributeName="stroke-dasharray" dur="2s" values="0 31.416;15.708 15.708;0 31.416" repeatCount="indefinite"/><animate attributeName="stroke-dashoffset" dur="2s" values="0;-15.708;-31.416" repeatCount="indefinite"/></circle></svg>') center center no-repeat !important;
    background-size: 40px 40px !important;
}

/* ==========================================================================
   GUIDE CONTENT STYLING - Enhanced Layout and Typography
   ========================================================================== */

/* Main guide content container */
.guide-content {
    line-height: 1.7;
    color: #374151;
    font-size: 16px;
}

/* Paragraph spacing and typography */
.guide-content p,
.guide-content .wp-block-paragraph {
    margin-bottom: 1.5rem !important;
    line-height: 1.7 !important;
    color: #374151 !important;
}

/* Ensure last paragraph doesn't have extra margin */
.guide-content p:last-child,
.guide-content .wp-block-paragraph:last-child {
    margin-bottom: 0 !important;
}

/* Heading spacing and hierarchy */
.guide-content h1,
.guide-content .wp-block-heading h1 {
    font-size: 2.25rem !important;
    line-height: 1.2 !important;
    margin-top: 3rem !important;
    margin-bottom: 1.5rem !important;
    font-weight: 800 !important;
    color: #111827 !important;
}

.guide-content h2,
.guide-content .wp-block-heading h2 {
    font-size: 1.875rem !important;
    line-height: 1.3 !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1.25rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding-bottom: 0.5rem !important;
}

.guide-content h3,
.guide-content .wp-block-heading h3 {
    font-size: 1.5rem !important;
    line-height: 1.4 !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

/* Dark mode adjustments */
body.dark-mode .guide-content {
    color: var(--text-secondary) !important;
}

body.dark-mode .guide-content h1,
body.dark-mode .guide-content h2,
body.dark-mode .guide-content h3,
body.dark-mode .guide-content h4,
body.dark-mode .guide-content h5,
body.dark-mode .guide-content h6 {
    color: var(--text-primary) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .guide-content {
        font-size: 15px !important;
    }
    
    .guide-content h1,
    .guide-content .wp-block-heading h1 {
        font-size: 1.875rem !important;
        margin-top: 2rem !important;
    }
    
    .guide-content h2,
    .guide-content .wp-block-heading h2 {
        font-size: 1.5rem !important;
        margin-top: 2rem !important;
    }
    
    .guide-content h3,
    .guide-content .wp-block-heading h3 {
        font-size: 1.25rem !important;
        margin-top: 1.5rem !important;
    }
}

/* ==========================================================================
   DARK MODE HEADER FIXES - Add this to your style.css
   ========================================================================== */

/* Dark Mode Header Background and Structure */
body.dark-mode .site-header,
body.dark-mode #masthead,
body.dark-mode header.site-header {
    background-color: #1f2937 !important;
    border-bottom-color: #374151 !important;
    backdrop-filter: blur(10px) !important;
}

/* Site Title (Logo Text) Dark Mode */
body.dark-mode .site-title,
body.dark-mode .site-title a,
body.dark-mode .site-title a:hover,
body.dark-mode .site-title a:visited,
body.dark-mode .site-title a:focus {
    color: #f9fafb !important;
    text-decoration: none !important;
}

/* Site Description Dark Mode */
body.dark-mode .site-description,
body.dark-mode .site-tagline {
    color: #d1d5db !important;
}

/* Primary Navigation Dark Mode */
body.dark-mode .main-navigation,
body.dark-mode #primary-menu,
body.dark-mode .primary-navigation {
    background-color: transparent !important;
}

body.dark-mode .main-navigation a,
body.dark-mode #primary-menu a,
body.dark-mode .primary-navigation a,
body.dark-mode .site-header nav a,
body.dark-mode .site-header .menu a {
    color: #e5e7eb !important;
    text-decoration: none !important;
}

body.dark-mode .main-navigation a:hover,
body.dark-mode #primary-menu a:hover,
body.dark-mode .primary-navigation a:hover,
body.dark-mode .site-header nav a:hover,
body.dark-mode .site-header .menu a:hover {
    color: #667eea !important;
    background-color: #374151 !important;
}

/* Mobile Navigation Dark Mode */
body.dark-mode #mobile-navigation,
body.dark-mode .mobile-menu {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .mobile-menu-list,
body.dark-mode .mobile-navigation-menu {
    background-color: #1f2937 !important;
}

body.dark-mode .mobile-menu-list a,
body.dark-mode .mobile-navigation-menu a,
body.dark-mode .mobile-menu a {
    color: #e5e7eb !important;
    border-bottom-color: #374151 !important;
}

body.dark-mode .mobile-menu-list a:hover,
body.dark-mode .mobile-navigation-menu a:hover,
body.dark-mode .mobile-menu a:hover {
    color: #667eea !important;
    background-color: #374151 !important;
}

/* Mobile Menu Toggle Button Dark Mode */
body.dark-mode .mobile-menu-toggle,
body.dark-mode .menu-toggle,
body.dark-mode .hamburger-menu {
    color: #e5e7eb !important;
    border-color: #4b5563 !important;
    background-color: transparent !important;
}

body.dark-mode .mobile-menu-toggle:hover,
body.dark-mode .menu-toggle:hover,
body.dark-mode .hamburger-menu:hover {
    color: #f9fafb !important;
    border-color: #6b7280 !important;
    background-color: #374151 !important;
}

/* Login/CTA Buttons in Header Dark Mode */
body.dark-mode .login-btn,
body.dark-mode .header-cta-btn,
body.dark-mode .site-header .btn-secondary {
    color: #e5e7eb !important;
    border-color: #4b5563 !important;
    background-color: transparent !important;
}

body.dark-mode .login-btn:hover,
body.dark-mode .header-cta-btn:hover,
body.dark-mode .site-header .btn-secondary:hover {
    color: #667eea !important;
    border-color: #667eea !important;
    background-color: rgba(102, 126, 234, 0.1) !important;
}

/* Header CTA Widget Area Dark Mode */
body.dark-mode .header-cta-widget,
body.dark-mode .header-widgets {
    color: #e5e7eb !important;
}

body.dark-mode .header-cta-widget a,
body.dark-mode .header-widgets a {
    color: #e5e7eb !important;
}

body.dark-mode .header-cta-widget a:hover,
body.dark-mode .header-widgets a:hover {
    color: #667eea !important;
}

/* Search Form in Header Dark Mode */
body.dark-mode .site-header .search-form input,
body.dark-mode .header-search input {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

body.dark-mode .site-header .search-form input::placeholder,
body.dark-mode .header-search input::placeholder {
    color: #9ca3af !important;
}

body.dark-mode .site-header .search-form input:focus,
body.dark-mode .header-search input:focus {
    border-color: #667eea !important;
    background-color: #4b5563 !important;
}

/* Dropdown Menus Dark Mode */
body.dark-mode .sub-menu,
body.dark-mode .dropdown-menu,
body.dark-mode .main-navigation .sub-menu {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .sub-menu a,
body.dark-mode .dropdown-menu a,
body.dark-mode .main-navigation .sub-menu a {
    color: #e5e7eb !important;
    border-bottom-color: #374151 !important;
}

body.dark-mode .sub-menu a:hover,
body.dark-mode .dropdown-menu a:hover,
body.dark-mode .main-navigation .sub-menu a:hover {
    color: #667eea !important;
    background-color: #374151 !important;
}

/* Header Background Transparency with Scroll */
body.dark-mode .site-header.scrolled,
body.dark-mode #masthead.scrolled {
    background-color: rgba(31, 41, 55, 0.95) !important;
    backdrop-filter: blur(10px) !important;
}

/* Social Media Icons in Header Dark Mode */
body.dark-mode .header-social-icons a,
body.dark-mode .social-header a {
    color: #9ca3af !important;
}

body.dark-mode .header-social-icons a:hover,
body.dark-mode .social-header a:hover {
    color: #667eea !important;
}

/* Header Utility Links Dark Mode */
body.dark-mode .utility-nav a,
body.dark-mode .header-utility a,
body.dark-mode .top-bar a {
    color: #9ca3af !important;
}

body.dark-mode .utility-nav a:hover,
body.dark-mode .header-utility a:hover,
body.dark-mode .top-bar a:hover {
    color: #d1d5db !important;
}

/* Ensure all header text elements are covered */
body.dark-mode .site-header,
body.dark-mode .site-header *,
body.dark-mode #masthead,
body.dark-mode #masthead * {
    color: #e5e7eb !important;
}

/* Override any remaining light text issues */
body.dark-mode .site-branding *,
body.dark-mode .site-navigation *,
body.dark-mode .header-content * {
    color: #e5e7eb !important;
}

/* Links should be clearly visible */
body.dark-mode .site-header a {
    color: #e5e7eb !important;
}

body.dark-mode .site-header a:hover {
    color: #667eea !important;
}

/* Mobile specific dark mode fixes */
@media (max-width: 1024px) {
    body.dark-mode .mobile-header,
    body.dark-mode .site-header {
        background-color: #1f2937 !important;
    }
    
    body.dark-mode .mobile-navigation-overlay {
        background-color: rgba(0, 0, 0, 0.8) !important;
    }
}

/* Tablet specific adjustments */
@media (max-width: 768px) {
    body.dark-mode .site-header .container {
        background-color: transparent !important;
    }
    
    body.dark-mode .mobile-menu-wrapper {
        background-color: #1f2937 !important;
        border-color: #374151 !important;
    }
}

/* ==========================================================================
   ADDITIONAL CONTRAST FIXES FOR READABILITY
   ========================================================================== */

/* Ensure maximum contrast for important elements */
body.dark-mode .site-title a {
    font-weight: 600 !important;
    color: #ffffff !important;
}

body.dark-mode .main-navigation > ul > li > a {
    font-weight: 500 !important;
    color: #f3f4f6 !important;
}

/* High contrast mode for accessibility */
@media (prefers-contrast: high) {
    body.dark-mode .site-header {
        background-color: #000000 !important;
    }
    
    body.dark-mode .site-header *,
    body.dark-mode .site-header a {
        color: #ffffff !important;
    }
    
    body.dark-mode .site-header a:hover {
        color: #87ceeb !important;
    }
}

/* ==========================================================================
   DARK MODE GLOBAL FIXES - COMPREHENSIVE SOLUTION
   ========================================================================== */

/* Dark Mode CSS Variables */
:root {
    /* Light mode variables (existing) */
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --accent-color: #f093fb;
    --text-color: #374151;
    --text-light: #6b7280;
    --background-color: #ffffff;
    --border-color: #e5e7eb;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    
    /* Light mode specific variables */
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-tertiary: #6b7280;
    --text-quaternary: #9ca3af;
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --card-bg: #ffffff;
    --hero-text: #ffffff;
}

/* Dark mode variables */
body.dark-mode {
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-tertiary: #d1d5db;
    --text-quaternary: #9ca3af;
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --card-bg: #1f2937;
    --hero-text: #ffffff;
    --border-color: #374151;
    --background-color: #111827;
}

/* ==========================================================================
   GLOBAL TEXT COLOR FIXES
   ========================================================================== */

/* Base text elements */
body.dark-mode,
body.dark-mode * {
    color: var(--text-secondary) !important;
}

/* Primary headings - always high contrast */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .text-4xl,
body.dark-mode .text-5xl,
body.dark-mode .text-6xl,
body.dark-mode .text-3xl,
body.dark-mode .text-2xl,
body.dark-mode .text-xl,
body.dark-mode .text-lg {
    color: var(--text-primary) !important;
}

/* Specific heading classes */
body.dark-mode .hero-gradient h1,
body.dark-mode .hero-gradient h2,
body.dark-mode .hero-gradient h3,
body.dark-mode .hero-gradient h4,
body.dark-mode .hero-gradient h5,
body.dark-mode .hero-gradient h6 {
    color: var(--hero-text) !important;
}

/* Text hierarchy */
body.dark-mode .text-gray-900,
body.dark-mode .font-bold,
body.dark-mode .font-semibold {
    color: var(--text-primary) !important;
}

body.dark-mode .text-gray-600,
body.dark-mode .text-gray-700,
body.dark-mode p {
    color: var(--text-secondary) !important;
}

body.dark-mode .text-gray-500,
body.dark-mode .text-gray-400 {
    color: var(--text-tertiary) !important;
}

body.dark-mode .text-gray-300 {
    color: var(--text-quaternary) !important;
}

/* ==========================================================================
   BACKGROUND FIXES
   ========================================================================== */

/* Primary backgrounds */
body.dark-mode,
body.dark-mode .bg-white {
    background-color: var(--bg-primary) !important;
}

body.dark-mode .bg-gray-50 {
    background-color: var(--bg-secondary) !important;
}

body.dark-mode .bg-gray-100 {
    background-color: var(--bg-tertiary) !important;
}

/* Card backgrounds */
body.dark-mode .bg-white,
body.dark-mode .card,
body.dark-mode .feature-card,
body.dark-mode .pricing-card,
body.dark-mode .webinar-card,
body.dark-mode .template-card,
body.dark-mode .templates-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* ==========================================================================
   COMPONENT-SPECIFIC FIXES
   ========================================================================== */

/* Hero sections - keep original styling */
body.dark-mode .hero-gradient,
body.dark-mode .templates-cta-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

body.dark-mode .hero-gradient *,
body.dark-mode .templates-cta-section * {
    color: white !important;
}

/* Navigation */
body.dark-mode .site-header {
    background-color: var(--bg-primary) !important;
    border-bottom-color: var(--border-color) !important;
}

body.dark-mode .site-header a {
    color: var(--text-secondary) !important;
}

body.dark-mode .site-header a:hover {
    color: var(--text-primary) !important;
}

/* Footer */
body.dark-mode .site-footer {
    background-color: var(--bg-primary) !important;
    border-top: 1px solid var(--border-color) !important;
}

body.dark-mode .site-footer * {
    color: var(--text-secondary) !important;
}

body.dark-mode .site-footer a {
    color: var(--text-tertiary) !important;
}

body.dark-mode .site-footer a:hover {
    color: var(--text-primary) !important;
}

/* ==========================================================================
   PAGE-SPECIFIC FIXES
   ========================================================================== */

/* Press Kit Page */
body.dark-mode .templates-hero-section {
    background: linear-gradient(to bottom right, var(--bg-secondary), var(--bg-tertiary)) !important;
}

body.dark-mode .templates-hero-title {
    color: var(--text-primary) !important;
}

body.dark-mode .templates-hero-subtitle {
    color: var(--text-secondary) !important;
}

/* Templates Page */
body.dark-mode .templates-section-title {
    color: var(--text-primary) !important;
}

body.dark-mode .templates-section-subtitle {
    color: var(--text-secondary) !important;
}

body.dark-mode .template-card-title,
body.dark-mode .template-grid-title {
    color: var(--text-primary) !important;
}

body.dark-mode .template-card-description {
    color: var(--text-secondary) !important;
}

body.dark-mode .templates-feature-title {
    color: var(--text-primary) !important;
}

body.dark-mode .templates-feature-description {
    color: var(--text-secondary) !important;
}

/* Webinars Page */
body.dark-mode .webinar-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .webinar-card h3 {
    color: var(--text-primary) !important;
}

body.dark-mode .webinar-card p {
    color: var(--text-secondary) !important;
}

/* Single Post Page */
body.dark-mode .single-post-page {
    background-color: var(--bg-secondary) !important;
}

body.dark-mode .prose {
    color: var(--text-secondary) !important;
}

body.dark-mode .prose h1,
body.dark-mode .prose h2,
body.dark-mode .prose h3,
body.dark-mode .prose h4,
body.dark-mode .prose h5,
body.dark-mode .prose h6 {
    color: var(--text-primary) !important;
}

/* Guide Content */
body.dark-mode .guide-content {
    color: var(--text-secondary) !important;
}

body.dark-mode .guide-content h1,
body.dark-mode .guide-content h2,
body.dark-mode .guide-content h3,
body.dark-mode .guide-content h4,
body.dark-mode .guide-content h5,
body.dark-mode .guide-content h6 {
    color: var(--text-primary) !important;
}

body.dark-mode .guide-content p {
    color: var(--text-secondary) !important;
}

/* ==========================================================================
   FORM ELEMENTS
   ========================================================================== */

body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="url"],
body.dark-mode input[type="password"],
body.dark-mode input[type="search"],
body.dark-mode input[type="number"],
body.dark-mode input[type="tel"],
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--text-tertiary) !important;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

/* Filter buttons */
body.dark-mode .template-filter-btn {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .template-filter-btn:hover {
    background-color: var(--bg-tertiary) !important;
}

body.dark-mode .template-filter-btn.active {
    background-color: #8b5cf6 !important;
    color: white !important;
}

body.dark-mode .webinar-filter {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .webinar-filter.active {
    background-color: #1d4ed8 !important;
    color: white !important;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Border colors */
body.dark-mode .border-gray-200,
body.dark-mode .border-gray-300 {
    border-color: var(--border-color) !important;
}

/* Text colors for specific elements */
body.dark-mode .breadcrumbs-footer {
    color: var(--text-quaternary) !important;
}

body.dark-mode .breadcrumbs-footer a {
    color: var(--text-tertiary) !important;
}

body.dark-mode .breadcrumbs-footer a:hover {
    color: var(--text-secondary) !important;
}

/* FAQ sections */
body.dark-mode .faq-toggle {
    color: var(--text-primary) !important;
    background-color: var(--card-bg) !important;
}

body.dark-mode .faq-toggle:hover {
    background-color: var(--bg-tertiary) !important;
}

body.dark-mode .faq-content {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* ==========================================================================
   GRADIENTS AND SPECIAL BACKGROUNDS
   ========================================================================== */

/* Maintain gradient backgrounds but ensure text contrast */
body.dark-mode .bg-gradient-to-br,
body.dark-mode .bg-gradient-to-r {
    /* Keep gradients as is - they usually have good contrast */
}

/* Special background sections */
body.dark-mode .bg-blue-50,
body.dark-mode .bg-green-50,
body.dark-mode .bg-purple-50,
body.dark-mode .bg-yellow-50,
body.dark-mode .bg-red-50,
body.dark-mode .bg-orange-50 {
    background-color: var(--bg-secondary) !important;
}

/* Icon background adjustments */
body.dark-mode .bg-blue-100,
body.dark-mode .bg-green-100,
body.dark-mode .bg-purple-100,
body.dark-mode .bg-yellow-100,
body.dark-mode .bg-red-100,
body.dark-mode .bg-orange-100 {
    background-color: var(--bg-tertiary) !important;
}

/* ==========================================================================
   RESPONSIVE CONSIDERATIONS
   ========================================================================== */

@media (max-width: 768px) {
    body.dark-mode .hero-gradient h1 {
        color: white !important;
    }
    
    body.dark-mode .templates-hero-title {
        color: var(--text-primary) !important;
    }
}

/* ==========================================================================
   ENSURE HIGH CONTRAST FOR ACCESSIBILITY
   ========================================================================== */

/* Force high contrast for critical elements */
body.dark-mode .btn-primary {
    color: white !important;
}

body.dark-mode .btn-secondary {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .btn-secondary:hover {
    background-color: var(--bg-tertiary) !important;
}

/* Links */
body.dark-mode a {
    color: #60a5fa !important; /* Light blue for better contrast */
}

body.dark-mode a:hover {
    color: #93c5fd !important;
}

/* ==========================================================================
   OVERRIDE ANY REMAINING LIGHT TEXT ON LIGHT BACKGROUNDS
   ========================================================================== */

/* Catch-all for any missed elements */
body.dark-mode .text-white {
    color: white !important; /* Keep white text where intended */
}

/* But fix cases where white text appears on light backgrounds */
body.dark-mode .bg-white .text-white,
body.dark-mode .bg-gray-50 .text-white,
body.dark-mode .bg-gray-100 .text-white {
    color: var(--text-primary) !important;
}

/* Fix any remaining gray text on gray backgrounds */
body.dark-mode .bg-gray-900 .text-gray-900,
body.dark-mode .bg-gray-800 .text-gray-800 {
    color: var(--text-primary) !important;
}

/* ==========================================================================
   LOGO AND IMAGES
   ========================================================================== */

/* Adjust logo for dark mode if needed */
body.dark-mode .custom-logo {
    /* Add filter if logo needs adjustment in dark mode */
    /* filter: brightness(1.1) contrast(0.9); */
}

/* Image adjustments for dark mode */
body.dark-mode img {
    /* Slightly reduce brightness of images in dark mode */
    filter: brightness(0.9) contrast(1.1);
}

body.dark-mode .hero-gradient img,
body.dark-mode .templates-cta-section img {
    /* Reset filter for images in gradient sections */
    filter: none;
}

/* Pricing Section Style Improvements */

/* Most Popular Badge - Ensure white text */
.homepage-pricing-grid .feature-card .bg-gradient-to-r {
    color: #ffffff !important;
}

/* Featured plan primary button - Ensure white text */
.homepage-pricing-grid .feature-card .btn-primary {
    color: #ffffff !important;
}

/* Additional styling for better contrast on featured plans */
.homepage-pricing-grid .feature-card .btn-primary:hover {
    color: #ffffff !important;
    opacity: 0.9;
}

/* If using the scale-105 class for featured plans */
.homepage-pricing-grid .feature-card.scale-105 .btn-primary {
    color: #ffffff !important;
    background-color: #7c3aed;
    border-color: #7c3aed;
}

.homepage-pricing-grid .feature-card.scale-105 .btn-primary:hover {
    color: #ffffff !important;
    background-color: #6d28d9;
    border-color: #6d28d9;
}

/* Most Popular badge specific styling */
.homepage-pricing-grid .absolute.-top-4 span {
    color: #ffffff !important;
    font-weight: 600;
}

/* Ensure the gradient badge has proper contrast */
.bg-gradient-to-r.from-blue-500.to-purple-600 {
    background: linear-gradient(to right, #3b82f6, #9333ea);
    color: #ffffff !important;
}

/* Dark mode adjustments */
.dark .homepage-pricing-grid .feature-card .btn-primary {
    color: #ffffff !important;
}

.dark .homepage-pricing-grid .feature-card.scale-105 .btn-primary {
    color: #ffffff !important;
}

/* Ensure annual savings badge is readable */
.homepage-annual-savings span {
    font-weight: 500;
}

/* Make sure Save 20% badge is readable */
.bg-emerald-500 {
    color: #ffffff !important;
}

/* Specific fix for the pricing section buttons */
#homepage .pricing-section .btn-primary,
.homepage-pricing-grid .btn-primary {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   MOBILE RESPONSIVE FIXES FOR HOMEPAGE - ADD TO STYLE.CSS
   ========================================================================== */

/* ==========================================================================
   IMPROVED MOBILE RESPONSIVE GRID SYSTEM
   ========================================================================== */

/* Benefits Section - Mobile First Approach */
.benefits-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: single column */
    gap: 2rem;
    padding: 0 1rem;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
        padding: 0 2rem;
    }
}

/* Desktop: 4 columns */
@media (min-width: 1024px) {
    .benefits-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
        padding: 0;
    }
}

/* Features Section - Responsive Grid */
.features-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: single column */
    gap: 2rem;
    padding: 0 1rem;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
        padding: 0 2rem;
    }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        padding: 0;
    }
}

/* Pricing Section - Mobile Responsive */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: single column */
    gap: 2rem;
    padding: 0 1rem;
}

/* Tablet: 2 columns for pricing */
@media (min-width: 768px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        padding: 0 1rem;
    }
}

/* Desktop: 3 columns for pricing */
@media (min-width: 1024px) {
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        padding: 0;
    }
    
    /* If 4 pricing plans */
    .pricing-grid.four-plans {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================================================================
   FEATURE CARDS - IMPROVED MOBILE RESPONSIVE
   ========================================================================== */

.feature-card {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 2rem !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

.feature-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px) !important;
}

/* Mobile specific adjustments for feature cards */
@media (max-width: 767px) {
    .feature-card {
        padding: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    .feature-card h3 {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
    }
    
    .feature-card p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }
    
    .feature-card .w-16.h-16 {
        width: 3rem !important;
        height: 3rem !important;
        margin: 0 auto 1rem !important;
    }
}

/* ==========================================================================
   PRICING CARDS - MOBILE OPTIMIZED
   ========================================================================== */

.pricing-card {
    background: white !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 2rem !important;
    position: relative !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.3s ease !important;
}

.pricing-card.featured {
    border-color: #667eea !important;
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.15) !important;
    transform: scale(1.02) !important;
}

/* Mobile specific pricing card adjustments */
@media (max-width: 767px) {
    .pricing-card {
        padding: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .pricing-card.featured {
        transform: none !important; /* Remove scale on mobile */
        margin-top: 0 !important;
    }
    
    .pricing-card h3 {
        font-size: 1.5rem !important;
    }
    
    .pricing-card .text-4xl,
    .pricing-card .text-5xl {
        font-size: 2.5rem !important;
    }
    
    .pricing-card .btn-primary,
    .pricing-card .btn-secondary {
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Featured badge adjustment for mobile */
    .pricing-card .absolute.-top-4 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin-bottom: 1rem !important;
        display: block !important;
    }
}

/* ==========================================================================
   HERO SECTION - ENHANCED MOBILE RESPONSIVE + BACKGROUND IMAGE SUPPORT
   ========================================================================== */

.hero-gradient {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    padding: 4rem 0 !important;
}

/* Hero with background image support */
.hero-gradient.has-background-image {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Optional overlay for better text readability over background images */
.hero-gradient.has-background-image::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.4) !important; /* Dark overlay */
    z-index: 1 !important;
}

.hero-gradient.has-background-image .container {
    position: relative !important;
    z-index: 2 !important;
}

/* Mobile hero adjustments */
@media (max-width: 767px) {
    .hero-gradient {
        padding: 3rem 0 !important;
        text-align: center !important;
    }
    
    .hero-gradient h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1.5rem !important;
    }
    
    .hero-gradient p {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 2rem !important;
    }
    
    .hero-gradient .flex {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: stretch !important;
    }
    
    .hero-gradient .btn-primary,
    .hero-gradient .btn-secondary {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        padding: 1rem 2rem !important;
        font-size: 1.1rem !important;
    }
    
    /* Hero dashboard preview mobile adjustments */
    .hero-gradient .mt-16 {
        margin-top: 2rem !important;
    }
    
    .hero-gradient .bg-white {
        padding: 1.5rem !important;
        margin: 0 1rem !important;
        transform: rotate(0deg) !important; /* Remove rotation on mobile */
    }
}

/* Tablet hero adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-gradient {
        padding: 5rem 0 !important;
    }
    
    .hero-gradient h1 {
        font-size: 3rem !important;
    }
    
    .hero-gradient p {
        font-size: 1.25rem !important;
    }
}

/* ==========================================================================
   SOCIAL PROOF SECTION - MOBILE RESPONSIVE
   ========================================================================== */

.social-proof-logos {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2rem !important;
}

@media (max-width: 767px) {
    .social-proof-logos {
        gap: 1.5rem !important;
        padding: 0 1rem !important;
    }
    
    .social-proof-logos .w-24 {
        width: 4rem !important;
        height: 2.5rem !important;
        flex: 0 0 calc(50% - 0.75rem) !important; /* 2 logos per row on mobile */
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .social-proof-logos .w-24 {
        flex: 0 0 calc(33.333% - 1rem) !important; /* 3 logos per row on tablet */
    }
}

/* ==========================================================================
   TESTIMONIALS - MOBILE RESPONSIVE
   ========================================================================== */

.testimonials-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 0 1rem !important;
}

@media (min-width: 768px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 0 2rem !important;
    }
}

@media (min-width: 1024px) {
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        padding: 0 !important;
    }
}

/* ==========================================================================
   CONTAINER AND SPACING ADJUSTMENTS
   ========================================================================== */

/* Container responsive padding */
.container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (min-width: 768px) {
    .container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Section spacing adjustments */
@media (max-width: 767px) {
    .py-20 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    .py-16 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    
    .mb-16 {
        margin-bottom: 2rem !important;
    }
    
    .mb-8 {
        margin-bottom: 1.5rem !important;
    }
}

/* ==========================================================================
   TAILWIND GRID OVERRIDES FOR BETTER MOBILE SUPPORT
   ========================================================================== */

/* Override Tailwind's default grid classes for better mobile experience */
@media (max-width: 767px) {
    .grid.md\\:grid-cols-2,
    .grid.lg\\:grid-cols-3,
    .grid.lg\\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid.lg\\:grid-cols-3,
    .grid.lg\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==========================================================================
   DARK MODE MOBILE ADJUSTMENTS
   ========================================================================== */

body.dark-mode .feature-card,
body.dark-mode .pricing-card {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .hero-gradient.has-background-image::before {
    background: rgba(0, 0, 0, 0.6) !important; /* Darker overlay for dark mode */
}

/* ==========================================================================
   UTILITY CLASSES FOR MOBILE OPTIMIZATION
   ========================================================================== */

.mobile-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

@media (min-width: 768px) {
    .mobile-stack {
        flex-direction: row !important;
        gap: 2rem !important;
    }
}

.mobile-center {
    text-align: center !important;
}

@media (min-width: 768px) {
    .mobile-center {
        text-align: left !important;
    }
}

.mobile-full-width {
    width: 100% !important;
}

@media (min-width: 768px) {
    .mobile-full-width {
        width: auto !important;
    }
}

/* ==========================================================================
   PERFORMANCE OPTIMIZATIONS FOR MOBILE
   ========================================================================== */

/* Reduce animations on mobile for better performance */
@media (max-width: 767px) {
    .feature-card:hover,
    .pricing-card:hover {
        transform: none !important;
    }
    
    .hover-lift:hover {
        transform: none !important;
    }
}

/* Optimize touch targets for mobile */
@media (max-width: 767px) {
    .btn-primary,
    .btn-secondary {
        min-height: 44px !important; /* Apple's recommended touch target size */
        min-width: 44px !important;
    }
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS VARIABLES (for reference)
   ========================================================================== */

/*
Mobile: 320px - 767px
Tablet: 768px - 1023px  
Desktop: 1024px and up
Large Desktop: 1200px and up

Common breakpoints:
- 480px: Small mobile landscape
- 768px: Tablet portrait
- 1024px: Tablet landscape / Small desktop
- 1200px: Desktop
- 1400px: Large desktop
*/

/* Enhanced Comparison Table Styles */
.pricing-comparison-wrapper {
    position: relative;
    max-width: 100%;
    margin: 2rem 0;
}

/* Feature tooltip styles */
.feature-label {
    cursor: help;
    position: relative;
    display: inline-flex;
    align-items: center;
}

.feature-label:hover svg {
    color: #667eea;
}

/* Tooltip modal */
.feature-tooltip {
    position: fixed;
    z-index: 9999;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    max-width: 300px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.dark .feature-tooltip {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

.feature-tooltip.show {
    opacity: 1;
}

.feature-tooltip.hidden {
    opacity: 0;
}

.tooltip-content {
    font-size: 14px;
    line-height: 1.5;
}

/* Billing toggle enhanced states */
.comparison-yearly-active .monthly-pricing {
    display: none !important;
}

.comparison-yearly-active .annual-pricing {
    display: block !important;
}

.pricing-comparison-wrapper.comparison-yearly-active .comparison-yearly-label {
    color: #3b82f6;
    font-weight: 600;
}

.pricing-comparison-wrapper.comparison-yearly-active .comparison-monthly-label {
    color: #9ca3af;
}

.pricing-comparison-wrapper:not(.comparison-yearly-active) .comparison-monthly-label {
    color: #3b82f6;
    font-weight: 600;
}

.pricing-comparison-wrapper:not(.comparison-yearly-active) .comparison-yearly-label {
    color: #9ca3af;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .comparison-table th:first-child,
    .comparison-table td:first-child {
        min-width: 180px;
        font-size: 13px;
    }
    
    .feature-tooltip {
        max-width: 250px;
        font-size: 13px;
    }
}

/* Print-friendly styles */
@media print {
    .feature-label svg {
        display: none;
    }
    
    .comparison-header {
        position: static !important;
    }
}

/* Webinars page specific styles */
.webinar-filter {
    border: 2px solid #e5e7eb;
    color: #6b7280;
    background: white;
    text-decoration: none;
}

.webinar-filter:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
    text-decoration: none;
}

.webinar-filter.active {
    border-color: #1d4ed8;
    background: #1d4ed8;
    color: white;
    text-decoration: none;
}

.webinar-card {
    transition: all 0.3s ease;
}

.webinar-card:hover {
    transform: translateY(-2px);
}

.webinar-thumbnail {
    background-size: cover;
    background-position: center;
}

/* Newsletter form */
.webinar-newsletter-form input:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* FAQ hover effects */
.faq-item {
    transition: all 0.2s ease;
}

.faq-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Button animations */
.webinar-card a {
    position: relative;
    overflow: hidden;
}

.webinar-card a:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.webinar-card a:hover:before {
    width: 300px;
    height: 300px;
}

/* Target the specific DIFM banner primary button */
.difm-banner-section .bg-gradient-to-r.from-blue-600.to-purple-600,
.bg-gradient-to-r.from-blue-600.to-purple-600.text-white,
a[class*="bg-gradient-to-r"][class*="from-blue-600"][class*="to-purple-600"] {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Hover states */
.difm-banner-section .bg-gradient-to-r.from-blue-600.to-purple-600:hover,
.bg-gradient-to-r.from-blue-600.to-purple-600.text-white:hover,
a[class*="bg-gradient-to-r"][class*="from-blue-600"][class*="to-purple-600"]:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Focus and visited states */
.bg-gradient-to-r.from-blue-600.to-purple-600:focus,
.bg-gradient-to-r.from-blue-600.to-purple-600:visited,
.bg-gradient-to-r.from-blue-600.to-purple-600:active {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Ensure all child elements are white */
.bg-gradient-to-r.from-blue-600.to-purple-600 *,
.bg-gradient-to-r.from-blue-600.to-purple-600.text-white * {
    color: #ffffff !important;
}

/* SVG icons specifically */
.bg-gradient-to-r.from-blue-600.to-purple-600 svg,
.bg-gradient-to-r.from-blue-600.to-purple-600.text-white svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Override any conflicting link styles */
a.bg-gradient-to-r.from-blue-600.to-purple-600,
a.bg-gradient-to-r.from-blue-600.to-purple-600.text-white {
    color: #ffffff !important;
}

a.bg-gradient-to-r.from-blue-600.to-purple-600:hover,
a.bg-gradient-to-r.from-blue-600.to-purple-600:focus,
a.bg-gradient-to-r.from-blue-600.to-purple-600:visited,
a.bg-gradient-to-r.from-blue-600.to-purple-600:active {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Override theme link colors specifically */
.site-content a.bg-gradient-to-r.from-blue-600.to-purple-600,
.entry-content a.bg-gradient-to-r.from-blue-600.to-purple-600,
.homepage a.bg-gradient-to-r.from-blue-600.to-purple-600 {
    color: #ffffff !important;
}

/* High specificity override for stubborn themes */
body a.bg-gradient-to-r.from-blue-600.to-purple-600.text-white {
    color: #ffffff !important;
}

body a.bg-gradient-to-r.from-blue-600.to-purple-600.text-white:hover,
body a.bg-gradient-to-r.from-blue-600.to-purple-600.text-white:focus,
body a.bg-gradient-to-r.from-blue-600.to-purple-600.text-white:visited {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Dark mode compatibility */
body.dark-mode .bg-gradient-to-r.from-blue-600.to-purple-600,
body.dark-mode .bg-gradient-to-r.from-blue-600.to-purple-600.text-white {
    color: #ffffff !important;
}

/* Ensure text shadow for better readability */
.bg-gradient-to-r.from-blue-600.to-purple-600 {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Alternative: If you want to target by URL */
a[href*="/build-my-website"] {
    color: #ffffff !important;
    text-decoration: none !important;
}

a[href*="/build-my-website"]:hover,
a[href*="/build-my-website"]:focus,
a[href*="/build-my-website"]:visited {
    color: #ffffff !important;
    text-decoration: none !important;
}

a[href*="/build-my-website"] svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* ==========================================================================
   PRICING FEATURES LIST - IMPROVED SPACING
   ========================================================================== */

/* ELIMINATE spacing between feature list items for tight layout */
.pricing-card .space-y-3,
.pricing-card .space-y-2,
.pricing-card .space-y-1 {
    gap: 2px !important; /* Minimal gap */
}

.pricing-card ul.space-y-3 > li,
.pricing-card ul.space-y-2 > li,
.pricing-card ul.space-y-1 > li {
    margin-bottom: 2px !important; /* Almost no spacing */
}

.pricing-card ul.space-y-3 > li:last-child,
.pricing-card ul.space-y-2 > li:last-child,
.pricing-card ul.space-y-1 > li:last-child {
    margin-bottom: 0 !important;
}

/* Optimize icon size and positioning */
.pricing-card .flex.items-center svg {
    width: 16px !important; /* Reduced from 20px */
    height: 16px !important; /* Reduced from 20px */
    margin-right: 8px !important; /* Reduced from 12px */
    flex-shrink: 0 !important;
}

/* Improve text sizing and line height */
.pricing-card .flex.items-center span {
    font-size: 14px !important; /* Slightly smaller for better fit */
    line-height: 1.4 !important; /* Tighter line height */
}

/* Alternative: Even more compact version */
.pricing-card.compact .space-y-3 {
    gap: 6px !important;
}

.pricing-card.compact ul.space-y-3 > li {
    margin-bottom: 6px !important;
}

.pricing-card.compact .flex.items-center svg {
    width: 14px !important;
    height: 14px !important;
    margin-right: 6px !important;
}

.pricing-card.compact .flex.items-center span {
    font-size: 13px !important;
    line-height: 1.3 !important;
}

/* Mobile responsive adjustments - ULTRA TIGHT */
@media (max-width: 768px) {
    .pricing-card .space-y-3,
    .pricing-card .space-y-2,
    .pricing-card .space-y-1 {
        gap: 1px !important; /* Almost touching */
    }
    
    .pricing-card ul.space-y-3 > li,
    .pricing-card ul.space-y-2 > li,
    .pricing-card ul.space-y-1 > li {
        margin-bottom: 1px !important;
    }
    
    .pricing-card .flex.items-center svg {
        width: 14px !important;
        height: 14px !important;
        margin-right: 6px !important;
    }
    
    .pricing-card .flex.items-center span {
        font-size: 13px !important;
        line-height: 1.2 !important; /* Tighter line height */
    }
}

/* For the specific pricing page template - ULTRA TIGHT */
.homepage-pricing-grid .feature-card ul {
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}

.homepage-pricing-grid .feature-card li {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 2px !important; /* Minimal spacing */
    padding: 0 !important;
    line-height: 1.3 !important; /* Tight line height */
}

.homepage-pricing-grid .feature-card li:last-child {
    margin-bottom: 0 !important;
}

.homepage-pricing-grid .feature-card li svg {
    margin-top: 2px !important; /* Slight offset to align with text baseline */
    margin-right: 8px !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

.homepage-pricing-grid .feature-card li span {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #374151 !important;
}

/* Dark mode adjustments */
body.dark-mode .homepage-pricing-grid .feature-card li span {
    color: #d1d5db !important;
}

/* Ensure consistent spacing in pricing comparison shortcodes */
.enhanced-pricing-section .pricing-card ul.space-y-3 {
    margin-bottom: 1.5rem !important;
}

.enhanced-pricing-section .pricing-card ul.space-y-3 > li {
    margin-bottom: 8px !important;
}

.enhanced-pricing-section .pricing-card ul.space-y-3 > li:last-child {
    margin-bottom: 0 !important;
}

/* Improve overall card content distribution */
.pricing-card .mb-8.flex-grow {
    margin-bottom: 1.5rem !important; /* Reduced bottom margin */
}

.pricing-card .mb-8.flex-grow ul {
    margin-bottom: 0 !important;
}

/* Better balance between price and features sections */
.pricing-card .mb-6 {
    margin-bottom: 1.5rem !important; /* Reduced from 24px to match features */
}

/* Ensure proper spacing in carousel cards */
.pricing-card-carousel .space-y-3 {
    gap: 8px !important;
}

.pricing-card-carousel ul.space-y-3 > li {
    margin-bottom: 8px !important;
}

.pricing-card-carousel .flex.items-center svg {
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
}

/* Fix for WordPress generated content */
.pricing-card .wp-block-list li {
    margin-bottom: 8px !important;
}

.pricing-card .wp-block-list li:last-child {
    margin-bottom: 0 !important;
}

/* Alternative ultra-compact style (add .ultra-compact class to pricing cards) */
.pricing-card.ultra-compact .space-y-3 {
    gap: 4px !important;
}

.pricing-card.ultra-compact ul.space-y-3 > li {
    margin-bottom: 4px !important;
}

.pricing-card.ultra-compact .flex.items-center svg {
    width: 12px !important;
    height: 12px !important;
    margin-right: 6px !important;
}

.pricing-card.ultra-compact .flex.items-center span {
    font-size: 12px !important;
    line-height: 1.3 !important;
}