/* Critical CSS Fixes for Performance & Accessibility */

/* ====== CLS PREVENTION ====== */

/* Reserve space for key elements */
.navbar {
    min-height: 72px;
}

.hero {
    min-height: 600px;
}

.trust-bar {
    min-height: 80px;
}

/* Prevent image layout shifts */
img {
    max-width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
}

img:not([width]):not([height]) {
    aspect-ratio: 16 / 9;
}

/* Font loading optimization - handled by Google Fonts link */
/* Using font-display: swap via Google Fonts URL parameter */

/* ====== COMPOSITED ANIMATIONS ====== */

/* Use GPU-accelerated properties only */
.hero-card,
.type-card,
.step-card,
.testimonial-card,
.resource-card,
.comparison-card,
.carrier-card,
.blog-card {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

/* Reduce animation overhead */
.section-particle {
    contain: strict;
    will-change: transform;
}

/* Disable animations on reduced motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Low-end device mode */
.reduce-animations * {
    animation: none !important;
    transition: none !important;
}

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

/* Better color contrast */
.section-badge {
    color: #4b5563 !important;
    /* gray-600 */
}

/* Improved link styling */
a:not(.btn-primary):not(.btn-cta-nav):not(.nav-link) {
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 2px;
}

/* Focus states */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skip navigation link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: white;
    padding: 12px 24px;
    border-radius: 0 0 8px 8px;
    z-index: 10001;
    font-weight: 600;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
}

/* Form accessibility */
input:not([type="submit"]):not([type="button"]),
select,
textarea {
    min-height: 44px;
    /* Touch target size */
}

label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

/* Error states */
input:invalid:not(:placeholder-shown),
select:invalid:not(:placeholder-shown) {
    border-color: var(--danger);
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ====== RENDER OPTIMIZATION ====== */

/* Content containment */
section,
.container {
    contain: layout style;
}

/* Reduce paint areas */
.floating-cta,
.scroll-cta,
.popup,
.modal {
    contain: layout paint;
}

/* ====== NON-COMPOSITED ANIMATION FIXES ====== */

/* GPU-accelerated animation hints for all animated elements */
.hero-card,
.floating-cta,
.scroll-cta,
.popup,
.modal,
.quiz-overlay,
.quiz-card,
.smart-engine-container,
.bundle-item,
.discount-checkbox,
[class*="animate"],
[style*="animation"] {
    transform: translateZ(0);
    will-change: transform, opacity;
    backface-visibility: hidden;
    contain: layout paint;
}

/* ====== CLS PREVENTION FOR DYNAMIC CONTENT ====== */

/* Reserve space for dynamic sections */
.smart-engine-container {
    min-height: 200px;
}

.chart-container {
    min-height: 300px;
    contain: layout;
}

.bundle-builder-card {
    min-height: 180px;
}

.discount-stacker-container {
    min-height: 300px;
}

.risk-map-container {
    min-height: 200px;
}

.depreciation-tool {
    min-height: 350px;
}

.forecaster-timeline {
    min-height: 100px;
}

/* Hero cards - fixed positioning to prevent CLS */
.hero-card {
    width: 180px;
    min-height: 120px;
}

.hero-visual {
    min-height: 400px;
    contain: layout;
}

/* Trust bar fixed height */
.trust-bar {
    min-height: 80px;
    contain: layout;
}

/* Engine steps fixed height */
.engine-step {
    min-height: 80px;
}

/* Prevent font loading CLS */
body {
    font-display: swap;
}