/* =============================================================================
   Mega menu for the Sigma header  (Phase 705)
   -----------------------------------------------------------------------------
   A WIDER SUB-MENU, NOT A NEW COMPONENT. The theme already opens
   .navbar-nav li.menu-item-has-children:hover > .sub-menu and animates it. This
   file only changes the shape of that panel when it also carries .mega-menu:
   the open/close behaviour, the transition and the mobile accordion all still
   come from the theme, so nothing here has to be kept in step with it.

   It is loaded on every public page, so the header is the same object
   everywhere rather than two headers maintained to look alike.
   ============================================================================= */

.sigma_header .navbar-nav li .sub-menu.mega-menu {
    /* ANCHORED TO THE TRIGGER'S LEFT EDGE, NOT CENTRED ON IT. Centring a 1020px
       panel on a menu item that sits left of centre pushed it 72px off the
       viewport — measured, and the first column ("Features", "Pricing") was
       simply cut in half. Anchoring left and clamping the width keeps it on
       screen at any width, because Platform is never the rightmost item. */
    left: 0;
    transform: none;
    /* Phase 710: 940 -> 1020px. The type inside grew ~15%, and holding the old
       width would have bought that back out of the gutters. */
    width: min(1020px, calc(100vw - 2 * var(--ps-gutter, 2rem)));
    padding: 26px 26px 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px 26px;
    border-radius: 18px;
    /* A deeper, two-layer shadow reads as a panel floating ABOVE the page rather
       than a box drawn on it — the cheapest part of looking considered. */
    box-shadow: 0 32px 64px -24px rgba(11, 18, 32, .32), 0 8px 20px -12px rgba(11, 18, 32, .14);
    border: 1px solid #e8edf4;
    /* The tinted wash + hairline is the same material the page's cards use, so the
       menu belongs to the site instead of being a plain white rectangle. */
    background: linear-gradient(180deg, #ffffff 0%, #fcfdfe 100%);
    overflow: hidden;
}

/* A gradient hairline across the top edge, tying the panel to the brand ramp used
   by the buttons and icon tiles. Drawn on the panel, so no extra markup. */
.sigma_header .navbar-nav li .sub-menu.mega-menu::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--ps-brand, #1ab394) 0%, var(--ps-gradient-end, #0e7361) 100%);
}

.mega-menu__col { display: flex; flex-direction: column; }

.mega-menu__heading {
    /* Phase 710: .68 -> .74rem. Small caps this tight were legible but read as fine
       print; the column labels are how the panel is scanned. */
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #64748b;
    padding: 0 10px 9px;
    margin-bottom: 6px;
    border-bottom: 1px solid #eef2f7;
}

/* The theme styles .sub-menu li a for a plain list; a mega item is a title with
   a line of explanation under it, so the anchor becomes a two-line block. */
.sigma_header .navbar-nav li .sub-menu.mega-menu .mega-menu__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 11px;
    border-radius: 11px;
    line-height: 1.35;
    transition: background-color .18s ease, transform .18s ease;
}
/* The row lifts a hair and the icon tile fills with the brand ramp. Two small
   changes, but they turn a hover-highlight into something that feels built. */
.sigma_header .navbar-nav li .sub-menu.mega-menu .mega-menu__item:hover {
    background: var(--ps-brand-soft, #eefbf6);
    transform: translateX(2px);
}

/* The icon is a rounded TILE rather than a bare glyph — the same device the page's
   feature cards use, so the menu previews the design it links to. */
.mega-menu__item i {
    color: #0e7361;
    font-size: .95rem;
    margin-top: 1px;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--ps-brand-soft, #eefbf6);
    transition: background-color .18s ease, color .18s ease;
}
.sigma_header .navbar-nav li .sub-menu.mega-menu .mega-menu__item:hover i {
    background: linear-gradient(135deg, var(--ps-brand, #1ab394) 0%, var(--ps-gradient-end, #0e7361) 100%);
    color: #fff;
}
/* The theme uppercases everything inside a menu. That is right for the item's
   name — it matches the top-level nav — and wrong for the line beneath it:
   "RATES, LABELS, TRACKING, SETTLEMENT" is a sentence shouted, and reads slower
   than the same words in normal case. */
/* Phase 710 type bump: .88 -> .96rem for the name, .76 -> .82rem for the line under
   it. The panel is a navigation surface people read at a glance from a metre away,
   and the old sizes were sized for a dropdown, not for a menu that has to sell. */
.mega-menu__item strong { display: block; font-size: .96rem; font-weight: 700; color: #0b1220; letter-spacing: -.005em; }
.mega-menu__item span   { display: block; font-size: .82rem; line-height: 1.4; color: #64748b; margin-top: 2px; text-transform: none; letter-spacing: 0; }
.sigma_header .navbar-nav li .sub-menu.mega-menu .mega-menu__item:hover strong { color: var(--ps-brand-dark, #0e7361); }

/* ── Below the theme's own breakpoint the menu becomes an accordion ──────────
   The theme switches .navbar-nav to a stacked panel at 1200px. A four-column
   grid inside that would be unreadable, so it collapses to one column and drops
   the absolute positioning the theme no longer applies. */
@media (max-width: 1199.98px) {
    .sigma_header .navbar-nav li .sub-menu.mega-menu {
        left: 0;
        transform: none;
        width: 100%;
        display: block;
        padding: 4px 0 4px 12px;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        background: none;
    }
    /* The gradient hairline and the hover lift are desktop-panel devices; in the
       accordion they would draw a stray line across the menu and shift rows sideways. */
    .sigma_header .navbar-nav li .sub-menu.mega-menu::before { display: none; }
    .sigma_header .navbar-nav li .sub-menu.mega-menu .mega-menu__item:hover { transform: none; }
    .mega-menu__heading { padding-top: 10px; border-bottom: 0; }
    .mega-menu__item span { display: none; }  /* the description is desktop breathing room, not content */
    /* Keep the tile square and compact so the accordion rows stay on one line. */
    .mega-menu__item i { width: 28px; height: 28px; border-radius: 8px; }
}