/*
 * header.css — light treatment for the shared client header.
 *
 * Loaded on EVERY page that includes customer/layouts/header.blade.php — about
 * 35 client views plus the auth pages. That is a much wider blast radius than a
 * per-page file, so this stays deliberately small and reverts by removing one
 * <link>.
 *
 * The mockups show a light header with a dark wordmark. The app ships
 * `.header-bg { background: #2e2e2e }` with a white logo and solid teal nav
 * pills.
 *
 * THREE SURFACES, styled separately because style.css swaps between them at
 * 1080px:
 *   - the bar itself (all widths)
 *   - the inline nav, 1081px and up
 *   - the off-canvas drawer, 1080px and down — `.top-nav` becomes a fixed 320px
 *     panel (`background: hsl(0deg 0% 18%)`) opened by `#menuBTN`
 * plus the account dropdown, which is its own panel at every width.
 *
 * No markup, no handlers, no JS. Added 2026-08-06.
 */


/* ===========================================================================
 * The bar
 * ======================================================================== */

.header-bg {
    background: var(--ds-surface);
    border-bottom: 1px solid var(--ds-border);
    box-shadow: var(--ds-shadow-sm);

    /*
     * `style.css:2131` gives the bar `padding: 1rem 7rem` — 105px of inset on
     * each side — and only overrides it below 1300px. So the wordmark sits 15px
     * from the edge at 1280 and jumps to 120px at 1440, which is where the bar
     * started reading as inset from the rest of the page: the dashboard's own
     * content column begins at 15px.
     *
     * Zeroed here so the gutter is the same at every width and comes from one
     * place — `.container-fluid`'s 15px, which is exactly what the sub-1300px
     * range already does and what nobody has objected to. Vertical padding is
     * left alone; it is what gives the desktop bar its height.
     */
    padding-left: 0;
    padding-right: 0;
}

/*
 * Bar layout — all widths.
 *
 * The markup is a Bootstrap row of two columns: the logo at `col-md-3 col-xl-3`
 * and the nav at `col-md-9 col-xl-9`, with `.w50` making them 50/50 under 991px.
 * Every one of those is a proportion of the viewport, which is wrong for a
 * header bar in both directions:
 *
 *   - on a wide screen the logo column is 25% — 480px of empty bar on a 1920px
 *     monitor, with a 136px wordmark sitting at the left of it. Mark: "full
 *     screen gives too much space for the logo".
 *   - it is also what stopped the nav centring, since the nav could only ever
 *     centre within its own 75% column, i.e. well right of the bar's middle.
 *
 * So the logo column is sized to the logo and the nav column takes the rest, at
 * every width. The wordmark stays at the upper left because its column starts
 * there; it just no longer reserves a quarter of the screen to do it.
 */
/*
 * One gutter, from one place.
 *
 * Bootstrap spreads the gutter over three layers — container padding (15),
 * row negative margin (-15), column padding (15) — and in this tree they do not
 * cancel as they should: measured at 1278, the row came out 30px NARROWER than
 * its container rather than 15px wider, which left the wordmark 15px from the
 * left edge and the account chip 45px from the right. Two Bootstrap versions are
 * loaded on this page, which is the usual cause.
 *
 * Rather than work out which one wins, the row and column layers are collapsed
 * and `.container-fluid` is left as the only gutter. Symmetric by construction,
 * and it is the same thing the phone block does below with a smaller value.
 */
.header-bg .row {
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.header-bg .row > [class*="col-"] {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.header-bg .w50,
.header-bg .row > [class*="col-"]:first-child {
    flex: 0 0 auto;
    width: auto;
}

/*
 * `position: static` matters and is deliberate: style.css:6218 makes
 * `.head-option` `position: relative` at <=991px, which turned it into the
 * containing block for the absolutely positioned action row this file used to
 * carry — the row then laid out inside the logo column and over the hamburger.
 * The row is in flow now, but the reset stays so nothing added here later
 * inherits that trap. It cost a debugging session on 2026-08-11.
 */
/*
 * `justify-content: flex-end` is what keeps the hamburger reachable.
 *
 * When the drawer opens, JS puts `.menuBar` on `.top-nav` and style.css makes it
 * `position: fixed` — so it leaves this flex row, and `.menuBTN` is suddenly the
 * only in-flow child. With the default `flex-start` it snapped from the right
 * edge to the left of `.head-option` (measured: 337–381 closed, 89–133 open) and
 * landed underneath the drawer, which is `left: 0` and 320px wide. The toggle
 * still worked; there was simply nothing left to tap. Anchoring the end of the
 * row means the button does not move when the drawer opens.
 */
.header-bg .row > .head-option {
    position: static;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
}

.header-bg .top-nav {
    flex: 1 1 auto;
    min-width: 0;
}

/*
 * The wordmark.
 *
 * Was `logo/whitelogobase.png`, white-on-transparent, darkened here with
 * `filter: brightness(0)` so it survived the light bar — a stopgap, because
 * swapping the wordmark was a brand decision nobody had made. Jenny supplied the
 * replacement on 2026-08-12, so both the stopgap and the filter are gone.
 *
 * Sized by height, with `width: auto`. The asset is 800x235 (3.40:1) and the
 * markup carries those as its intrinsic attributes, so the browser reserves the
 * right box before this file loads. Setting a width instead would let the
 * surrounding Bootstrap column decide the height.
 */
.header-bg .header_logo img {
    display: block;
    height: 40px;
    width: auto;
    max-width: 100%;
    margin: 0;
}

/*
 * Hamburger. Its <svg> carries an inline `fill:#fff`, so this needs
 * `!important` — author important outranks an inline declaration.
 */
.header-bg .menuBTN svg,
.header-bg .menuBTN svg path {
    fill: var(--ds-text) !important;
}


/* ===========================================================================
 * Inline nav — 1081px and up only
 *
 * style.css swaps to the off-canvas drawer at `max-width: 1080px`, so this is
 * the exact width at which the nav is laid out inside the bar.
 * ======================================================================== */

@media (min-width: 1081px) {

    /*
     * Desktop gutter, aligned to the page content rather than to the viewport.
     *
     * With the 7rem inset gone the bar sits at 15px, which is tighter than the
     * dashboard's content column: `.inner-container` is 15px of container plus
     * 30px of its own padding, so the hero `h1` starts at 45px. A wordmark 30px
     * to the left of the headline under it reads as a misalignment.
     *
     * Measured across the client pages at 1440, there is no single content edge
     * to align to — /user-dashboard and /help start at 45, /user-profile and
     * /food-log at 15, /user-transaction at 0. The vendor pages were never laid
     * out to a grid. So this follows the dashboard, which is the page the
     * mockups actually specify, and where the mockup shows the wordmark and the
     * headline on the same line.
     *
     * Desktop only. At 1080 and below the bar also carries the pills and the
     * hamburger, and 90px of gutter is space that row does not have.
     */
    .header-bg .container-fluid {
        padding-left: 45px;
        padding-right: 45px;
    }

    /*
     * Pills hug their labels (R2, 2026-08-12 sync).
     *
     * `style.css:2153` sets `.top-nav li { width: 222px; height: 38px }` — a fixed
     * width with no relation to the label. Because `.top-nav` is a flex row the
     * items then shrink to a *shared* width (measured: 166px each), so "Home" and
     * "Notifications" occupy identical boxes and every label sits left-of-centre
     * in a field of empty pill. That is exactly what Mark described as "excessive
     * blank space around the text, appears uncentered" (00:01:56).
     *
     * Jenny's preference was the smaller of the two options offered — shrink the
     * button, don't centre the text in it (00:03:02) — so the fix is to release
     * the width and let padding do the work, not to add `justify-content: center`.
     *
     * `flex: 0 0 auto` matters as much as `width: auto`: without it the items are
     * still flex-shrinkable and a long label would compress its neighbours.
     */
    .header-bg .top-nav li {
        background: transparent;
        border-radius: var(--ds-radius-pill);
        width: auto;
        height: auto;
        min-height: 38px;
        flex: 0 0 auto;
        padding: var(--ds-space-2) var(--ds-space-4);
        transition: background 0.15s ease;
    }

    /*
     * The row itself: nav items centred, account chip at the right edge.
     *
     * "The top buttons … make smaller and center to middle" (docx) — the same
     * instruction the mobile bullet spells out as "evenly space the buttons …
     * to the center of the top bar", and what the desktop mockup shows: logo
     * left, nav centred, avatar right.
     *
     * Done with two auto margins rather than `justify-content: center`, because
     * the account chip has to stay pinned right and an auto margin on it alone
     * would absorb ALL the free space and leave the nav flush left. With an auto
     * margin before the first nav item as well, the free space splits evenly
     * between the two, which centres the nav group within the bar minus the
     * account chip.
     *
     * That is not mathematically the centre of the viewport — it is offset by
     * (account width − logo column width) / 2. Those are ~161px and ~151px, so
     * the error is about 5px. Measured rather than assumed; see the PR notes.
     * Getting it exact would mean taking the logo out of flow, which is how this
     * header's original positioning bugs were built, and 5px is not worth that.
     *
     * `:first-of-type` targets the first <li>. The list also holds hidden inputs
     * and two display:none spans, none of which are <li>, so this is the first
     * nav item whichever branch of the Blade rendered it — Home for a purchased
     * client, Programs for an unpurchased one, Return to Dashboard for a coach.
     */
    .header-bg .top-nav {
        justify-content: flex-start;
        gap: var(--ds-space-1);
    }

    .header-bg .top-nav > li:first-of-type,
    .header-bg .top-nav > li.bg-none.mb-view {
        margin-left: auto;
    }

    /* `.top-nav li { margin: 0 0.4rem }` predates the gap above and doubles it. */
    .header-bg .top-nav > li {
        margin: 0;
    }

    .header-bg .top-nav li:hover {
        background: var(--ds-bg);
    }

    /*
     * Direct children only. A descendant selector here also caught the
     * `.dropdown-item` links inside the account dropdown, which sits on its own
     * dark panel — that turned them navy-on-charcoal and unreadable. The
     * dropdown is restyled separately below.
     */
    .header-bg .top-nav > li > a,
    .header-bg .top-nav > li > a > span,
    .header-bg .top-nav > li > a > i {
        color: var(--ds-text);
    }

    /*
     * Current page. Pink tint, matching the desktop header mockup where the
     * active item is the one tinted pill and everything else sits plain.
     *
     * Keyed off `is-active`, which header.blade.php sets from `Route::is(...)`.
     * It used to key off `.HomeMobileICone` — but that is the dashboard link's
     * structural class, the one the action-row CSS selects on, so it is present
     * on every page and the pill read as active everywhere.
     */
    .header-bg .top-nav li.is-active {
        background: var(--ds-pink-tint);
    }

    /*
     * `:not(.badge)` on the span. The Chat count is a `<span class="badge">`
     * inside the same `<a>`, so a bare `a span` here repainted its label pink —
     * pink on the badge's red fill, which read as a filled-in blob with the
     * number lost inside it. The badge keeps its own white-on-red; it is a
     * status chip, not part of the link's text.
     */
    .header-bg .top-nav li.is-active a,
    .header-bg .top-nav li.is-active a span:not(.badge),
    .header-bg .top-nav li.is-active i {
        color: var(--ds-pink);
    }

    /*
     * Join Zoom sits plain in the bar, matching the desktop mockup — Home's
     * tinted pill is the only highlight up here, everything else is flat.
     *
     * Nothing to declare: it inherits the transparent background and
     * `--ds-text` from the shared `li` rules above, and picks up the same
     * `--ds-bg` hover as its neighbours. The `bg-primary` class that used to
     * paint it Bootstrap blue (#007bff !important, which outranked the teal
     * this block previously set) has been removed from the markup.
     */

    /* Notifications sit in their own <ul>, not in a .top-nav li. */
    .header-bg .notification-drop .item,
    .header-bg .notification-drop .item i {
        color: var(--ds-text) !important;
        border-bottom: 0;
    }

    /*
     * That <ul> wrapper has to hug its pill, or the row's spacing lies.
     *
     * Measured at 1440: the wrapper was 202px wide while the pill inside it was
     * 169px, leaving 6px of dead space on the left and 28px on the right. Since
     * the gaps in this row are between the *boxes*, the visible spacing came out
     * as 9px between Chat and Notifications but 31px between Notifications and
     * Help — which is why Help read as detached from the group rather than part
     * of it.
     *
     * The wrapper is a flex item of `.top-nav` like every `li`, so it needs the
     * same `flex: 0 0 auto` and `width: auto` those got; `.item`'s `margin: 0 6px`
     * is left over from the old fixed-width row.
     */
    .header-bg .top-nav > ul.notification-drop {
        flex: 0 0 auto;
        width: auto;
        margin: 0;
        padding: 0;
    }

    .header-bg .notification-drop .item {
        margin: 0;
    }

    /* Account chip. `.user-wrapper` carries a dark background inline in CSS. */
    .header-bg .user-wrapper {
        background: transparent !important;
    }

    .header-bg .user_info,
    .header-bg .user_info h5,
    .header-bg .user_info small i {
        color: var(--ds-text);
    }

    .header-bg .user-wrapper img {
        border: 1px solid var(--ds-border);
    }
}


/* ===========================================================================
 * Account dropdown (all widths)
 *
 * style.css gives this panel `background: #2e2e2e` with white links
 * (`ul.dropdown-menu.w3-dropdown-content.w3-bar-block.w3-border`, specificity
 * 0,4,1). Matching the light header. The `.header-bg` prefix takes this to
 * 0,5,1 so it wins without `!important`.
 * ======================================================================== */

.header-bg ul.dropdown-menu.w3-dropdown-content.w3-bar-block.w3-border {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-lg);
    overflow: hidden;
    padding: var(--ds-space-1);
    /* Wide enough for the longest label on one line. `min-width: 150px` alone
       left the panel at 174px, which is 99px of text area once the padding below
       is counted — "Transaction History" wrapped to two lines. */
    min-width: max-content;
}

/*
 * The rows had FOUR sources of horizontal padding stacked on them, totalling
 * 37.5px a side inside a 174px panel:
 *
 *   `.top-nav li`            7.5px 15px   ← this file's nav-pill rule, leaking in
 *   `.top-nav li`            margin 0 6px ← style.css:2156, same leak
 *   `.dropdown-item`         6px 22.5px   ← Bootstrap's .25rem 1.5rem
 *
 * The leak is the interesting one: this dropdown is nested INSIDE `.top-nav`, so
 * every rule written for the header's nav pills also matches its items. The
 * `> li` child combinator used elsewhere in this file is what normally prevents
 * that; the pill padding rule cannot use it because the notification row needs
 * the descendant form. Reset explicitly here instead.
 */
.header-bg .v-dropdown .dropdown-menu li {
    background: transparent;
    border-bottom: 0;
    border-radius: var(--ds-radius-sm);
    padding: 0;
    margin: 0;
    min-height: 0;
    display: block;
}

.header-bg .v-dropdown .dropdown-menu li:hover {
    background: var(--ds-bg);
}

.header-bg .dropdown-menu .dropdown-item {
    color: var(--ds-text);
    font-size: var(--ds-size-sm);
    min-height: var(--ds-tap);
    display: flex;
    align-items: center;
    border-radius: var(--ds-radius-sm);
    /* One line per item. `min-height: 44px` keeps the tap target; the padding is
       the row's only horizontal inset now that the leaked rules above are reset. */
    padding: var(--ds-space-2) var(--ds-space-4);
    white-space: nowrap;
}

/*
 * Hover/active. style.css replaces Bootstrap's light hover with
 * `.dropdown-item:focus, .dropdown-item:hover { background-color: #64626298 }` —
 * a ~60%-opaque dark grey, which read as dark teal once the panel behind it went
 * white. Bootstrap also paints `:active` solid blue (#007bff). Both are covered
 * here; `.header-bg .dropdown-menu .dropdown-item` is (0,4,0) and outranks the
 * (0,2,0) rules in both stylesheets.
 *
 * `transparent` rather than removing the rule. The highlight belongs to the
 * parent `li:hover` above, which is the wider of the two boxes — painting the
 * `<a>` as well drew a second, narrower rounded rectangle inside the first.
 * Dropping these selectors entirely would not fix it: the dark grey and the
 * blue would simply win again. They have to be neutralised explicitly.
 */
.header-bg .dropdown-menu .dropdown-item:hover,
.header-bg .dropdown-menu .dropdown-item:focus,
.header-bg .dropdown-menu .dropdown-item:active,
.header-bg .dropdown-menu .dropdown-item.active {
    background-color: transparent;
    color: var(--ds-text);
}

/* The chevron toggle uses w3.css's `.w3-black`, which is a solid dark chip. */
.header-bg .v-dropdown .dropdown-toggle,
.header-bg .v-dropdown .dropdown-toggle i {
    background: transparent !important;
    color: var(--ds-text) !important;
}


/* ===========================================================================
 * Off-canvas drawer — 1080px and down
 *
 * `.top-nav` becomes a fixed 320px panel with `background: hsl(0deg 0% 18%)`
 * and solid teal pills. Brought in line with the light header.
 *
 * Everything here is inside the base (mobile) layer deliberately: above 1081px
 * `.top-nav` is the inline bar nav, styled in the block above, and these rules
 * would fight it. They are scoped with `.menuBar` — the class the existing
 * toggle JS adds when the drawer opens — plus the fixed-position drawer itself.
 * ======================================================================== */

@media (max-width: 1080px) {

    .header-bg .top-nav,
    .header-bg .top-nav.menuBar {
        background: var(--ds-surface);
        border-right: 1px solid var(--ds-border);
        box-shadow: var(--ds-shadow-lg);
    }

    .header-bg .top-nav li {
        background: var(--ds-bg);
        border-radius: var(--ds-radius-md);
        min-height: var(--ds-tap);
    }

    .header-bg .top-nav li a,
    .header-bg .top-nav li a span,
    .header-bg .top-nav li i,
    .header-bg .top-nav .dropdown-item {
        color: var(--ds-text);
    }

    /*
     * Join Zoom is plain here too, matching the desktop bar. It inherits the
     * same `--ds-bg` pill and `--ds-text` icon as Home, Chat and Notifications
     * from the rules above — nothing to declare.
     *
     * This element is both the drawer item and, when the drawer is closed, the
     * fixed action pill, so flattening it covers both states at once.
     */

    /*
     * The drawer's account blocks carry an inline `style="color:white"`, so this
     * needs `!important` — author important outranks inline.
     */
    .header-bg .top-nav .desk-view {
        color: var(--ds-text) !important;
    }

    /*
     * There is no divider between Help and the Profile / Transaction History /
     * Logout group — the gap alone carries the grouping.
     *
     * The old `border-top: 1px solid #363636` that drew one was inline on the
     * `<span>` wrapper and has been removed from header.blade.php. Nothing else
     * in any loaded stylesheet sets a border on `.desk-view`, so no override is
     * needed here; if a rule reappears, it came back in the markup.
     *
     * Scoped with `:not(.mobviewHide)` because there are two `.desk-view` spans
     * — that one is the avatar and name block, and must not gain the spacing.
     */
    .header-bg .top-nav .desk-view:not(.mobviewHide) > div > li:first-child {
        margin-top: var(--ds-space-6);
    }

    .header-bg .top-nav .user-wrapper,
    .header-bg .top-nav .user-wrapper h5,
    .header-bg .top-nav .user_info,
    .header-bg .top-nav .user_info h5 {
        background: transparent !important;
        color: var(--ds-text) !important;
    }

    .header-bg .top-nav .notification-drop .item {
        color: var(--ds-text) !important;
    }
}


/* ===========================================================================
 * Count badges
 *
 * The header ships two unrelated badge implementations:
 *
 *   Chat           .badge.badge-danger.chatBadge
 *                  Bootstrap badge — #dc3545, 12px !important, a 4px radius
 *                  rounded off by an inline `border-radius: 1rem`, plus a
 *                  stray `border: 1px solid #000` from Bootstrap's print rules.
 *
 *   Notifications  .btn__badge.pulse-button.noti.notification_count.mbBadge
 *                  #FF5D5D, 14px dropped to 10px !important by .mbBadge, and a
 *                  4-second `pulse` animation whose red box-shadow is the halo
 *                  bleeding out behind it.
 *
 * Unified into one pill: same size, same red, same weight, no halo. The
 * `!important`s are only where the originals used them (font-size) or where a
 * keyframe animation has to be cancelled.
 *
 * Scoped to `.header-bg`, so the same rules cover the off-canvas drawer copies.
 * ======================================================================== */

.header-bg .top-nav .badge,
.header-bg .btn__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border: 0;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-danger);
    color: var(--ds-text-invert);
    font-size: var(--ds-size-xs) !important;
    font-weight: var(--ds-weight-semibold);
    line-height: 1;
    vertical-align: middle;
    /* Both originals position themselves; neither needs to once they are pills
       that sit inline with their label. */
    position: static;
    top: auto;
    right: auto;
    /*
     * Full shorthand, not `margin-left` alone. The Notifications badge also
     * carries `.noti { margin: 6px 9px 0px 0px }` (style.css:4342) — a shorthand
     * that kept supplying the other three sides, nudging the pill 6px down and
     * adding a 9px gap to its right. That is the whole reason it sat lower than
     * Chat's and looked further from its label. `.noti` is used on this one
     * element and nowhere else, so overriding it here is safe.
     */
    margin: 0 0 0 var(--ds-space-1);
    /*
     * Both badges sit in flex containers, but only one of them centres.
     * `.top-nav li a` is `display: flex; align-items: center`, so the Chat badge
     * centres. The Notifications item uses `.mbFlx { display: flex !important }`
     * with no `align-items`, which defaults to `stretch` — and because the badge
     * has a definite height, stretch does not apply and it pins to the top of
     * the line. `align-self` fixes it from the badge rather than depending on
     * each parent.
     */
    align-self: center;
    /* Never let the pill squash to fit; it is a fixed-size chip. */
    flex-shrink: 0;
    box-sizing: border-box;
}

/*
 * Kill the pulse halo. `.pulse-button` sets `-webkit-animation` and a red
 * `box-shadow`; both aliases are cleared so the rule holds whichever the
 * browser resolves.
 */
.header-bg .pulse-button {
    box-shadow: none;
    animation: none;
    -webkit-animation: none;
}

/*
 * Notifications row.
 *
 * The badges looked mismatched because of their LABELS, not their own boxes.
 * Chat's label is a <span>, so it picks up `.top-nav li a span`, which is 1rem
 * between 1024px and 1770px. The Notifications label is a bare text node with no
 * span, so it falls back to `.notification-drop .item` at 14px. Two labels at
 * different sizes put their badges on different optical baselines and made the
 * pills read as different sizes.
 *
 * The row also carries its own padding (10px, or 6px via `.mobNoti`) where the
 * nav items use theirs, so the two boxes were different heights to begin with.
 */
.header-bg .notification-drop .item {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
}

/*
 * Two things stop the pill glyphs sitting centred, and both apply at every
 * width — this used to be fixed only inside the >=1081px block, so the mobile
 * bar kept them.
 *
 * 1. `.notification-drop .item i` carries `margin-left: 10px` (style.css:4348),
 *    left over from when the row was a wide labelled pill. In a 44px icon-only
 *    button that pushed the bell 5px right of centre — measured, against 0 for
 *    the Chat icon beside it.
 *
 * 2. Bootstrap Icons render inside a 1.5rem line box at an 18px font size, so
 *    the glyph sat ~2px above the middle of its own box. `line-height: 1` makes
 *    the box the glyph, and the flex centring then actually centres it.
 */
.header-bg .notification-drop .item > i {
    margin-left: 0;
}

.header-bg .top-nav li i,
.header-bg .notification-drop .item > i {
    line-height: 1;
}

/*
 * Not fixed here, deliberately: every pill glyph sits ~2px above its pill's
 * centre. It comes from the icon font's own metrics — the `i` box measures
 * 21.5px around an 18px glyph — and it survives `line-height`, `display: block`
 * and `vertical-align` overrides, all of which were measured. Collapsing the
 * anchor's line box does shift it, but that anchor also lays out the Chat and
 * Notifications LABELS between 576px and 1080px, so it is not worth the risk
 * for 2px. The offset is identical on every icon, so it reads as alignment
 * rather than error.
 */

@media (min-width: 1081px) {

    /*
     * `.notif_button { width: 225px }` is a fixed width with no relation to the
     * label — it is what stretched the row into a wide pill and left the badge
     * marooned well to the right of its text.
     */
    .header-bg .notification-drop .notif_button {
        width: auto;
        padding: var(--ds-space-2) var(--ds-space-4);
    }

    /* Match the nav labels exactly. */
    .header-bg .notification-drop .item,
    .header-bg .notification-drop .item .noti-label {
        font-size: 1rem;
    }

    /* `.notification-drop .item i` adds a 10px left margin the nav icons do not
       have; the flex `gap` above already spaces them. */
    .header-bg .notification-drop .item > i {
        margin-left: 0;
    }

}


/* ===========================================================================
 * Mobile header bar — logo | action pills | hamburger, 1080px and down
 *
 * The four action pills (Home / Chat / Join Zoom / Notifications) live inside
 * `.top-nav`, which below 1080px is the off-canvas drawer. They used to escape
 * it by each setting `position: fixed` with hardcoded coordinates spread across
 * five overlapping `max-device-width` queries in style.css — left offsets that
 * disagreed, two `top` values 3px apart, and fixed widths that pushed
 * Notifications past the right edge.
 *
 * 2026-08-06 replaced that with a real flex row on its own line, absolutely
 * positioned against the header, with the header reserving space below the logo
 * for it. That worked but cost ~60px of vertical space on a screen that has
 * none to spare.
 *
 * 2026-08-12 (R11): Mark asked for the logo, the buttons and the menu in ONE
 * aligned bar. So the row comes back into flow — `.head-option` becomes the flex
 * container, the pills take the middle and centre themselves in it, and the
 * hamburger is ordered to the end. Measured effect: the header goes from 122px
 * to 64px on a phone, which is 58px returned to the page. That is the single
 * cheapest contribution to the mobile no-scroll goal.
 *
 * The drawer is opened by JS adding `.menuBar` to `.top-nav`, so `:not(.menuBar)`
 * is still the closed state and `.menuBar` still restores the panel untouched —
 * it is `position: fixed`, so it leaves this flex row entirely when it opens.
 * ======================================================================== */

@media (max-width: 1080px) {

    /*
     * One line, fixed height.
     *
     * Deterministic on purpose: at <=576px style.css:9043 makes this bar
     * `position: fixed` and offsets the page with `.CstmPaddingTop
     * { padding-top: 130px }`. An `auto` height means that 130px is a guess.
     * Pinning the bar at 64px lets the offset below match it exactly.
     *
     * `height` needs `!important` to beat `style.css:6234`'s `height: 125px`,
     * which is (0,1,0) but sits in a `max-width: 1240px` query that also loads
     * after us for part of this range. `align-items` overrides the
     * `self-start` set alongside it.
     *
     * `position` is still deliberately NOT set. Declaring `relative` here would
     * load later and win, unpinning the header on phones and leaving that
     * padding as a gap.
     */
    .header-bg {
        height: 64px !important;
        min-height: 64px;
        align-items: center;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Smaller wordmark on a phone; it shares the line now. */
    .header-bg .header_logo img {
        height: 30px;
    }

    /*
     * Closed drawer = the action row, in flow, centred in the space between the
     * logo and the hamburger.
     *
     * Every drawer property is unwound here (the off-canvas `left`, the panel
     * width and height, the surface and shadow) so nothing downstream has to be
     * fought with `!important`.
     */
    .header-bg .top-nav:not(.menuBar) {
        position: static;
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        /* Explicit: style.css:5846 sets `justify-content: inherit`, which was
           picking up whatever the ancestor happened to use. */
        justify-content: center;
        gap: var(--ds-space-2);
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        background: transparent;
        border-right: 0;
        box-shadow: none;
        transition: none;
    }

    /*
     * The hamburger closes the bar on the right. It is the FIRST child of
     * `.head-option` in the markup, so it is ordered rather than moved — no
     * markup change, and `#menuBTN`'s handler is untouched.
     *
     * The margins being reset are real: `-37px !important` at style.css:6611
     * and `-10px` at :8581, both tuned to the old two-line layout, plus
     * `justify-content: end; align-items: flex-start` at :6228. All of it
     * assumed the button sat alone on a line above the pills.
     */
    /*
     * `position: relative` + `z-index` so the toggle stays on top of the open
     * drawer. The drawer is `position: fixed` at `z-index: 99`; the button was
     * `position: static`, which cannot win a stacking contest against a
     * positioned element no matter what the header's own z-index is. It only
     * bites below ~340px, where the 320px drawer covers the full width and would
     * otherwise swallow the button whatever the flex alignment does — but it is
     * the difference between a closable drawer and a trapped one.
     */
    .header-bg .menuBTN {
        order: 2;
        flex: 0 0 auto;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative;
        z-index: 100;
        width: var(--ds-tap);
        height: var(--ds-tap);
        margin: 0 !important;
        padding: 0;
    }

    /*
     * The drawer toggle's handler is bound to the SVG, not to the anchor:
     * `public/js/custom/all.js:72` is `$('#Capa_1').on('click', ...)` and
     * `#Capa_1` is the <svg> inside `#menuBTN`. So sizing the anchor to 44px
     * does nothing for the tap target — the live area was the 24.75px glyph,
     * well under the floor foundation.css sets for everything else.
     *
     * Padding the SVG itself grows the element that carries the handler, so the
     * whole 44px square becomes tappable with no JS change and no handler
     * relocation. `content-box` is explicit because foundation.css sets
     * `box-sizing: border-box` globally, which would otherwise shrink the glyph
     * to 4px instead of growing the box.
     */
    .header-bg .menuBTN svg {
        display: block;
        box-sizing: content-box;
        width: 24px;
        height: 24px;
        padding: 10px;
    }

    /*
     * Only the four pills belong in the closed row. Everything else in the list
     * — the account block, Help, the profile group, the hidden program inputs —
     * is drawer content. The inputs stay in the DOM and keep their values; JS
     * reads them with `.val()`, which is unaffected by `display: none`.
     */
    .header-bg .top-nav:not(.menuBar) > * {
        display: none !important;
    }

    .header-bg .top-nav:not(.menuBar) > .HomeMobileICone,
    .header-bg .top-nav:not(.menuBar) > li.mob-chat,
    .header-bg .top-nav:not(.menuBar) > li.join_zoom-btnheader,
    .header-bg .top-nav:not(.menuBar) > .mobNoti {
        /* `position: static` undoes the `position: fixed` style.css still sets
           on these in its own narrow queries. */
        position: static !important;
        display: flex !important;
        align-items: center;
        flex: 0 0 auto;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        height: var(--ds-tap);
        width: auto !important;
        min-width: 0;
        margin: 0 !important;
        padding: 0 var(--ds-space-3) !important;
        background: var(--ds-bg);
        border-radius: var(--ds-radius-pill);
    }

    /*
     * The pills sit as one centred group now (R11), so Notifications no longer
     * gets pushed to the far end — that `margin-left: auto` was what made the
     * row read as "three on the left, one on the right" rather than a single
     * evenly-spaced cluster. Mark asked for them "evenly space[d] … to the
     * center of the top bar".
     */

    /*
     * Current page, same pink as the inline bar. Declared after the shared pill
     * rule above so it overrides its `--ds-bg` fill on equal specificity.
     */
    .header-bg .top-nav:not(.menuBar) > li.is-active {
        background: var(--ds-pink-tint);
    }

    /* `:not(.badge)` for the same reason as the desktop rule above. */
    .header-bg .top-nav:not(.menuBar) > li.is-active a,
    .header-bg .top-nav:not(.menuBar) > li.is-active a span:not(.badge),
    .header-bg .top-nav:not(.menuBar) > li.is-active i {
        color: var(--ds-pink);
    }

    /* Join Zoom is a square icon button rather than a padded pill. */
    .header-bg .top-nav:not(.menuBar) > li.join_zoom-btnheader {
        justify-content: center;
        width: var(--ds-tap) !important;
        min-width: var(--ds-tap);
        padding: 0 !important;
    }

    .header-bg .top-nav:not(.menuBar) > li.join_zoom-btnheader a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    /*
     * Labels. Home is always icon-only — its label added nothing next to a
     * house glyph. Chat and Notifications keep theirs unless Join Zoom is
     * present, because four labelled pills do not fit a 320px viewport:
     * 44 + ~130 + 44 + ~200 plus gaps is well over it. `.has-zoom-pill` is set
     * server-side in header.blade.php.
     *
     * `:not(.badge)` on Chat so the count is not hidden along with the word.
     */
    .header-bg .top-nav:not(.menuBar) > .HomeMobileICone > a > span,
    .header-bg .top-nav:not(.menuBar) > li.join_zoom-btnheader span,
    .header-bg .top-nav.has-zoom-pill:not(.menuBar) > .mobNoti .noti-label,
    .header-bg .top-nav.has-zoom-pill:not(.menuBar) > li.mob-chat > a > span:not(.badge) {
        display: none !important;
    }

    /* The 225px fixed width is why the pill overflowed its own container. */
    .header-bg .notif_button {
        width: auto !important;
    }

    .header-bg .mobNoti .notification-drop .item,
    .header-bg .mobNoti .item {
        padding: 0 !important;
        border: 0;
    }

    /* `.phoneNoti li` carries negative margins tuned to the old layout. */
    .header-bg .phoneNoti li {
        margin: 0 !important;
    }
}


/* ---------------------------------------------------------------------------
 * Phone — icon-only pills
 *
 * The bar now carries the logo AND the pills AND the hamburger on one line, so
 * the budget is tighter than when the pills had a line to themselves. Measured
 * at 390px: content width ~360, logo ~102 at 30px tall, hamburger 44, leaving
 * ~200 for four pills and their gaps. Labelled pills do not fit; icon-only they
 * are 4 x 44 + 3 x 8 = 200. Exactly.
 *
 * So below 576px every action label goes, regardless of `.has-zoom-pill` — that
 * class only ever governed whether there was room for two labels, and now there
 * is room for none. Above 576px the existing behaviour is unchanged: labels
 * show unless Join Zoom is present.
 *
 * `:not(.badge)` on Chat so the count is not hidden along with the word.
 * ------------------------------------------------------------------------ */

@media (max-width: 575.98px) {

    .header-bg .top-nav:not(.menuBar) > .mobNoti .noti-label,
    .header-bg .top-nav:not(.menuBar) > li.mob-chat > a > span:not(.badge) {
        display: none !important;
    }

    /* Square, like Join Zoom above, now that nothing carries a label. */
    .header-bg .top-nav:not(.menuBar) > .HomeMobileICone,
    .header-bg .top-nav:not(.menuBar) > li.mob-chat,
    .header-bg .top-nav:not(.menuBar) > .mobNoti {
        justify-content: center;
        width: var(--ds-tap) !important;
        min-width: var(--ds-tap);
        padding: 0 !important;
    }

    /*
     * "Evenly space the buttons … to the center of the top bar" (docx, MOBILE).
     *
     * True centring against the viewport is not available at this width: the
     * group is ~200px and the logo already occupies the first ~117px, so a
     * viewport-centred group would sit on top of it. `space-evenly` distributes
     * the four pills across whatever remains between the logo and the hamburger,
     * which is the same intent and cannot collide.
     */
    .header-bg .top-nav:not(.menuBar) {
        justify-content: space-evenly;
        gap: var(--ds-space-1);
    }

    /*
     * The Chat count would otherwise sit inline where the label used to be and
     * push the glyph off-centre. Corner badge instead, which is what it looks
     * like in Jenny's mockup.
     */
    .header-bg .top-nav:not(.menuBar) > li.mob-chat .badge,
    .header-bg .top-nav:not(.menuBar) > .mobNoti .btn__badge {
        position: absolute;
        top: 2px;
        right: 2px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        margin: 0;
    }

    .header-bg .top-nav:not(.menuBar) > li.mob-chat,
    .header-bg .top-nav:not(.menuBar) > .mobNoti {
        position: relative !important;
    }

    /*
     * The badge has to resolve against the PILL, not the row inside it.
     *
     * `.notification-drop .item` is positioned in style.css, so it became the
     * containing block for the absolute badge above — and because that row is
     * only 28px wide inside a 44px pill, `right: 2px` put the count 13px from
     * the pill's left edge while Chat's sat at 26px. The two badges were in
     * visibly different places. Making the row static hands the job back to the
     * pill and the two line up.
     */
    .header-bg .top-nav:not(.menuBar) > .mobNoti .item {
        position: static;
    }

    /*
     * The page offset for the fixed bar.
     * (see the narrow-width block below for <=400px)
     *
     * style.css:9033 sets `.CstmPaddingTop { padding-top: 130px }` to clear the
     * old two-line header at this width. The bar is 64px now, so 130px leaves a
     * 66px gap at the top of EVERY client page under 576px. This has to move
     * with the header height, not after it.
     *
     * `:has(#iframe-id)` keeps its own 70px — that variant is for the chat
     * frame and is already close enough to the new height.
     */
    .CstmPaddingTop {
        padding-top: 64px;
    }

    /*
     * The chat page keeps its own offset, and it has to move too.
     *
     * style.css:9486 sets `.CstmPaddingTop:has(#div-id.chat-frame.cstm-chat-frame)
     * { padding-top: 116px }` — higher specificity than the rule above, so it
     * survived the change and left a **measured 60px band of blank** between the
     * header and the conversation, with 61px of unused space below the frame.
     *
     * Both numbers shift by the same 52px the header lost. The frame heights are
     * `!important` at source, so these are too; the selectors are identical, and
     * this file loads later.
     *
     * The chat is the surface a stakeholder found the last mobile regression on
     * (#385, 2026-08-03). Worth loading it on a real device before this ships.
     */
    .CstmPaddingTop:has(#div-id.chat-frame.cstm-chat-frame) {
        padding-top: 64px;
    }

    iframe#iframe-id {
        height: calc(100dvh - 78px) !important;
    }

    iframe#iframe-id.chat-frame-inner {
        height: calc(100dvh - 133px) !important;
    }
}


/* ---------------------------------------------------------------------------
 * Narrow phones — 400px and down
 *
 * The single bar does not fit here by arithmetic. At 320px the content box is
 * 288px, and logo 102 + hamburger 44 + four 44px pills + gaps is ~330. Measured
 * before this block existed, the pill row overflowed its flex container and the
 * Notifications pill sat underneath the hamburger.
 *
 * Two things give way, in the order that costs least:
 *
 * 1. The wordmark steps down to 24px (~82px wide). It is still legible; it is
 *    the least information-dense thing in the bar.
 * 2. The Home pill leaves the row — because **the logo is already the link to
 *    the dashboard** (`header.blade.php`, the `<a href="{{route('user-dashboard')}}">`
 *    wrapping the wordmark). At this width Home is the one pill that is
 *    genuinely redundant, and dropping it is what makes the rest fit at the full
 *    44px tap target rather than shrinking every pill below the floor
 *    foundation.css sets.
 *
 *    Mark's brief names Home as one of the four buttons, so this is scoped as
 *    tightly as the arithmetic allows — see the separate 350px block below.
 *    With the halved gutters, all four pills fit from ~340px up, so this only
 *    ever applies to 320px-class devices. Every common phone width (360, 375,
 *    390, 414, 430) keeps Home.
 *
 * With the smaller wordmark and the gutters, at 320px with Join Zoom present:
 *   8 + 82 + 8  (logo column)  +  8 + 132 + 44 + 8  (nav column)  = 290 of 304.
 *
 * `min-width: min-content` on the pill row is the guard rail. Without it the row
 * is free to shrink below its own contents — it is a flex item with `min-width:
 * 0` — and the pills, being `flex: 0 0 auto`, silently overflow it and render
 * underneath the hamburger. That is exactly what happened at 320px before this
 * block existed, and it is invisible in a screenshot at any other width.
 * ------------------------------------------------------------------------ */

/*
 * Gutters first, and over a wider range than the rest.
 *
 * Bootstrap spends 15px on `.container-fluid` and another 15px on each column —
 * 60px of horizontal padding before anything is drawn. At 430px (iPhone 14 Pro
 * Max) with all four pills present that left the Notifications pill and the
 * hamburger **1px** apart. Halving the gutters buys 30px and turns that into
 * comfortable spacing, without dropping anything from the bar.
 */
@media (max-width: 480px) {

    /*
     * A tighter gutter on a phone, so the 8px goes to the pills instead. The row
     * and column layers are already collapsed above, so this is the only value
     * that needs to change.
     */
    .header-bg .container-fluid {
        padding-left: var(--ds-space-2);
        padding-right: var(--ds-space-2);
    }
}

@media (max-width: 400px) {

    .header-bg .header_logo img {
        height: 24px;
    }

    .header-bg .top-nav:not(.menuBar) {
        min-width: min-content;
        gap: 0;
    }
}

/*
 * Home leaves the action row at every width that uses the mobile bar.
 *
 * It started as a 320px-only concession, where four pills plus the wordmark plus
 * the hamburger need ~334px of a 304px content box. Widened to the whole mobile
 * régime on 2026-08-20 (Marcus): the wordmark beside it already links to
 * `user-dashboard`, so Home was the one pill duplicating something else in the
 * same bar, and having it appear at 360px but not 320px was an inconsistency
 * with no reason a client could see.
 *
 * This is a deviation from the brief, which names Home as one of the four mobile
 * buttons — recorded in docs/home-page-phase-2-plan.md (A5). Above 1081px the
 * inline nav is a different surface and keeps Home.
 *
 * The item stays in the DOM and in the drawer markup; only the closed row hides
 * it, so nothing that reads `.HomeMobileICone` is affected.
 */
@media (max-width: 1080px) {

    .header-bg .top-nav:not(.menuBar) > .HomeMobileICone {
        display: none !important;
    }
}


/*
 * Drawer open. The pills are part of `.top-nav` itself now, so opening the
 * drawer turns the row back into the panel and these items become drawer
 * content again — but style.css hides them in that state, so they are kept
 * hidden here for consistency with what it already does.
 */
@media (max-width: 1080px) {

    .header-bg .top-nav.menuBar .HomeMobileICone,
    .header-bg .top-nav.menuBar li.mob-chat,
    .header-bg .top-nav.menuBar .mobNoti,
    .header-bg .top-nav.menuBar .phoneNoti {
        display: none !important;
    }
}