/**
 * Mega Menu Styles
 *
 * Comprehensive styling for mega menu dropdowns with:
 * - Column and grid layouts
 * - Featured sections
 * - Footer links
 * - Responsive behavior (accordion on mobile)
 * - Theme support (light/dark)
 * - Animations
 * - Accessibility
 */

/* ==============================================
   BASE STYLES
   ============================================== */

/* Mega menu nav item container */
/* Keep static positioning so mega menu panel positions relative to navbar, not the nav item */
.megamenu-item {
    position: static;
}

/* Trigger link */
.megamenu-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.megamenu-trigger:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Caret icon */
.megamenu-caret {
    font-size: 0.65em;
    transition: transform var(--duration-200) var(--ease-out);
    margin-left: var(--space-1);
}

/* Rotate caret when menu is open or on hover */
.megamenu-item.open .megamenu-caret,
.megamenu-item:hover .megamenu-caret {
    transform: rotate(180deg);
}

/* DISABLE caret rotation on hover when hover is disabled */
[data-hover-disabled] .megamenu-item:hover .megamenu-caret {
    transform: none;
}

[data-hover-disabled] .megamenu-item.open .megamenu-caret {
    transform: rotate(180deg);
}

/* ==============================================
   MEGA MENU PANEL
   ============================================== */

.megamenu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1040; /* Must be higher than Bootstrap sticky-top (1020) and header navbar (1030) */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition:
        opacity var(--duration-200, 200ms) var(--ease-out, ease-out),
        transform var(--duration-200, 200ms) var(--ease-out, ease-out),
        visibility 0s linear var(--duration-200, 200ms);
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    pointer-events: none;
    margin-top: var(--space-2);
}

/* Open state */
.megamenu-item.open .megamenu-panel {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
    pointer-events: auto;
}

/* Desktop hover state */
@media (min-width: 992px) {
    .megamenu-item:hover .megamenu-panel {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0s;
        pointer-events: auto;
    }

    /* DISABLE hover when data-hover-disabled is set on header */
    [data-hover-disabled] .megamenu-item:hover .megamenu-panel {
        visibility: hidden;
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
    }

    /* ENSURE .open always wins over hover-disabled (higher specificity) */
    [data-hover-disabled] .megamenu-item.open .megamenu-panel {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0s;
        pointer-events: auto;
    }
}

/* ==============================================
   WIDTH VARIANTS
   ============================================== */

/* Full viewport width */
.megamenu-panel--full {
    /* Use viewport-relative positioning for proper centering regardless of parent */
    left: 50vw;
    right: auto;
    width: 100vw;
    transform: translateX(-50%) translateY(-10px);
    border-radius: 0;
    border-left: none;
    border-right: none;
}

.megamenu-item.open .megamenu-panel--full,
.megamenu-item:hover .megamenu-panel--full {
    transform: translateX(-50%) translateY(0);
}

/* DISABLE hover transform when hover is disabled */
[data-hover-disabled] .megamenu-item:hover .megamenu-panel--full {
    transform: translateX(-50%) translateY(-10px);
}

/* ENSURE .open wins for full width variant */
[data-hover-disabled] .megamenu-item.open .megamenu-panel--full {
    transform: translateX(-50%) translateY(0);
}

/* Container width (centered on viewport) */
.megamenu-panel--container {
    /* Use viewport-relative positioning for proper centering regardless of parent */
    left: 50vw;
    transform: translateX(-50%) translateY(-10px);
    width: calc(100vw - var(--space-8));
    max-width: var(--container-xl, 1200px);
}

.megamenu-item.open .megamenu-panel--container,
.megamenu-item:hover .megamenu-panel--container {
    transform: translateX(-50%) translateY(0);
}

/* DISABLE hover transform when hover is disabled */
[data-hover-disabled] .megamenu-item:hover .megamenu-panel--container {
    transform: translateX(-50%) translateY(-10px);
}

/* ENSURE .open wins for container width variant */
[data-hover-disabled] .megamenu-item.open .megamenu-panel--container {
    transform: translateX(-50%) translateY(0);
}

/* Auto width (fits content) - aligns to left edge of header */
/* Note: With position: static on .megamenu-item, this aligns to header, not the trigger */
/* For trigger-aligned positioning, consider using 'container' width instead */
.megamenu-panel--auto {
    left: 0;
    min-width: 600px;
    max-width: 900px;
}

/* ==============================================
   CONTAINER & CONTENT
   ============================================== */

.megamenu-container {
    max-width: var(--container-xl, 1200px);
    margin: 0 auto;
    padding: var(--space-6);
}

.megamenu-content {
    display: flex;
    gap: var(--space-6);
}

/* ==============================================
   SECTION LAYOUTS
   ============================================== */

/* Sections container - Column layout */
.megamenu-panel--columns .megamenu-sections {
    display: grid;
    grid-template-columns: repeat(var(--megamenu-columns, 3), 1fr);
    gap: var(--space-6);
    flex: 1;
}

/* Sections container - Grid layout */
.megamenu-panel--grid .megamenu-sections {
    display: grid;
    grid-template-columns: repeat(var(--megamenu-columns, 4), 1fr);
    gap: var(--space-6);
    flex: 1;
}

/* Individual section */
.megamenu-section {
    min-width: 140px;
    flex: 1;
}

/* Grid span variants (both layouts) */
.megamenu-section--span-2 {
    grid-column: span 2;
}

.megamenu-section--span-3 {
    grid-column: span 3;
}

.megamenu-section--span-4 {
    grid-column: span 4;
}

/* ==============================================
   SECTION HEADER
   ============================================== */

.megamenu-section__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-muted);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide, 0.05em);
}

.megamenu-section__icon {
    color: var(--color-primary-500);
    font-size: var(--font-size-sm);
}

.megamenu-section__label {
    flex: 1;
}

/* ==============================================
   MENU ITEMS
   ============================================== */

.megamenu-section__items {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Individual link */
.megamenu-link {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    margin: 0 calc(-1 * var(--space-3));
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color var(--duration-150) var(--ease-out);
}

.megamenu-link:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    text-decoration: none;
}

.megamenu-link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
    background-color: var(--bg-tertiary);
}

/* Active state for current page */
.megamenu-link.active {
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
    border-left: 3px solid var(--color-primary-500);
    margin-left: -3px;
    padding-left: calc(var(--space-3) + 3px);
}

.megamenu-link.active .megamenu-link__label {
    color: var(--color-primary-700);
    font-weight: var(--font-weight-semibold);
}

.megamenu-link.active .megamenu-link__icon {
    color: var(--color-primary-600);
}

.megamenu-link.active .megamenu-link__description {
    color: var(--color-primary-500);
}

/* Link icon */
.megamenu-link__icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    color: var(--color-primary-500);
    font-size: var(--font-size-base);
    margin-top: 2px;
}

/* Link content wrapper */
.megamenu-link__content {
    flex: 1;
    min-width: 0;
}

/* Link label */
.megamenu-link__label {
    display: block;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
}

/* Link description */
.megamenu-link__description {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: var(--line-height-normal);
    margin-top: var(--space-0-5);
}

/* Badge */
.megamenu-link__badge {
    display: inline-block;
    padding: 1px var(--space-2);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
    margin-left: var(--space-2);
    vertical-align: middle;
}

/* ==============================================
   FEATURED SECTION
   ============================================== */

.megamenu-featured {
    flex-shrink: 0;
    width: 280px;
    padding-left: var(--space-6);
    border-left: 1px solid var(--border-muted);
}

/* Featured position: bottom */
.megamenu-panel--featured-bottom .megamenu-content {
    flex-direction: column;
}

.megamenu-panel--featured-bottom .megamenu-featured {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border-muted);
    padding-left: 0;
    padding-top: var(--space-4);
    margin-top: var(--space-4);
}

/* Featured title */
.megamenu-featured__title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide, 0.05em);
    margin-bottom: var(--space-3);
}

/* Featured items list */
.megamenu-featured__items {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4) 0;
}

/* Featured item accent */
.megamenu-featured__items .megamenu-link {
    border-left: none;
}

/* ==============================================
   CTA CARD
   ============================================== */

.megamenu-cta {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
    margin-top: var(--space-4);
}

.megamenu-cta__image {
    width: 100%;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

.megamenu-cta__title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.megamenu-cta__description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    line-height: var(--line-height-relaxed);
}

.megamenu-cta__button {
    display: inline-block;
    width: 100%;
}

/* ==============================================
   MOTHERSHIP CTA CARD
   ============================================== */

.megamenu-mothership {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg,
        rgba(99, 102, 241, 0.08) 0%,
        rgba(139, 92, 246, 0.05) 50%,
        rgba(59, 130, 246, 0.08) 100%);
    border: 1px solid rgba(99, 102, 241, 0.15);
}

[data-bs-theme="dark"] .megamenu-mothership {
    background: linear-gradient(135deg,
        rgba(99, 102, 241, 0.12) 0%,
        rgba(139, 92, 246, 0.08) 50%,
        rgba(59, 130, 246, 0.12) 100%);
    border-color: rgba(99, 102, 241, 0.2);
}

.megamenu-mothership__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.megamenu-mothership__icon {
    font-size: var(--font-size-lg);
    color: var(--color-primary-500);
}

.megamenu-mothership__title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide, 0.05em);
    color: var(--text-primary);
}

.megamenu-mothership__desc {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-relaxed);
    color: var(--text-secondary);
    margin: 0;
}

.megamenu-mothership__link {
    color: var(--color-primary-500);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed rgba(var(--color-primary-500-rgb, 99, 102, 241), 0.4);
    transition: border-color 0.2s ease;
}

.megamenu-mothership__link:hover {
    border-bottom-style: solid;
    color: var(--color-primary-600);
}

/* ==============================================
   FOOTER BAR
   ============================================== */

.megamenu-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    background: var(--bg-secondary);
    margin: var(--space-4) calc(-1 * var(--space-6)) calc(-1 * var(--space-6));
    padding: var(--space-4) var(--space-6);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-top: 1px solid var(--border-muted);
}

/* Full width panel footer */
.megamenu-panel--full .megamenu-footer {
    border-radius: 0;
}

/* When featured is on the right, use grid layout so featured spans full height */
.megamenu-panel--has-featured-right .megamenu-container {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    gap: 0;
}

.megamenu-panel--has-featured-right .megamenu-content {
    grid-column: 1;
    grid-row: 1;
}

.megamenu-panel--has-featured-right .megamenu-featured {
    grid-column: 2;
    grid-row: 1 / -1;
    width: 280px;
    padding-left: var(--space-4);
}

.megamenu-panel--has-featured-right .megamenu-footer {
    grid-column: 1;
    grid-row: 2;
    margin-right: 0;
    border-radius: 0 0 0 var(--radius-lg);
}

.megamenu-footer__links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: var(--space-3);
    width: 100%;
}

.megamenu-footer__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-align: center;
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: all var(--duration-150) var(--ease-out);
}

.megamenu-footer__link:hover {
    color: var(--color-primary-600);
    background: var(--bg-tertiary);
    text-decoration: none;
}

.megamenu-footer__link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.megamenu-footer__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    color: var(--color-primary-500);
    transition: color var(--duration-150) var(--ease-out);
}

.megamenu-footer__link:hover .megamenu-footer__icon {
    color: var(--color-primary-600);
}

.megamenu-footer__label {
    line-height: var(--line-height-tight);
    white-space: nowrap;
}

/* ==============================================
   ANIMATIONS
   ============================================== */

/* Fade animation (default) */
.megamenu-panel--animate-fade {
    /* Uses default opacity/transform defined above */
}

/* Slide animation */
.megamenu-panel--animate-slide {
    transform: translateY(-20px);
}

.megamenu-item.open .megamenu-panel--animate-slide,
.megamenu-item:hover .megamenu-panel--animate-slide {
    transform: translateY(0);
}

.megamenu-panel--container.megamenu-panel--animate-slide {
    transform: translateX(-50%) translateY(-20px);
}

.megamenu-item.open .megamenu-panel--container.megamenu-panel--animate-slide,
.megamenu-item:hover .megamenu-panel--container.megamenu-panel--animate-slide {
    transform: translateX(-50%) translateY(0);
}

.megamenu-panel--full.megamenu-panel--animate-slide {
    transform: translateX(-50%) translateY(-20px);
}

.megamenu-item.open .megamenu-panel--full.megamenu-panel--animate-slide,
.megamenu-item:hover .megamenu-panel--full.megamenu-panel--animate-slide {
    transform: translateX(-50%) translateY(0);
}

/* DISABLE hover animations when hover is disabled */
[data-hover-disabled] .megamenu-item:hover .megamenu-panel--animate-slide {
    transform: translateY(-20px);
}

[data-hover-disabled] .megamenu-item:hover .megamenu-panel--container.megamenu-panel--animate-slide {
    transform: translateX(-50%) translateY(-20px);
}

[data-hover-disabled] .megamenu-item:hover .megamenu-panel--full.megamenu-panel--animate-slide {
    transform: translateX(-50%) translateY(-20px);
}

/* ENSURE .open wins for slide animations */
[data-hover-disabled] .megamenu-item.open .megamenu-panel--animate-slide {
    transform: translateY(0);
}

[data-hover-disabled] .megamenu-item.open .megamenu-panel--container.megamenu-panel--animate-slide {
    transform: translateX(-50%) translateY(0);
}

[data-hover-disabled] .megamenu-item.open .megamenu-panel--full.megamenu-panel--animate-slide {
    transform: translateX(-50%) translateY(0);
}

/* No animation */
.megamenu-panel--animate-none {
    transition: none !important;
}

/* ==============================================
   DARK THEME
   ============================================== */

[data-theme="dark"] .megamenu-panel {
    background: var(--bg-primary);
    border-color: var(--border-default);
}

[data-theme="dark"] .megamenu-link:hover {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .megamenu-section__icon,
[data-theme="dark"] .megamenu-link__icon {
    color: var(--color-primary-400);
}

[data-theme="dark"] .megamenu-footer {
    background: var(--bg-secondary);
}

[data-theme="dark"] .megamenu-footer__link:hover {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .megamenu-footer__icon {
    color: var(--color-primary-400);
}

[data-theme="dark"] .megamenu-featured__items .megamenu-link {
    border-left-color: var(--color-primary-400);
}

[data-theme="dark"] .megamenu-cta {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .megamenu-link.active {
    background-color: var(--color-primary-900);
    color: var(--color-primary-300);
    border-left-color: var(--color-primary-400);
}

[data-theme="dark"] .megamenu-link.active .megamenu-link__label {
    color: var(--color-primary-300);
}

[data-theme="dark"] .megamenu-link.active .megamenu-link__icon {
    color: var(--color-primary-400);
}

[data-theme="dark"] .megamenu-link.active .megamenu-link__description {
    color: var(--color-primary-400);
}

/* ==============================================
   RESPONSIVE - MOBILE
   ============================================== */

@media (max-width: 991.98px) {
    /* Mobile: accordion style */
    .megamenu-item {
        position: static;
    }

    .megamenu-panel,
    .megamenu-panel--auto,
    .megamenu-panel--full,
    .megamenu-panel--container {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        transform: none !important;
        border: none;
        border-radius: 0;
        box-shadow: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--duration-300) var(--ease-out);
        background: var(--bg-secondary);
        margin-top: 0;
        padding: 0;
    }

    .megamenu-item.open .megamenu-panel {
        max-height: 3000px;
        visibility: visible;
        opacity: 1;
    }

    /* Hide on hover for mobile */
    .megamenu-item:hover .megamenu-panel {
        visibility: hidden;
        opacity: 0;
    }

    .megamenu-item.open:hover .megamenu-panel {
        visibility: visible;
        opacity: 1;
    }

    .megamenu-container {
        padding: var(--space-4);
    }

    .megamenu-content {
        flex-direction: column;
    }

    .megamenu-sections {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--space-4);
    }

    .megamenu-section {
        min-width: 100%;
    }

    .megamenu-section__header {
        margin-bottom: var(--space-2);
    }

    .megamenu-featured {
        width: 100%;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--border-muted);
        padding-top: var(--space-4);
    }

    .megamenu-footer {
        flex-direction: column;
        align-items: stretch;
        margin: var(--space-4) calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
        padding: var(--space-4);
        border-radius: 0;
    }

    .megamenu-footer__links {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==============================================
   ACCESSIBILITY
   ============================================== */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .megamenu-panel,
    .megamenu-caret,
    .megamenu-link {
        transition: none !important;
    }
}

/* High contrast mode improvements */
@media (prefers-contrast: high) {
    .megamenu-panel {
        border-width: 2px;
    }

    .megamenu-section__header {
        border-bottom-width: 2px;
    }

    .megamenu-link:hover,
    .megamenu-link:focus-visible {
        outline-width: 3px;
    }
}

/* ==============================================
   PRINT
   ============================================== */

@media print {
    .megamenu-panel {
        display: none !important;
    }
}

/* ==============================================
   PILL BUTTON TRIGGER
   ============================================== */

.megamenu-trigger.btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.megamenu-item .megamenu-trigger.btn {
    margin: 0.25rem 0;
}