/* ==============================================
   CLS Prevention Overrides (performance-fixes.css)
   Last Updated: 2026-02-16
   ============================================== */

/* Override body::before glow animation that causes CLS */
body::before {
    content: '' !important;
    position: fixed !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    pointer-events: none !important;
    z-index: 0 !important;
    /* Prevent layout shift by using will-change */
    will-change: opacity;
    contain: strict;
}

/* Ensure body has padding-top for fixed header */
body {
    padding-top: 70px !important;
}

/* Header - fixed height, prevent reflow */
.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 70px !important;
    z-index: 1000 !important;
    contain: layout style !important;
    overflow: hidden;
}

.nav {
    height: 100%;
    max-height: 70px;
}

/* Hero - prevent 100vh to 600px shift */
.hero {
    min-height: 600px !important;
    padding-top: 0 !important;
    contain: layout !important;
}

/* Tool cards - reserve intrinsic size */
.tool-card {
    aspect-ratio: 1 / 1.2;
    min-height: 280px;
    contain: layout style;
    content-visibility: auto;
    contain-intrinsic-size: 300px 360px;
}

/* Tool icon - fixed dimensions */
.tool-icon {
    width: 48px;
    height: 48px;
    font-size: 2rem !important;
    line-height: 48px;
}

/* Glass cards - stable dimensions */
.glass-card {
    contain: layout style;
}

/* Grid - prevent reflow on column change */
.grid {
    contain: layout;
}

/* Section title - reserve space */
.section-title {
    min-height: 80px;
    contain: layout;
}

/* Form elements - stable height */
.form-group {
    min-height: 80px;
    contain: layout;
}

/* Slider groups */
.slider-group {
    min-height: 60px;
    contain: layout;
}

/* Tool containers */
.tool-container {
    min-height: 400px;
    contain: layout;
}

/* Footer - stable height */
.footer {
    min-height: 300px;
    contain: layout style;
}

/* Ad container placeholder */
.ad-container {
    min-height: 280px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    contain: layout style;
    overflow: hidden;
}

/* Navigation stability */
.nav-menu {
    min-height: 40px;
}

.nav-link {
    display: inline-block;
    min-height: 40px;
    line-height: 40px;
}

/* Button stability */
.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Response/Output containers */
#api-response-container,
#json-output-container {
    min-height: 200px;
    contain: layout;
}

/* QR Code container */
.qr-code-container {
    min-height: 200px;
    min-width: 200px;
    aspect-ratio: 1 / 1;
}

/* Comparison table */
.comparison-table {
    width: 100%;
    table-layout: fixed;
}

/* Prevent animations from causing CLS */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}