/**
 * The release notice bar (#1536) — public pages only.
 *
 *   <link rel="stylesheet" href="/shared/css/site-notice.css">
 *   <script src="/shared/js/site-notice.js" defer></script>   (after help-buddy.js)
 *
 * WHY IT IS ITS OWN FILE
 *
 * `shared/js/site-notice.js` injects this bar above the <header> on seven
 * public pages. A shared component whose styling lives in one page is a
 * trap (see pending-banner.css for how that went), so the styles ship
 * beside the module and every page that loads the module loads these.
 *
 * WHY THESE COLOURS, AND NOT --gwk-* TOKENS
 *
 * It sits directly above the landing hero on main.html, whose palette is
 * main.html's own :root (--green-900 #1a2410, --gold-bright #F0BD3F), not
 * brand.css's --gwk-* set (which has no green-900 of that value and no
 * bright gold at all). The other six pages load brand.css instead. The two
 * token sets disagree, so the bar carries its colours literally and reads
 * the same on every page it mounts on.
 *
 * TWO PHASES, TWO LOOKS
 *
 *   phase 1  deep green, gold hairline      — "the update is live, thank you"
 *   phase 2  bright gold, deep green text   — "how is it working? tap Help"
 *
 * The change of phase is visible without reading (founder, 2026-10-02).
 * Phase 2 is the brand's BRIGHT gold (#F0BD3F), not Opportunity Gold
 * (#D49027): deep green on #D49027 is 5.1:1 and the founder read it as not
 * accessible; on #F0BD3F it is 9.3:1. The darker gold is kept to the
 * hairline.
 *
 * It pushes the page down. It never overlays anything.
 */

.site-notice[hidden] { display: none !important; }

.site-notice {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    position: relative;
    overflow: hidden;
    padding: 0.65rem clamp(1rem, 3vw, 1.5rem);
    background: linear-gradient(90deg, #1a2410 0%, #2E4020 100%);
    color: #F8F5EE;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(0.86rem, 2.4vw, 0.95rem);
    line-height: 1.5;
}

/* the one flourish — the gold hairline, the same gradient as main.html's .section-rule */
.site-notice::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, #D49027, #F0BD3F 60%, transparent);
}

.site-notice-tag {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #F0BD3F;
    white-space: nowrap;
}

.site-notice-text {
    flex: 1 1 26ch;
    min-width: 0;
    margin: 0;
}
.site-notice-text strong { color: #fff; font-weight: 700; }

.site-notice-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
}
.site-notice-actions a,
.site-notice-actions button.site-notice-link {
    color: #F0BD3F;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
}
.site-notice-actions a:hover,
.site-notice-actions button.site-notice-link:hover { color: #fff; }
.site-notice-sep { color: rgba(255, 255, 255, 0.35); }

/* 40px: WCAG 2.5.8 wants 24, and this is the control a thumb goes for */
.site-notice-close {
    margin-left: auto;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 6px;
    background: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.3rem;
    line-height: 1;
}
.site-notice-close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.site-notice a:focus-visible,
.site-notice button:focus-visible {
    outline: 2px solid #E8A82E;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── phase 2: the ask, in bright gold ─────────────────────────────── */
.site-notice--ask { background: #F0BD3F; color: #1a2410; }
.site-notice--ask::after { background: #D49027; }
.site-notice--ask .site-notice-tag { color: #1a2410; }
.site-notice--ask .site-notice-text strong { color: #1a2410; }
.site-notice--ask .site-notice-actions a,
.site-notice--ask .site-notice-actions button.site-notice-link { color: #1a2410; }
.site-notice--ask .site-notice-actions a:hover,
.site-notice--ask .site-notice-actions button.site-notice-link:hover { color: #000; }
.site-notice--ask .site-notice-sep { color: rgba(26, 36, 16, 0.35); }
.site-notice--ask .site-notice-close { color: #1a2410; }
.site-notice--ask .site-notice-close:hover { background: rgba(26, 36, 16, 0.1); }
.site-notice--ask a:focus-visible,
.site-notice--ask button:focus-visible { outline-color: #1a2410; }

/* phone: the tag goes, the sentence keeps two lines, the close stays top right */
@media (max-width: 480px) {
    .site-notice-tag { display: none; }
    /* 40px close + the 1.25rem column gap, so the sentence and the close share the first row */
    .site-notice-text { flex-basis: calc(100% - 40px - 1.25rem); order: 0; }
    .site-notice-close { order: 1; margin-left: 0; }
    .site-notice-actions { order: 2; flex-basis: 100%; }
}