/**
 * HOMEPAGE KIDS - CRITICAL FIXES
 * Additional fixes and polishes
 * Load this after homepage-kids.css
 */

/* ============= CRITICAL LAYOUT FIXES ============= */

/* Fix for iOS Safari bottom bar */
@supports (-webkit-touch-callout: none) {
    .hero-kids {
        min-height: -webkit-fill-available;
    }
}

/* Fix for flexbox gap not supported */
@supports not (gap: 1rem) {
    .hero-kids__actions > * + * {
        margin-top: 1rem;
    }
    
    @media (min-width: 640px) {
        .hero-kids__actions > * + * {
            margin-top: 0;
            margin-right: 1rem;
        }
    }
    
    .hero-kids__badges > * + * {
        margin-right: 0.75rem;
    }
}

/* ============= ANIMATION PERFORMANCE FIXES ============= */

/* Force GPU acceleration */
.feature-kids-card,
.path-kids-card,
.step-kids-card,
.blog-kids-card,
.continue-kids-card,
.hero-kids__character {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Reduce motion complexity on low-end devices */
@media (max-width: 768px) {
    .shape {
        animation-duration: 8s !important;
    }
    
    .hero-kids__character {
        animation: none;
    }
}

/* ============= TEXT RENDERING IMPROVEMENTS ============= */

.section-title,
.hero-kids__title,
.feature-kids-card__title,
.path-kids-card__title {
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    font-variant-ligatures: common-ligatures;
}

/* ============= CONTRAST IMPROVEMENTS ============= */

/* Ensure text has enough contrast */
.section-subtitle {
    color: #4a5f7f; /* Darker for better contrast */
}

.feature-kids-card__text,
.path-kids-card__text,
.step-kids-card__text {
    color: #4a5f7f; /* Darker for better contrast */
}

/* ============= SPACING CONSISTENCY ============= */

/* Ensure consistent spacing on all screen sizes */
@media (max-width: 640px) {
    .hero-kids,
    .stats-kids,
    .features-kids,
    .paths-kids,
    .steps-kids,
    .blog-kids,
    .continue-kids {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* ============= BUTTON FIXES ============= */

/* Prevent button text wrapping */
.btn-kids {
    white-space: nowrap;
}

/* Fix button alignment in RTL */
[dir="rtl"] .btn-kids {
    flex-direction: row-reverse;
}

/* ============= SEARCH BAR FIXES ============= */

/* Fix search bar on very small screens */
@media (max-width: 360px) {
    .hero-kids__search-btn {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    .hero-kids__search-btn span {
        display: none;
    }
    
    .hero-kids__search-btn i {
        display: inline !important;
    }
}

/* ============= GRID FALLBACK ============= */

/* Fallback for browsers without CSS Grid */
@supports not (display: grid) {
    .features-kids__grid,
    .paths-kids__grid,
    .steps-kids__grid {
        display: flex;
        flex-wrap: wrap;
    }
    
    .feature-kids-card,
    .path-kids-card,
    .step-kids-card {
        flex: 1 1 300px;
        margin: 0.75rem;
    }
}

/* ============= Z-INDEX FIXES ============= */

/* Ensure proper stacking */
.hero-kids__search-wrapper {
    z-index: 30;
}

.hero-kids__season-badge {
    z-index: 20;
}

/* ============= LINK UNDERLINE FIX ============= */

/* Remove underline from all card links */
a[class*="card"],
a[class*="card"]:hover,
a[class*="card"]:focus {
    text-decoration: none;
}

/* ============= EMOJI RENDERING FIX ============= */

/* Ensure emojis render consistently */
.hero-kids__badge-icon,
.section-badge__emoji,
.btn-kids__icon,
.stat-kids-card__icon,
.feature-kids-card__icon,
.path-kids-card__icon,
.step-kids-card__icon {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    vertical-align: middle;
}

/* ============= LOADING STATE FIX ============= */

/* Better loading indicator */
.loading::after {
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    padding: 1rem;
    border-radius: 50%;
}

/* ============= HOVER STATE FIXES ============= */

/* Prevent layout shift on hover */
.feature-kids-card,
.path-kids-card,
.step-kids-card {
    transform: translateZ(0);
}

/* ============= SAFARI-SPECIFIC FIXES ============= */

/* Fix sticky positioning in Safari */
@supports (-webkit-overflow-scrolling: touch) {
    .hero-kids__search-wrapper {
        position: relative;
    }
}

/* ============= EDGE-SPECIFIC FIXES ============= */

/* Fix backdrop-filter in Edge */
@supports (-ms-ime-align: auto) {
    .btn-kids--glass {
        background: rgba(255, 255, 255, 0.4);
    }
}

/* ============= FIREFOX-SPECIFIC FIXES ============= */

/* Fix animation jank in Firefox */
@-moz-document url-prefix() {
    .hero-kids__character {
        image-rendering: auto;
    }
}

/* ============= CHROME-SPECIFIC FIXES ============= */

/* Fix subpixel rendering */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .section-title,
    .feature-kids-card__title {
        -webkit-font-smoothing: antialiased;
    }
}

/* ============= ACCESSIBILITY IMPROVEMENTS ============= */

/* Better focus indicators for keyboard users */
.btn-kids:focus-visible,
a:focus-visible {
    outline-offset: 4px;
    outline-width: 3px;
}

/* Skip to content link styling */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1rem 2rem;
    background: var(--kids-blue-600);
    color: white;
    font-weight: 900;
    border-radius: 0.5rem;
    z-index: 9999;
    transition: top var(--transition-fast);
}

.skip-to-content:focus {
    top: 1rem;
}

/* ============= PRINT IMPROVEMENTS ============= */

@media print {
    /* Hide interactive elements */
    .btn-kids,
    .hero-kids__search,
    .shape,
    .cta-kids__bg-shapes {
        display: none !important;
    }
    
    /* Ensure good contrast */
    * {
        color: #000 !important;
        background: #fff !important;
    }
    
    /* Keep borders for structure */
    .feature-kids-card,
    .path-kids-card {
        border: 2px solid #000 !important;
    }
}

/* ============= FINAL OVERRIDES ============= */

/* Force smooth scrolling */
html {
    scroll-behavior: smooth !important;
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Ensure all transitions are smooth */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============= END OF FIXES ============= */