/* ==========================================================
   PUBLIC COMPANY PLATFORM -- SITE HEADER / NAV, shared by every public
   page (partials/site_header.php). Nav built from
   listPublicNavForCompany(). The Follow action itself lives only in the
   Hero section now (06_hero.css) -- .cp-follow-btn's base rules stay
   here since Hero's own copy still uses this class, just scoped tighter
   by .cp-hero__actions.

   Also owns the header's rightmost account cluster
   (.cp-site-header__account): notification bell + avatar/switcher for a
   signed-in viewer, "Sign in" + ShiftTrack mark otherwise. That cluster
   reuses Personal Workspace's own .pw-notify / .pw-switcher component
   CSS (workspace/29_notifications.css, workspace/31_company_switcher.css
   -- loaded conditionally, signed-in viewers only, by
   company_public_layout.php) rather than re-authoring ~800 lines of it
   in --cp-* tokens: a deliberate exception to this module's usual
   "author new CSS in the target surface's own token system" pattern,
   made because this component is "your own ShiftTrack account
   controls," not part of the company's own branding surface. The 18
   --pw-* custom properties those two files reference are declared
   locally below, scoped to .cp-site-header__account, instead of pulling
   in workspace/01_tokens.css wholesale.
========================================================== */

.cp-site-header {
    background: var(--cp-surface);
    border-bottom: 1px solid var(--cp-border);
    position: sticky;
    top: 0;
    z-index: 20;

    /* Already a positioning context via position:sticky -- .cp-site
       -header__account (below) anchors to THIS element with
       position:absolute, pinned flush at its true right edge (the exact
       same place Personal Workspace's .pw-header__account sits in ITS
       OWN full-bleed header, workspace/03_shell.css) independent of
       .cp-site-header__inner's own centered max-width column. Logo/nav
       stay inside that centered column (unchanged from before this
       cluster existed) so they keep lining up with the page's own
       content sections below -- only the account cluster breaks out to
       the true edge. */
}

.cp-site-header__inner {
    max-width: var(--cp-content-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 64px;
}

.cp-site-header__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    flex: 0 0 auto;
}

.cp-site-header__logo {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: var(--cp-radius-sm);
    background: var(--cp-primary, #137A5A);
    color: var(--cp-inverse);
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 800;
    overflow: hidden;
}

.cp-site-header__logo img { width: 100%; height: 100%; object-fit: cover; }

.cp-site-header__name {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--cp-heading);
    white-space: nowrap;
}

.cp-site-header__menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    margin-left: auto;
    background: none;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    padding: 8px 10px;
    cursor: pointer;
}

.cp-site-header__menu-toggle span:not(.cp-site-header__menu-label) {
    width: 18px;
    height: 2px;
    background: var(--cp-text);
    border-radius: 2px;
}

.cp-site-header__menu-label { display: none; }

.cp-site-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-wrap: wrap;
}

.cp-site-nav__link {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cp-text-muted);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--cp-radius-sm);
    transition: background var(--cp-transition), color var(--cp-transition);
    white-space: nowrap;
}

.cp-site-nav__link:hover { background: var(--cp-bg); color: var(--cp-text); }

.cp-site-nav__link--active {
    color: var(--cp-primary, #137A5A);
    background: color-mix(in srgb, var(--cp-primary, #137A5A) 10%, transparent);
}

.cp-follow-btn {
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--cp-inverse);
    background: var(--cp-primary, #137A5A);
    border: 1px solid var(--cp-primary, #137A5A);
    padding: 8px 18px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--cp-transition), transform var(--cp-transition);
}

.cp-follow-btn:hover { transform: translateY(-1px); }
.cp-follow-btn:disabled { opacity: .6; cursor: default; transform: none; }

.cp-follow-btn--following {
    background: var(--cp-surface);
    color: var(--cp-primary, #137A5A);
}

.cp-site-header__account {
    /* Pinned to .cp-site-header's own true right edge (that element is
       already a positioning context via position:sticky) -- deliberately
       OUTSIDE .cp-site-header__inner's centered max-width column, so it
       reaches the header's actual edge instead of stopping at the
       content column's edge with empty gutter beyond it on wide
       screens. */
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 10px;

    /* The 18 custom properties workspace/29_notifications.css and
       workspace/31_company_switcher.css read via var(...) -- values
       copied from workspace/01_tokens.css. Keep in sync if that file's
       values change; see this file's own header comment for why these
       are declared locally instead of loading that token file. */
    --pw-surface: #ffffff;
    --pw-surface-soft: #f5f8fd;
    --pw-surface-muted: #ebf1f9;
    --pw-text-strong: #0a1628;
    --pw-text-muted: #64748b;
    --pw-text-faint: #94a3b8;
    --pw-primary: #025aea;
    --pw-primary-soft: #e6effd;
    --pw-danger: #ef4444;
    --pw-border: #e2e8f0;
    --pw-border-muted: #e7ebf2;
    --pw-shadow-md: 0 18px 45px rgba(15, 23, 42, .08);
    --pw-radius-sm: 10px;
    --pw-radius-md: 14px;
    --pw-radius-pill: 999px;
    --pw-transition: 160ms ease;
    --pw-transition-runtime: 180ms ease;
    /* .cp-site-header__account already sits flush at the header's own
       true right edge (see .cp-site-header's own comment above), so the
       dropdown panel needs no extra offset to reach the screen edge --
       unlike .pw-header__account's -24px, which compensates for that
       header's sidebar-grid layout instead. */
    --pw-dropdown-screen-edge-offset: 0px;
}

.cp-body.pw-body--modal-open {
    overflow: hidden;
}

.cp-header-signin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--cp-primary, #137A5A);
    background: transparent;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-pill);
    padding: 8px 16px;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--cp-transition), border-color var(--cp-transition);
}

.cp-header-signin:hover {
    background: var(--cp-bg);
    border-color: var(--cp-primary, #137A5A);
}

.cp-header-signin-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.cp-header-signin-avatar img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* ==========================================================
   TABLET/NARROW BREAKPOINT -- below this, .cp-site-header__inner's own
   centered max-width column stops being meaningful (there's rarely a
   visible gutter to preserve at these widths anyway), and its normal
   flow starts colliding with .cp-site-header__account's absolute
   positioning: nav's own margin-left:auto pushes it toward the same
   pixels the account cluster is pinned to, since neither one knows
   about the other's box. Merging them into ONE flex row here (the
   account cluster leaves position:absolute and becomes a normal flex
   sibling of .cp-site-header__inner) is the real fix -- flex items
   never overlap each other, so nav and the account cluster can no
   longer collide regardless of exactly how wide either one is.
========================================================== */
@media (max-width: 1440px) {
    .cp-site-header {
        display: flex;
        align-items: center;
        padding: 0 20px;
        gap: 12px;
    }

    .cp-site-header__inner {
        max-width: none;
        margin: 0;
        padding: 0;
        flex: 1 1 auto;
        min-width: 0;
    }

    .cp-site-header__account {
        position: static;
        top: auto;
        right: auto;
        transform: none;
        flex: 0 0 auto;
    }
}

/* Company name text is the first thing crowding this row once nav and
   the account cluster share it (above) -- dropping it keeps the logo
   itself (still a full tap target/brand mark on its own) without
   fighting nav and the account cluster for space. */
@media (max-width: 780px) {
    .cp-site-header__name {
        display: none;
    }
}

@media (max-width: 720px) {
    .cp-site-header__menu-toggle { display: inline-flex; }

    .cp-site-nav {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--cp-surface);
        border-bottom: 1px solid var(--cp-border);
        flex-direction: column;
        align-items: stretch;
        padding: 10px 20px 16px;
        gap: 2px;
    }

    .cp-site-nav--open { display: flex; }

    .cp-site-nav__link { padding: 10px 8px; }

    .cp-header-signin {
        padding: 7px 12px;
        font-size: 12.5px;
    }
}

/* ==========================================================
   MOBILE BREAKPOINT (≤560px) -- this site's own existing "mobile" cutoff
   (same value 07_homepage.css's is_visible_mobile toggle already uses),
   deliberately narrower than the ≤720px tablet block above, which stays
   untouched -- the approved tablet header (hamburger far right, bordered)
   is locked. Layered after that block so these overrides win for the
   overlapping ≤560px range. Loads after this file's own tablet section on
   purpose -- see the file-level load-order note in 01_tokens.css.
========================================================== */
@media (max-width: 560px) {
    /* The whole bar is gone now, not just the brand/hamburger -- the
       bottom nav's Home tab covers "get back to this company's homepage"
       for a signed-in viewer, every gated action (Follow/Message/Comment/
       React) already opens the auth modal directly for an anonymous one,
       and Notifications moved to the bottom nav's own tab. Nothing left
       that needs a persistent bar. Collapsed (height:0, no padding/
       border/background), not display:none -- .pw-switcher/.pw-notify's
       panel+backdrop are descendants of this header and still need to
       render (as position:fixed overlays) when their button is triggered;
       display:none on an ancestor would remove that whole subtree from
       the render tree, panel included. */
    .cp-site-header__brand,
    .cp-site-header__menu-toggle,
    .cp-site-nav,
    .cp-header-signin,
    .cp-header-signin-avatar {
        display: none;
    }

    .cp-site-header__inner {
        min-height: 0;
        padding: 0;
    }

    .cp-site-header {
        min-height: 0;
        padding: 0;
        border-bottom: 0;
        background: transparent;
    }

    /* Replaced by the bottom nav's own Notifications tab (site_bottom_
       nav.php), which reuses this exact button's click handler via
       [data-notify-toggle] rather than duplicating it -- see
       13_bottom_nav.css's own comment. Only ever renders for an
       authenticated viewer in the first place, so this never affects an
       anonymous visitor's header (they have no bell to begin with). */
    .cp-site-header .pw-notify__btn {
        display: none;
    }

    /* The switcher avatar is the one piece of the old bar still needed --
       relocated to float over the Side Panel Hero card's own upper-right
       corner (11_panel_hero.css's .cp-panel-hero, the first thing on the
       page at this width) instead of living in a bar. position:fixed
       (not the card's own position:sticky) so it stays put at that same
       screen corner regardless of scroll, matching "floating" over
       whatever scrolls underneath -- its dropdown panel/backdrop already
       go full-screen position:fixed at this width on their own (workspace/
       31_company_switcher.css's PHONE BREAKPOINT block), so moving just
       the trigger here doesn't affect where they open. All click/open/
       close behavior is untouched -- same DOM node, same site.js listeners,
       only its resting position changed. */
    .cp-site-header__account {
        position: static;
    }

    .cp-site-header .pw-switcher {
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 14px);
        right: 16px;
        z-index: 25;
    }

    .cp-site-header .pw-switcher__btn {
        background: var(--cp-surface);
        box-shadow: 0 4px 14px rgba(15, 23, 42, .22);
    }
}