/* !important policy (audited for PR #965 review)
   ------------------------------------------------
   This file competes with adp.css, which styles the same legacy header with
   equal-or-higher specificity (#primary-navigation ul.headerdropDown a,
   .navigationSeparator, #primary-navigation li.navigationSeparator a) and loads
   in a fixed order we do not control from here. The remaining !important
   declarations were each checked against a real adp.css counterpart:

     · li.navigationSeparator display:none  -> beats adp.css:148/151
     · ul.headerdropDown width/margin/min-width -> beats adp.css:143
     · prefers-reduced-motion transition:none -> standard, intentional

   Down from 35 to 22: a superseded environment-badge block targeting
   span[style] was removed, since the badge markup moved to the .vh-env class
   earlier in this PR and that selector no longer matched anything.

   Still outstanding, deliberately left alone: the .button-signin /
   .button-signin:hover block (14 declarations). No view renders that class -
   Login.cshtml uses .button-signin-large, a different class styled in adp.css -
   but DeveloperPortal.Functional.Tests/DevportalTest.cs:24,125 still locates a
   sign-in control by it. Deleting the CSS looked like it would paper over a
   stale test rather than fix anything, so it is flagged here for a human call.

   Prefer a more specific selector over !important in anything added below. */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Site header refresh
   CSS-only - the nav markup (auth/role branching, nested dropdowns) is
   untouched. Header stays light because Images/VeradigmDeveloperPortalLogo.png
   has an opaque white background; on a dark bar it renders as a white block.
   ========================================================================== */

:root {
    --vh-blackberry: #2E2155;
    --vh-midnight: #1D173C;
    --vh-indigo: #403C7E;
    --vh-grape: #665998;
    --vh-coral: #E6594C;
    --vh-gold: #FAB554;
    /* ds/veradigm-overrides.css --vd-gold: the nav CTA gold, deeper than --vh-gold */
    --vh-gold-cta: #F5A800;
    --vh-header-bg: #FFFFFF;
    /* public-landing-v2.jsx NavBar: 68px bar, hairline in blackberry @12% */
    --vh-header-line: rgba(46, 33, 85, .12);
    --vh-header-h: 68px;

    /* ------------------------------------------------------------------
       Shared page shell. site-header.css loads on every page via _Layout,
       so these are the single place to tune how wide the site runs.

       --vd-shell-max is the one knob. Below it every page is effectively
       full width, so laptops (1366-1920) fill edge to edge; above it the
       content stops growing so line lengths stay readable. Note most 4K
       displays run at 150-200% OS scaling, which means a CSS viewport of
       roughly 1920-2560px - well under this cap.

       Consumers reference these with a fallback so the redesign
       stylesheets still stand on their own if this file is absent.
       ------------------------------------------------------------------ */
    --vd-shell-max: 2240px;
    --vd-gutter: clamp(20px, 3.5vw, 72px);
}

/* ---------- The bar ---------- */

#nav-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--vh-header-bg);
    border-bottom: 1px solid var(--vh-header-line);
    transition: box-shadow .22s ease;
}

/* thin brand hairline so the light bar resolves into the dark hero */
#nav-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: linear-gradient(90deg, var(--vh-blackberry), var(--vh-grape) 42%, var(--vh-coral) 72%, var(--vh-gold));
    opacity: .9;
    pointer-events: none;
}

#nav-header.vh-stuck { box-shadow: 0 6px 22px rgba(46, 33, 85, .13); }

#primary-navigation > .container {
    /* Bootstrap 3 gives .container an explicit width (1170px at >=1200px),
       which max-width alone cannot override - hence width:100% as well. */
    width: 100%;
    max-width: var(--vd-shell-max, 2240px);
    min-height: var(--vh-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 0 var(--vd-gutter, 24px);
}

/* ---------- Logo ---------- */

#logo {
    padding: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

#logo img {
    position: static;
    padding: 0;
    max-width: 218px;
    height: auto;
    display: block;
    transition: opacity .18s ease;
}

#logo a:hover img { opacity: .8; }

/* ---------- Top-level nav ---------- */

#primary-navigation ul.primary-navigation {
    float: none;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

#primary-navigation ul.primary-navigation > li {
    float: none;
    background: transparent;
    position: relative;
    display: flex;
    align-items: center;
}

#primary-navigation ul.primary-navigation > li > a {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    background: transparent;
    /* NavBar links: 15px / 500 in blackberry */
    color: var(--vh-blackberry);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: none;
    line-height: 1.2;
    border-radius: 9px;
    white-space: nowrap;
    cursor: pointer;
    transition: color .16s ease, background-color .16s ease;
}

#primary-navigation ul.primary-navigation > li > a:hover,
#primary-navigation ul.primary-navigation > li:hover > a {
    color: var(--vh-blackberry);
    background: #F2EFF8;
}

/* underline accent on hover */
#primary-navigation ul.primary-navigation > li > a::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--vh-coral), var(--vh-gold));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .2s ease;
}

#primary-navigation ul.primary-navigation > li:hover > a::after { transform: scaleX(1); }

/* Fix (2026-09): FHIR/Unity/Practice Fusion open a dropdown on hover/click,
   but nothing distinguished them from a plain link like "Program Overview"
   or "App Expo" - no visual hint they were expandable at all. Adds the same
   downward chevron _DashboardTopbar.cshtml's equivalent dropdowns already
   use, scoped via :has() to only the <li>s that actually carry a nested
   <ul> (the flyout panel) so plain links are untouched. ::after is already
   the hover underline above, so this uses ::before instead and reorders it
   to the end of the flex row via `order` to still land after the label.
   Applies to both the signed-in and signed-out copies of this markup (and
   to Admin/the account avatar, which carry the same li > ul shape), and to
   the level-2/level-3 flyouts inside each dropdown - the same shape means
   the same affordance everywhere a flyout exists. */
/* Fix (2026-09, mobile audit): the `order` trick below only reorders the
   chevron after the label inside a flex row - true for the top-level
   trigger (its own `display: inline-flex` a few lines up), but Admin's
   nested sub-group triggers (FHIR/Unity/etc. inside its flyout) inherit
   `display: block` from adp.css, where `order` does nothing, so the
   chevron rendered in normal DOM order instead - before the label, reading
   as a stray leading character. Forcing the same flex row here for every
   trigger this selector already targets fixes it everywhere at once. */
#primary-navigation ul li:has(> ul) > a {
    /* !important: adp.css's "#primary-navigation ul.primary-navigation a"
       carries a class in its selector, this doesn't - :has()'s specificity
       comes from its argument ("ul", a bare type selector) only, so on
       specificity alone adp.css's rule still wins the class tier despite
       this selector having more type selectors overall. Same override
       pattern already used against adp.css elsewhere in this file (e.g.
       "width: auto !important" a few rules down). */
    display: inline-flex !important;
    align-items: center;
}

#primary-navigation ul li:has(> ul) > a::before {
    content: "";
    order: 1;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    flex: 0 0 auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 150ms ease;
    opacity: .7;
}

#primary-navigation ul li.vh-hover-open:has(> ul) > a::before,
#primary-navigation ul li.vh-locked:has(> ul) > a::before {
    transform: rotate(225deg);
}

/* legacy Allscripts green-slash dividers */
#primary-navigation li.navigationSeparator { display: none !important; }

/* ---------- Environment badge ----------
   Sits directly beside the logo as a normal flex sibling. It used to be
   position:absolute with a hardcoded margin-left:250px, which parked it in
   the middle of the bar and drifted as the logo or bar width changed. */

.vh-env {
    display: inline-flex;
    align-items: center;
    align-self: center;
    flex: 0 0 auto;
    /* the bar is justify-content:space-between, so without margin-right:auto
       this lands midway between the logo and the nav instead of beside the
       logo. The negative left margin tightens the 28px container gap. */
    margin-left: -14px;
    margin-right: auto;
    padding: 3px 11px;
    background: #FFF6C2;
    color: #6B5A00;
    border: 1px solid #F2DE7A;
    border-radius: 999px;
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.4;
    white-space: nowrap;
}

.menu-trigger .vh-env--mobile { float: left; margin: 10px 0 0 12px; }

/* VCO-1311: "My Dashboard" pill beside the logo for a signed-in visitor on
   the marketing nav (landing page) - same look as .vd-tab in
   dashboard.css's topbar. It takes over the env badge's margin-right:auto
   job of pushing the nav to the right; :has() hands the badge a normal gap
   when both are present. */
.vh-env:has(+ .vh-dash-tab) { margin-right: 10px; }
.vh-dash-tab {
    display: inline-flex;
    align-items: center;
    align-self: center;
    flex: 0 0 auto;
    gap: 7px;
    height: 34px;
    margin-left: -14px;
    margin-right: auto;
    padding: 0 14px;
    border-radius: 99px;
    background: #EAE7F1;
    border: 1px solid #2E2155;
    color: #2E2155;
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}
.vh-env + .vh-dash-tab { margin-left: -18px; }
.vh-dash-tab:hover, .vh-dash-tab:focus { background: #E1DDEC; color: #2E2155; text-decoration: none; }
.vh-dash-tab svg { width: 15px; height: 15px; stroke: currentColor; }
@media (max-width: 991px) {
    /* the mobile menu already has the account menu with My Dashboard */
    .vh-dash-tab { display: none; }
}

/* Fix (2026-09): .vh-nav-envbadge (the <li> wrapping the mobile-nav-list
   copy of this badge, EnvBadgeListItem() in _Layout.cshtml) had no default
   display:none - only its @media (max-width: 991px) styling below. On
   desktop it rendered in its normal position in ul.primary-navigation,
   landing right on top of the avatar/account trigger it sits next to in
   the list. Hidden by default; the mobile media query's own
   `> li { display: block; }` rule already un-hides it there.
   Needs the same #primary-navigation ul.primary-navigation > li specificity
   as the rule at line 137 that sets this <li> to display:flex - a bare
   .vh-nav-envbadge class selector loses to that on specificity alone. */
#primary-navigation ul.primary-navigation > li.vh-nav-envbadge { display: none; }

/* ---------- Sign in / Sign up (NavBar in public-landing-v2.jsx) ---------- */

#primary-navigation ul.primary-navigation > li.vh-nav-signin > a {
    font-weight: 600;
    color: var(--vh-blackberry);
}

/* the gold pill sheds the shared link chrome: no hover fill, no underline */
#primary-navigation ul.primary-navigation > li.vh-nav-signup > a.vh-cta-pill {
    background: var(--vh-gold-cta, #F5A800);
    color: #1D173C;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 9px 22px;
    border: 1px solid var(--vh-gold-cta, #F5A800);
    border-radius: 20px;
    margin-left: 6px;
}

#primary-navigation ul.primary-navigation > li.vh-nav-signup > a.vh-cta-pill:hover {
    background: #E29B00;
    border-color: #E29B00;
    color: #1D173C;
}

#primary-navigation ul.primary-navigation > li.vh-nav-signup > a.vh-cta-pill::after { display: none; }

/* ---------- Dropdown panels ---------- */

/* Fix (2026-09): position/width/z-index used to come ONLY from adp.css's
   legacy "#primary-navigation ul li:hover > ul" rule (adp.css:264), bundled
   in the same ruleset as its display:block. That rule is pure :hover with
   no grace period, so the instant the mouse's real hover state flickers
   off - which happens constantly right at the panel's edges, independent
   of the .vh-hover-open class this file's hover-intent timer controls -
   the panel didn't just lose display:block (still covered by
   .vh-hover-open below), it ALSO lost position:absolute/width, so it
   rendered in normal flow at its default width and shoved the rest of the
   header sideways: exactly the "flashing and making itself wider" report.
   Made unconditional here so it no longer depends on native :hover at all. */
#primary-navigation ul.headerdropDown {
    background: #fff;
    border: 1px solid var(--vh-header-line);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(46, 33, 85, .18);
    padding: 8px;
    margin-top: 6px;
    overflow: visible;
    position: absolute;
    width: 225px;
    z-index: 1001;
}

/* The 6px margin-top above leaves a dead zone between the trigger and the
   panel with nothing hoverable in it - moving the pointer straight down
   from the link to an item below crosses that gap, drops :hover on the
   parent <li>, and the whole menu closes before the item can be clicked.
   This invisible strip is a child of the dropdown itself, so hovering it
   still counts as hovering the panel (and therefore the <li>), bridging
   the gap without changing how the menu looks. */
#primary-navigation ul.headerdropDown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -6px;
    height: 6px;
}

#primary-navigation ul.headerdropDown a {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    background: transparent;
    color: #3B3357;
    font-size: 13.5px;
    font-weight: 500;
    /* adp.css's "ul.primary-navigation a { text-transform: capitalize }" is a
       descendant selector, so it reaches every dropdown link too - the
       top-level items get their own override two rules up (> li > a), but
       nothing resets it for anything nested, so multi-word leaf labels that
       are deliberately sentence case in markup (matching the blueprint, e.g.
       "Create your app") were rendering as "Create Your App" instead. */
    text-transform: none;
    border-radius: 8px;
    padding-top: 9px;
    padding-bottom: 9px;
    transition: background-color .14s ease, color .14s ease;
}

#primary-navigation ul.headerdropDown a:hover {
    background: #F2EFF8;
    color: var(--vh-blackberry);
}

#primary-navigation ul.headerdropDown ul {
    background: #fff;
    border: 1px solid var(--vh-header-line);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(46, 33, 85, .18);
    padding: 8px;
}

/* ---------- Click-to-lock (dev portal bug batch, 2026-09) ----------
   #primary-navigation ul li:hover > ul (adp.css) is pure :hover - there was
   no way to keep a top-level flyout (FHIR/Unity/Practice Fusion/Admin/the
   account avatar) open without the mouse physically staying over it, and
   moving toward a link inside the panel to click it is exactly the motion
   that can end that hover early, closing the menu out from under the click.
   The script below toggles this class on click of the top-level trigger;
   force the same display:block a real :hover gets so a locked flyout stays
   open regardless of where the mouse actually is.
   Fix (2026-09, mobile audit): scoped to top-level only (`ul.primary-
   navigation > li`), but tap-to-lock is now the only way any flyout opens
   on a touch device - Admin's own nested sub-groups (its FHIR/Unity/etc.
   flyouts, one level deeper) need the same rule. Generic `ul li` instead,
   matching .vh-hover-open below. */
#primary-navigation ul li.vh-locked > ul {
    display: block;
}

/* ---------- Hover-intent grace period (dev portal bug batch, 2026-09) ----------
   Same idea as .vh-locked above, but for plain hover at EVERY nesting depth
   (Admin > FHIR > Fhir Apis, not just the top level) instead of only a
   click-locked one. The script toggles this on mouseenter and removes it
   ~250ms after mouseleave, so moving the mouse from a row into its own
   flyout has a grace window instead of needing to stay precisely over the
   trigger the whole time. */
#primary-navigation ul li.vh-hover-open > ul {
    display: block;
}

/* ---------- Flyout positioning ----------
   The original markup positions third-level menus with inline
   style="margin-left:-380px;width:180px" on each <li>, combined with
   right:-95% on the <ul>. Those fight each other: the panel lands on top of
   its own parent and runs off-screen on narrower viewports. Neutralise the
   inline hacks and cascade properly instead. */

/* level-2 panel hangs off the top-level item */
#primary-navigation ul.primary-navigation > li > ul.headerdropDown {
    left: 0;
    right: auto;
    top: 100%;
    margin-left: 0;
}

/* each level-2 row anchors its own flyout */
#primary-navigation ul.headerdropDown > li {
    position: relative;
    float: none;
    width: auto !important;
    margin-left: 0 !important;
}

/* level-3 flyout sits beside its parent row, not on top of it.
   Fix (2026-09): same bug as the level-2 panel above, one level deeper -
   position:absolute for THESE uls only ever came from adp.css's generic
   "ul li:hover > ul" (any depth), so a level-3 flyout (e.g. Admin > FHIR >
   its items) held open by .vh-hover-open past the moment native :hover
   drops rendered in normal flow instead, right where the report of "a menu
   opening between Client Activation Requests and FHIR" pointed - Quick
   Access's flat items sit directly above the FHIR section in Admin's
   dropdown, so that's exactly the boundary this hits. */
#primary-navigation ul.headerdropDown li:hover > ul,
#primary-navigation ul.headerdropDown > li > ul {
    position: absolute;
    z-index: 1002;
    left: 100%;
    right: auto;
    top: -8px;
    margin-left: 2px;
    width: 230px;
    min-width: 230px;
}

/* kill the inline offsets on the leaf items */
#primary-navigation ul.headerdropDown ul > li {
    float: none;
    margin-left: 0 !important;
    width: auto !important;
    min-width: 0 !important;
}

#primary-navigation ul.headerdropDown a {
    white-space: normal;
    width: auto !important;
}

/* set by the header script when a flyout would leave the viewport */
#primary-navigation ul.headerdropDown > li.vh-flip > ul {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 2px;
}

#primary-navigation ul.primary-navigation > li.vh-flip > ul.headerdropDown {
    left: auto;
    right: 0;
}

/* ---------- Sign in ---------- */

.button-signin {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif !important;
    border-radius: 999px !important;
    border: 1.5px solid var(--vh-blackberry) !important;
    background: var(--vh-blackberry) !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    line-height: 1 !important;
    height: auto !important;
    width: auto !important;
    text-indent: 0 !important;
    transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.button-signin:hover {
    background: var(--vh-indigo) !important;
    border-color: var(--vh-indigo) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(46, 33, 85, .24);
}

/* ---------- Mobile ---------- */

.menu-trigger {
    background: #fff;
    color: var(--vh-blackberry);
    border-bottom: 1px solid var(--vh-header-line);
    display: none;
    align-items: center;
    padding: 12px 18px;
    height: auto;
}

/* Fix (2026-09, mobile audit): was justify-content:space-between on
   .menu-trigger above, fine with exactly 2 children (logo, hamburger) -
   spread evenly across 3 (logo, avatar trigger, hamburger) put the avatar
   in the dead centre of the bar instead of next to the hamburger like it's
   supposed to be. margin-right:auto on the logo pushes everything after it
   (avatar trigger + hamburger, in source order) over to the right edge as
   one group instead. */
.menu-trigger #mobileLogo { margin-right: auto; }

.menu-trigger #mobileLogo img { max-width: 190px; height: auto; }

.menu-trigger > div[style*="float:right"] {
    font-size: 24px;
    line-height: 1;
    color: var(--vh-blackberry);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background-color .16s ease;
}

.menu-trigger > div[style*="float:right"]:hover { background: #F2EFF8; }

/* Mobile-only proxy for the real account-menu trigger (avatar li, further
   down in #primary-navigation) - see the _Layout.cshtml comment where it's
   rendered. Only ever visible via its parent .menu-trigger's own
   display:none/flex toggle, so no separate show/hide rule needed here. */
.vh-mobile-avatar-trigger {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin-left: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    cursor: pointer;
}
.vh-mobile-avatar-trigger img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 991px) {
    #nav-header { position: static; }
    #nav-header::after { display: none; }
    .menu-trigger { display: flex; }

    /* Fix (2026-09, mobile audit): adp.css only hides #primary-navigation
       (and the desktop logo/env badge inside it) below 460px - .menu-trigger
       shows up to 991px instead, so between 460-991px the hamburger row
       rendered ON TOP OF the full, permanently-visible nav below it: logo
       and env badge twice, then every top-level item, with nothing to
       toggle since there was nothing to reveal. MenuDecorator.js's
       slideToggle already knows how to show/hide this panel via inline
       style (which beats any stylesheet rule) - it just needed a default
       to toggle FROM at this width, same as adp.css already gives it
       below 460px. */
    #primary-navigation { display: none; }

    /* This only fixes the CLOSED state - display:none on the container
       above hides its inner #logo/.vh-env along with it while collapsed,
       but slideToggle's job is to make the container display:block again,
       which brings that same inner logo/badge right back the moment the
       panel opens, repeating the hamburger row's own logo/badge directly
       underneath it. Hide them for real, independent of the container's
       own open/closed state. */
    #primary-navigation #logo { display: none; }
    /* Scoped to the direct child of .container (the desktop-style badge
       next to #logo) rather than a blanket ":not(.vh-env--mobile)" - the
       new .vh-env--mobile-list badge a few rules down is also a bare
       ".vh-env" with a different modifier and would get caught by that
       too. */
    #primary-navigation > .container > .vh-env { display: none; }

    #primary-navigation > .container {
        display: block;
        min-height: 0;
        padding: 0 16px 12px;
    }
    #primary-navigation ul.primary-navigation {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    #primary-navigation ul.primary-navigation > li { display: block; }
    #primary-navigation ul.primary-navigation > li > a::after { display: none; }

    /* The avatar li stays put (its dropdown's position/CSS is scoped to
       this exact spot in the list), but its own visible image is hidden -
       #vhMobileAvatarTrigger in .menu-trigger shows it instead, so the li
       collapses to zero height rather than leaving a redundant image. */
    #primary-navigation ul.primary-navigation > li.vh-avatar-li > .avatar {
        display: none;
    }

    /* Fix (2026-09, mobile audit): env badge moved here from the hamburger
       row (see _Layout.cshtml) - a plain pill, not a real nav item, so it
       gets its own look rather than the link chrome every other <li> here
       has. */
    /* display:flex re-stated at the same specificity as the base
       display:none rule above (both carry the .vh-nav-envbadge class) -
       the sibling `> li { display: block; }` rule a few lines up is one
       class lighter and can't win that override on its own. */
    #primary-navigation ul.primary-navigation > li.vh-nav-envbadge {
        display: flex;
        padding: 10px 0 4px;
    }
    .vh-env--mobile-list {
        display: inline-flex;
        align-items: center;
        padding: 3px 11px;
        background: #FFF6C2;
        color: #6B5A00;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        border-radius: 999px;
    }

    /* Fix (2026-09, mobile audit): Admin's own dropdown (level 2) is a
       225px absolute overlay that fits fine on a phone, but its nested
       sub-groups (level 3 - Admin > FHIR/Unity/Documentation/etc > items,
       "level-3 flyout sits beside its parent row" above) open with
       left:100%, width 230px beside THAT panel - starting past x=225 on a
       screen that's often narrower than 225+230=455 to begin with. The
       vh-flip fallback doesn't help: flipping to right:100% just opens it
       off the LEFT edge instead, since the level-2 panel it's anchored to
       already spans nearly the full width - there's no side with enough
       room, so checkFlip's measurement flips it back and forth on repeat
       taps instead of ever landing somewhere that fits ("flip sides each
       time you touch it"). Side-by-side flyouts don't have a stable
       answer at this width; drop the whole model for level 3 on mobile and
       let it expand inline underneath its own row instead, same as every
       other expandable group in the redesigned rail
       (_DashboardRail.cshtml) already does - full width, no horizontal
       placement to get wrong, and the panel's own vertical scroll handles
       the extra height. */
    #primary-navigation ul.headerdropDown li:hover > ul,
    #primary-navigation ul.headerdropDown > li > ul,
    #primary-navigation ul.headerdropDown > li.vh-flip > ul {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        margin: 2px 0 4px 14px;
        width: auto;
        min-width: 0;
        box-shadow: none;
        border: none;
        border-left: 1px solid var(--vh-header-line);
        border-radius: 0;
        padding: 2px 0 2px 10px;
    }

    /* Now that level 3 expands inline instead of floating beside it,
       Admin's own level-2 panel can grow tall enough to run past the
       bottom of the screen (every sub-group's items add real height now,
       where they used to add none). Cap it and let it scroll internally,
       same reasoning as the rail's own capped flyouts. */
    #primary-navigation ul.primary-navigation > li > ul.headerdropDown {
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Fix (2026-09, code review): the level-3 fix above neutralizes
       .vh-flip for NESTED flyouts, but checkFlip (_Layout.cshtml) runs
       ungated at every depth including the top level, and the top-level
       flip rule (li.vh-flip > ul.headerdropDown { right: 0 }, unscoped,
       further up this file) was never touched here - it's still live on
       mobile. Unlike level 3, this one isn't just dead work: the level-2
       panel really is still position:absolute at this width, so if
       checkFlip ever adds vh-flip to a top-level item on a narrow screen,
       right:0 actually repositions it against the mobile stacked <li>
       layout, not the desktop side-by-side one it was written for. Forced
       back to its normal left-anchored position, matching every other
       top-level panel on mobile regardless of what checkFlip decides. */
    #primary-navigation ul.primary-navigation > li.vh-flip > ul.headerdropDown {
        left: 0;
        right: auto;
    }
}

/* ---------- Integrate mega menu (blueprint match, 2026-10) ----------
   The blueprint's "Integrate" panel is a flat 4-column grid grouped by task
   (Process Overview / Create Your App / Test / Reference), not the nested
   single-column flyout-per-product-family (FHIR > Unity > Practice Fusion)
   the rest of this file's headerdropDown/flyout rules assume. Scoped to
   .vh-mega so Admin's nested menu and the old per-family flyouts (still used
   signed-in) are untouched. */
#primary-navigation ul.headerdropDown.vh-mega {
    width: auto;
    gap: 28px;
    padding: 18px 22px;
    /* No display here, on purpose - the base "ul li > ul { display: none }"
       (adp.css) hides this by default same as every other dropdown; only
       the hover/.vh-locked/.vh-hover-open triggers below should reveal it,
       as flex instead of the generic block those triggers normally apply.
       An unconditional display:flex here was the bug (reported by Alex):
       it beat adp.css's display:none outright via higher specificity
       (the extra .vh-mega class), so the panel rendered open on every page
       load regardless of hover state. */
}

#primary-navigation ul li:hover > ul.headerdropDown.vh-mega,
#primary-navigation ul li.vh-locked > ul.headerdropDown.vh-mega,
#primary-navigation ul li.vh-hover-open > ul.headerdropDown.vh-mega {
    display: flex;
}

/* "Integrate" sits near the right edge of the bar, so a left-anchored panel
   this wide runs off the viewport (and drags in a page-level horizontal
   scrollbar with it) long before the generic checkFlip() JS measurement
   would catch it. Right-anchor by default instead of waiting on that. */
#primary-navigation ul.primary-navigation > li > ul.headerdropDown.vh-mega {
    left: auto;
    right: 0;
}

#primary-navigation ul.headerdropDown.vh-mega > li {
    width: 190px !important;
    position: static;
}

/* VCO-1264: right-anchored under "Integrate", four 190px columns (~900px)
   ran off the LEFT edge of the window on anything narrower than ~1300px -
   e.g. the sign-up page on a laptop cut off the Process Overview column.
   Fold to two columns (two rows of two) on desktop widths that can't fit
   four; below 992px the mobile menu takes over and this doesn't apply. */
@media (min-width: 992px) and (max-width: 1320px) {
    #primary-navigation ul.headerdropDown.vh-mega {
        flex-wrap: wrap;
        box-sizing: border-box;
        width: 470px; /* 2 x 190px columns + 28px gap + 44px padding, plus slack so sub-pixel rounding never drops the second column to a new row */
        row-gap: 16px;
    }
}

/* un-absolute the per-column list so it lays out in normal flow under its
   label instead of flying out to the side like a level-3 panel, and force
   it visible unconditionally - adp.css's "ul li > ul { display:none }" plus
   this file's own hover/locked rules only ever reveal one flyout level at a
   time per :hover/.vh-locked on that specific <li>, which is right for a
   nested flyout but wrong for a mega menu: all 4 columns need to show at
   once as soon as the "Integrate" trigger itself is open, not one at a time
   per column hover. */
#primary-navigation ul.headerdropDown.vh-mega > li > ul,
#primary-navigation ul.headerdropDown.vh-mega li:hover > ul {
    display: block;
    position: static;
    box-shadow: none;
    border: none;
    padding: 2px 0 0;
    margin: 0;
    width: auto;
    min-width: 0;
}

#primary-navigation ul.headerdropDown.vh-mega .vh-mega-label {
    display: block;
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #4A4460;
    padding: 9px 9px 4px;
}

@media (max-width: 991px) {
    #primary-navigation ul.headerdropDown.vh-mega {
        flex-direction: column;
        gap: 4px;
    }

    #primary-navigation ul.headerdropDown.vh-mega > li {
        width: 100% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #nav-header,
    #nav-header * { transition: none !important; }
}