/* Hero Adaptive Styling for Video/No-Video States */

/* Default state - no video, theme-adaptive */
.hero-badge {
    color: rgb(99 102 241); /* indigo-500 */
    background-color: rgb(238 242 255); /* indigo-50 */
}

.hero-title {
    color: rgb(17 24 39); /* gray-900 */
}

.hero-description {
    color: rgb(75 85 99); /* gray-600 */
}

.hero-stats {
    color: rgb(75 85 99); /* gray-600 */
}

.hero-scroll-indicator {
    color: rgb(156 163 175); /* gray-400 */
}

/* Dark mode - no video */
:root.dark .hero-badge {
    color: rgb(129 140 248); /* indigo-400 */
    background-color: rgb(30 27 75); /* indigo-950 */
}

:root.dark .hero-title {
    color: rgb(255 255 255); /* white */
}

:root.dark .hero-description {
    color: rgb(209 213 219); /* gray-300 */
}

:root.dark .hero-stats {
    color: rgb(209 213 219); /* gray-300 */
}

:root.dark .hero-scroll-indicator {
    color: rgb(107 114 128); /* gray-500 */
}

/* Video present state - high contrast for overlay */
.hero-container.has-video .hero-badge {
    color: rgb(255 255 255); /* white */
    background-color: rgba(99, 102, 241, 0.2); /* indigo with transparency */
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-container.has-video .hero-title {
    color: rgb(255 255 255); /* white */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-container.has-video .hero-description {
    color: rgb(255 255 255); /* white - changed from gray-200 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-container.has-video .hero-stats {
    color: rgb(255 255 255); /* white - changed from gray-200 */
}

/* Make stat labels white too */
.hero-container.has-video .hero-stats .text-sm {
    color: rgb(255 255 255) !important;
}

/* Ensure all grey text becomes white with video */
.hero-container.has-video .text-gray-600,
.hero-container.has-video .text-gray-500,
.hero-container.has-video .text-gray-400,
.hero-container.has-video .dark\\:text-gray-300,
.hero-container.has-video .dark\\:text-gray-400,
.hero-container.has-video .dark\\:text-gray-500 {
    color: rgb(255 255 255) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Specific targeting for hero stats text */
.hero-container.has-video .hero-stats .text-sm {
    color: rgb(255 255 255) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Target any text with gray classes in video mode */
.hero-container.has-video [class*="text-gray"] {
    color: rgb(255 255 255) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Force override for any missed grey text in video mode */
.hero-container.has-video * {
    color: inherit;
}

.hero-container.has-video .text-gray-600,
.hero-container.has-video .text-gray-500,
.hero-container.has-video .text-gray-400,
.hero-container.has-video .text-gray-300 {
    color: rgb(255 255 255) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.hero-container.has-video .hero-scroll-indicator {
    color: rgb(255 255 255); /* white - changed from gray-300 */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Video overlay enhancements */
.hero-container.has-video .hero-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0.3) 100%
    );
    z-index: -1;
    border-radius: inherit;
}

/* Ensure proper layering */
.hero-content {
    position: relative;
    z-index: 10;
}

.hero-video {
    z-index: -2;
}

.hero-fallback {
    z-index: -1;
}