/* ==========================================================================
   Site header — webinar submenu (shared by every public page header)
   Desktop: .mbx-dd  — trigger button + dropdown panel (hover, click, keyboard; static/js/site-nav.js)
   Mobile:  .mbx-mnav-group — the submenu is listed open under its label
   Colours are set explicitly: some headers recolour .text-txt* over dark heroes,
   and the panel must stay dark-on-white there.
   ========================================================================== */
.mbx-dd { position: relative; display: inline-flex; align-items: center; }
/* no border reset here: the page's own classes may draw the "current page" underline (border-b-2) */
.mbx-dd__btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; cursor: pointer; white-space: nowrap;
}
.mbx-dd__chev { font-size: 10px; line-height: 1; transition: transform .2s ease; }
.mbx-dd__btn[aria-expanded="true"] .mbx-dd__chev { transform: rotate(180deg); }

/* padding-top bridges the gap between trigger and panel so hover is not lost on the way down */
.mbx-dd__menu {
    position: absolute; top: 100%; left: 50%; z-index: 60;
    padding-top: 12px; transform: translateX(-50%);
    display: none;
}
.mbx-dd__btn[aria-expanded="true"] + .mbx-dd__menu { display: block; }
/* before the script runs (or without it) hover still opens the panel */
@media (hover: hover) {
    .mbx-dd:not(.is-ready):hover > .mbx-dd__menu { display: block; }
}
.mbx-dd__panel {
    min-width: 168px; margin: 0; padding: 6px; list-style: none;
    background: #FFFFFF; border: 1px solid #D5CFC4; border-radius: 8px;
    box-shadow: 0 18px 32px -22px rgba(30, 42, 68, .55);
}
.mbx-dd__item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 4px;
    font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em;
    color: #1E2A44; white-space: nowrap; text-decoration: none;
    transition: background-color .15s ease;
}
.mbx-dd__item::before {
    content: ''; flex: none; width: 6px; height: 6px; border: 1px solid #8C919B; border-radius: 1px;
}
.mbx-dd__item:hover { background: #F5F2ED; color: #1E2A44; }
.mbx-dd__item[aria-current="page"] { background: #EEF2F9; color: #244A8F; font-weight: 700; }
.mbx-dd__item[aria-current="page"]::before { background: #244A8F; border-color: #244A8F; }
.mbx-dd__item:focus-visible { outline: 2px solid #244A8F; outline-offset: -2px; }

/* ---------------------------------------------------------------- mobile menu group */
.mbx-mnav-group { margin: 0; padding: 0; }
.mbx-mnav-label { cursor: default; }
.mbx-mnav-label:hover { background: none; }
a.mbx-mnav-sub {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
    padding: 10px 16px 10px 48px; border-radius: 12px;
    font-size: 14px; font-weight: 500; color: #3D4860; text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
a.mbx-mnav-sub::before { content: ''; flex: none; width: 10px; height: 1px; background: currentColor; opacity: .6; }
a.mbx-mnav-sub:hover { background: #F8FAFC; color: #0F172A; }
a.mbx-mnav-sub[aria-current="page"] { background: #EEF2F9; color: #244A8F; font-weight: 700; }
a.mbx-mnav-sub:focus-visible { outline: 2px solid #244A8F; outline-offset: -2px; }

/* full-screen slide-in menus (home, webinar, report) use larger rows with bottom rules */
.mbx-mnav--lg a.mbx-mnav-sub {
    min-height: 48px; padding: 12px 0 12px 36px; border-radius: 0;
    border-bottom: 1px solid #E2E8F0; font-size: 16px; font-weight: 600;
}
.mbx-mnav--lg a.mbx-mnav-sub[aria-current="page"] { padding-left: 36px; }

@media (prefers-reduced-motion: reduce) {
    .mbx-dd__chev, .mbx-dd__item, a.mbx-mnav-sub { transition: none; }
}