/* ============================================================
   GLOBAL TOP BAR -- Brand Refresh v2, Stage 3. Added 19 Sep 2026.
   Styles menus/menu_global_top_bar.php, the one shared bar shown fixed
   to the top of every logged-in page (Body/Sleep/Mind hubs, the main
   dashboard, everywhere). Uses the --bsm2-* variables added to
   brand.css in Stage 2 and the new brand fonts. This is the FIRST
   place on the site those variables and fonts are actually applied --
   nothing else changes visually yet, per the section-by-section plan.
   ============================================================ */

#bsm-global-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000000; /* one above the old bsm-anav-bar (999999) it replaces */
    height: 60px;
    background: var(--bsm2-white);
    border-bottom: 1px solid var(--bsm2-mind-light);
    box-shadow: 0 1px 6px rgba(30, 30, 75, 0.06);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#bsm-global-topbar * {
    box-sizing: border-box;
}

#bsm-global-topbar .bsmgn-inner {
    max-width: 1400px;
    height: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 28px;
}

#bsm-global-topbar .bsmgn-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 16px;
    color: var(--bsm2-ink);
    text-decoration: none;
    white-space: nowrap;
}

/* Logo fix, 20 Sep 2026: was a plain 14px gradient dot -- a placeholder,
   not the real mark. Replaced with the actual pinwheel logo (see the
   inline SVG in menu_global_top_bar.php and that file's own header
   comment). 26px keeps it above the brand deck's own stated 20px
   legibility floor for the overlapping-circles mark. */
#bsm-global-topbar .bsmgn-logo-mark {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: inline-block;
}

#bsm-global-topbar .bsmgn-hubs {
    display: flex;
    align-items: center;
    gap: 20px;
}

#bsm-global-topbar .bsmgn-hub-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--bsm2-ink);
    text-decoration: none;
    opacity: 0.85;
}

#bsm-global-topbar .bsmgn-hub-link:hover {
    opacity: 1;
}

#bsm-global-topbar .bsmgn-hub-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

#bsm-global-topbar .bsmgn-hub-body .bsmgn-hub-dot { background: var(--bsm2-body-core); }
#bsm-global-topbar .bsmgn-hub-sleep .bsmgn-hub-dot { background: var(--bsm2-sleep-core); }
#bsm-global-topbar .bsmgn-hub-mind .bsmgn-hub-dot { background: var(--bsm2-mind-core); }

#bsm-global-topbar .bsmgn-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

#bsm-global-topbar .bsmgn-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--bsm2-ink);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    padding: 6px 4px;
    white-space: nowrap;
}

#bsm-global-topbar .bsmgn-action-icon {
    font-size: 14px;
}

#bsm-global-topbar .bsmgn-bell {
    position: relative;
    font-size: 18px;
    text-decoration: none;
    color: var(--bsm2-ink);
    line-height: 1;
    padding: 4px;
}

#bsm-global-topbar .bsmgn-bell-count {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--bsm2-attention);
    color: var(--bsm2-white);
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    font-family: 'DM Sans', sans-serif;
}

#bsm-global-topbar .bsmgn-avatar-wrap {
    position: relative;
}

#bsm-global-topbar .bsmgn-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bsm2-ink);
    color: var(--bsm2-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

#bsm-global-topbar .bsmgn-avatar-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    background: var(--bsm2-white);
    border: 1px solid var(--bsm2-mind-light);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(30, 30, 75, 0.12);
    padding: 8px;
    z-index: 1000001;
}

#bsm-global-topbar .bsmgn-avatar-wrap.bsmgn-open .bsmgn-avatar-dropdown {
    display: block;
}

#bsm-global-topbar .bsmgn-dd-info {
    padding: 8px 10px 10px;
    border-bottom: 1px solid var(--bsm2-mind-light);
    margin-bottom: 6px;
}

#bsm-global-topbar .bsmgn-dd-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--bsm2-ink);
}

#bsm-global-topbar .bsmgn-dd-email {
    font-size: 12px;
    color: var(--bsm2-ink);
    opacity: 0.6;
}

#bsm-global-topbar .bsmgn-dd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--bsm2-ink);
    text-decoration: none;
    border-radius: 6px;
    white-space: nowrap;
}

#bsm-global-topbar .bsmgn-dd-item:hover {
    background: var(--bsm2-mind-light);
}

#bsm-global-topbar .bsmgn-dd-item-icon {
    font-size: 13px;
}

#bsm-global-topbar .bsmgn-dd-logout {
    border-top: 1px solid var(--bsm2-mind-light);
    margin-top: 6px;
    padding-top: 10px;
}

#bsm-global-topbar .bsmgn-mobile-toggle {
    display: none;
    margin-left: auto;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--bsm2-ink);
}

/* Push page content below the fixed bar. body.logged-in is a standard
   WordPress body class, so this only ever applies for the same visitors
   the bar itself renders for. */
body.logged-in {
    padding-top: 60px;
}

/* WordPress's own black admin toolbar is also position:fixed;top:0 (32px
   tall, 46px under 782px wide) -- same pattern already used on this site
   for the SOS button (see "body.admin-bar .bsm-panic-trigger" in
   common.css). Without this, this bar sits partly behind/under it for
   anyone who can see that toolbar (site admins, editors). Added 19 Sep
   2026, found by checking the live page in a real admin session. */
body.admin-bar #bsm-global-topbar {
    top: 32px;
}
body.admin-bar.logged-in {
    padding-top: 92px;
}
@media (max-width: 782px) {
    body.admin-bar #bsm-global-topbar {
        top: 46px;
    }
    body.admin-bar.logged-in {
        padding-top: 106px;
    }
}

/* Chris's mockups show the old floating SOS circle gone once the new bar's
   Support item exists -- Support opens the exact same panic flow, so this
   is a like-for-like swap, not a loss of the feature. Only hidden where the
   new bar actually shows (logged-in); logged-out visitors on public pages
   still see it, since the new bar isn't there for them. The button keeps
   working via JS (.click()) even while visually hidden, so Support and any
   other page still using it (e.g. Sleep's Night Companion) are unaffected.
   Added 19 Sep 2026. */
body.logged-in .bsm-panic-trigger {
    display: none;
}

/* The old sitewide account bar (account/dashboard-admin-nav.php's
   "bsm-anav-bar") sits at this exact same position with a higher
   z-index than this bar originally had -- it was silently covering the
   new bar completely. Its Messages / avatar-dropdown / Technology
   Partners items are all now rebuilt into this bar's own bell and
   avatar dropdown (see menu_global_top_bar.php), so it's fully
   superseded, not just visually duplicated -- safe to hide everywhere
   this new bar shows. Added 19 Sep 2026, same day, once this was found. */
body.logged-in .bsm-anav-bar,
body.logged-in .bsm-anav-offset {
    display: none !important;
}

/* ---------- Fix: this bar invisible on Sleep Hub / Sleep Diary / Sleep
   Planner / My Sleep Therapies ----------
   Those pages all share one shell, #bsm-app-root (styleSleep.css), a
   full-screen overlay with z-index:2147483647 -- the maximum value a
   z-index can hold, nothing can be layered above it by out-ranking the
   number alone. This bar (z-index 1,000,000) was rendering completely
   hidden behind it. Since both now share that same maximum value, the
   one that comes later in the page's own markup wins the tie -- this bar
   is always added via wp_footer, i.e. always after the Sleep shell's own
   markup -- so matching the value (not exceeding it, which isn't
   possible) brings it to the front.
   #bsm-app-root is also position:fixed;top:0, so unlike normal page
   content it never sees the body padding-top that normally reserves room
   for this bar (see body.logged-in above) -- pushed down here instead,
   the same admin-bar-aware offset already used for the SOS button
   elsewhere on this site. Found + fixed 19 Sep 2026, while working on
   Stage 4 -- this bar was meant to show "sitewide" per Stage 3, so this
   closes that gap rather than changing scope. */
body.logged-in #bsm-global-topbar {
    z-index: 2147483647;
}

body.logged-in #bsm-app-root {
    top: 60px;
    height: calc(100vh - 60px);
}

body.admin-bar.logged-in #bsm-app-root {
    top: 92px;
    height: calc(100vh - 92px);
}

@media (max-width: 782px) {
    body.admin-bar.logged-in #bsm-app-root {
        top: 106px;
        height: calc(100vh - 106px);
    }
}

@media (max-width: 780px) {
    #bsm-global-topbar .bsmgn-hubs,
    #bsm-global-topbar .bsmgn-actions {
        display: none;
    }
    #bsm-global-topbar.bsmgn-mobile-open .bsmgn-hubs,
    #bsm-global-topbar.bsmgn-mobile-open .bsmgn-actions {
        display: flex;
    }
    #bsm-global-topbar.bsmgn-mobile-open {
        height: auto;
    }
    #bsm-global-topbar.bsmgn-mobile-open .bsmgn-inner {
        flex-wrap: wrap;
        padding-bottom: 12px;
    }
    #bsm-global-topbar.bsmgn-mobile-open .bsmgn-hubs {
        flex-basis: 100%;
        order: 3;
    }
    #bsm-global-topbar.bsmgn-mobile-open .bsmgn-actions {
        flex-basis: 100%;
        order: 4;
        margin-left: 0;
    }
    #bsm-global-topbar .bsmgn-mobile-toggle {
        display: block;
    }
}