/* ==========================================================================
 * EE header skin over the BuddyBoss theme header (markup untouched, so every
 * dropdown, counter, search and the phone menu keep working).
 *   Logged out → "Studio pills": white bar, menu in a soft pill track, current page a navy pill
 *                 (client swapped from "Floating" after seeing it live, 14 Oct 2026).
 *   Logged in  → "Ink bar": navy bar, white logo, red underline + red counters.
 * Picked by the client from 5 options on 14 Oct 2026.
 * ======================================================================== */

/* ---------- shared ---------- */
#masthead.site-header #primary-menu > li > a,
#masthead.site-header #primary-menu > li > a span { font-family: var(--ee-font, "Sora", system-ui, sans-serif); font-weight: 500; font-size: 13.5px; letter-spacing: 0; }
#masthead .header-aside .count, .bb-mobile-header .header-aside .count { background: var(--ee-red-hi, #FF0801) !important; color: #fff !important; font-weight: 700; }

/* ---------- logged out: Studio pills ---------- */
body:not(.logged-in) #masthead.site-header { background: #fff !important; border-bottom: 1px solid var(--ee-line, #E2E8F0) !important; box-shadow: none !important; }
body:not(.logged-in) #primary-navbar { display: flex; align-items: center; height: 100%; }
body:not(.logged-in) #primary-menu { display: flex; align-items: center; gap: 2px; height: auto; padding: 5px; border-radius: 999px; background: var(--ee-soft, #F4F7FB); }
body:not(.logged-in) #primary-menu > li { display: flex; align-items: center; height: auto; background: transparent !important; }
body:not(.logged-in) #primary-menu > li > a { display: flex; align-items: center; height: 40px; padding: 0 15px !important; border-radius: 999px; border: 0 !important; box-shadow: none !important; color: var(--ee-muted, #4E6077) !important; font-size: 13.5px; font-weight: 500; line-height: 1; transition: background-color .2s, color .2s; }
body:not(.logged-in) #primary-menu > li > a > span { padding: 0; background: none !important; color: inherit !important; }
body:not(.logged-in) #primary-menu > li > a:hover,
body:not(.logged-in) #primary-menu > li:hover > a { background: #fff; color: var(--ee-ink, #122B46) !important; }
body:not(.logged-in) #primary-menu > li.current-menu-item > a,
body:not(.logged-in) #primary-menu > li.current-menu-ancestor > a,
body:not(.logged-in) #primary-menu > li.current_page_item > a { background: var(--ee-ink, #122B46) !important; color: #fff !important; }
body:not(.logged-in) #primary-menu > li::after, body:not(.logged-in) #primary-menu > li::before,
body:not(.logged-in) #primary-menu > li > a::after, body:not(.logged-in) #primary-menu > li > a::before { display: none !important; content: none !important; }
body:not(.logged-in) #primary-menu > li.menu-item-has-children > a > span { display: inline-flex; align-items: center; }
body:not(.logged-in) #primary-menu > li.menu-item-has-children > a > span::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); opacity: .7; }
body:not(.logged-in) #masthead .header-aside a.button,
body:not(.logged-in) #masthead .header-aside .signup { border-radius: 999px !important; }
body:not(.logged-in) #masthead .header-aside .header-search-link:hover i,
body:not(.logged-in) #masthead .header-aside .header-cart-link:hover i,
body:not(.logged-in) #masthead .header-aside a:hover > i,
body:not(.logged-in) #masthead .header-aside a.signin-button:hover { color: var(--ee-ink, #122B46) !important; }
/* phone */
body:not(.logged-in) .bb-mobile-header-wrapper, body:not(.logged-in) .bb-mobile-header { background: #fff !important; box-shadow: none !important; }
body:not(.logged-in) .bb-mobile-header-wrapper { border-bottom: 1px solid var(--ee-line, #E2E8F0) !important; }

/* ---------- logged in: Ink bar ---------- */
body.logged-in #masthead.site-header,
body.logged-in .bb-mobile-header-wrapper,
body.logged-in .bb-mobile-header { background: var(--ee-ink, #122B46) !important; border-bottom: 0 !important; box-shadow: none !important; }
body.logged-in #masthead .bb-logo, body.logged-in .bb-mobile-logo { filter: brightness(0) invert(1); }
body.logged-in #masthead .bb-toggle-panel, body.logged-in #masthead .bb-toggle-panel i,
body.logged-in .bb-mobile-header .bb-left-panel-mobile i { color: #fff !important; }
body.logged-in #primary-menu > li > a { color: rgba(255, 255, 255, .72) !important; transition: color .2s; }
body.logged-in #primary-menu > li > a i { color: inherit !important; }
body.logged-in #primary-menu > li > a:hover,
body.logged-in #primary-menu > li.current-menu-item > a,
body.logged-in #primary-menu > li.current-menu-ancestor > a,
body.logged-in #primary-menu > li.current_page_item > a { color: #fff !important; }
body.logged-in #primary-menu > li.current-menu-item > a::after,
body.logged-in #primary-menu > li.current-menu-ancestor > a::after,
body.logged-in #primary-menu > li.current_page_item > a::after { background: var(--ee-red-hi, #FF0801) !important; border-color: var(--ee-red-hi, #FF0801) !important; }
body.logged-in #masthead #navbar-collapse .more-button, body.logged-in #masthead #navbar-collapse .more-button i { color: rgba(255, 255, 255, .8) !important; }
/* icons on the right */
body.logged-in #masthead .header-aside > .header-aside-inner > a > i,
body.logged-in #masthead .header-aside .notification-link > i,
body.logged-in #masthead .header-aside .notification-link > span > i,
body.logged-in #masthead .header-aside .notification-link,
body.logged-in #masthead .header-aside .header-search-link,
body.logged-in .bb-mobile-header .header-aside > a i,
body.logged-in .bb-mobile-header .header-aside .notification-link,
body.logged-in .bb-mobile-header .header-aside .notification-link i { color: #fff !important; }
body.logged-in #masthead .header-aside .bb-separator, body.logged-in .bb-mobile-header .bb-separator { background: rgba(255, 255, 255, .22) !important; }
body.logged-in #masthead .header-aside .count, body.logged-in .bb-mobile-header .header-aside .count { box-shadow: 0 0 0 2px var(--ee-ink, #122B46); }
body.logged-in #masthead .header-aside .notification-link:hover, body.logged-in #masthead .header-aside .header-search-link:hover { opacity: .85; }
/* avatar + name */
body.logged-in #masthead .user-wrap .user-link img.avatar { box-shadow: 0 0 0 2px var(--ee-ink, #122B46), 0 0 0 4px var(--ee-red-hi, #FF0801); }
/* only the name/arrow in the bar itself — the dropdown panel keeps dark text */
body.logged-in #masthead .user-wrap > .user-link > span, body.logged-in #masthead .user-wrap > .user-link > i { color: #fff !important; }
body.logged-in #masthead .user-wrap .sub-menu .user-name, body.logged-in #masthead .user-wrap .sub-menu .user-link,
body.logged-in #masthead .user-wrap .sub-menu .user-link span, body.logged-in #masthead .user-wrap .sub-menu .user-mention { color: var(--ee-ink, #122B46) !important; }
body.logged-in #masthead .user-wrap .sub-menu .user-mention { color: var(--ee-muted, #4E6077) !important; }
/* dropdowns stay light panels with dark text */
body.logged-in #masthead .sub-menu a, body.logged-in #masthead .notification-dropdown a,
body.logged-in #masthead .bb-sub-menu a, body.logged-in #masthead .ab-submenu a { color: var(--ee-ink, #122B46) !important; }
body.logged-in #masthead .sub-menu i, body.logged-in #masthead .notification-dropdown i { color: inherit !important; }
/* the header search bar that drops down */
body.logged-in .header-search-wrap { background: var(--ee-ink, #122B46) !important; }
body.logged-in .header-search-wrap input.search-field-top { color: var(--ee-ink, #122B46) !important; background: #fff !important; border: 1px solid transparent !important; box-shadow: none !important; }
body.logged-in .header-search-wrap input.search-field-top:focus { border-color: #fff !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25) !important; }
body.logged-in .header-search-wrap input.search-field-top::placeholder { color: var(--ee-muted, #4E6077) !important; opacity: 1; }
body.logged-in .header-search-wrap .close-search i { color: rgba(255, 255, 255, .8) !important; }

/* Hover states (BuddyBoss paints a light hover box meant for white headers) */
body.logged-in #primary-menu > li,
body.logged-in #primary-menu > li:hover { background: transparent !important; }
body.logged-in #primary-menu > li > a,
body.logged-in #primary-menu > li > a > span { background: transparent !important; transition: background-color .2s, color .2s; }
body.logged-in #primary-menu > li:hover > a,
body.logged-in #primary-menu > li > a:hover,
body.logged-in #primary-menu > li > a:focus-visible { color: #fff !important; }
/* BuddyBoss draws its hover pill as a::before (light grey) — tint it for the navy bar. */
body.logged-in #primary-menu > li > a::before { background: rgba(255, 255, 255, .12) !important; border-color: transparent !important; }
body.logged-in #primary-menu > li:hover > a i, body.logged-in #primary-menu > li:hover > a span { color: #fff !important; }
body.logged-in #masthead #navbar-collapse .more-button:hover,
body.logged-in #masthead .header-aside .notification-link:hover,
body.logged-in #masthead .header-aside .header-search-link:hover { background: transparent !important; opacity: .75; }

/* Tighter menu (client: "smaller, less space in between") */
#masthead.site-header #primary-menu > li > a, #masthead.site-header #primary-menu > li > a span { font-size: 13px !important; }
body:not(.logged-in) #primary-menu { gap: 0; padding: 4px; }
body:not(.logged-in) #primary-menu > li > a { height: 34px; padding: 0 11px !important; }
body.logged-in #primary-menu > li > a { padding-left: 9px !important; padding-right: 9px !important; }
body.logged-in #primary-menu > li > a i { margin-right: 5px !important; }
body.logged-in #primary-menu > li.menu-item-has-children > a { padding-right: 24px !important; } /* BuddyBoss pins the arrow (li::after) 5px from the right */
/* Logged in: white-on-navy reads heavier — smaller menu icons so it matches the logged-out menu. */
body.logged-in #primary-menu > li > a i, body.logged-in #primary-menu > li > a i::before { font-size: 16px !important; }
body.logged-in #primary-menu > li > a span { font-weight: 500 !important; -webkit-font-smoothing: antialiased; }

/* Ink bar: no red underline (client) — the current page shows the soft pill instead. */
body.logged-in #primary-menu > li > a::after,
body.logged-in #primary-menu > li.current-menu-item > a::after,
body.logged-in #primary-menu > li.current-menu-ancestor > a::after,
body.logged-in #primary-menu > li.current_page_item > a::after { display: none !important; content: none !important; }
body.logged-in #primary-menu > li.current-menu-item > a::before,
body.logged-in #primary-menu > li.current-menu-ancestor > a::before,
body.logged-in #primary-menu > li.current_page_item > a::before { opacity: 1 !important; visibility: visible !important; transform: none !important; }
body.logged-in #primary-menu > li > a { border-bottom-color: transparent !important; border-bottom-width: 0 !important; }

/* ---------- Side panel (BuddyPanel) — matches the Ink bar ---------- */
body.logged-in .buddypanel { background: #fff !important; border-right: 1px solid var(--ee-line, #E2E8F0) !important; box-shadow: none !important; }
body.logged-in .buddypanel .panel-head .bb-toggle-panel { border-radius: 12px; background: var(--ee-soft, #F4F7FB) !important; color: var(--ee-ink, #122B46) !important; }
body.logged-in .buddypanel .side-panel-menu > li > a.bb-menu-item {
	display: flex; align-items: center; gap: 12px; margin: 2px 10px; padding: 10px 12px !important; border-radius: 12px;
	font-family: var(--ee-font, "Sora", system-ui, sans-serif); font-size: 14px; font-weight: 500; color: var(--ee-muted, #4E6077) !important; background: transparent !important;
	transition: background-color .2s, color .2s;
}
body.logged-in .buddypanel .side-panel-menu > li > a.bb-menu-item i { font-size: 20px !important; color: #8A97A8 !important; transition: color .2s; }
body.logged-in .buddypanel .side-panel-menu > li > a.bb-menu-item:hover { background: var(--ee-soft, #F4F7FB) !important; color: var(--ee-ink, #122B46) !important; }
body.logged-in .buddypanel .side-panel-menu > li > a.bb-menu-item:hover i { color: var(--ee-ink, #122B46) !important; }
/* current page: navy pill */
body.logged-in .buddypanel .side-panel-menu > li.current-menu-item > a.bb-menu-item,
body.logged-in .buddypanel .side-panel-menu > li.current_page_item > a.bb-menu-item,
body.logged-in .buddypanel .side-panel-menu > li.selected > a.bb-menu-item { background: var(--ee-ink, #122B46) !important; color: #fff !important; box-shadow: 0 10px 22px -14px rgba(18, 43, 70, .7); }
body.logged-in .buddypanel .side-panel-menu > li.current-menu-item > a.bb-menu-item i,
body.logged-in .buddypanel .side-panel-menu > li.current_page_item > a.bb-menu-item i,
body.logged-in .buddypanel .side-panel-menu > li.selected > a.bb-menu-item i { color: #fff !important; }
/* counters */
body.logged-in .buddypanel .side-panel-menu .count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ee-red-hi, #FF0801) !important; color: #fff !important; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
/* "Quick Links" section heading */
body.logged-in .buddypanel .side-panel-menu > li.bb-menu-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ee-line, #E2E8F0); }
body.logged-in .buddypanel .side-panel-menu > li.bb-menu-section > a.bb-menu-item { padding: 4px 12px !important; font-size: 11px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8A97A8 !important; pointer-events: none; background: none !important; }
body.logged-in .buddypanel .side-panel-menu > li.bb-menu-section > a.bb-menu-item i { display: none !important; }
/* Account settings + log out at the bottom */
body.logged-in .buddypanel .side-panel-menu > li.bp-menu-item-at-bottom:not(.bp-menu-item-at-bottom ~ .bp-menu-item-at-bottom) { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ee-line, #E2E8F0); }
body.logged-in .buddypanel .side-panel-menu > li.bp-logout-nav > a.bb-menu-item:hover { background: #FDECEC !important; color: #A11B1B !important; }
body.logged-in .buddypanel .side-panel-menu > li.bp-logout-nav > a.bb-menu-item:hover i { color: #A11B1B !important; }

/* Phone / tablet slide-out menu: same navy pill for the open page (BuddyBoss paints it red) */
body.logged-in .bb-mobile-panel-wrapper .side-panel-menu > li > a { border-radius: 12px !important; }
body.logged-in .bb-mobile-panel-wrapper .side-panel-menu > li.current-menu-item > a,
body.logged-in .bb-mobile-panel-wrapper .side-panel-menu > li.current_page_item > a,
body.logged-in .bb-mobile-panel-wrapper .side-panel-menu > li.selected > a { background: var(--ee-ink, #122B46) !important; color: #fff !important; }
body.logged-in .bb-mobile-panel-wrapper .side-panel-menu > li.current-menu-item > a i,
body.logged-in .bb-mobile-panel-wrapper .side-panel-menu > li.current_page_item > a i,
body.logged-in .bb-mobile-panel-wrapper .side-panel-menu > li.selected > a i { color: #fff !important; }
/* labels use the full width (BuddyBoss gives the label a fixed width and cuts it off) */
body.logged-in .buddypanel .side-panel-menu > li > a.bb-menu-item { margin: 2px 8px; gap: 10px; }
body.logged-in .buddypanel .side-panel-menu > li > a.bb-menu-item > span:not(.count) { flex: 1 1 auto; width: auto !important; max-width: none !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* collapsed rail (panel closed): square icon buttons, centred */
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-menu > li > a.bb-menu-item { justify-content: center; width: 44px; height: 44px; margin: 3px auto; padding: 0 !important; gap: 0; }
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-menu > li > a.bb-menu-item > span:not(.count) { display: none; }
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-menu .count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; padding: 0 4px; }
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-menu > li { position: relative; }
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-menu > li.bb-menu-section { margin: 10px 14px 6px; padding-top: 0; }
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-menu > li.bb-menu-section > a.bb-menu-item { display: none; }
/* BuddyBoss gives each icon a 48px box and offsets the link — use the panel's full width instead */
body.logged-in .buddypanel .side-panel-menu > li { margin-left: 0 !important; width: auto !important; }
body.logged-in .buddypanel .side-panel-menu > li > a.bb-menu-item { position: relative !important; left: auto !important; width: auto; }
body.logged-in .buddypanel .side-panel-menu > li > a.bb-menu-item > i { width: 22px !important; min-width: 22px; margin: 0 !important; text-align: center; opacity: 1 !important; }
body.logged-in .buddypanel .side-panel-menu > li > a.bb-menu-item > span:not(.count) { margin-left: 0 !important; }
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-menu > li > a.bb-menu-item { width: 44px !important; }
body.logged-in.buddypanel-open .buddypanel .side-panel-inner,
body.logged-in.buddypanel-open .buddypanel .side-panel-menu-container,
body.logged-in.buddypanel-open .buddypanel #buddypanel-menu { width: 100% !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; }
body.logged-in.buddypanel-open .buddypanel .side-panel-menu > li > a.bb-menu-item { margin: 2px 10px; }
/* open panel: counter sits on the icon's corner, so full labels fit */
body.logged-in .buddypanel .side-panel-menu > li > a.bb-menu-item { padding: 9px 10px !important; font-size: 13.5px; }
body.logged-in .buddypanel .side-panel-menu > li > a.bb-menu-item > i { position: relative; }
body.logged-in.buddypanel-open .buddypanel .side-panel-menu .count { position: absolute; left: 22px; top: 3px; margin: 0; min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; padding: 0 4px; }

/* Bug fixes (14 Oct): pill geometry on the ink bar, collapsed-rail hover + dividers */
body.logged-in #primary-menu > li > a::before { position: absolute !important; left: 0 !important; right: 0 !important; top: 50% !important; bottom: auto !important; height: 38px !important; width: auto !important; margin: 0 !important; border-radius: 10px !important; transform: translateY(-50%) !important; z-index: -1; }
body.logged-in #primary-menu > li.current-menu-item > a::before,
body.logged-in #primary-menu > li.current-menu-ancestor > a::before,
body.logged-in #primary-menu > li.current_page_item > a::before { transform: translateY(-50%) !important; }
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-menu > li > a.bb-menu-item > span:not(.count),
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-menu > li > a.bb-menu-item:hover > span:not(.count) { display: none !important; }
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-menu > li.bp-logout-nav > a.bb-menu-item:hover { background: #FDECEC !important; width: 44px !important; }
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-menu > li.bb-menu-section,
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-menu > li.bp-menu-item-at-bottom:not(.bp-menu-item-at-bottom ~ .bp-menu-item-at-bottom) { margin: 10px 12px 6px !important; padding-top: 6px !important; border-top: 1px solid var(--ee-line, #E2E8F0) !important; }
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-menu > li.bp-menu-item-at-bottom:not(.bp-menu-item-at-bottom ~ .bp-menu-item-at-bottom) > a.bb-menu-item { margin-top: 3px; }
/* collapsed rail: BuddyBoss's hover label (a::after) pops out beside the icon instead of being clipped */
body.logged-in:not(.buddypanel-open) .buddypanel,
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-inner,
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-menu-container,
body.logged-in:not(.buddypanel-open) .buddypanel #buddypanel-menu { overflow: visible !important; }
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-menu > li > a.bb-menu-item::after { left: calc(100% + 12px) !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; padding: 7px 12px !important; border-radius: 10px !important; background: var(--ee-ink, #122B46) !important; color: #fff !important; font: 600 13px var(--ee-font, "Sora", sans-serif) !important; white-space: nowrap !important; width: auto !important; box-shadow: 0 10px 24px -12px rgba(18, 43, 70, .6); z-index: 50; }
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-menu > li > a.bb-menu-item::after { margin: 0 !important; bottom: auto !important; }
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-menu > li.bb-menu-section { display: block !important; width: auto !important; height: 0 !important; margin: 10px 10px 6px !important; padding: 0 !important; border-top: 1px solid var(--ee-line, #E2E8F0) !important; }
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-menu > li.bp-menu-item-at-bottom:not(.bp-menu-item-at-bottom ~ .bp-menu-item-at-bottom) { margin: 10px 10px 0 !important; }
/* collapsed rail: bottom divider must not narrow the Settings row (keeps icons in one column) */
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-menu > li.bp-menu-item-at-bottom:not(.bp-menu-item-at-bottom ~ .bp-menu-item-at-bottom) { margin: 10px 0 0 !important; border-top: 0 !important; position: relative; }
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-menu > li.bp-menu-item-at-bottom:not(.bp-menu-item-at-bottom ~ .bp-menu-item-at-bottom)::before { content: ""; position: absolute; top: 0; left: 10px; right: 10px; border-top: 1px solid var(--ee-line, #E2E8F0); }
body.logged-in:not(.buddypanel-open) .buddypanel .side-panel-menu > li.bb-menu-section { margin-left: 10px !important; margin-right: 10px !important; }

/* Logged-in app pages (dashboard, classes, groups, messages, profile, settings, homework): soft page ground #F4F7FB, white cards on top */
body.logged-in.buddypress,
body.logged-in.sky-md-page,
body.logged-in:has(.sky-hw-page) { background-color: #F4F7FB !important; }
body.logged-in.sky-md-page .sky-md:not(.sky-cp),
body.logged-in:has(.sky-hw-page) .sky-md { background-color: #F4F7FB; }