/* =========================================================
   Jumbo Status — brand overlay for cState
   Applied on top of cState's built-in stylesheet.
   Source palette: Jumbo Brand Guidelines, March 2026.
   ========================================================= */

/* Söhne family — local woff2 from Jumbo marketing site */
@font-face {
  font-family: "Söhne";
  src: url("/brand/fonts/Sohne-Buch.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Söhne";
  src: url("/brand/fonts/Sohne-Kraftig.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Söhne Breit";
  src: url("/brand/fonts/SohneBreit-Halbfett2.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --jumbo-bg: #0B1117;
  --jumbo-card: #151D25;
  --jumbo-mint: #6DE8B8;
  --jumbo-mint-dim: #4CC99A;
  --jumbo-white: #FFFFFF;
  --jumbo-offwhite: #D8DDE3;
  --jumbo-text-gray: #9BA3AD;
  --jumbo-light-gray: #6B7280;
  --jumbo-divider: #2A3540;
  --jumbo-stat-green: #34D399;
  --jumbo-stat-amber: #FBBF24;
  --jumbo-stat-blue: #60A5FA;
  --jumbo-red: #F87171;
}

/* ── Base typography + canvas ───────────────────────────── */
html, body {
  background: var(--jumbo-bg) !important;
  color: var(--jumbo-offwhite) !important;
  font-family: "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-feature-settings: "ss01", "ss02";
}

h1, h2, h3, h4, h5, h6,
.title, .site-title {
  font-family: "Söhne Breit", "Söhne", sans-serif !important;
  font-weight: 700;
  color: var(--jumbo-white);
  letter-spacing: -0.01em;
}

a { color: var(--jumbo-mint); }
a:hover { color: var(--jumbo-mint-dim); }

/* ── Header / hero ──────────────────────────────────────── */
/* cState paints the header with `params.brand`. We also
   lay an aurora glow on top for the premium, on-brand feel. */
header, .header, .site-header {
  background: var(--jumbo-bg) !important;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--jumbo-divider);
}

header::before,
.header::before,
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 85% 10%, rgba(40, 180, 120, 0.28), transparent 60%),
    radial-gradient(50% 70% at 10% 90%, rgba(0, 150, 140, 0.18), transparent 70%);
  z-index: 0;
}

header > *,
.header > *,
.site-header > * {
  position: relative;
  z-index: 1;
}

.logo img, .site-title img {
  max-height: 28px;
  width: auto;
}

/* ── Status banner colors ───────────────────────────────── */
.status, .status-banner, .hero, .callout {
  background: var(--jumbo-card) !important;
  color: var(--jumbo-white) !important;
}

/* ── Service favicons (Zoom/Stripe/Vimeo rows) ──────────── */
/* cState assigns id="system-<slug>" to each component row. We
   prepend a favicon via background-image + left padding so the
   logo appears inline before the service name without having to
   override the theme template. Using Google's favicon service
   (s2/favicons) gives us the canonical brand mark for each. */
.component[id^="system-zoom"],
.component[id^="system-stripe"],
.component[id^="system-vimeo"] {
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: 1rem 1.15em;
  padding-left: 2.35rem !important;
}
.component[id^="system-zoom"]   { background-image: url("https://www.google.com/s2/favicons?sz=32&domain=zoom.us"); }
.component[id^="system-stripe"] { background-image: url("https://www.google.com/s2/favicons?sz=32&domain=stripe.com"); }
.component[id^="system-vimeo"]  { background-image: url("https://www.google.com/s2/favicons?sz=32&domain=vimeo.com"); }

/* ── Category headers ───────────────────────────────────── */
/* cState sets the category text color based on .category__head
   data-status which defaults to near-black. Override to stay
   readable on the dark canvas. */
.category__head,
.category__head > *,
.category__head b {
  color: var(--jumbo-white) !important;
  font-family: "Söhne", sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.category__head[data-status="ok"],
.category__head[data-status="ok"] b { color: var(--jumbo-white) !important; }
.category__head[data-status="disrupted"],
.category__head[data-status="disrupted"] b { color: var(--jumbo-stat-amber) !important; }
.category__head[data-status="down"],
.category__head[data-status="down"] b { color: var(--jumbo-red) !important; }
.category__head[data-status="notice"],
.category__head[data-status="notice"] b { color: var(--jumbo-stat-blue) !important; }

/* ── Hover treatment — subtle mint wash ─────────────────────
   cState ships `.issue:hover, .category__head:hover { background: rgb(245,245,245); }`
   which is a light-theme rule. On our dark canvas it nuked readability
   (white text on near-white bg). Override to a faint mint color-only
   wash — no accent bar, no glow ring, nothing that reads as a new
   element appearing. Use background-color (not background shorthand!)
   so the favicon background-image on Zoom/Stripe/Vimeo rows stays. */
.issue:hover,
.category__head:hover,
.component:hover,
.incident:hover,
li[class*="issue"]:hover,
ul.issue-list > li:hover,
.issue-list > li:hover {
  background-color: rgba(109, 232, 184, 0.06) !important;
  transition: background-color 160ms ease;
}

/* Keep text at full contrast on hover — no opacity/color fade. */
.issue:hover,
.issue:hover *,
.category__head:hover,
.category__head:hover *,
.component:hover,
.component:hover * {
  color: var(--jumbo-white) !important;
  opacity: 1 !important;
}

/* Status pills inside hovered rows keep their semantic color */
.category__head:hover .category-status[data-status="ok"],
.component:hover .component-status,
.component:hover [class*="ok"]       { color: var(--jumbo-stat-green) !important; }
.component:hover [class*="disrupted"] { color: var(--jumbo-stat-amber) !important; }
.component:hover [class*="down"]      { color: var(--jumbo-red) !important; }
.component:hover [class*="notice"]    { color: var(--jumbo-stat-blue) !important; }

/* ── Systems / cards ────────────────────────────────────── */
.systems, .system, .panel, .card,
.incident, .post, article {
  background: var(--jumbo-card) !important;
  border: 1px solid var(--jumbo-divider) !important;
  border-radius: 6px !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.40);
  color: var(--jumbo-offwhite) !important;
}

.systems h2, .systems h3,
.panel h2, .panel h3,
.card h2, .card h3 {
  color: var(--jumbo-mint) !important;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* cState status pills */
.ok, .operational   { color: var(--jumbo-stat-green) !important; }
.disrupted, .warn   { color: var(--jumbo-stat-amber) !important; }
.down, .outage      { color: var(--jumbo-red) !important; }
.notice, .maint     { color: var(--jumbo-stat-blue) !important; }

/* Uptime histogram bars */
.histogram .bar.ok,        .histogram .bar.operational { background: var(--jumbo-stat-green) !important; }
.histogram .bar.disrupted, .histogram .bar.warn        { background: var(--jumbo-stat-amber) !important; }
.histogram .bar.down,      .histogram .bar.outage      { background: var(--jumbo-red) !important; }
.histogram .bar.notice                                 { background: var(--jumbo-stat-blue) !important; }

/* ── Unlinked affected references ───────────────────────── */
/* Applied by below-footer.html to any <a> originally pointing
   at /affected/<slug>/. Strips the link chrome so it reads as
   plain text — same weight, no color, no hover. */
.jumbo-unlinked,
.jumbo-unlinked:hover,
.jumbo-unlinked:focus {
  color: var(--jumbo-offwhite) !important;
  cursor: default !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  pointer-events: none;
}

/* Affected tags on incident pages keep the pill look but drop
   the interactive color (these render via .tag). */
.tag.jumbo-unlinked {
  background: var(--jumbo-card) !important;
  color: var(--jumbo-text-gray) !important;
  border: 1px solid var(--jumbo-divider);
}

/* ── Body text & small type ─────────────────────────────── */
p, li, td { color: var(--jumbo-offwhite); }
small, .meta, .caption, time { color: var(--jumbo-text-gray); }

hr, .divider { border-color: var(--jumbo-divider) !important; background: var(--jumbo-divider) !important; }

/* ── Footer ─────────────────────────────────────────────── */
footer, .footer, .site-footer {
  background: var(--jumbo-bg) !important;
  color: var(--jumbo-offwhite) !important;
  border-top: 1px solid var(--jumbo-divider);
  padding: 2rem 1rem 3rem !important;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.6;
}

footer a, .footer a, .site-footer a {
  color: var(--jumbo-mint);
  text-decoration: none;
}
footer a:hover, .footer a:hover, .site-footer a:hover { color: var(--jumbo-mint-dim); }

/* Copyright line */
footer p, .footer p, .site-footer p {
  margin: 0.5rem auto;
  max-width: 640px;
  color: var(--jumbo-offwhite);
}

/* Small meta text (POWERED BY, RSS subscribe) */
footer small, .footer small, .site-footer small,
footer .small, .footer .small, .site-footer .small {
  color: var(--jumbo-light-gray);
  font-size: 0.75rem;
}

/* Powered-by attribution — keep it subtle */
footer .powered-by, .footer .powered-by,
footer [class*="powered"], .footer [class*="powered"] {
  color: var(--jumbo-light-gray);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 1.25rem;
  opacity: 0.7;
}

/* Back-to-top anchor — give it its own line and a pill treatment
   so it reads as an action rather than a run-on link in the copy.
   Also see `html { scroll-behavior: smooth }` below for the scroll UX. */
footer p:has(> a[href="#"]),
.footer p:has(> a[href="#"]),
.site-footer p:has(> a[href="#"]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

/* Hide the "•" separator and the surrounding nbsp spacers that
   cState injects between the copyright and the back-to-top link. */
footer p:has(> a[href="#"])::before,
footer p:has(> a[href="#"])::after { content: none; }

footer a[href="#"],
.footer a[href="#"],
.site-footer a[href="#"] {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin-top: 0.25rem;
  border: 1px solid var(--jumbo-divider);
  border-radius: 999px;
  color: var(--jumbo-offwhite) !important;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 120ms ease, color 120ms ease;
}
footer a[href="#"]:hover,
.footer a[href="#"]:hover,
.site-footer a[href="#"]:hover {
  border-color: var(--jumbo-mint);
  color: var(--jumbo-mint) !important;
}
footer a[href="#"]::before,
.footer a[href="#"]::before,
.site-footer a[href="#"]::before {
  content: "↑ ";
  margin-right: 0.25rem;
}

/* Smooth scroll for any in-page anchor (back-to-top primarily). */
html { scroll-behavior: smooth; }

/* Post-incident report — "heads-up" amber capsule below the update
   log on incident pages. Rendered via <div class="jumbo-rca" markdown="1">.
   Rounded pill-ish corners (18px) set it apart from the sharper
   incident chrome above and below. */
.jumbo-rca {
  max-width: 720px;
  margin: 3rem auto 1.5rem;
  padding: 1.75rem 2rem 1.5rem;
  background: rgba(251, 191, 36, 0.06);         /* faint amber wash */
  border: 1px solid rgba(251, 191, 36, 0.45);   /* amber ring */
  border-radius: 18px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
  color: var(--jumbo-offwhite);
}
.jumbo-rca h2 {
  margin: 0 0 0.25rem;
  font-family: "Söhne Breit", "Söhne", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--jumbo-stat-amber) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.jumbo-rca em:first-of-type { /* "Published <date>" meta line */
  display: block;
  margin: 0 0 1.25rem;
  color: var(--jumbo-text-gray);
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.jumbo-rca p {
  margin: 0.75rem 0;
  line-height: 1.55;
}
.jumbo-rca strong { color: var(--jumbo-white); }
.jumbo-rca em {
  color: var(--jumbo-offwhite);
  font-style: italic;
}

/* Back-to-jumbo link we inject below the archive note. */
.jumbo-backlink {
  max-width: 720px;
  margin: 0.75rem auto 1.5rem !important;
  text-align: center;
  font-size: 0.875rem;
}
.jumbo-backlink a {
  color: var(--jumbo-mint) !important;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.jumbo-backlink a:hover { color: var(--jumbo-mint-dim) !important; }

/* "Earlier incidents" note we inject via above-footer.html */
.jumbo-archive-note {
  max-width: 720px;
  margin: 2.5rem auto 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--jumbo-card);
  border: 1px solid var(--jumbo-divider);
  border-radius: 6px;
  color: var(--jumbo-offwhite);
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.5;
}
.jumbo-archive-note a {
  color: var(--jumbo-mint);
  text-decoration: none;
  border-bottom: 1px dotted var(--jumbo-mint-dim);
}
.jumbo-archive-note a:hover { color: var(--jumbo-mint-dim); border-bottom-style: solid; }

/* ── Light mode override ────────────────────────────────── */
/* The brand is a dark-first identity. Keep it dark regardless
   of prefers-color-scheme so the page is always on-brand. */
@media (prefers-color-scheme: light) {
  html, body { background: var(--jumbo-bg) !important; color: var(--jumbo-offwhite) !important; }
}