/* CLS Optimizations - Prevent Layout Shifts */

/* Container Stabilization */
.container {
    min-height: inherit;
}

main {
    min-height: calc(100vh - 64px);
}

section {
    position: relative;
}

/* Typography Stabilization */
h1, h2, h3, h4, h5, h6 {
    position: relative;
}

h1 {
    min-height: 3.5rem;
}

h2 {
    min-height: 2.5rem;
}

.text-xl {
    min-height: 2rem;
}

.hero-text {
    min-height: 5rem;
}

/* Card and Grid Stabilization */
.grid > * {
    position: relative;
}

/* Symptom Cards */
a[href*="symptome/"] {
    min-height: 80px;
    display: block;
}

/* Deficiency Cards */
a[href*="-mangel.html"] {
    min-height: 180px;
    display: block;
}

/* Icons Stabilization */
.w-10.h-10 {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.w-12.h-12 {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

/* FAQ Details Stabilization */
details {
    min-height: 80px;
}

/* Button Stabilization */
.btn-primary,
a.inline-flex {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
}

/* Badge Stabilization */
.inline-flex.items-center.px-4.py-2 {
    min-height: 36px;
}

/* Stats Counter */
.stat-counter {
    min-height: 32px;
    display: block;
}

/* Mobile Menu Button */
#mobile-menu-btn {
    width: 40px;
    height: 40px;
}

/* Scroll to Top Button */
#scrollToTop {
    width: 56px;
    height: 56px;
}

/* Footer Stabilization */
footer {
    min-height: 300px;
}

/* Prevent FOUC (Flash of Unstyled Content) - Removed to prevent invisible content
   Using alternative approach with immediate visibility */

/* Skeleton Loading for Dynamic Content */
.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Image Placeholders */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Prevent Layout Shift for Ads */
.adsbygoogle {
    min-height: 90px;
    background: #f5f5f5;
}

/* Media Queries for Responsive Stability */
@media (max-width: 768px) {
    h1 {
        min-height: 2.5rem;
    }
    
    h2 {
        min-height: 2rem;
    }
    
    .hero-text {
        min-height: 6rem;
    }
    
    main {
        min-height: calc(100vh - 56px);
    }
}

/* Aspect Ratio Boxes for Content */
.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-4-3 {
    aspect-ratio: 4 / 3;
}

/* Lazy Loading Placeholders */
[data-lazy] {
    min-height: 200px;
    background: #f0f0f0;
}

/* Prevent Shifts from Dynamic Content */
.dynamic-content {
    contain: layout;
}

/* Grid Layout Stabilization - Removed aspect-ratio to prevent layout issues */

/* Transition for Smooth Loading - Using more specific selectors */
.transition-colors {
    transition: color 0.2s, background-color 0.2s;
}

.transition-all {
    transition: all 0.2s;
}

.transition-shadow {
    transition: box-shadow 0.2s;
}