/**
 * ─────────────────────────────────────────────────────────────────────────────
 * Megamenu styles — categorized navigation introduced in v9.08
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * Reuses .mha-nav__more-btn for the top-bar buttons (so visual style stays
 * consistent with the prior "More" button) but introduces a wider panel
 * with item rows that have icon + label + description.
 *
 * Mobile drawer reuses these same items but flattens to an accordion
 * (sublist toggled by [aria-expanded]).
 */

/* ── Top-bar category buttons ─────────────────────────────────────────────
 * The button itself is essentially a styled .mha-nav__more-btn — that
 * class is set in HTML so we get the existing font/padding/colors.
 * We just add a couple of layout tweaks.
 */
.mha-nav__megamenu-btn {
    gap: 6px;
}
.mha-nav__megamenu-icon {
    font-size: 15px;
    line-height: 1;
}

/* The home item — no chevron, no dropdown, just a clickable icon. */
.mha-nav__item--home a {
    font-size: 18px;
    padding: 6px 10px;
}

/* ── Megamenu panel (the dropdown that opens) ─────────────────────────────
 * The panel is the button's next sibling inside the .mha-nav__megamenu <li>.
 * We drive visibility from:
 *
 *   1. aria-expanded on the button — the sibling selector below.
 *      This is the most reliable trigger since it's an HTML attribute set
 *      directly on the button (no JS-class-on-parent indirection).
 *   2. :hover on the parent <li> — desktop convenience.
 *   3. :focus-within on the parent <li> — keyboard navigation.
 *
 * Using display: none / block (with !important on the open state) avoids
 * specificity battles and is more robust than opacity for cross-browser
 * compatibility — earlier opacity-based rules were silently overridden by
 * something in the cascade.
 */
.mha-nav__megamenu {
    position: relative;
}
.mha-nav__megamenu-panel {
    position: absolute;
    top: calc( 100% + 6px );
    left: 0;
    min-width: 320px;
    max-width: 380px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba( 15, 32, 68, 0.18 );
    padding: 8px;
    z-index: 1100;
    /* Hidden by default — display:none is fully reliable across browsers
     * and overrides any inherited visibility/opacity rules. */
    display: none;
}

/* ── Hover bridge ─────────────────────────────────────────────────────────
 * The panel sits 6px below the button. When the user moves the mouse from
 * the button toward the panel, that 6px region is hovered by neither. With
 * pure CSS :hover that means the panel hides mid-mouse-flight and is gone
 * before the user reaches it.
 *
 * This pseudo-element is an INVISIBLE rectangle that extends 12px above
 * the panel's top edge — covering the 6px gap with 6px of overlap on each
 * side (into the button area above and the panel area below). Because it's
 * part of the panel's box, hovering it counts as hovering the panel,
 * which counts as hovering the parent <li>, keeping :hover continuous.
 *
 * No background, no visual change — pure hit-testing. */
.mha-nav__megamenu-panel::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
}

/* Visible states. !important here defeats any conflicting rule earlier
 * in the cascade (we hit a ghost during testing where the panel never
 * opened despite aria-expanded flipping correctly). */
.mha-nav__megamenu-btn[aria-expanded="true"] + .mha-nav__megamenu-panel,
.mha-nav__megamenu:hover > .mha-nav__megamenu-panel,
.mha-nav__megamenu:focus-within > .mha-nav__megamenu-panel {
    display: block !important;
}

/* Section header within a panel (e.g., "Send & Sign" group) */
.mha-nav__megamenu-section-header {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 12px 4px;
    border-top: 1px solid #f1f5f9;
    margin-top: 4px;
}
/* Don't put a separator above the very first section — looks weird. */
.mha-nav__megamenu-panel > .mha-nav__megamenu-section-header:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 4px;
}

/* Item list */
.mha-nav__megamenu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mha-nav__megamenu-list li { margin: 0; }

/* Each item row: icon | label + description, the whole row is the click target */
.mha-nav__megamenu-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: #1a2332;
    transition: background 0.12s;
    line-height: 1.4;
}
.mha-nav__megamenu-item:hover,
.mha-nav__megamenu-item:focus-visible {
    background: #f1f5f9;
    outline: none;
}
.mha-nav__megamenu-item.is-active {
    background: #eef2ff;
    color: #1e3a8a;
}
.mha-nav__megamenu-item-icon {
    font-size: 18px;
    line-height: 1.3;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}
.mha-nav__megamenu-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mha-nav__megamenu-item-label {
    font-weight: 600;
    color: #0f2044;
    font-size: 14px;
}
.mha-nav__megamenu-item.is-active .mha-nav__megamenu-item-label {
    color: #1e3a8a;
}
.mha-nav__megamenu-item-desc {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

/* Nav badge — count pill next to a menu item label (e.g. alert count).
   Default: subtle indigo. .is-urgent (>5 items): red, slightly larger,
   with a pulse animation on first render. */
.mha-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: #eef2ff;
    color: #4f46e5;
    vertical-align: middle;
}
.mha-nav__badge.is-urgent {
    background: #dc2626;
    color: #fff;
    min-width: 22px;
    height: 22px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 0 0 2px rgba(220,38,38,.2);
    animation: mha-nav-badge-pulse 1.8s ease-in-out 1;
}
@keyframes mha-nav-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(220,38,38,.2); }
    50%      { box-shadow: 0 0 0 6px rgba(220,38,38,.25); }
}

/* v9.39: The global rule `ul.mha-nav li a` in main.css (specificity 0,1,3)
   beats `.mha-nav__megamenu-item` (specificity 0,1,0) and inherits
   `white-space: nowrap` into the megamenu's inner spans — causing long
   descriptions to overflow the panel's right edge. Re-asserting the
   layout properties under a (0,2,0) selector ensures the panel's intended
   styling wins. overflow-wrap on the inner spans handles pathological
   cases (long URLs, hyphenless compound words) that could still overflow
   even with normal whitespace handling. */
.mha-nav__megamenu-panel .mha-nav__megamenu-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    white-space: normal;
    font-size: 14px;
    color: #1a2332;
}
.mha-nav__megamenu-panel .mha-nav__megamenu-item-label,
.mha-nav__megamenu-panel .mha-nav__megamenu-item-desc {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
}

/* When a panel sits near the right edge of the viewport, JS adds
 * .mha-nav__megamenu--right which flips it to right-align. Keeps the
 * dropdown from clipping off-screen. */
.mha-nav__megamenu--right .mha-nav__megamenu-panel {
    left: auto;
    right: 0;
}

/* ── Mobile drawer accordion ──────────────────────────────────────────────
 * Used by the mobile drawer (.mha-mobile-nav). The drawer's own visibility
 * is handled elsewhere; these styles just shape the per-category accordion.
 *
 * Color scheme: the .mha-mobile-nav container is painted with --navy-mid
 * (a dark navy) over in main.css. So accordion text needs to be LIGHT
 * (white at varied opacities) to contrast properly. Hovers use a
 * translucent white surface rather than the desktop's slate background,
 * which would be jarringly bright against navy.
 */
.mha-mobile-nav__category {
    margin-bottom: 4px;
}
.mha-mobile-nav__category-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: transparent;
    border: none;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    border-radius: 6px;
    text-align: left;
    transition: background 0.12s, color 0.12s;
}
.mha-mobile-nav__category-btn:hover,
.mha-mobile-nav__category-btn:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
.mha-mobile-nav__category-btn svg {
    transition: transform 0.2s ease;
    color: rgba(255, 255, 255, 0.55);
}
.mha-mobile-nav__category-btn[aria-expanded="true"] svg {
    transform: rotate( 180deg );
    color: rgba(255, 255, 255, 0.85);
}
.mha-mobile-nav__sublist {
    list-style: none;
    margin: 0;
    padding: 0 0 6px 12px;
}
.mha-mobile-nav__sublist[hidden] { display: none; }
.mha-mobile-nav__sublist li { margin: 0; }
.mha-mobile-nav__sublist a {
    display: block;
    padding: 9px 14px;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 14px;
    border-radius: 5px;
    transition: background 0.12s, color 0.12s;
}
.mha-mobile-nav__sublist a:hover,
.mha-mobile-nav__sublist a:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
.mha-mobile-nav__home a {
    display: block;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
}
.mha-mobile-nav__home a:hover,
.mha-mobile-nav__home a:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* ── Mobile (drawer view) hides the desktop megamenu ──────────────────────
 * The existing nav uses a media query around 1024px to swap to the mobile
 * drawer; we just need to make sure the megamenu panels aren't accidentally
 * visible underneath the drawer when nav width is constrained.
 */
@media ( max-width: 1024px ) {
    .mha-nav__megamenu-panel { display: none; }
}

/* On narrower-but-still-desktop widths, use slightly smaller panels and
 * hide item descriptions to save vertical space. */
@media ( max-width: 1280px ) and ( min-width: 1025px ) {
    .mha-nav__megamenu-panel {
        min-width: 260px;
        max-width: 320px;
    }
    .mha-nav__megamenu-item-desc { display: none; }
}