/* ============================================================
   Sheridan Branding Kit — standard app header
   Requires tokens.css (--blue-deep, --blue, --blue-edge,
   --cyan-bright, --white).
   ============================================================ */

.header {
    background: linear-gradient(102deg,
                  var(--blue-deep) 11.67%,
                  var(--blue)      44.64%,
                  var(--blue-edge) 77.6%);
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--white);
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* The wordmark — height locked to 32px so the gradient bar
   stays a consistent 68px tall across the suite. width: auto
   keeps the aspect ratio (the wordmark is ~4.7:1). */
.header-logo {
    height: 32px;
    width: auto;
    color: var(--white);
    flex-shrink: 0;
}
.header-logo path { fill: currentColor; }

/* The 2px cyan-bright pipe is the brand separator between the
   wordmark and the app sublabel. Keep it. align-self:stretch
   makes it match whatever the tallest sibling is. */
.header-pipe {
    width: 2px;
    align-self: stretch;
    background: var(--cyan-bright);
    flex-shrink: 0;
}

.header-sublabel {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.2;
    white-space: nowrap;
    letter-spacing: .1px;
    /* Both sublabel lines are always left-justified. Explicit so a page-level
       `header { text-align: center }` (or similar) can't recentre them. */
    text-align: left;
}
.header-sublabel-line { display: block; }

.header-user {
    font-size: 13px;
    opacity: .8;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.header-user .header-actions {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}
.header-user .header-action {
    color: rgba(255, 255, 255, .75);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .3);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.header-user .header-action:hover {
    color: var(--white);
    text-decoration-color: rgba(255, 255, 255, .7);
}
.header-user .header-action.header-action--cyan {
    color: var(--white);
    background: var(--cyan);
    padding: 5px 14px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;     /* ClassicGrotesque only ships 400 + 700; 500 → 400 */
    font-size: 13px;
    border: 1px solid var(--cyan);
    text-shadow: 0 1px 1px rgba(0, 55, 103, 0.35);
    transition: background-color 160ms ease,
                border-color 160ms ease,
                color 160ms ease,
                text-shadow 160ms ease;
}
.header-user .header-action.header-action--cyan:hover {
    color: var(--blue);
    background: #7fdcea;
    border-color: #7fdcea;
    text-decoration: none;
    text-shadow: none;
}
/* Rhodamine variant — same shape as --cyan, secondary accent. Pure white text
   over a deep-rhodamine shadow for maximum contrast/crispness without bolding
   (ClassicGrotesque ships 400 + 700; 500 maps to 400, so this stays non-bold). */
.header-user .header-action.header-action--rhodamine {
    color: #fff;
    background: var(--rhodamine);
    padding: 5px 14px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    border: 1px solid #e96fad;   /* lighter rhodamine — soft highlight edge */
    text-shadow: 0 1px 2px rgba(74, 8, 42, 0.55);
    transition: background-color 160ms ease,
                border-color 160ms ease,
                color 160ms ease,
                text-shadow 160ms ease;
}
.header-user .header-action.header-action--rhodamine:hover {
    color: #fff;
    background: #c01f70;
    border-color: #c01f70;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(74, 8, 42, 0.65);
}

/* Sign-out dialog styles live inline in partials/header.php so they ship
   with the dialog markup itself. Keeps them load-order independent. */

/* Mobile: hide the sublabel + pipe to give the wordmark room. */
@media (max-width: 820px) {
    .header-sublabel,
    .header-pipe { display: none; }
    .header { padding: 14px 18px; }
}

/* HUD scale — for at-a-distance check-in/check-out display screens.
   Brand vocabulary stays the same; the bar is kept compact so the
   table below can use most of the screen for data. */
.header--hud {
    padding: 14px 18px;
}
.header--hud .header-logo {
    height: 44px;
}
.header--hud .header-sublabel {
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: .2px;
}

/* "Results as of …" — date stamp that lives inside the header bar on HUD
   pages. The poll JS writes a .date-label + <h1> into #banner-date. */
.header-date {
    text-align: right;
    line-height: 1.2;
    color: var(--white);
    font-family: var(--font-body);
}
.header-date .date-label {
    font-size: 16px;
    font-weight: 300;
    color: rgba(255, 255, 255, .75);
    letter-spacing: .3px;
    text-transform: uppercase;
}
.header-date h1 {
    font-family: var(--font-body);
    font-size: 26px;
    font-weight: 400;
    color: var(--white);
    margin: 0;
    letter-spacing: .1px;
    line-height: 1.15;
}