/* =============================================================
   Mega Menu — SiteHeaderMegaMenu & OffcanvasMegaMenu
   Used by the "megamenu" header layout option.
   Design language: Scandinavian minimalism — generous whitespace,
   quiet typography, thin hairline borders, no drop shadows or clutter.
   ============================================================= */

/* ── Positioning context for the full-width dropdown ── */
.mega-nav-wrapper {
    position: relative;
    overflow: visible;
    /*border-top: 1px solid var(--bs-border-color);*/
}

/* ── Top-level nav bar ── */
.mega-menu-nav {
    gap: 0;
    flex-wrap: nowrap;
}

/* Individual nav-bar item wrapper (hover trigger) */
.mega-menu-item {
    /* position: static keeps the absolute dropdown relative to .mega-nav-wrapper */
    position: static;
    display: flex;
    align-items: stretch;
}

/* Top-level link / button in the nav bar */
.mega-menu-link {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .85rem 1.1rem;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
    font-weight: 500;
    font-size: .95rem;
    letter-spacing: .01em;
    transition: color .15s ease;
}

.mega-menu-link:hover,
.mega-menu-link:focus-visible {
    /*color: var(--bs-secondary-color, #6c757d);*/
    text-decoration: underline;
    outline: none;
}

/* Chevron icon rotates when the dropdown is open */
.mega-menu-item:hover .mega-menu-chevron,
.mega-menu-item:focus-within .mega-menu-chevron {
    transform: rotate(180deg);
}

.mega-menu-chevron {
    transition: transform .2s ease;
    opacity: .6;
}

/* ── Full-width dropdown panel ── */
.mega-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    /*border-top: 1px solid var(--bs-border-color);*/
    box-shadow: 0 16px 32px -12px rgba(0, 0, 0, .10);
    z-index: 1050;
    animation: mega-dropdown-in .18s ease;
}

/* The header may carry a "text-white" utility (for use over a background image),
   and app/css/styles.css defines ".text-white a { color: white }" which — being
   a class+type selector — outranks a plain ".mega-dropdown" class selector for
   the panel's own <a> tags. Use an extra ancestor class here so this wins on
   specificity regardless of stylesheet load order, keeping the panel readable
   over its own light background no matter what color the header uses. */
.mega-menu-item .mega-dropdown a {
    color: var(--bs-body-color);
}

@keyframes mega-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Show on hover OR keyboard focus anywhere inside the item */
.mega-menu-item:hover .mega-dropdown,
.mega-menu-item:focus-within .mega-dropdown {
    display: block;
}

/* Column grid — one column per L2 item, evenly spaced, wraps gracefully */
.mega-dropdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    column-gap: 3rem;
    row-gap: 2rem;
}

/* ── L2 category column ── */
.mega-category-col {
    min-width: 0;
}

/* L2 heading — quiet, no imagery, just clear hierarchy */
.mega-category-heading {
    display: block;
    margin-bottom: .75rem;
    font-weight: 600;
    font-size: .95rem;
    color: inherit;
    transition: color .15s ease;
}

.mega-category-heading:hover {
    color: var(--bs-secondary-color, #6c757d);
}

/* ── L3 sub-links below the heading ── */
.mega-sub-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.mega-sub-link {
    display: block;
    font-size: .875rem;
    color: var(--bs-secondary-color, #6c757d);
    transition: color .15s ease;
}

.mega-sub-link:hover {
    color: var(--bs-body-color);
}

/* ── "See all" link at the bottom of the panel ── */
.mega-see-all-link {
    display: inline-flex;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.25rem;
    /*border-top: 1px solid var(--bs-border-color);*/
    font-size: .875rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    transition: color .15s ease;
}

.mega-see-all-link:hover {
    color: var(--bs-secondary-color, #6c757d);
}

/* ── Offcanvas drill-down ── */

/* Item with children: looks like the plain links, the chevron hangs to the right so the name stays centered */
.mega-offcanvas-parent {
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    line-height: inherit;
}

.mega-offcanvas-chevron {
    position: absolute;
    top: 50%;
    left: 100%;
    margin-left: .5rem;
    transform: translateY(-50%);
    opacity: .5;
}


/* Level change: the rows slide in one after another, from the right going deeper, from the left going back */
.mega-offcanvas-forward > div,
.mega-offcanvas-backward > div {
    animation: mega-offcanvas-in-right .32s cubic-bezier(.22, .61, .36, 1) both;
}

.mega-offcanvas-backward > div {
    animation-name: mega-offcanvas-in-left;
}

.mega-offcanvas-level > div:nth-child(2) { animation-delay: .03s; }
.mega-offcanvas-level > div:nth-child(3) { animation-delay: .06s; }
.mega-offcanvas-level > div:nth-child(4) { animation-delay: .09s; }
.mega-offcanvas-level > div:nth-child(5) { animation-delay: .12s; }
.mega-offcanvas-level > div:nth-child(6) { animation-delay: .15s; }
.mega-offcanvas-level > div:nth-child(7) { animation-delay: .18s; }
.mega-offcanvas-level > div:nth-child(n+8) { animation-delay: .21s; }

@keyframes mega-offcanvas-in-right {
    from { opacity: 0; transform: translateX(2rem); }
    to { opacity: 1; transform: none; }
}

@keyframes mega-offcanvas-in-left {
    from { opacity: 0; transform: translateX(-2rem); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mega-offcanvas-forward > div,
    .mega-offcanvas-backward > div {
        animation: none;
    }
}