/* ============================================
   OVERRIDE STYLES FOR MODERN HERO
   ============================================ */

/* Override old banner section styles when modern hero is present */
.modern-hero-section ~ section .banner-section,
body:has(.modern-hero-section) .banner-section:not(.modern-hero-section) {
    display: none;
}

/* Ensure proper spacing after modern hero */
.modern-hero-section + section,
.modern-hero-section + .blog-section {
    padding-top: 80px;
}

@media (max-width: 991px) {
    .modern-hero-section + section,
    .modern-hero-section + .blog-section {
        padding-top: 60px;
    }
}

/* Container adjustments for better responsiveness */
.modern-hero-section .container {
    max-width: 1320px;
    padding-left: 15px;
    padding-right: 15px;
}

@media (max-width: 1399px) {
    .modern-hero-section .container {
        max-width: 1140px;
    }
}

@media (max-width: 1199px) {
    .modern-hero-section .container {
        max-width: 960px;
    }
}

@media (max-width: 991px) {
    .modern-hero-section .container {
        max-width: 720px;
    }
}

@media (max-width: 767px) {
    .modern-hero-section .container {
        max-width: 540px;
    }
}

@media (max-width: 575px) {
    .modern-hero-section .container {
        max-width: 100%;
    }
}

/* Enhanced button styles compatibility */
.modern-hero-section .btn,
.modern-hero-section .btn--base {
    transition: all 0.3s ease;
}

/* Make sure images are responsive */
.modern-hero-section img {
    max-width: 100%;
    height: auto;
}

/* Ensure proper text color inheritance */
.modern-hero-section .text--base {
    color: inherit;
}

/* Fix for any layout shifts */
.modern-hero-section * {
    box-sizing: border-box;
}

/* Smooth transition for theme changes */
.modern-hero-section,
.modern-hero-section * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Performance optimization */
.modern-hero-section .gradient-orb,
.modern-hero-section .floating-element,
.modern-hero-section .trading-card {
    will-change: transform;
}

/* Accessibility improvements */
.modern-hero-section a:focus-visible,
.modern-hero-section button:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

/* Fix z-index stacking */
.modern-hero-section {
    z-index: 1;
}

.modern-hero-section .hero-content,
.modern-hero-section .hero-visual {
    position: relative;
    z-index: 10;
}

/* Ensure ticker scrolls properly */
.ticker-tape {
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

/* Mobile optimization */
@media (max-width: 575px) {
    .modern-hero-section {
        overflow-x: hidden;
    }
}

/* Support for RTL languages */
[dir="rtl"] .modern-hero-section .ticker-content {
    animation: scrollRTL 30s linear infinite;
}

@keyframes scrollRTL {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

[dir="rtl"] .modern-hero-section .hero-badge,
[dir="rtl"] .modern-hero-section .btn-modern {
    flex-direction: row-reverse;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .modern-hero-section {
        background: #000000;
    }
    
    .modern-hero-section .hero-title,
    .modern-hero-section .hero-description,
    .modern-hero-section .stat-value,
    .modern-hero-section .card-title {
        color: #ffffff;
    }
    
    .modern-hero-section .gradient-orb {
        display: none;
    }
    
    .modern-hero-section .btn-modern-primary {
        background: #0066cc;
        border: 2px solid #ffffff;
    }
}

/* Loading state */
.modern-hero-section.loading {
    opacity: 0;
}

.modern-hero-section:not(.loading) {
    opacity: 1;
    transition: opacity 0.3s ease;
}