/* ============================================================
 * user_ui - Banned/Frozen banner chrome (Phase 7 Package J).
 * ============================================================
 *
 * Persistent top-of-page banner. Two states render with the
 * same structural CSS (`.site-banner` base) and a state
 * modifier (`.site-banner-banned` / `.site-banner-frozen`)
 * supplying the accent color.
 *
 * PLACEHOLDER visual - simple horizontal bar with icon +
 * title + body + CTA. Owner-supplied final design lands in
 * Phase 7 Package PP (7.42); keep selectors stable so that
 * redesign is pure CSS work.
 *
 * Section-local classes (no canonical mockup equivalents):
 *   - .site-banner                    base bar (full-width)
 *   - .site-banner-banned             red accent
 *   - .site-banner-frozen             gold/amber accent
 *   - .site-banner-row                inner flex row inside .wrap
 *   - .site-banner-icon               20x20 left icon
 *   - .site-banner-content            title + text stack
 *   - .site-banner-title              short headline
 *   - .site-banner-text               body copy
 *   - .site-banner-cta                primary CTA button
 *
 * Layout: full-bleed background bar; inner content centred
 * inside .wrap (project-wide max-width container, defined in
 * shared/base.css). Sits ABOVE the header by virtue of DOM
 * order in base.html - the banner block precedes the header
 * block.
 *
 * Loaded by base.html after notifications/notifications.css.
 * ============================================================ */

/* ============================================================
 * 1. Base bar - structural styles shared by both states.
 *    Background + border-bottom + text color set per state.
 *    Padding tuned so the row reads at 56px tall on desktop.
 * ============================================================ */
.site-banner {
    width: 100%;
    border-bottom: 1px solid transparent;
    color: #fff;
    /* Hardcoded white text on the colored background - the
       banner color carries through both light + dark themes,
       so the contrast pair is fixed. */
}

/* ============================================================
 * 2. State variants - accent backgrounds.
 *    Banned uses a deep red; frozen uses an amber/gold. Both
 *    sit well alongside the brand orange without competing.
 * ============================================================ */
.site-banner-banned {
    background: #B91C1C; /* red 700 */
    border-bottom-color: #991B1B; /* red 800 */
}
.site-banner-frozen {
    background: #B45309; /* amber 700 */
    border-bottom-color: #92400E; /* amber 800 */
}
/* Steam Account Age Restriction (banner partial branches 3 + 4).
   Deep blue for the known-age "too young" lockout, violet for the
   unverifiable-age (private profile) lockout — both informational
   rather than punitive, so they sit apart from the red/amber pair
   while keeping the same fixed white-text contrast contract. */
.site-banner-age-restricted {
    background: #1D4ED8; /* blue 700 */
    border-bottom-color: #1E40AF; /* blue 800 */
}
.site-banner-age-unknown {
    background: #6D28D9; /* violet 700 */
    border-bottom-color: #5B21B6; /* violet 800 */
}
/* Readiness banners (readiness pass — banner partial branches 5 + 6).
   Yellow for the missing-delivery-address notice, red for the
   missing-trade-URL notice ("big fat red banner" per the product
   decision). Both stackable + independent of the account-state pair;
   same fixed white-text contrast contract. The red deliberately sits a
   step brighter than the banned red-700 so the two are distinguishable
   if design ever revives a banned banner. */
.site-banner-address-missing {
    background: #A16207; /* yellow 700 — CodeRabbit a11y: white text on
                            yellow-600 (#CA8A04) fell below the contrast
                            threshold; 700 matches the level every other
                            banner background uses. */
    border-bottom-color: #854D0E; /* yellow 800 — one shade darker than
                                     the background, same pattern as the
                                     other state pairs. */
}
.site-banner-trade-url-missing {
    background: #DC2626; /* red 600 */
    border-bottom-color: #B91C1C; /* red 700 */
}

/* ============================================================
 * 3. Inner row - icon | content | CTA. Sits inside `.wrap` so
 *    horizontal padding matches the rest of the chrome.
 *
 *    Flex layout: icon (fixed), content (flex 1, wraps if
 *    needed), CTA (fixed). Vertically centred.
 * ============================================================ */
.site-banner-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
}

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

/* ============================================================
 * 5. Content - title (Saira 700/14) + text (Work Sans 400/13).
 *    Stacks on small viewports; inline on desktop.
 * ============================================================ */
.site-banner-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
}
.site-banner-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: #fff;
}
.site-banner-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

/* ============================================================
 * 6. CTA - small button. Inverts colors relative to the bar:
 *    white background, banner-state text. Pulls focus.
 *
 *    `.btn.primary.sm` (canonical Package B button) supplies
 *    height + padding + radius + typography; we override the
 *    background/text/border to fit the bar.
 *
 *    Theme-invariant: the banner backgrounds themselves are
 *    hardcoded red/amber (NOT theme-token-driven), so the CTA
 *    on top of them must also be hardcoded. Using
 *    `var(--text)` previously resolved to white in dark
 *    theme and produced white-on-white (invisible). Per-state
 *    text colours keep the CTA legible in both themes and
 *    echo the banner's own accent.
 * ============================================================ */
.site-banner-cta {
    flex-shrink: 0;
    background: #fff;
    border: 0;
    /* `color` set per-banner-state below — never via theme
       tokens, since the banner is theme-invariant. */
}
.site-banner-banned .site-banner-cta {
    color: #B91C1C;          /* banned accent (red 700) */
}
.site-banner-frozen .site-banner-cta {
    color: #B45309;          /* frozen accent (amber 700) */
}
.site-banner-age-restricted .site-banner-cta {
    color: #1D4ED8;          /* age accent (blue 700) */
}
.site-banner-age-unknown .site-banner-cta {
    color: #6D28D9;          /* age-unknown accent (violet 700) */
}
.site-banner-address-missing .site-banner-cta {
    color: #A16207;          /* readiness accent (yellow 700) */
}
.site-banner-trade-url-missing .site-banner-cta {
    color: #B91C1C;          /* readiness accent (red 700) */
}
.site-banner-cta:hover {
    /* Theme-invariant light grey - distinct from #fff but
       still readable against any banner color. Text colour
       stays on the per-state rules above. */
    background: #F3F4F6;
}
.site-banner-banned .site-banner-cta:focus-visible {
    /* Darker red than the banner background so the focus
       ring is visible against the red bar. Matches the
       banner-bottom border colour for visual cohesion. */
    outline: 2px solid #991B1B;   /* red 800 */
    outline-offset: 2px;
}
.site-banner-frozen .site-banner-cta:focus-visible {
    outline: 2px solid #92400E;   /* amber 800 */
    outline-offset: 2px;
}
.site-banner-age-restricted .site-banner-cta:focus-visible,
.site-banner-age-unknown .site-banner-cta:focus-visible,
.site-banner-address-missing .site-banner-cta:focus-visible,
.site-banner-trade-url-missing .site-banner-cta:focus-visible {
    /* High-contrast white ring (CodeRabbit a11y finding) - a same-hue
       darker shade (blue 800 / violet 800) is near-invisible against
       the blue/violet bars (~1.3:1). The 2px offset leaves a strip of
       banner colour between the white button and the white ring, so
       the ring stays distinguishable from the button edge. The
       banned/frozen rings keep the legacy same-hue pattern until the
       Package PP (7.42) visual overhaul aligns all four states. */
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

/* Inert placeholder state - same dim treatment as the
   header/footer inert links. Lifted into the banner scope
   because the global rule lives inside nav.primary which
   doesn't apply here. */
.site-banner-cta[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================
 * 7. Mobile - stack content + CTA vertically; CTA full-width
 *    so it doesn't get cropped on narrow viewports.
 * ============================================================ */
@media (max-width: 600px) {
    .site-banner-row {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px 14px;
    }
    .site-banner-icon {
        margin-top: 2px;
    }
    .site-banner-content {
        flex-basis: calc(100% - 34px);
    }
    .site-banner-cta {
        flex-basis: 100%;
        text-align: center;
    }
}