/* assets/css/custom.css */
/* Why: Enhance mobile menu and dropdown styling. How: Tailwind-compatible CSS for hover and click interactions */

/* Dropdown menu styling */
.group-hover\:block {
    display: none;
}
.group:hover .group-hover\:block {
    display: block;
}

/* Mobile-specific dropdown behavior */
@media (max-width: 768px) {
    .group-hover\:block {
        display: none;
    }
    .group:active .group-hover\:block,
    .group:focus-within .group-hover\:block {
        display: block;
    }
}

/* Ensure mobile menu is full-width and styled */
#menu {
    transition: all 0.3s ease-in-out;
}
#menu.flex {
    flex-direction: column;
}