/* The top bar's styles (urbi/navigation.php), linked by the shared head after the overlay. */
/* =====================================================================
   ALL rules are scoped to #esNav / #esContractBar so they cannot leak
   onto — or be overridden by — any other .navbar in the app.
   ===================================================================== */

/* ── Bar ───────────────────────────────────────────────────────────── */
#esNav.navbar {
    background-color: var(--es-blue-800, #4265AF) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 52px;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    font-family: 'Poppins', 'Poppins Fallback', system-ui, sans-serif;
}
#esNav .navbar-collapse { border-color: rgba(255,255,255,.10); box-shadow: none; }

/* Overflow containment — let the flex row shrink instead of stretching
   the document. (Keeps the page from scrolling horizontally / clipping
   the left of the strips below the bar.) */
#esNav > .container-fluid { min-width: 0; }
#esNav .navbar-collapse   { min-width: 0; }

/* ── Brand (logged-out: standalone white eCore panel) ───────────────── */
#esNav .navbar-brand {
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    margin: 0;
    background-color: var(--es-white, #FFFFFF);      /* white brand panel */
    border: 1px solid var(--es-grey-300, #C7CCD4);   /* fallback */
    border: 1px solid color-mix(in srgb, var(--es-blue-900, #293F6D) 55%, #fff);  /* soft navy frame */
    box-shadow: none;
}
#esNav .es-wordmark {
    color: var(--es-blue-800, #4265AF);     /* e/u/b in nav-bar blue */
    font-weight: 600;
    font-size: 25px;
    letter-spacing: -.01em;
    vertical-align: middle;
}
#esNav .es-wordmark .es-orange { color: var(--es-orange-500, #FA650D); }

/* ── V8: brand pill (Home + eCore wordmark + eSuite-apps dropdown) ─────
   The Home shortcut and the eCore wordmark now live as the first pill in the
   nav track: the left portion links to Home, the caret opens the eSuite
   product family. A white chip so the blue-800 wordmark stays legible on the
   blue bar (blue-on-blue would vanish). */
#esNav #navBar > li.es-brand-pill { display: flex; align-items: center; margin-right: 4px; }
#esNav #navBar > li.es-brand-pill > a.es-brand-link,
#esNav #navBar > li.es-brand-pill > a.es-brand-caret {
    height: 36px;
    display: flex;
    align-items: center;
    background-color: var(--es-grey-50, #F1F2F7) !important;                                       /* fallback */
    background-color: color-mix(in srgb, var(--es-grey-50, #F1F2F7) 55%, var(--es-grey-100, #E1E6EB) 45%) !important;   /* resting: greyer step toward grey-100 when not in Home */
    color: var(--es-blue-800, #4265AF) !important;
    text-decoration: none;
    border-bottom: none !important;
    box-shadow: none !important;
    transition: opacity .14s ease, color .14s ease, background-color .14s ease;
}
/* in the Home area the pill lifts to pure white ("in use") */
#esNav #navBar > li.es-brand-pill.active > a.es-brand-link,
#esNav #navBar > li.es-brand-pill.active > a.es-brand-caret {
    background-color: var(--es-white, #FFFFFF) !important;
}
#esNav #navBar > li.es-brand-pill > a.es-brand-link {
    gap: 8px;
    padding: 0 8px 0 13px;
    border-radius: 999px 0 0 999px;                       /* left half of the pill */
}
#esNav #navBar > li.es-brand-pill > a.es-brand-caret {
    padding: 0 12px 0 9px;
    border-radius: 0 999px 999px 0;                       /* right half of the pill */
    border-left: 1px solid var(--es-grey-100, #E1E6EB);   /* hairline split */
}
#esNav #navBar > li.es-brand-pill > a.es-brand-link:hover,
#esNav #navBar > li.es-brand-pill > a.es-brand-link:focus,
#esNav #navBar > li.es-brand-pill > a.es-brand-caret:hover,
#esNav #navBar > li.es-brand-pill > a.es-brand-caret:focus,
#esNav #navBar > li.es-brand-pill.show > a.es-brand-caret {
    background-color: var(--es-grey-50, #F1F2F7) !important;                                       /* fallback */
    background-color: color-mix(in srgb, var(--es-grey-50, #F1F2F7) 55%, var(--es-grey-100, #E1E6EB) 45%) !important;   /* resting hue holds; feedback via opacity */
    opacity: .86;
}
/* in Home the pill is white — keep it white on hover too */
#esNav #navBar > li.es-brand-pill.active > a.es-brand-link:hover,
#esNav #navBar > li.es-brand-pill.active > a.es-brand-link:focus,
#esNav #navBar > li.es-brand-pill.active > a.es-brand-caret:hover,
#esNav #navBar > li.es-brand-pill.active > a.es-brand-caret:focus,
#esNav #navBar > li.es-brand-pill.active.show > a.es-brand-caret {
    background-color: var(--es-white, #FFFFFF) !important;
    opacity: .86;
}
#esNav .es-brand-home {
    font-size: 18px;
    color: var(--es-blue-800, #4265AF);                   /* navy by default */
    transition: color .14s ease;
}
#esNav #navBar > li.es-brand-pill > a.es-brand-link:hover .es-brand-home {
    color: var(--es-blue-900, #293F6D);                   /* dark navy on hover */
}
#esNav .es-brand-caret .es-caret { margin-left: 0; opacity: .75; font-size: 10px; }
/* eSuite-apps dropdown: white surface, navy labels, orange product letters */
#esNav .dropdown-menu.es-brand-menu {
    background-color: var(--es-white, #FFFFFF);
    border: 1px solid var(--es-grey-100, #E1E6EB);        /* hairline frame on white */
}
#esNav .es-brand-menu > li > a.dropdown-item { color: var(--es-blue-900, #293F6D) !important; }   /* navy labels */
#esNav .es-brand-menu > li > a.dropdown-item:hover,
#esNav .es-brand-menu > li > a.dropdown-item:focus {
    background-color: var(--es-grey-50, #F1F2F7) !important;   /* light hover highlight */
    color: var(--es-blue-900, #293F6D) !important;
}
#esNav .es-brand-menu .es-orange { color: var(--es-orange-500, #FA650D) !important; }
#esNav .es-brand-menu sup.es-orange { font-size: .62em; font-weight: 600; }

/* suppress Bootstrap's auto-generated caret — we use the explicit FA icon instead */
#esNav .navbar-nav > li > .dropdown-toggle::after { display: none; }

/* ── Primary nav links (flat; an area's toggle is a button) ────────── */
#esNav .navbar-nav { margin: 0; align-items: stretch; }
#esNav .navbar-nav > li > a,
#esNav .navbar-nav > li > button.nav-link {
    display: flex;
    align-items: center;
    height: 52px;
    padding: 0 11px;                             /* B: thinner (was 0 14px) */
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;                         /* FIX: no wrapping */
    color: rgba(255,255,255,.90) !important;   /* .82 was ~4.4:1 on blue-800; .90 clears AA */
    border-bottom: 3px solid transparent;
    transition: color .14s ease, background-color .14s ease;
}
#esNav .navbar-nav > li > a:hover,
#esNav .navbar-nav > li > a:focus,
#esNav .navbar-nav > li > button.nav-link:hover,
#esNav .navbar-nav > li > button.nav-link:focus,
#esNav .navbar-nav .show > .nav-link,
#esNav .navbar-nav .show > .nav-link:hover,
#esNav .navbar-nav .show > .nav-link:focus {
    color: #fff !important;
    background-color: rgba(255,255,255,.12) !important;
}
#esNav .navbar-nav > .active > .nav-link,
#esNav .navbar-nav > .active > .nav-link:hover,
#esNav .navbar-nav > .active > .nav-link:focus {
    color: #fff !important;
    font-weight: 600;
    background-color: transparent !important;
}
#esNav .navbar-nav > li > .nav-link .nav-text,
#esNav .navbar-nav > li > .nav-link .es-caret,
#esNav .navbar-nav > li > .nav-link img { vertical-align: middle; }
#esNav .es-caret { font-size: 9px; opacity: .7; margin-left: 3px; transition: transform var(--es-dur) var(--es-ease); }
#esNav .nav-link[aria-expanded="true"] .es-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { #esNav .es-caret { transition: none; } }

/* ── Dropdown menus ────────────────────────────────────────────────── */
#esNav .dropdown-menu {
    background-color: var(--es-blue-900, #293F6D);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    box-shadow: var(--es-shadow-md, 0 8px 24px rgba(10,26,47,.22));
    margin-top: 0;
    padding: 6px;
    min-width: 200px;
    max-height: 80vh;                            /* C: tall "More" menu scrolls */
    overflow-y: auto;
}
#esNav .dropdown-menu > li > a,
#esNav .dropdown-menu > li > .dropdown-item {
    color: rgba(255,255,255,.85) !important;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: nowrap;
}
#esNav .dropdown-menu > li > a:hover,
#esNav .dropdown-menu > li > a:focus,
#esNav .dropdown-menu > li > .dropdown-item:hover,
#esNav .dropdown-menu > li > .dropdown-item:focus {
    background-color: rgba(255,255,255,.12) !important;
    color: #fff !important;
}
#esNav .dropdown-menu > .active > a,
#esNav .dropdown-menu .dropdown-item.active {
    background-color: var(--es-aqua-700, #0673A1) !important;   /* aqua-500 gave white text only ~2.5:1 */
    color: #fff !important;
}
#esNav .dropdown-menu > li.disabled > a,
#esNav .dropdown-menu .dropdown-item.disabled { color: rgba(255,255,255,.38) !important; }
#esNav .dropdown-menu .divider,
#esNav .dropdown-menu .dropdown-divider { background-color: rgba(255,255,255,.10); border: none; height: 1px; margin: 6px 4px; }

/* C: section headers inside the consolidated "More" menu */
#esNav .dropdown-menu .dropdown-header {
    color: rgba(255,255,255,.68);   /* .5 was ~3.9:1 on blue-900; .68 clears AA for the small header */
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 6px 12px 2px;
    margin: 0;
}

/* ── Right-side links / icons ──────────────────────────────────────── */
#esNav #navRight { margin: 0; align-items: center; flex-shrink: 0; }   /* FIX: centre + never shrink utilities */
#esNav #navRight > li > a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 10px;                                    /* B: tighter (was 9px 12px) */
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;                                  /* FIX: no wrapping */
    border-radius: 8px;
    color: rgba(255,255,255,.90) !important;   /* .82 was ~4.4:1 on blue-800; .90 clears AA */
}
#esNav #navRight > li > a:hover,
#esNav #navRight > li > a:focus,
#esNav #navRight > .active > a {
    color: #fff !important;
    background-color: rgba(255,255,255,.12) !important;
}
#esNav #navRight .es-icon { font-size: 15px; vertical-align: middle; }
#esNav #navRight .nav-text { vertical-align: middle; }

/* FIX: utility icons become true 34×34 rounded buttons (≥ lg, when the
        bar is expanded). In the collapsed mobile menu they fall back to
        normal full-width links with their text labels. */
@media (min-width: 992px) {
    #esNav #navRight > li > a.es-iconbtn {
        width: 34px;
        height: 34px;
        padding: 0;
        justify-content: center;
        border-radius: 8px;
    }

    /* The area menus: pills in a recessed track, centred in the bar; the page's area (or Home's eCore pill) rises out of the track as a
       white tab (below) that meets the ribbon at the bar's bottom edge */
    #esNav > .container-fluid,
    #esNav .navbar-collapse { align-self: stretch; align-items: stretch; min-height: 52px; }
    #esNav #navRight,
    #esNav .es-user-pill { align-self: center; }
    /* The right-hand groups 24px apart; bookmark and Shortcuts are one group, 6px apart */
    #esNav #navRight > li + li { margin-left: 24px; }
    #esNav #navRight > #navBookmarks + #navShortcuts { margin-left: 6px; }
    #esNav .es-user-pill { margin-left: 24px; }
    #esNav #navBar {
        align-self: center;
        align-items: center;
        margin-left: 8px;
        padding: 4px;
        background: rgba(0,0,0,.22);            /* recessed well */
        border-radius: 999px;
        box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
    }
    #esNav #navBar > li > .nav-link {
        height: 36px;
        padding: 0 15px;
        border-radius: 999px;
        font-size: 13px;
        border-bottom: none !important;
    }
}

/* ── The current area's tab ────────────────────────────────────────── */
#esNav #navBar > li.es-nav-current > .es-nav-tab,
#esNav #navBar > li.es-nav-current > .es-nav-tab:hover,
#esNav #navBar > li.es-nav-current > .es-nav-tab:focus,
#esNav #navBar > li.es-nav-current.show > .es-nav-tab {
    color: var(--navy-800) !important;
    background-color: var(--es-white) !important;
    font-weight: 600;
}
#esNav #navBar > li.es-nav-current > .es-nav-tab .es-caret { opacity: 1; }
@media (min-width: 992px) {
    /* Out of the track: from its top, 8px past its bottom padding and edge, down to the bar's bottom edge */
    #esNav #navBar > li.es-nav-current,
    #esNav #navBar > li.es-brand-pill.active { align-self: flex-start; margin-bottom: -8px; position: relative; z-index: 1; }
    #esNav #navBar > li.es-nav-current > .es-nav-tab {
        position: relative;
        height: 44px;
        padding: 0 16px 8px;
        border-radius: 18px 18px 0 0;
    }
    /* Home: the eCore pill is the tab */
    #esNav #navBar > li.es-brand-pill.active > a.es-brand-link,
    #esNav #navBar > li.es-brand-pill.active > a.es-brand-caret { height: 44px; padding-bottom: 8px; }
    #esNav #navBar > li.es-brand-pill.active > a.es-brand-link { border-radius: 18px 0 0 0; }
    #esNav #navBar > li.es-brand-pill.active > a.es-brand-caret { border-radius: 0 18px 0 0; }
    #esNav #navBar > li.es-brand-pill.active::before,
    #esNav #navBar > li.es-brand-pill.active::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 12px;
        height: 12px;
        pointer-events: none;
    }
    #esNav #navBar > li.es-brand-pill.active::before { left: -12px; background: radial-gradient(circle at 0 0, transparent 12px, var(--es-white) 12.5px); }
    #esNav #navBar > li.es-brand-pill.active::after { right: -12px; background: radial-gradient(circle at 100% 0, transparent 12px, var(--es-white) 12.5px); }
    #esNav #navBar > li.es-nav-current > .es-nav-tab::before,
    #esNav #navBar > li.es-nav-current > .es-nav-tab::after {
        content: "";
        display: block;
        margin: 0;
        border: 0;
        position: absolute;
        bottom: 0;
        width: 12px;
        height: 12px;
        pointer-events: none;
    }
    #esNav #navBar > li.es-nav-current > .es-nav-tab::before { left: -12px; background: radial-gradient(circle at 0 0, transparent 12px, var(--es-white) 12.5px); }
    #esNav #navBar > li.es-nav-current > .es-nav-tab::after { right: -12px; background: radial-gradient(circle at 100% 0, transparent 12px, var(--es-white) 12.5px); }
}

/* ── The current area's tooltip ("Learners › Employers") ───────────── */
#esNav .es-nav-tip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--navy-900);
    color: var(--es-white);
    box-shadow: var(--shadow-md);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}
#esNav .es-nav-tip[hidden] { display: none; }

/* ── The current area's menu, and every area menu: white under its item, the page ticked ── */
#esNav #navBar .dropdown-menu {
    min-width: 190px;
    margin-top: 0;
    padding: 4px 8px 8px;
    border: 0;
    border-top: 1px solid var(--grey-100);
    border-radius: 0 10px 10px 10px;
    background-color: var(--es-white);
    box-shadow: var(--shadow-md);
}
#esNav #navBar .dropdown-menu-end { border-radius: 10px 0 10px 10px; }
#esNav #navBar .dropdown-menu.show { animation: es-nav-menu-in var(--es-dur) var(--es-ease); }
@keyframes es-nav-menu-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #esNav #navBar .dropdown-menu.show { animation: none; } }
#esNav #navBar .dropdown-menu > li > .dropdown-item {
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--grey-700) !important;
    font-size: 13px;
    font-weight: 500;
}
#esNav #navBar .dropdown-menu > li > .dropdown-item:hover,
#esNav #navBar .dropdown-menu > li > .dropdown-item:focus {
    background-color: var(--blue-50) !important;
    color: var(--grey-700) !important;
}
#esNav #navBar .dropdown-menu > li > .dropdown-item.active,
#esNav #navBar .dropdown-menu > li > .dropdown-item[aria-current="page"] {
    background-color: var(--blue-50) !important;
    color: var(--navy-900) !important;
    font-weight: 600;
}
/* Only the page's own item is a row, its tick at the right; the others are plain lines (the eCore menu's names mix text and spans) */
#esNav #navBar .dropdown-menu > li > .dropdown-item[aria-current="page"] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#esNav #navBar .dropdown-menu .es-nav-tick { font-size: 11px; color: var(--navy-900); }
#esNav #navBar .dropdown-menu .dropdown-divider { background-color: var(--grey-100); margin: 4px; }
#esNav #navBar .dropdown-menu .dropdown-header { color: var(--grey-700); }

/* ── Mobile toggle ───────────────────────────────────────────────── */
#esNav .navbar-toggler { border: none; padding: 8px; align-self: center; }
/* Collapsed, the user pill (the bell and the user menu) stays in the bar, before the menu button. */
@media (max-width: 991.98px) {
    #esNav .es-user-pill    { order: 1; margin-left: auto; margin-right: var(--space-2); }
    #esNav .navbar-toggler  { order: 2; }
    #esNav .navbar-collapse { order: 3; }
}
#esNav .navbar-toggler .navbar-toggler-icon { filter: brightness(0) invert(1); }
#esNav .navbar-toggler:hover,
#esNav .navbar-toggler:focus { background-color: rgba(255,255,255,.15); }
#esNav .navbar-toggler:focus:not(:focus-visible) { box-shadow: none; }

/* ── Provider / contract pill (in the top bar, between account & log out) ── */
#esNav .es-cb-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 300px;
    padding: 4px 12px;
    border-radius: 999px;
    background: transparent;
    color: rgba(255,255,255,.90);
    font-family: 'Poppins', 'Poppins Fallback', system-ui, sans-serif;
    font-size: 9px;                 /* 25% smaller than the 12px base */
    line-height: 1.25;
    white-space: nowrap;
    text-decoration: none;
    transition: color .14s ease;
}
#esNav .es-cb-pill:hover,
#esNav .es-cb-pill:focus-visible { color: #fff; }
#esNav .es-cb-pill-icon { color: #fff; flex-shrink: 0; font-size: 13px; }
/* Stack provider (line 1) over contract (line 2) */
#esNav .es-cb-pill-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#esNav .es-cb-pill-provider {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
#esNav .es-cb-pill-contract {
    color: rgba(255,255,255,.85);   /* .65 was ~3.4:1 on blue-800; .85 clears AA (hierarchy kept via weight) */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
#esNav .es-cb-pill-contract.es-ci-none { font-style: italic; }
#esNav .es-cb-pill-change {
    flex-shrink: 0;
    margin-left: 6px;
    color: #fff;
    font-size: 12px;
}
#esNav .es-cb-switcher { max-height: 70vh; overflow-y: auto; }

/* ── Priority-overflow nav ─────────────────────────────────────────────
   A top-level menu that has been folded into the "More" dropdown by the
   overflow script below. Only ever set at ≥ lg (the script no-ops on the
   collapsed mobile menu, so the hamburger always shows every item). */
#esNav #navBar > li.es-nav-hidden { display: none !important; }

/* ── The unfolded menu at phone width ────────────────────────────────────
   The desktop's recessed track as two wells (the areas; bookmarks, shortcuts and the switchers), every row full width, 44px and
   left-aligned, so the eye runs down one edge. */
@media (max-width: 991.98px) {
    #esNav .navbar-collapse { padding: 4px 0 12px; }
    #esNav #navBar,
    #esNav #navRight {
        align-items: stretch;
        gap: 2px;
        margin: 8px 0 0;
        padding: 6px;
        background: rgba(0,0,0,.22);
        border-radius: 14px;
        box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
    }
    #esNav #navBar > li > .nav-link,
    #esNav #navRight > li > a,
    #esNav #navRight .es-bookmark-btn {
        width: 100%;
        height: 44px;
        padding: 0 14px;
        justify-content: flex-start;
        border-radius: 10px;
        text-align: left;
    }
    #esNav #navBar > li.es-brand-pill { align-self: flex-start; margin: 0 0 4px; }
    #esNav #navBar > li.es-brand-pill > a.es-brand-link,
    #esNav #navBar > li.es-brand-pill > a.es-brand-caret { height: 40px; }
    #esNav #navRight .es-bookmark { width: 100%; }
    #esNav #navRight .es-bookmark-btn { gap: 8px; }
    #esNav #navRight .es-cb-pill { max-width: none; font-size: 12px; }
}