/* styles.css */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    overflow-y: auto; /* Changed from 'scroll' to 'auto' to avoid forced scrollbar */
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

.dropdown-menu {
    z-index: 9998; /* Ensure dropdown is above other elements */
    position: fixed; /* Ensure fixed positioning for full-width dropdown */
    top: 64px; /* Adjust based on header height */
    left: 0;
    right: 0;
    visibility: hidden; /* Use visibility instead of invisible for better control */
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.group:hover .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* Ensure header has higher z-index than content but lower than dropdown */
header {
    z-index: 9999;
}

/* Ensure no overlapping issues with other elements */
nav {
    position: relative;
    z-index: 9999;
}

/* Fix for smooth scrolling */
section[id] {
    scroll-margin-top: 80px;
}

/* Ensure dropdowns are not clipped */
.container {
    position: relative;
    z-index: 1;
}

/* Prevent dropdown from disappearing due to scroll */
@media (prefers-reduced-motion: no-preference) {
    html, body {
        scroll-behavior: smooth;
    }
}