/* Mega menu — ported from the Enova-era mega nav onto Travio's dropdowns.
   The markup is built by partials/navigation.hbs INSIDE Travio's own <menu>
   element, so the theme keeps ownership of open/close, Escape, outside-click
   and the mobile accordion. This file only restyles that content.

   Mobile (< lg) is deliberately untouched: blurb, descriptions, badges and the
   feature card are hidden so the accordion looks and measures exactly as before
   (scripts.js sizes the accordion from the <menu>'s computed height). */

/* Below lg the grid collapses to the stock accordion list: the theme's own
   `gap-2` sat between the <menu>'s children, which are now wrappers. */
.snx-mega .snx-mega-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.snx-mega .snx-mega-blurb,
.snx-mega .snx-mega-item-desc,
.snx-mega .snx-mega-badge,
.snx-mega .snx-mega-feature {
    display: none;
}

@media (min-width: 1024px) {
    .snx-mega {
        width: max-content;
        max-width: min(92vw, 46rem);
    }

    .snx-mega .snx-mega-blurb {
        display: block;
        margin: 0 0 0.875rem;
        padding: 0 0.25rem 0.75rem;
        font-size: 0.78rem;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0.01em;
        color: var(--primary-600);
        border-bottom: 1px solid var(--nav-border);
    }

    .snx-mega .snx-mega-body {
        display: flex;
        align-items: stretch;
        gap: 1.125rem;
    }

    .snx-mega .snx-mega-grid {
        flex: 1 1 auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(11.25rem, 1fr));
        gap: 0.125rem 0.625rem;
    }

    .snx-mega .snx-mega-grid[data-count="1"],
    .snx-mega .snx-mega-grid[data-count="2"],
    .snx-mega .snx-mega-grid[data-count="3"] {
        grid-template-columns: 1fr;
    }

    .snx-mega .snx-mega-item {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        padding: 0.5rem 0.75rem;
        border-radius: 0.625rem;
        transition: background-color 0.14s ease;
    }

    .snx-mega .snx-mega-item:hover,
    .snx-mega .snx-mega-item:focus-visible {
        background: color-mix(in srgb, var(--primary-950) 7%, transparent);
        outline: none;
    }

    .snx-mega .snx-mega-item-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        letter-spacing: -0.01em;
    }

    .snx-mega .snx-mega-item-desc {
        display: block;
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 1.4;
        color: var(--primary-600);
    }

    .snx-mega .snx-mega-badge {
        display: inline-block;
        padding: 0.125rem 0.375rem;
        border-radius: 999px;
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--accent-400);
        background: color-mix(in srgb, var(--accent-400) 16%, transparent);
    }

    .snx-mega .snx-mega-feature {
        flex: 0 0 13rem;
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        padding: 1rem;
        border-radius: 0.75rem;
        border: 1px solid var(--nav-border);
        background: color-mix(in srgb, var(--primary-950) 5%, transparent);
        transition: transform 0.16s ease, border-color 0.16s ease;
    }

    .snx-mega .snx-mega-feature:hover {
        transform: translateY(-2px);
        border-color: var(--accent-400);
    }

    .snx-mega .snx-mega-feature-eyebrow {
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--accent-400);
    }

    .snx-mega .snx-mega-feature-title {
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--primary-950);
    }

    .snx-mega .snx-mega-feature-text {
        flex: 1 1 auto;
        font-size: 0.78rem;
        font-weight: 400;
        line-height: 1.45;
        color: var(--primary-600);
    }

    .snx-mega .snx-mega-feature-cta {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--accent-400);
    }
}

/* Center the primary nav items in the header's flexible middle (was lg:justify-end) */
@media (min-width: 1024px) {
  #primary-navigation { justify-content: center; }
}