/* ============================================================
 * user_ui - Site announcements chrome (Phase 7 Package RR / 7.44).
 * ============================================================
 *
 * Dismissible top-of-page announcement bars, stacked below the
 * account-state (banned/frozen) + impersonation banners. Newest
 * first. One structural base (`.site-announcement`) + a severity
 * modifier (`-info` / `-warning` / `-critical`) supplying a FIXED,
 * theme-invariant accent.
 *
 * Theme-invariant by design (same contract as banner.css): the
 * bar backgrounds are hardcoded blue / amber / red and the text
 * is hardcoded white, so the contrast pair holds in both light
 * and dark mode. Do NOT route these through theme tokens.
 *
 * Section-local classes (no canonical mockup equivalents):
 *   - .site-announcements          stack wrapper
 *   - .site-announcement           one bar (full-bleed)
 *   - .site-announcement-info      blue accent
 *   - .site-announcement-warning   amber accent
 *   - .site-announcement-critical  red accent
 *   - .site-announcement-row       inner flex row inside .wrap
 *   - .site-announcement-icon      20x20 left icon
 *   - .site-announcement-content   title + text + link stack
 *   - .site-announcement-title     short bold lead
 *   - .site-announcement-text      body copy
 *   - .site-announcement-link      inline CTA
 *   - .site-announcement-dismiss   X close button
 *
 * Layout: full-bleed background bar; inner content centred inside
 * `.wrap` (project-wide max-width container, shared/base.css).
 * Sits above the header by DOM order in base.html.
 *
 * Loaded by base.html after banner/banner.css.
 * ============================================================ */

/* ------------------------------------------------------------
 * 1. Stack wrapper - bars sit flush; each carries its own border.
 * ---------------------------------------------------------- */
.site-announcements {
    width: 100%;
}

/* ------------------------------------------------------------
 * 2. Base bar - structural styles shared by all severities.
 *    Background + border + accent colour set per severity.
 * ---------------------------------------------------------- */
.site-announcement {
    width: 100%;
    border-bottom: 1px solid transparent;
    color: #fff;
}
.site-announcement[hidden] {
    display: none;
}

/* ------------------------------------------------------------
 * 3. Severity variants - fixed accent backgrounds.
 * ---------------------------------------------------------- */
.site-announcement-info {
    background: #1D4ED8;            /* blue 700 */
    border-bottom-color: #1E40AF;  /* blue 800 */
}
.site-announcement-warning {
    background: #B45309;            /* amber 700 */
    border-bottom-color: #92400E;  /* amber 800 */
}
.site-announcement-critical {
    background: #B91C1C;            /* red 700 */
    border-bottom-color: #991B1B;  /* red 800 */
}

/* ------------------------------------------------------------
 * 4. Inner row - icon | content | dismiss. Inside `.wrap` so
 *    horizontal padding matches the rest of the chrome.
 * ---------------------------------------------------------- */
.site-announcement-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 0;
}

/* ------------------------------------------------------------
 * 5. Icon - 20x20 stroke icon, left of content.
 * ---------------------------------------------------------- */
.site-announcement-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #fff;
}

/* ------------------------------------------------------------
 * 6. Content - title (Saira 700/14) + text (Work Sans 400/13)
 *    + optional inline link. Wraps on small viewports.
 * ---------------------------------------------------------- */
.site-announcement-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}
.site-announcement-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: #fff;
}
.site-announcement-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.94);
}
.site-announcement-link {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.5;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.site-announcement-link:hover {
    text-decoration: none;
}
.site-announcement-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ------------------------------------------------------------
 * 7. Dismiss - small X button on the right. Subtle by default,
 *    brightens on hover. Theme-invariant (white-on-accent).
 * ---------------------------------------------------------- */
.site-announcement-dismiss {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.site-announcement-dismiss svg {
    width: 15px;
    height: 15px;
}
.site-announcement-dismiss:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}
.site-announcement-dismiss:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ------------------------------------------------------------
 * 8. Mobile - stack icon/content/dismiss legibly on narrow
 *    viewports; keep the dismiss reachable top-right.
 * ---------------------------------------------------------- */
@media (max-width: 600px) {
    .site-announcement-row {
        align-items: flex-start;
        gap: 10px;
    }
    .site-announcement-icon {
        margin-top: 2px;
    }
    .site-announcement-dismiss {
        margin-top: -2px;
    }
}