/* =====================================================================
   frega-header.css - SHARED Frega header for BOTH masters (weblet.master +
   duw.master). Extracted 2026-07-01 from the accepted weblet header
   (weblet.css:62-836) to remove the duplicate hub copy (duw-header.css) -
   the "extract a shared frega-header" debt logged since step 1.

   Parameterised by --frega-accent / --frega-initial (published by
   frega-header.js from the logged-in member's own nav colour + name) and
   neutral .frega-* classes, so each surface renders in ITS member's brand
   world with NO Frega-green / S2T-orange imposed. The SVG arc gauge host is
   .frega-gauge-host (built by frega-gauge.js).

   Bands: desktop layout >=992 (centred nav + pinned cluster + arc gauge);
   tablet 768-991 (condensed icons + heat-gauge above the pinned account
   button); mobile <=767 (slide-in drawer replacing meanmenu + heat-gauge).
   The pill chip + gauge-host rules are flat (shared across widths); on mobile
   #fregauserContain sits in the hidden-xs column so they are inert there.

   Surface-only bits stay in each surface's own stylesheet: weblet-only
   edit-mode pencils + public-body reskin remain in weblet.css; any hub-only
   overrides would go in duw.master's own sheet (none today). The shared
   markup class .webletNavBtn is intentionally kept (it is a nav MARKUP class
   in both masters, not a weblet-scoped style hook).
   ===================================================================== */

/* =====================================================================
   Header nav cluster tidy (Phase C, frega-only, 2026-06-29)
   Normalises the legacy nav into one consistent, evenly-spaced row:
   every item is an icon-over-label stack on a shared baseline, all
   icons the same optical size/weight, killing the legacy -19px shift
   and the Help item's inline vertical-align/margin hacks.
   ===================================================================== */
/* Vertically centre the WHOLE header row (logo + nav + account chip) on the
   bar. The legacy BS3 .row floats its columns to the top, so the (shorter) nav
   column sat high against the (taller) logo, leaving dead space below. Making
   the row a flex/align-centre container centres every column on the bar.
   Scoped md+ so the sm/xs stacked layout (col-sm-12) is untouched. */
@media (min-width: 992px) {
    .main-menu-area .row {
        display: flex;
        align-items: center;
    }
}

/* Desktop header layout (>=992px ONLY). Scoping this md+ is critical: the
   col-md-9 flex rule would otherwise override Bootstrap's hidden-xs and force
   the whole desktop nav + account cluster to show on mobile. Below 992px the
   legacy responsive behaviour resumes (sm stacked; xs -> the mobile drawer). */
@media (min-width: 992px) {
/* Make the menu column itself a flex centring container, overriding the legacy
   right-float so the icon row sits centred between the logo and the gauge. */
.main-menu-area .row > .col-md-9 {
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    /* reserve the right slot occupied by the absolutely-pinned gauge+pill cluster
       so the icon row centres in the space BETWEEN the logo and that cluster
       (COUPLED to the cluster footprint - re-tune if gauge/pill size changes) */
    padding-right: 290px !important;
}
.main-menu-area .main-menu,
.main-menu-area .main-menu > nav {
    float: none !important;
    width: auto !important;
    display: block;
}

/* shrink-wrap the icon row to its content and centre it within the menu column */
#nav.mainDropNav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 2px;
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

#nav.mainDropNav > li {
    display: flex;
    align-items: center;
    float: none;
    margin: 0;
    padding: 0;
}
}

/* Lift the gauge/account out of the centred icon row and pin it to the far
   right of the header, so the icon row centres cleanly on its own. */
#sticky-header > .container {
    position: relative;
}

/* Keep SweetAlert2 modals (loadModal content, dialog shim, toasts) above the
   legacy sticky/fixed header. On scroll shortcode/header.css adds
   .sticky { z-index: 9000 } to .main-menu-area (and the weblet's fixed header
   sits ~9999), which otherwise occludes the top of a tall centred modal.
   SHARED by both masters (hub via duw.master + weblet via weblet.master);
   the weblet formerly carried its own copy in weblet.css. */
body .swal2-container { z-index: 10050; }
@media (min-width: 992px) {
#nav.mainDropNav > li#fregauserContain {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

/* Logged-OUT: pin the Login/Register button to the SAME slot the logged-in
   account pill (#fregauserContain) occupies - right:15, vertically centred.
   Guard on .logoutinbtn (the button's own markup, injected by BOTH the server
   logged-out render and duwmain.js loginBtns), NOT on #mainav_Login: the client
   login path (duwmain.js:14) only EMPTYS + hides #mainav_Login, leaving the node
   in the DOM, so :has(#mainav_Login) would still match when signed in. login
   removes .logoutinbtn, so :has(.logoutinbtn) tracks the actually-visible button
   and can never collide with the pill. Owner direction 2026-07-05. */
#nav.mainDropNav > li:has(.logoutinbtn) {
    position: absolute;
    right: 15px;
    top: 50%;
    /* nudge down ~20px so it lands on the nav-icon row (where the logged-in
       pill visually sits), not the taller header container's geometric centre */
    transform: translateY(-50%);
    margin-top: 20px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
}
/* drop the legacy 100px clamp + negative-margin nudge so it centres cleanly
   and sizes to its label */
#nav.mainDropNav > li:has(.logoutinbtn) #mainav_Login {
    width: auto;
}
#nav.mainDropNav > li:has(.logoutinbtn) .logoutinbtn {
    margin: 0;
}
}

/* the clickable icon-over-label stack for each menu item */
#nav .cusColo,
#nav .webletNavBtn,
#nav #edit-contain {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    text-align: center;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color .18s ease;
}

#nav .cusColo:hover,
#nav .webletNavBtn:hover,
#nav #edit-contain:hover {
    background-color: rgba(0, 0, 0, .05);
}

/* one consistent icon box + size + baseline for ALL nav glyphs */
#nav .navIcon,
#nav .webletNavBtn > i,
#nav #edit-icon > i {
    width: auto !important;
    height: 26px;
    font-size: 23px !important;
    line-height: 26px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle !important;
    margin: 0 !important;
}

/* kill the legacy glyph nudge */
#nav .navIcon::before {
    margin-left: 0 !important;
}

/* force the solid Help cap to the light (fal) weight of its siblings */
#nav .webletNavBtn .fa-graduation-cap {
    font-weight: 300 !important;
    font-family: "Font Awesome 5 Pro" !important;
}

/* uniform labels (override Help inline margins) */
#nav .menuTxt {
    display: block;
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap;
    font-weight: 600;
}

/* the Edit item carries its own text node, not a .menuTxt */
#nav #edit-contain #edit-text {
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
    margin: 0;
}
/* Flatten the Edit item's extra wrappers (#edit-logocontain / #edit-icon) with
   display:contents so its injected markup
   (#edit-contain > #edit-logocontain > #edit-icon>i + #edit-text)
   collapses to the SAME icon+label flex stack as the .cusColo items
   (a.cusColo > i.navIcon + span.menuTxt) -> identical alignment + rhythm. */
#nav #edit-contain #edit-logocontain,
#nav #edit-contain #edit-icon {
    display: contents;
}

/* =====================================================================
   TABLET BAND (768-991px) - condensed horizontal nav (2026-06-30)
   The desktop layout rules above are scoped >=992px and the hamburger
   drawer is scoped <=767px, leaving the Bootstrap-3 "sm" band (768-991)
   ungoverned: the nav column is col-sm-12 + hidden-xs, so the desktop
   icons render but with NO flex layout and the gauge/pill un-pinned ->
   the row collapsed into broken legacy floats (gauge overlapping the
   first item, account pill wrapping below the bar).
   Owner direction (2026-06-30): keep the icon row VISIBLE on tablets but
   CONDENSE it - icons only (labels hidden), tighter spacing, the whole
   nav + gauge + pill laid out in one clean in-flow flex row with the
   cluster pushed to the far right (no absolute positioning, so nothing
   can overlap). The hamburger drawer stays phone-only (<=767px).
   ===================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
    /* Let the header use the full width (normal gutters) instead of Bootstrap-3's
       FIXED 750px container, which is locked across this whole band and leaves no
       room for both the labelled icons and the account-button name. Full width
       also matches the edge-to-edge hero below, and makes the free space grow
       with the viewport so the name shows progressively more as you widen. */
    #sticky-header > .container {
        width: 100%;
        max-width: none;
    }

    /* logo + nav share ONE row: override the col-sm-12 (width:100%) stack */
    .main-menu-area .row {
        display: flex;
        align-items: center;
    }
    .main-menu-area .row > .col-md-3 {
        width: auto;
        flex: 0 0 auto;          /* logo takes its content width */
    }
    .main-menu-area .row > .col-md-9 {
        width: auto;
        flex: 1 1 auto;          /* nav column fills the rest of the bar */
        min-width: 0;            /* allow the icon row to shrink, not overflow */
        padding-right: 160px;    /* reserve the right slot for the pinned arc-gauge
                                    + account button cluster (arc sits beside the
                                    pill now; fitAccountCluster() clips the name so
                                    the cluster never grows past this) */
        position: static !important;  /* neutralise the legacy position:relative so
                                    the pinned account button below references the
                                    SAME container as the heat gauge (they share a
                                    coordinate space -> they stack + align cleanly,
                                    instead of the gauge dropping onto the pill) */
    }
    /* give the bar a touch more height so the gauge-above-button stack has room */
    #nav.mainDropNav {
        min-height: 62px;
    }
    /* drop the legacy right-float so the nav fills its column */
    .main-menu-area .main-menu,
    .main-menu-area .main-menu > nav {
        float: none !important;
        width: auto !important;
        display: block;
    }

    /* the icon row: one no-wrap flex line spanning the column, icons left-aligned
       next to the logo; the account button + heat gauge are pinned to the right
       (the col reserves padding-right for them). */
    #nav.mainDropNav {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 2px;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    #nav.mainDropNav > li {
        display: flex;
        align-items: center;
        float: none;
        margin: 0;
        padding: 0;
    }

    /* icon-over-label stacks WITH titles (owner asked for the titles back). A
       slightly smaller label + tighter padding than desktop so all items plus
       the right-hand cluster still fit down to the 768px low end. */
    #nav .menuTxt,
    #nav #edit-contain #edit-text {
        font-size: 12px !important;
    }
    #nav .cusColo,
    #nav .webletNavBtn,
    #nav #edit-contain {
        gap: 3px !important;
        padding: 6px 6px !important;
    }

    /* --- right cluster (owner direction 2026-07-02): the SVG ARC gauge now
       extends into the tablet band, sitting BESIDE the account pill in the same
       right-pinned cluster the desktop uses (the flat .memAdminDrop row rule,
       in frega-chip.css, lays arc + pill out horizontally). The compact heat
       bar is phone-only
       (<=767) from here on. The cluster pins to the (position:relative)
       #sticky-header>.container and centres vertically on the bar. */
    #nav #fregauserContain {
        position: absolute !important;     /* pin the arc+pill cluster right, centred */
        right: 15px;
        top: 50%;
        bottom: auto !important;
        transform: translateY(-50%);
        margin: 0 !important;
    }
    /* The account-button NAME width is managed by frega-header.js ->
       fitAccountCluster() in this band: it keeps the name visible
       (ellipsis-clipped) for as long as the free space allows - reserving the arc
       gauge's width to its LEFT so the whole cluster stays clear of the nav icons
       - then collapses to avatar-only. This adapts to each member's logo width +
       name length, which a fixed CSS breakpoint cannot; CSS provides the clip: */
    #fregauserContain #fregauser-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* hide the legacy static gauge in the logo area; the nav-cluster arc is the
       score indicator in this band. */
    .logo-area .memFregaRateBlock {
        display: none !important;
    }
}

/* =====================================================================
   Frega-score gauge -> live SVG arc (frega-gauge.js), FregaForce-style.
   Replaces the static rating image; the .frega-score number is kept.
   ===================================================================== */
#fregauserContain .frega-gauge-host {
    background-image: none !important;
    width: 80px !important;
    height: 48px !important;
    display: inline-block;
    vertical-align: middle;
    overflow: visible;
}
#fregauserContain .frega-gauge-host .score-gauge-container,
#fregauserContain .frega-gauge-host .score-gauge-svg {
    display: block;
    width: 100%;
    height: 100%;
}
#fregauserContain .frega-gauge-host .score-gauge-svg {
    overflow: visible;
}
/* needle rotates about the gauge centre (0,0 of the viewBox) */
#fregauserContain .frega-gauge-host .needle {
    transform-box: view-box;
    transform-origin: 0 0;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
#fregauserContain .frega-gauge-host .foreground-arc {
    transition: stroke-dasharray .6s ease;
}

/* =====================================================================
   Mobile menu -> hamburger + slide-in drawer (Phase C step 4, frega-only).
   Replaces legacy meanmenu (its chrome hidden). The hamburger shows where the
   desktop nav is hidden (<768px, matching meanmenu's old breakpoint). The
   drawer + backdrop are appended to <body> by frega-header.js, reusing the
   existing #mobile-nav items (and their onclick wiring).
   ===================================================================== */
/* hide the legacy meanmenu bar + original mobile menu area (weblet only) */
.mean-bar,
.mobile-menu-area {
    display: none !important;
}

.frega-mnav-toggle {
    display: none;
}
@media (max-width: 767px) {
    .frega-mnav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        padding: 0;
        border: none;
        background: transparent;
        color: var(--frega-accent, #303030);
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        z-index: 30;
    }
}

.frega-mnav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
    z-index: 3000;
}
.frega-mnav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 290px;
    max-width: 85vw;
    background: #fff;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.22, 1, .36, 1);
    z-index: 3001;
    overflow-y: auto;
    /* NB: no box-shadow here. The drawer lives in the DOM at all widths, parked
       off-screen right; a left-pointing shadow on the base rule bled back onto
       the page's right edge even when closed. The shadow is applied only when
       open (below) so nothing leaks onto the page. */
}
/* lock the page behind the open drawer: without this the page keeps its own
   scrollbar while the (taller-than-viewport) drawer shows a second one -> TWO
   scrollbars, and the background scrolls under the menu. The scrolling element
   differs per surface - the weblet scrolls on <html>, others on <body> - so
   lock BOTH: body directly, and <html> via :has() (already used in this
   codebase). Mobile-only (<=767, where the drawer opens); scrollbars are overlay
   there so there is no layout shift. */
body.frega-mnav-open,
html:has(body.frega-mnav-open) {
    overflow: hidden;
}
body.frega-mnav-open .frega-mnav-backdrop {
    opacity: 1;
    visibility: visible;
}
body.frega-mnav-open .frega-mnav-drawer {
    transform: translateX(0);
    box-shadow: -6px 0 28px rgba(0, 0, 0, .22);
}
.frega-mnav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    font-weight: 700;
    font-size: 16px;
    color: #303030;
}
.frega-mnav-close {
    border: none;
    background: transparent;
    font-size: 20px;
    color: #303030;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.frega-mnav-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}
/* the drawer copies #mobile-nav's innerHTML, which carries a nested legacy <ul>
   whose <li> can inherit inline-block from legacy CSS (duw.master's mobile-nav
   does) -> the items would wrap horizontally. Force a clean vertical list and
   neutralise the nested ul + any empty spacer <li> (e.g. a hidden nav item). */
.frega-mnav-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.frega-mnav-list li {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
.frega-mnav-list li:empty {
    display: none;
}
.frega-mnav-list a,
.frega-mnav-list .mobile-menuBtn {
    display: block;
    padding: 14px 18px;
    color: #303030;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.frega-mnav-list a:hover,
.frega-mnav-list .mobile-menuBtn:hover {
    background: rgba(0, 0, 0, .05);
    background: color-mix(in srgb, var(--frega-accent, #303030) 10%, #fff);
}
/* HCX-15: leading glyph mirrored from the desktop nav. Only the six items with a
   desktop equivalent carry one; a fixed width keeps their labels aligned. */
.frega-mnav-list .frega-mnav-ico {
    display: inline-block;
    width: 22px;
    margin-right: 12px;
    text-align: center;
    font-size: 16px;
    color: var(--frega-accent, #303030);
    opacity: .85;
}

/* logged-in account menu injected into the drawer (#fregaAdminPanel snapshot) */
.frega-mnav-account {
    border-top: 1px solid rgba(0, 0, 0, .08);
    margin-top: 8px;
    padding: 8px 0;
}
.frega-mnav-acct-head {
    padding: 10px 18px 6px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(0, 0, 0, .55);
}
/* keep just the account buttons on mobile; drop the chat-alerts snapshot */
.frega-mnav-account .menAdmMsgPreWrap {
    display: none;
}
.frega-mnav-account .menAdmBtnBtn {
    display: flex;
    align-items: center;
    padding: 13px 18px;
    color: #303030;
    font-size: 16px;
    cursor: pointer;
}
.frega-mnav-account .menAdmBtnBtn:hover {
    background: rgba(0, 0, 0, .05);
    background: color-mix(in srgb, var(--frega-accent, #303030) 10%, #fff);
}
.frega-mnav-account .menAdmBtnTxt {
    flex: 1 1 auto;
    width: auto;
    padding: 0;
    float: none;
    text-align: left;
}
.frega-mnav-account .menAdmBtnRight {
    width: auto;
    float: none;
    color: #444;
}

/* Mobile score indicator. The desktop arc gauge lives in the hidden-xs column,
   so it is not rendered on phones; frega-header.js builds a dedicated
   .frega-mobile-score element in the always-visible header instead - a compact
   horizontal heat gauge (full red->amber->green gradient + a marker at the
   score) sitting clear of the hamburger. Desktop keeps the arc; this is hidden. */
.frega-mobile-score {
    display: none;
}
@media (max-width: 767px) {
    /* the legacy header renders a SECOND, static Frega gauge in the logo area at
       narrow widths (separate from the nav one). Hide it on phones - the heat bar
       replaces it here (on tablet the arc cluster shows instead, and the tablet
       band above already hides this legacy gauge). */
    .logo-area .memFregaRateBlock {
        display: none !important;
    }
    .frega-mobile-score {
        /* column-reverse => bar on top, number just below it. Pinned top-right:
           on phones above the (centred) hamburger; on tablets above the
           bottom-pinned account button. */
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 2px;
        position: absolute;
        top: 6px;
        right: 15px;
        z-index: 20;
    }
    .frega-mobile-score-num {
        font-family: Lato, sans-serif;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        color: #303030;
    }
    .frega-mobile-score .frega-score-bar {
        position: relative;
        display: block;
        width: 54px;
        height: 7px;
        border-radius: 4px;
        background: linear-gradient(90deg, #F03E3E, #FFDD00, #30B32D);
    }
    .frega-mobile-score .frega-score-bar-marker {
        position: absolute;
        top: -3px;
        width: 3px;
        height: 14px;
        border-radius: 2px;
        background: #333;
        transform: translateX(-50%);
    }
}