/**
 * Responsive Categories Mega Menu — Expired Auctions
 *
 * Mobile-first responsive mega menu with:
 * - Desktop: 2-column grid layout with icons
 * - Tablet: Single column with collapsible sections
 * - Mobile: Accordion-style collapsible categories
 *
 * @package ExpiredAuctions
 * @since   2.0.0
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. BASE MEGA MENU STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.ea-categories-mega-menu {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Reason: Ensure proper spacing and alignment for category sections */
.ea-mega-menu-section {
    padding: 1rem;
}

.ea-mega-menu-header {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary);
    margin-bottom: 0.75rem;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ea-mega-menu-header i {
    font-size: 1rem;
    opacity: 0.7;
}

/* Reason: Category links with proper spacing and hover states */
.ea-mega-menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    color: var(--bs-body-color);
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.15s ease-in-out;
    margin-bottom: 0.25rem;
    white-space: nowrap;
}

.ea-mega-menu-link:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    transform: translateX(2px);
}

.ea-mega-menu-link i {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. DESKTOP LAYOUT (≥992px) — 2-Column Grid
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 992px) {
    .ea-categories-mega-menu {
        min-width: 600px;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }

    /* Reason: Remove button styling on desktop - just show header text */
    .ea-mega-menu-toggle {
        all: unset;
        display: block;
        width: 100%;
    }
    
    .ea-mega-menu-toggle-icon {
        display: none;
    }

    .ea-mega-menu-content {
        display: block !important; /* Always visible on desktop */
    }
    
    /* Reason: Show section headers on desktop as plain text with reduced spacing */
    .ea-mega-menu-header {
        display: flex;
        padding: 0.5rem 1rem 0.25rem 1rem;
        margin-bottom: 0.375rem;
        cursor: default;
        background: none;
        border: none;
    }
    
    .ea-mega-menu-header:hover {
        background: none;
    }

    /* Reason: 4-column grid layout for desktop - one column per category group */
    .ea-mega-menu-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }

    .ea-mega-menu-column {
        border-right: none;
        display: contents; /* Allow sections to be direct grid items */
    }
    
    /* Reason: Balanced spacing for 4-column layout - prevent text wrapping */
    .ea-mega-menu-section {
        padding: 0.75rem 1rem;
        border-bottom: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. TABLET & MOBILE LAYOUT (<992px) — Accordion Style
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
    .ea-categories-mega-menu {
        min-width: 100%;
        max-width: 100%;
        border-radius: 0.5rem;
    }

    /* Reason: Single column, full-width layout */
    .ea-mega-menu-grid {
        display: block;
    }

    .ea-mega-menu-column {
        border: none;
    }

    /* Reason: Collapsible section headers with borders between all sections */
    .ea-mega-menu-section {
        padding: 0;
        border-bottom: 1px solid var(--bs-border-color);
    }

    /* Reason: Remove border only from the very last section in the entire menu */
    .ea-mega-menu-column:last-child .ea-mega-menu-section:last-child {
        border-bottom: none;
    }

    .ea-mega-menu-header {
        margin-bottom: 0;
        padding: 1rem 1rem 1rem 1rem;
        cursor: pointer;
        user-select: none;
        font-size: 0.8125rem;
        transition: background-color 0.15s ease-in-out;
    }

    .ea-mega-menu-header:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.05);
    }

    /* Reason: Show accordion toggle button */
    .ea-mega-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: none;
        border: none;
        padding: 0 1rem 0 0;
        color: inherit;
        font: inherit;
        text-align: left;
    }

    .ea-mega-menu-toggle-icon {
        font-size: 1.125rem;
        transition: transform 0.2s ease-in-out;
        flex-shrink: 0;
        opacity: 0.8;
        margin-left: auto;
        padding-left: 1rem;
        color: var(--bs-secondary);
    }

    .ea-mega-menu-toggle[aria-expanded="true"] .ea-mega-menu-toggle-icon {
        transform: rotate(180deg);
    }
    
    .ea-mega-menu-toggle:hover .ea-mega-menu-toggle-icon {
        opacity: 1;
        color: var(--bs-primary);
    }

    /* Reason: Collapsible content area */
    .ea-mega-menu-content {
        display: none;
        padding: 0.5rem 1rem 1rem 1rem;
    }

    .ea-mega-menu-content.show {
        display: block;
    }

    /* Reason: Larger touch targets */
    .ea-mega-menu-link {
        padding: 0.75rem 1rem;
        font-size: 1rem;
        gap: 1rem;
        margin-bottom: 0.125rem;
    }

    .ea-mega-menu-link i {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 1.25rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. EXTRA SMALL MOBILE (<576px) — Optimized for Small Screens
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   5. EXTRA SMALL MOBILE (<576px) — Optimized for Small Screens
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .ea-categories-mega-menu {
        border-radius: 0.375rem;
    }

    .ea-mega-menu-header {
        padding: 0.875rem;
        font-size: 0.75rem;
    }

    .ea-mega-menu-content {
        padding: 0.375rem 0.875rem 0.875rem 0.875rem;
    }

    .ea-mega-menu-link {
        padding: 0.625rem 0.875rem;
        font-size: 0.9375rem;
        gap: 0.875rem;
    }

    .ea-mega-menu-link i {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 1.125rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. DARK MODE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] .ea-categories-mega-menu {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .ea-mega-menu-link:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.2);
}

[data-bs-theme="dark"] .ea-mega-menu-header:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. ACCESSIBILITY ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reason: Focus states for keyboard navigation */
.ea-mega-menu-link:focus,
.ea-mega-menu-toggle:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Reason: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .ea-mega-menu-link,
    .ea-mega-menu-toggle-icon,
    .ea-mega-menu-header {
        transition: none;
    }

    .ea-mega-menu-link:hover {
        transform: none;
    }
}