/* Phase 22h.N1 (2026-05-22) — ARCHER News public portal styles.
   Light-weight overlay on Bootstrap 5; the brand uses Sky (#38BDF8)
   to align with the Clients Portal LOGO bundle (Phase 22h.WB2-LOGO). */

:root {
    --archer-primary: #38BDF8;
    --archer-primary-deep: #0EA5E9;
    --archer-ink: #0F172A;
    --archer-ink-3: #475569;
    --archer-line: #E2E8F0;
}

html, body { font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--archer-ink); }

/* ── Site chrome ───────────────────────────────────────────── */

.site-header  { background: #fff; border-bottom: 1px solid var(--archer-line); }

/* ARCHER GA logo (Phase 22h.News-E2, 2026-06-08). The text wordmark +
   marketing nav were removed at the user's request — the header is now
   just the logo image. */
.site-brand   { display: inline-flex; align-items: center; text-decoration: none; }
.site-logo    { height: 40px; width: auto; display: block; }

@media (max-width: 575.98px) {
    .site-logo { height: 32px; }
}

.site-footer  { background: #F8FAFC; border-top: 1px solid var(--archer-line); }

/* ── Hero band (News-E) ───────────────────────────────────── */

.news-hero-band {
    background: linear-gradient(180deg, #F8FAFC 0%, #fff 100%);
    border-bottom: 1px solid var(--archer-line);
    padding: 3.25rem 0 2.75rem;
}
.news-hero-title {
    font-size: clamp(2rem, 4.5vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--archer-ink);
    margin: 0 0 .65rem;
}
.news-hero-sub {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.55;
    color: var(--archer-ink-3);
    max-width: 760px;
    margin: 0;
}

/* ── Category tab strip (News-F) ──────────────────────────── */

.news-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    border-bottom: 1px solid var(--archer-line);
    margin-bottom: .5rem;
}
.news-tab {
    background: none;
    border: 0;
    padding: .5rem 0;
    margin-bottom: -1px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--archer-ink-3);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}
.news-tab:hover:not(:disabled) { color: var(--archer-ink); }
.news-tab:disabled { cursor: default; opacity: .6; }
.news-tab.active {
    color: var(--archer-primary-deep);
    border-bottom-color: var(--archer-primary-deep);
}

/* ── Cards (news list) ────────────────────────────────────── */

.news-card { transition: transform 120ms ease, box-shadow 120ms ease; }
.news-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(15,23,42,.08) !important; }
.news-card .card-title { color: var(--archer-ink); }
.news-card .card-body { display: flex; flex-direction: column; }

.news-card-meta {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.news-card-date {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--archer-ink-3);
}
.news-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-readmore {
    margin-top: auto;
    padding-top: .35rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--archer-primary-deep);
}
.news-card:hover .news-readmore { text-decoration: underline; }

/* ── Category badges (News-F) ─────────────────────────────── */

.news-badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.4;
}
/* Distinct, accessible accent per category. */
.news-badge-policy     { background: #EEF2FF; color: #4338CA; }  /* indigo */
.news-badge-skilled    { background: #F0FDFA; color: #0F766E; }  /* teal   */
.news-badge-family     { background: #FFF1F2; color: #BE123C; }  /* rose   */
.news-badge-student    { background: #FFFBEB; color: #B45309; }  /* amber  */
.news-badge-processing { background: #F1F5F9; color: #334155; }  /* slate  */
.news-badge-alerts     { background: #FEF2F2; color: #B91C1C; }  /* red    */
.news-badge-other      { background: #F1F5F9; color: #475569; }  /* grey   */

/* ── Detail page ──────────────────────────────────────────── */

.news-hero {
    height: 360px;
    background-size: cover;
    background-position: center;
    margin-bottom: 1rem;
}

.news-article { max-width: 760px; }
.news-article .news-body { font-size: 1.05rem; line-height: 1.65; color: var(--archer-ink); }
.news-article .news-body h2,
.news-article .news-body h3 { margin-top: 1.5rem; }
.news-article .news-body p  { margin-bottom: 1rem; }
.news-article .news-body img { max-width: 100%; height: auto; border-radius: 8px; }
.news-article .news-body blockquote {
    border-left: 3px solid var(--archer-primary);
    padding-left: 1rem;
    color: var(--archer-ink-3);
    margin: 1.5rem 0;
}

/* ── Blazor error UI ──────────────────────────────────────── */

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}