/* ==========================================================
   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;
}

/* The shared COMPANY mark (company-default.png: a branded squircle
   with a white well) and the initial in that well -- not a solid block
   of the theme colour, which was a mark invented here. See CLAUDE.md,
   "Default Avatars". */
.cp-site-header__logo {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: var(--cp-radius-sm);
    background: var(--cp-surface) url('/assets/images/placeholders/avatars/company-default.png') center / cover no-repeat;
    color: var(--cp-primary, #137A5A);
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 800;
    overflow: hidden;
}

.cp-site-header__logo--image { background-image: none; background-color: var(--cp-surface-soft); }
.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;
    /* The icon alone, at every width -- never a background, border or box
       around a menu icon (CLAUDE.md, "Menu Icons Are Bare"). */
    background: none;
    border: 0;
    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 Workspace tokens the account controls read, declared once for every
   piece of "your own ShiftTrack account" a public page carries: the
   header's cluster above, and a person's site's phone drawer (the
   Workspace sidebar -- Identity site/drawer.php, read by workspace/
   12_navigation.css and 18_sidebar.css). 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 they are declared here instead of
   loading that token file. */
.cp-site-header__account,
.cp-person-drawer {
    --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;
    --pw-text-soft: #334155;
    --pw-danger-soft: #fef2f2;
    --pw-warning: #f59e0b;
    --pw-radius-xs: 8px;
    --pw-z-overlay: 5000;
    /* .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, bare)
   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 BAR IS BACK.
       ------------------------------------------------------------------
       It used to collapse to nothing here, on the reasoning that the
       bottom nav covered getting home, the auth modal covered every gated
       action, and notifications had their own tab -- so nothing needed a
       persistent bar. What that argument left out is identity: a visitor
       one tap into a company's site had nothing on screen saying whose
       site it was, and no way to reach the rest of it but to go back.

       Same composition as the desktop bar, with the one change a phone
       needs: the navigation collapses behind a hamburger, and that
       hamburger sits at the FAR RIGHT.

       WHY display:contents ON THE INNER
       The markup is <header> > [ __inner > (brand, toggle, nav) ,
       __account ]. The toggle and the account live in different parents,
       so no amount of `order` can put one after the other -- order only
       sorts siblings. Dropping the inner's box promotes brand, toggle and
       nav to be siblings of the account, and then the three-way order
       below is simply true. The inner's padding and height move up to the
       header, which is the element actually drawing the bar anyway.

       The nav is untouched: at 720px it is already position:absolute
       against .cp-site-header (the sticky positioning context), not
       against the inner, so removing the inner's box does not move it.
       Its `top` is corrected below for this bar's height, and nothing
       here hides it -- hiding it at this width would beat
       .cp-site-nav--open and the menu could never open. */
    .cp-site-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 14px;
        min-height: 56px;
    }

    .cp-site-header__inner {
        display: contents;
    }

    .cp-site-header__brand {
        display: flex;
        order: 0;
        /* Takes the room the other three do not, and no more. Without
           min-width:0 a flex item refuses to shrink below its content,
           so a long name would push the hamburger off the bar instead of
           truncating. */
        flex: 1 1 auto;
        min-width: 0;
    }

    /* The name is back. It is hidden from 780px down because it has to
       share a bar with the nav there; here the nav is behind the
       hamburger, so the space it freed is exactly what the name needs.
       Whose site this is was the thing the collapsed bar could not say.

       One line, truncated rather than wrapped: two lines would make the
       bar grow and every business's header a different height. */
    .cp-site-header__name {
        display: block;
        min-width: 0;
        overflow: hidden;
        font-size: 14.5px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* Back in the bar and in normal flow. It was position:absolute at the
       header's right edge, which is the corner the hamburger now owns --
       left as it was, the two would sit on top of each other. */
    .cp-site-header__account {
        position: static;
        order: 1;
        margin-left: auto;
        transform: none;
    }

    .cp-site-header .pw-switcher {
        position: static;
    }

    .cp-site-header .pw-switcher__btn {
        background: transparent;
        box-shadow: none;
    }

    .cp-header-signin,
    .cp-header-signin-avatar {
        display: inline-flex;
    }

    /* Last in the row, which is what "far right" means once the boxes
       above have been flattened into one.

       No box around it: the three bars ARE the control, and a border on a
       phone bar reads as a button competing with the Sign in button
       beside it. The padding stays -- it is invisible without the border
       and it is what keeps the tap target at a thumb's size rather than
       the 18px the bars themselves occupy. */
    .cp-site-header__menu-toggle {
        display: inline-flex;
        order: 2;
        margin-left: 0;
        border: 0;
        border-radius: 0;
        background: none;

        /* The bars occupy about 18x14. Stated as a minimum box rather
           than as padding, so the target stays a thumb's size no matter
           what the bars themselves measure -- the same 44px floor the
           category cards and every other primary control here keep.
           Invisible now that the border is gone; only the hit area. */
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        /* Pulls the enlarged box back off the screen edge so the bars
           stay optically aligned with the mark on the other side. */
        margin-right: -8px;
    }

    /* The drop panel hangs off the bar, so it has to know how tall the
       bar is. 64px was the desktop height; this one is 56. */
    .cp-site-nav {
        top: 56px;
    }

    /* Still the bottom nav's job -- see site_bottom_nav.php. Two bells on
       one screen is worse than the bar having one fewer control. */
    .cp-site-header .pw-notify__btn {
        display: none;
    }
}

/* =========================================================================
   THE COMPACT BAR
   -------------------------------------------------------------------------
   For a page you ARRIVE at rather than browse to -- today only the booking
   page. It replaces the brand with: chevron back, a mark for what this is,
   and the page's own title. The avatar and the hamburger are the ones
   already in the bar; nothing new sits on the right.

   Rendered only when a page passes a title (site_header.php), and shown
   only below the mobile breakpoint. Above it the bar is unchanged -- a
   wide screen has room for the business's name AND its navigation, which
   is the whole reason the compact form exists at all.
   ========================================================================= */

.cp-site-header__compact {
    display: none;
}

@media (max-width: 560px) {
    /* Takes the room the avatar and hamburger do not, and no more.
       min-width:0 so a long title truncates instead of pushing them off
       the bar -- the same rule the brand follows above. */
    .cp-site-header__compact {
        display: flex;
        order: 0;
        flex: 1 1 auto;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    /* One or the other, never both. */
    .cp-site-header--has-compact .cp-site-header__brand {
        display: none;
    }

    /* 44px of target around a 20px chevron, and pulled back off the edge
       so the glyph lines up with the page content below rather than the
       box around it -- the mirror of what the hamburger does. */
    .cp-site-header__back {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        margin-left: -10px;
        color: var(--cp-heading);
    }

    .cp-site-header__back svg {
        width: 20px;
        height: 20px;
    }

    .cp-site-header__compact-icon {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        color: var(--cp-primary, #137A5A);
    }

    .cp-site-header__compact-icon svg {
        width: 18px;
        height: 18px;
    }

    /* Signed out, the bar carries BOTH a "Sign in" button and the
       ShiftTrack avatar beside it, and both open the same modal. On this
       bar that redundancy costs ~70px of a 390px screen and the page
       title pays for it -- measured, "Book an Appointment" truncated to
       "Book an Appoin...". The avatar stays; it is the one that matches
       where the signed-in avatar sits. */
    .cp-site-header--has-compact .cp-header-signin {
        display: none;
    }

    .cp-site-header__compact-title {
        min-width: 0;
        overflow: hidden;
        color: var(--cp-heading);
        font-size: 14.5px;
        font-weight: 700;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}