/* Custom Dropdown Styles for ShalomTemple */

/* Dropdown Menu Base Styles */
.dropdown-menu-width {
    min-width: 220px;
}

/* Group Hover States */
.group {
    position: relative;
}

.group .absolute {
    position: absolute;
}

.group .opacity-0 {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.group .invisible {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.group:hover .invisible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Tailwind Group Hover Classes */
.group:hover .group-hover\:opacity-100 {
    opacity: 1 !important;
}

.group:hover .group-hover\:visible {
    visibility: visible !important;
}

/* Dropdown Animation */
.group .transition-all {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dropdown Positioning */
.group .top-full {
    top: 100%;
}

.group .left-0 {
    left: 0;
}

.group .right-0 {
    right: 0;
}

/* Dropdown Z-Index */
.group .z-50 {
    z-index: 50;
}

/* Dropdown Background and Border */
.group .bg-white {
    background-color: white;
}

.group .rounded-lg {
    border-radius: 0.5rem;
}

.group .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.group .border {
    border-width: 1px;
}

.group .border-gray-100 {
    border-color: #f3f4f6;
}

/* Dropdown Items */
.group .dropdown-menu-width a {
    display: block;
    padding: 12px 16px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.group .dropdown-menu-width a:hover {
    background-color: #f3f4f6;
    color: #1e40af;
}

/* Mobile Dropdown Styles */
.mobile-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #f9fafb;
    border-radius: 8px;
    margin-top: 8px;
}

.mobile-dropdown.active {
    max-height: 300px;
    padding: 12px 0;
}

.mobile-dropdown a {
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 500;
    color: #6b7280;
    transition: all 0.2s ease;
    display: block;
    text-decoration: none;
}

.mobile-dropdown a:hover {
    color: #1e40af;
    background-color: #e5e7eb;
    border-radius: 6px;
    margin: 0 8px;
}

/* Chevron Icon Animation */
.group .transition-transform {
    transition: transform 0.2s ease;
}

.group:hover .group-hover\:rotate-180 {
    transform: rotate(180deg);
}

/* RTL Support for Dropdowns */
[dir="rtl"] .group .left-0 {
    left: auto;
    right: 0;
}

[dir="rtl"] .group .right-0 {
    right: 0;
    left: auto;
}

.rtl-mode .group .left-0 {
    left: auto;
    right: 0;
}

.rtl-mode .group .right-0 {
    right: 0;
    left: auto;
}

/* Ensure dropdowns work on touch devices */
@media (hover: none) and (pointer: coarse) {
    .group:active .opacity-0,
    .group:focus-within .opacity-0 {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
    
    .group:active .invisible,
    .group:focus-within .invisible {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
}

/* Focus states for accessibility */
.group button:focus + .opacity-0,
.group button:focus + .invisible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Prevent dropdown from being cut off */
.group {
    position: relative;
    z-index: auto;
}

.group:hover {
    z-index: 50;
}