/**
 * Layout Stability CSS - Prevents Cumulative Layout Shift (CLS)
 * SIMPLIFIED VERSION - Only essential rules to prevent shifts
 */

/* ============================================
   1. NAVIGATION HEIGHT RESERVATION
   ============================================ */

/* Reserve space for navigation to prevent layout shift */
#global-nav {
    min-height: 80px;
    display: block;
}

/* ============================================
   2. ICON LOADING STABILITY
   ============================================ */

/* Reserve space for Lucide icons before they load */
i[data-lucide] {
    display: inline-block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
}

/* Font Awesome icons */
.fa, .fas, .far, .fal, .fab {
    display: inline-block;
    min-width: 1em;
    text-align: center;
}

/* ============================================
   3. IMAGE LOADING STABILITY
   ============================================ */

/* Prevent images from causing layout shift */
img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   4. SMOOTH SCROLLING
   ============================================ */

/* Prevent scroll jump when hash links are clicked */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

@media (max-width: 767px) {
    html {
        scroll-padding-top: 80px;
    }
}

/* ============================================
   5. DROPDOWN MENU STABILITY
   ============================================ */

/* Prevent dropdown menus from causing layout shift */
.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
    min-width: 14rem;
}

/* Enable pointer events when visible (for hover to work) */
.nav-dropdown-menu.visible,
.nav-dropdown-menu.opacity-100 {
    pointer-events: auto;
}

/* ============================================
   6. FLOATING BUTTONS STABILITY
   ============================================ */

/* Prevent floating CTA buttons from causing layout shift */
.fixed.bottom-8.right-8 {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 50;
}

@media (max-width: 639px) {
    .fixed.bottom-8.right-8 {
        bottom: 1rem;
        right: 1rem;
    }
}