/* ============================================================================
   Portal header refinements
   ----------------------------------------------------------------------------
   Structural polish for the global header/nav: full-width chrome with the same
   max-width gutter as .ds-page, tighter spacing, and a clearer active state.

   COLOR-NEUTRAL BY DESIGN. Every tenant still gets its own palette from
   Content/themes/<theme>/color.css. Brand colors are layered on top only when a
   partner has actually configured them -- see Views/Shared/_PartnerBrand.cshtml,
   which emits the theme-class overrides behind an IsConfigured check. That way
   an unconfigured tenant looks exactly as it did before this file existed.
   ========================================================================== */

/* _Layout sets `html, body { width: 100% }`. On any page with a vertical scrollbar that
   resolves against the viewport INCLUDING the gutter, so the document overflows sideways by
   the scrollbar width — the light strip down the right edge. Block elements already fill
   their container, so the declaration buys nothing; drop it. */
html, body { width: auto; }

/* The header is position:fixed with width:100%. For a fixed element that resolves against
   the viewport INCLUDING the scrollbar gutter, so on any page with a vertical scrollbar it
   overhangs by the scrollbar width and forces a horizontal scrollbar — visible as a strip
   down the right edge where the body doesn't paint. Pinning both edges instead lets the
   browser size it correctly. */
.header.locked {
    left: 0;
    right: 0;
    width: auto;

    /* _Layout sets z-index:1, which loses to ordinary page content: Bootstrap gives a FOCUSED
       .form-control inside an .input-group z-index:3 so its focus ring isn't clipped, so
       clicking a drop-down on the notification settings page painted it over the header.
       50 clears content-level stacking while staying UNDER jQuery UI dialogs (.ui-front is
       z-index 100) and the design system's sheets/overlays, which must still cover the
       header. Raising it above those would put every modal behind the chrome. */
    z-index: 50;
}

/* Full-bleed bar, content aligned to the same rail as .ds-page. */
.header.locked > .navbar,
.header.locked .SecondMenuBGColor > nav {
    max-width: var(--ds-maxw, 1560px);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* The second nav was a fixed-width .container inside a full-width bar, which
   left the menu floating in the middle of a wide screen. */
.header.locked .SecondMenuBGColor > nav.container {
    max-width: var(--ds-maxw, 1560px);
    padding-left: var(--ds-pad, 24px) !important;
    padding-right: var(--ds-pad, 24px) !important;
}

/* !important because _Layout has historically carried inline `style="padding: ..."` on these
   nav elements, and an inline style beats any external rule regardless of specificity. The
   attributes are gone from the markup now, but this keeps the header correct even if one is
   reintroduced or an older view is deployed. */
.header.locked > .navbar {
    padding-left: var(--ds-pad, 24px) !important;
    padding-right: var(--ds-pad, 24px) !important;
}

/* Account identity, now inline beside the logo instead of on its own row. */
.header-account {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 18px;
    padding-left: 18px;
    border-left: 1px solid currentColor;
    line-height: 1.25;
    opacity: .85;
    min-width: 0;
}

.header-account__name {
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-account__num {
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    opacity: .75;
}

/* Pushes "I want to" to the end of the menu bar. */
.header.locked #navbar2 .navbar-nav > li.ds-nav-right {
    margin-left: auto;
}

.header.locked #navbar2 .navbar-nav > li.ds-nav-right > a {
    display: flex;
    align-items: center;
    gap: 7px;
}

/* The menu is markup'd as .nav-fill.w-100, which spreads items evenly across the
   whole bar. That read fine inside the old fixed-width .container, but across a
   full-width bar it strands the items in a thin line of huge gaps. Pack them to
   natural width and start them at the content gutter instead. */
.header.locked #navbar2 .navbar-nav {
    justify-content: flex-start;
    gap: 2px;
}

.header.locked #navbar2 .navbar-nav.nav-fill > li {
    flex: 0 0 auto;
}

/* Primary nav items: a little more room to breathe than Bootstrap's default. */
.header.locked #navbar2 .navbar-nav > li > a {
    display: block;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    /* The menu labels are inconsistently cased at the source ("OVERVIEW" but
       "Order History"); normalise here rather than editing every .resx. */
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 2px solid transparent;
    transition: border-color .12s, color .12s;
    white-space: nowrap;
}

/* Align the first item's TEXT with the page content rail, not its padding box. */
.header.locked #navbar2 .navbar-nav > li:first-child > a {
    padding-left: 0;
    margin-right: 14px;
}

/* Underline the current section instead of relying on color alone — color is
   theme-dependent and, on some themes, low contrast. */
.header.locked #navbar2 .navbar-nav > li > a.active {
    border-bottom-color: currentColor;
}

/* "I want to" was icon-only until hover, which reads as a stray glyph rather
   than a menu. Always show the label. */
.header.locked #IWantToDiv .header-text {
    display: inline !important;
}

/* Trim the header, but keep the logo off the very top edge. See the !important note above —
   the inline style on this element used to zero these out. */
.header.locked > .navbar {
    padding-top: 14px !important;
    padding-bottom: 8px !important;
}

/* _Layout reserves space for the fixed header with a hardcoded body padding-top sized for
   the old three-row header. Start closer to the new two-row height so there's no visible
   gap; the exact value is measured and applied by script (tenant logos differ in height). */
body:not(.embedded) { padding-top: 92px; }

@media (prefers-reduced-motion: reduce) {
    .header.locked #navbar2 .navbar-nav > li > a { transition: none; }
}

/* Dark mode for an UNCONFIGURED partner, whose header would otherwise stay theme-white on a
   dark page. A configured partner's brand colors win over this (they're emitted with
   !important in _PartnerBrand) — a brand is a brand in either mode. */
[data-theme="dark"] .header.locked {
    background-color: var(--ds-surface);
    color: var(--ds-ink);
    border-bottom: 1px solid var(--ds-border);
}

[data-theme="dark"] .header.locked .SecondMenuBGColor {
    background-color: var(--ds-surface-2);
}

[data-theme="dark"] .header.locked #LangSelectBtn,
[data-theme="dark"] .header.locked #ThemeToggleBtn {
    color: var(--ds-ink);
    border-color: var(--ds-border-strong);
}

/* Bootstrap's .navbar-toggler-icon is a background SVG with a hard-coded DARK stroke (the
   navbar-light variant), so on a dark header both hamburgers were invisible — present and
   clickable, just unpaintable against their own background. Drawing the bars as a MASK filled
   with currentColor makes them follow the header's foreground, whatever colour a partner
   configures. */
.header.locked .navbar-toggler {
    color: inherit;
    border-color: currentColor;
    opacity: .85;
}

.header.locked .navbar-toggler:hover { opacity: 1; }

.header.locked .navbar-toggler-icon {
    background-image: none;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect y='5' width='30' height='3' rx='1.5'/%3E%3Crect y='13.5' width='30' height='3' rx='1.5'/%3E%3Crect y='22' width='30' height='3' rx='1.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect y='5' width='30' height='3' rx='1.5'/%3E%3Crect y='13.5' width='30' height='3' rx='1.5'/%3E%3Crect y='22' width='30' height='3' rx='1.5'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* The logo was setting the header's height. Cap it so the bar stays compact. */
.header.locked .navbar-brand img {
    max-height: 40px !important;
    margin-top: 0 !important;
    width: auto;
}

@media (max-width: 767px) {
    .header.locked .navbar-brand img { max-height: 34px !important; }

    /* The header is position:fixed, so an expanded menu taller than the screen simply ran off
       the bottom with no way to reach it — and a scroll gesture went to the PAGE behind
       instead, which reads as the menu being stuck. Cap it to the viewport and let it scroll
       itself; overscroll-behavior stops the gesture chaining to the page at the ends. */
    .header.locked {
        max-height: 100vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Cart, theme and language are icon-sized controls that were each taking a full row.
       Making the list wrap lets them share one line while the real menu items stay
       full-width. They're the `p-1` items — the only thing distinguishing them in markup. */
    .header.locked #navbar1 .navbar-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .header.locked #navbar1 .navbar-nav > li { flex: 0 0 100%; }

    .header.locked #navbar1 .navbar-nav > li.p-1 {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
    }

    .header.locked #navbar1 .navbar-nav > li.p-1 > a,
    .header.locked #navbar1 .navbar-nav > li.p-1 > button {
        border-bottom: none;
        padding: 8px 10px;
    }

    /* Separate that utility row from the links above it. */
    .header.locked #navbar1 .navbar-nav > li.p-1:first-of-type {
        border-top: 1px solid rgba(128, 128, 128, .22);
        padding-top: 8px;
        margin-top: 4px;
    }

    /* The themes paint the expanded mobile menu light (.MainMenuColor is rgba(242,242,242,.9)
       and its .navbar-collapse is whitesmoke) because they assume a light header. Now that
       the menu text follows the HEADER foreground, that combination was white-on-whitesmoke.
       Letting the panels be transparent puts the menu on the header's own colour, so it reads
       as an extension of the bar and stays correct whatever a partner configures. */
    .header.locked .MainMenuColor,
    .header.locked .MainMenuColor .navbar-collapse,
    .header.locked #navbar1,
    .header.locked #navbar2 {
        background-color: transparent !important;
        box-shadow: none !important;
        border-color: transparent !important;
    }

    /* Stacked menus are a list, so left-align them and give each row a hit area and a
       divider. They were centre-aligned (inherited from the desktop nav-fill row) with no
       separation, which reads as floating text rather than a menu. */
    .header.locked #navbar1 .navbar-nav,
    .header.locked #navbar2 .navbar-nav {
        align-items: stretch;
        gap: 0;
        width: 100%;
        padding-top: 6px;
    }

    .header.locked #navbar1 .navbar-nav > li > a,
    .header.locked #navbar2 .navbar-nav > li > a,
    .header.locked #navbar1 .navbar-nav > li.dropdown > a {
        display: block;
        text-align: left;
        padding: 12px 2px;
        border-bottom: 1px solid rgba(128, 128, 128, .22);
        border-left: none;
        border-right: none;
        white-space: normal;
    }

    /* Desktop pins the first item flush to the content rail; stacked, it needs the same
       padding as its siblings. */
    .header.locked #navbar2 .navbar-nav > li:first-child > a {
        padding-left: 2px;
        margin-right: 0;
    }

    /* The active-section underline is a full-width rule when stacked, which reads as a
       divider rather than a selection — mark it on the left edge instead. */
    .header.locked #navbar2 .navbar-nav > li > a.active {
        border-bottom-color: rgba(128, 128, 128, .22);
        box-shadow: inset 3px 0 0 currentColor;
        padding-left: 10px;
    }

    /* Sub-menus (Analytics / Other links) indent under their parent instead of floating. */
    .header.locked #navbar2 .dropdown-menu,
    .header.locked #navbar1 .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        margin: 0;
        border: none;
        box-shadow: none;
        background-color: rgba(128, 128, 128, .10) !important;
    }

    /* Indent inlined sub-menu items under their parent. Their COLOUR is set in
       _PartnerBrand, and only for configured partners: an unconfigured tenant still has the
       theme's light header, where the theme's own dark sub-menu text is correct. */
    .header.locked .dropdown-menu .SubMenuItemColor,
    .header.locked .dropdown-menu .dropdown-item,
    .header.locked .dropdown-menu a {
        padding-left: 18px;
    }

    .header.locked .dropdown-menu .SubMenuItemColor:hover,
    .header.locked .dropdown-menu .dropdown-item:hover {
        background-color: rgba(128, 128, 128, .18) !important;
    }

    /* The two menus are one panel now, so mark where the section list ends and the account
       items begin rather than running them together. */
    .header.locked #navbar1 .navbar-nav { border-top: 1px solid rgba(128, 128, 128, .22); }

    .header.locked .navbar-toggler { padding: 6px 10px; }
}

/* Above the collapse breakpoint the second bar has no toggler of its own, so its collapse
   must never be hidden — Bootstrap only forces .collapse open via .navbar-expand-* on the
   nav that owns it, and this one is now driven from the bar above. */
@media (min-width: 768px) {
    .header.locked #navbar2.portal-nav-collapse { display: flex !important; }
}