/* ==========================================================================
 * wbs-nav.css — site-wide top menu for mywbs.com (2026-09-02).
 *
 * Port of pacificair.com's navigation284.css submenu system (owner request:
 * "if need submenu implement the one we have implemented for PacificAir"),
 * recolored to the MyWBS dark palette. Same structure and mechanics:
 *   nav.navbar > ul > li > a  [+ ul.dropdown > li.has-submenu > a + ul.submenu]
 *   - dropdowns open on :hover with the slide-down animation
 *   - li.has-compact panels anchor under their item (PacificAir's
 *     .dropdown-compact hook, implemented); plain li are position:static so
 *     a full-width mega panel is available the day a menu grows big enough
 *   - aria-current wash + inset underline marks the current section
 *   - CSS dot separators between top-level items (never read by screen
 *     readers, vanish in burger mode)
 *   - <=768px burger menu; dropdowns suppressed there, so every top-level
 *     item must link to a real page
 *
 * Loaded by EVERY page (member pages, landing, account, terms, privacy).
 * The markup is rendered into <header id="wbs-nav"> by wbs.js — member pages
 * via WBS.boot(), standalone pages via WBS.topmenu().
 * ========================================================================== */

/* --- Section colour (owner request 2026-09-02: "so we know where we
   are"). wbs.js stamps html[data-section]; the bar takes that section's
   colour, the rail card (wbs.css) its tint, and the current item becomes a
   white chip. Navy stays the default and the brand. Keep every colour dark
   enough for white text: these were checked against #ffffff at >= 7:1. --- */
:root { --sec-bar: #0B2465; --sec-line: #1B3A8F; --sec-rail: #151C31; }
html[data-section="hangout"] { --sec-bar: #0E4F4A; --sec-line: #1A6B64; --sec-rail: #15272A; }
html[data-section="corners"] { --sec-bar: #5A1E4E; --sec-line: #7A2E6A; --sec-rail: #281B2B; }
/* "me" (account, help, search, invites, activity) was brown; navy since
   2026-09-03 (owner). */
html[data-section="mod"]     { --sec-bar: #6B1010; --sec-line: #8A1F1F; --sec-rail: #2D171C; }

.navbar {
    /* Deep navy sampled from the owner's reference screenshot (2026-09-02):
       #0B2465 bar, white foreground — the dropdown panels stay dark, the
       same pairing pacificair uses on its colored bar. */
    background: var(--sec-bar, #0B2465);
    border-bottom: 1px solid var(--sec-line, #1B3A8F);
    position: sticky;           /* unlike pacificair: a social feed scrolls a
                                   lot, so the menu stays reachable */
    top: 0;
    z-index: 9999;
    width: 100%;
}

.navbar > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1760px;          /* aligns with the .shell content grid */
    list-style: none;
}

.navbar > ul > li {
    /* static, so a plain dropdown can span the full bar (mega panel);
       li.has-compact overrides to relative for anchored panels. */
    position: static;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}
.navbar > ul > li.has-compact { position: relative; }

.navbar a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 15px;
    color: #ffffff;
    text-decoration: none;
    font-size: .98rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    transition: color .15s ease, background .15s ease;
}

.navbar > ul > li:hover > a,
.navbar > ul > li > a:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

/* Brand: logo mark + wordmark, slightly larger than the items. */
.navbar a.nav-brand {
    font-size: 1.12rem;
    font-weight: 700;
    color: #ffffff;
    padding: 9px 15px 9px 0;
}
.navbar a.nav-brand .accent { color: #A5B4FC; }
.navbar a.nav-brand svg { width: 27px; height: 27px; }

/* Right-side cluster (bell / account / sign-in) — pushed to the far edge.
   Only the FIRST right-side item carries the auto margin; siblings sit
   beside it (two autos would split the free space between them). */
.navbar > ul > li.nav-right { margin-left: auto; }
.navbar > ul > li.nav-right ~ li.nav-right { margin-left: 0; }
.navbar .nav-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.55); display: block;
}
.navbar a.nav-cta {                 /* signed-out "Sign In" */
    background: #ffffff; color: var(--sec-bar, #0B2465);
    border-radius: 10px; padding: 8px 18px; margin: 8px 0;
}
.navbar > ul > li:hover > a.nav-cta { background: #E8EDFF; color: var(--sec-bar, #0B2465); }

/* --- Site search glyph: bigger than the text items (owner, 2026-09-03)
   with the vertical padding trimmed so the bar stays the same height. --- */
.navbar > ul > li > a.nav-suchen {
    font-size: 1.45rem;
    line-height: 1;
    padding: 8px 12px;
}

/* --- Current item: a solid white chip in the section colour's text. The
   ported wash + underline was too quiet to answer "where am I" (owner,
   2026-09-02). ------------------------------------------------------------ */
.navbar > ul > li > a[aria-current] {
    background: #ffffff;
    color: var(--sec-bar, #0B2465);
    border-radius: 10px;
}
.navbar > ul > li:hover > a[aria-current] {
    background: #E8EDFF;
    color: var(--sec-bar, #0B2465);
}

/* --- Dot separators between top-level items (ported as-is: CSS ::before,
   so screen readers never announce them and they vanish in burger mode).
   The brand and the right-side cluster stay dot-free. -------------------- */
.navbar > ul > li + li:not(.nav-right)::before {
    content: "\00b7";
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* === DROPDOWN PANELS (ported) =========================================== */

.navbar .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #14161d;
    list-style: none;
    margin: 0;
    padding: 22px 40px 26px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7);
    z-index: 10000;
    border-top: 2px solid #2a2d36;
    border-bottom: 2px solid #2a2d36;
    border-radius: 0;
    flex-wrap: wrap;
    gap: 8px 26px;
    max-height: 80vh;
    overflow-y: auto;
    align-content: flex-start;
}

/* Hover opens every dropdown EXCEPT the bell — notifications open on click
   only (hovering must never mark them read), via the .open class from JS.
   :focus-within (2026-09-02) opens the same panels for the keyboard: Tab
   onto Friends, More or Account and its panel is there — Sign Out lives
   only inside the Account panel, and a keyboard user could never reach it.
   Desktop only: in burger mode a tap focuses, and dropdowns are off. */
.navbar > ul > li:hover:not(.nav-bell) > .dropdown { display: flex !important; }
.navbar > ul > li.nav-bell.open > .dropdown { display: flex !important; }
@media (min-width: 769px) {
    .navbar > ul > li:focus-within:not(.nav-bell) > .dropdown {
        display: flex !important; animation: wbsSlideDown .18s ease-out;
    }
}

@keyframes wbsSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.navbar > ul > li:hover:not(.nav-bell) > .dropdown,
.navbar > ul > li.nav-bell.open > .dropdown {
    animation: wbsSlideDown .18s ease-out;
}

/* Compact variant: anchored under its own item instead of spanning the bar
   (pacificair stubbed .dropdown-compact; MyWBS's current menus are small, so
   this is the variant in use — swap the class for a full-width mega panel). */
.navbar li.has-compact > .dropdown {
    left: 0; right: auto;
    width: max-content;
    min-width: 230px;
    padding: 14px 18px 16px;
    border: 1px solid #3a3e4a;
    border-radius: 0 0 12px 12px;
    border-top: 2px solid #2a2d36;
}
.navbar li.has-compact.nav-right > .dropdown { left: auto; right: 0; }

/* --- Notifications bell + panel, Messages envelope ----------------------- */
.navbar li.nav-bell > a { font-size: 1.12rem; padding: 11px 13px; }
.navbar li.nav-msg > a { font-size: 1.05rem; padding: 11px 13px; }
.nav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
    background: #e0245e; color: #fff; font-size: .68rem; font-weight: 700;
}
.navbar li.nav-bell > .dropdown { padding: 12px 10px 10px; }
.notif-panel { min-width: 340px; max-width: 400px; }
.notif-title { color: #9aa0ab; font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; padding: 2px 10px 10px; }
.navbar .notif-row {
    display: flex; gap: 10px; align-items: center; padding: 9px 10px;
    border-radius: 10px; font-weight: 400; white-space: normal;
    color: #c9cdd4;
}
.navbar .notif-row:hover { background: #20232b; }
.navbar .notif-row img { width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid #3a3e4a; flex: none; }
.navbar .notif-row .nbody { flex: 1; min-width: 0; font-size: .9rem;
    line-height: 1.35; }
.navbar .notif-row strong { color: #f2f3f5; }
.navbar .notif-row .nwhen { color: #8a8f99; font-size: .76rem; margin-top: 2px; }
.navbar .notif-row .ndot { width: 9px; height: 9px; border-radius: 50%;
    background: #818cf8; flex: none; }
.navbar .notif-row.unread { color: #f2f3f5; }
.navbar .notif-empty { color: #8a8f99; font-size: .88rem;
    padding: 6px 10px 12px; white-space: normal; }

/* --- Top-level links in a dropdown (non-submenu items) ------------------ */
.navbar .dropdown > li { margin: 0; padding: 0; position: relative; }
.navbar .dropdown > li:not(.has-submenu) { width: auto; flex-shrink: 0; }
.navbar .dropdown > li:not(.has-submenu) > a {
    padding: 6px 14px;
    font-size: .84rem;
    font-weight: 500;
    color: #7aa7ff;
    border-radius: 4px;
}
.navbar .dropdown > li:not(.has-submenu) > a:hover {
    background: #20232b;
    color: #a5c4ff;
}

/* --- Submenu category columns (ported) ---------------------------------- */
.has-submenu {
    position: relative !important;
    min-width: 160px;
    max-width: 240px;
    flex: 0 0 auto;
}
.has-submenu > a {
    display: block;
    padding: 0 0 6px 0 !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #818cf8 !important;
    border-bottom: 1px solid #2a2d36 !important;
    margin-bottom: 6px;
    white-space: nowrap;
}
.has-submenu > a:hover { color: #a5c4ff !important; background: transparent !important; }

/* The submenu is the always-visible list under its heading (no flyout). */
.submenu {
    display: block !important;
    position: static !important;
    background: transparent !important;
    list-style: none;
    margin: 0;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
}
.submenu li { position: relative; margin: 0; padding: 0; }
.submenu li a {
    padding: 5px 0;
    font-size: .86rem;
    font-weight: 500;
    color: #c9cdd4;
    display: block;
    line-height: 1.45;
    white-space: normal;
}
.submenu li a:hover {
    color: #ffffff;
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.submenu li a.danger { color: #e07a83; }
.submenu li a.danger:hover { color: #f0949c; }

/* --- 2-column submenu (ported; unused today, ready for bigger menus) ----- */
.has-submenu-2col { min-width: 380px; max-width: 480px; }
.has-submenu-2col > .submenu { column-count: 2; column-gap: 28px; }
.has-submenu-2col > .submenu > li { break-inside: avoid; }

/* --- Mobile burger (ported: <=768px the list collapses behind the toggle;
   the brand stays visible; dropdowns are suppressed, so every top-level
   item links to a real page; 44px touch targets). ----------------------- */
.nav-burger { display: none; background: none; border: 0; }
@media (max-width: 768px) {
    .nav-burger {
        display: flex; flex-direction: column; justify-content: center;
        align-items: center; position: absolute; top: 6px; right: 12px;
        min-width: 44px; min-height: 44px;
        padding: 9px 10px; cursor: pointer; z-index: 11;
        border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px;
    }
    .nav-burger span {
        display: block; width: 20px; height: 2px; margin: 4px 0;
        border-radius: 1px; background: #f2f3f5;
    }
    .navbar { position: relative; }   /* sticky + open burger list scrolls badly */
    .navbar > ul { padding: 0 56px 0 12px; }
    .navbar a.nav-brand { font-size: 1.35rem; padding: 12px 12px; }
    .navbar > ul:not(.nav-open) > li { display: none; }
    .navbar > ul:not(.nav-open) > li:first-child { display: flex; }
    /* The two counters stay in the bar beside the burger (2026-09-02):
       unread mail and the bell are the one thing a phone should show
       without opening the menu. Dropdowns are off here, so a tap simply
       follows each link (/messages/, /friends/). */
    .navbar > ul:not(.nav-open) > li.nav-msg,
    .navbar > ul:not(.nav-open) > li.nav-bell { display: flex; }
    .navbar > ul.nav-open { flex-direction: column; align-items: stretch; }
    .navbar > ul.nav-open > li {
        display: flex; width: 100%; border-top: 1px solid rgba(255,255,255,0.15);
    }
    .navbar > ul.nav-open > li:first-child { border-top: 0; }
    .navbar > ul.nav-open > li > a { padding: 12px 14px; font-size: 1rem; width: 100%; }
    .navbar > ul.nav-open > li.nav-right { margin-left: 0; }
    .navbar .dropdown { display: none !important; }
    .navbar > ul > li + li:not(.nav-right)::before { content: none; }
    .navbar a.nav-cta { margin: 8px 14px; }
}