/* =============================================================
   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 ── */

/* Thumbnail in the mobile offcanvas list */
.mega-offcanvas-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: .25rem;
    flex-shrink: 0;
}

/* Back-navigation header row */
.mega-offcanvas-header {
    padding: .5rem 0 .75rem;
    /*border-bottom: 1px solid var(--bs-border-color);*/
}

/* "See all" row in offcanvas sub-level */
.mega-offcanvas-menu .mega-see-all-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    padding: .75rem .25rem;
    border-top: 0;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

.mega-offcanvas-menu .mega-see-all-link:hover {
    color: inherit;
    text-decoration: underline;
}

/* Remove the default list-group border radius on the offcanvas list */
.mega-offcanvas-items .list-group-item {
    border-left: 0;
    border-right: 0;
    padding-left: .25rem;
    padding-right: .25rem;
}

.mega-offcanvas-items .list-group-item:first-child {
    border-top: 0;
}