/* Slider Component Font Optimizations for Blazor WebAssembly */

/* Ensure fonts are loaded before slider renders */
.hero-one-slider {
    font-family: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Prevent FOIT (Flash of Invisible Text) */
.hero-data h1,
.hero-data p {
    font-display: swap;
    font-synthesis: none;
}

/* Improve font rendering on different browsers */
@supports (font-variation-settings: normal) {
    .hero-data h1,
    .hero-data p {
        font-variation-settings: 'wght' 700;
    }
}

/* Ensure proper font loading state */
.hero-data.font-loading h1,
.hero-data.font-loading p {
    visibility: hidden;
}

.hero-data.font-loaded h1,
.hero-data.font-loaded p {
    visibility: visible;
}

/* Better text contrast for readability */
.slick-active .hero-data h1 {
    font-weight: 800;
    text-rendering: optimizeLegibility;
}

.slick-active .hero-data p {
    font-weight: 500;
    opacity: 0.95;
}

/* Responsive typography improvements */
@media (max-width: 768px) {
    .hero-data h1 {
        font-size: 36px !important;
        line-height: 42px !important;
        letter-spacing: -0.3px;
    }
    
    .hero-data p {
        font-size: 16px !important;
        line-height: 24px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hero-data h1 {
        font-size: 60px;
        line-height: 66px;
    }
    
    .hero-data p {
        font-size: 20px;
        line-height: 28px;
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-data h1,
    .hero-data p {
        -webkit-font-smoothing: subpixel-antialiased;
    }
}