/* ═══════════════════════════════════════════════════════════════════
   Zype Status — custom CSS  (Statuspage › Customize page › Customize HTML & CSS)
   Mirrors the zype-mcp landing page tokens (dark scheme).
   Set the Colors tab first; this file handles type, shape and chrome.
   ═══════════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");

/* Zype tokens (from zype-mcp/public/index.html) */
:root {
  --zp-chrome: #000000;      /* header + footer band */
  --zp-bg: #1C1F27;          /* page */
  --zp-surface: #252830;     /* cards */
  --zp-well: #22252E;
  --zp-ink: #EEF0F5;         /* headings */
  --zp-text: #E2E4EA;        /* body */
  --zp-muted: #AEB6C5;
  --zp-border: #3D4454;
  --zp-accent: #F9DC3B;      /* Zype yellow */
  --zp-accent-hover: #FBE776;
  --zp-link: #8ECFFF;
  --zp-radius: 5px;
  --zp-radius-card: 10px;
  --zp-font: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

/* ── Base ───────────────────────────────────────────────────────── */
html, body { background: var(--zp-bg) !important; }
body, body.status,
.layout-content.status, .layout-content.status *:not(.fa) {
  font-family: var(--zp-font) !important;
}
body.status { color: var(--zp-text); -webkit-font-smoothing: antialiased; }
.layout-content.status h1, .layout-content.status h2, .layout-content.status h3,
.layout-content.status .font-largest, .layout-content.status .font-large { color: var(--zp-ink); }
.layout-content.status a:focus-visible { outline: 2px solid var(--zp-accent); outline-offset: 2px; }
.layout-content.status > .container { max-width: 900px; }

/* ── Custom header (black band, like zype-mcp) ─────────────────── */
.layout-content.status .custom-header-container { margin-bottom: 0 !important; }
.zp-header { background: var(--zp-chrome); color: #fff; }
.zp-wrap { width: 90%; max-width: 900px; margin: 0 auto; }
.zp-wrap.zp-wide { max-width: 1120px; }   /* header + footer bands, same width as zype-mcp */
.zp-header .zp-wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.zp-brand { display: flex; align-items: center; gap: 12px; color: #fff !important; text-decoration: none !important; }
.zp-brand svg { width: 112px; height: auto; display: block; }
.zp-tag { font-size: 11px; font-weight: 700; letter-spacing: .12em; line-height: 1; color: #000; background: var(--zp-accent); border-radius: 3px; padding: 4px 7px; }
.zp-nav { margin-left: auto; display: flex; gap: 22px; }
.zp-nav a { color: #fff !important; text-decoration: none !important; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.zp-nav a:hover { opacity: 1; color: var(--zp-accent) !important; }
.zp-header .zp-wrap { gap: 18px; }
.zp-nav { gap: 20px; }
.zp-btn-secondary {
  display: inline-flex; align-items: center; white-space: nowrap; padding: 9px 14px; border-radius: var(--zp-radius);
  border: 1px solid #5A6175; color: #fff !important; text-decoration: none !important;
  font: 700 11px/1 var(--zp-font); letter-spacing: .08em; text-transform: uppercase;
}
.zp-btn-secondary:hover { border-color: var(--zp-accent); color: var(--zp-accent) !important; }

/* Subscribe button (injected into #replace-with-subscribe) */
.layout-content.status .custom-header-container .updates-dropdown-container { display: inline-block !important; }
.zp-header .show-updates-dropdown {
  display: inline-flex; align-items: center; background: var(--zp-accent) !important; color: #000 !important;
  border: 0; border-radius: var(--zp-radius); box-shadow: none !important; padding: 10px 16px !important;
  font: 700 11px/1 var(--zp-font) !important; letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; white-space: nowrap;
}
.zp-header .show-updates-dropdown:hover { background: var(--zp-accent-hover) !important; color: #000 !important; }
.zp-header .updates-dropdown { color: var(--zp-text); text-transform: none; letter-spacing: 0; }

/* Hero strip under the header */
.zp-hero { background: linear-gradient(180deg, #000 0%, var(--zp-bg) 100%); padding: 40px 0 36px; }
.zp-eyebrow { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--zp-muted); }
.zp-hero h1 { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 300; line-height: 1.2; color: var(--zp-ink); }
.zp-hero h1 strong { font-weight: 700; }
.zp-hero p.zp-lede { margin: 12px 0 0; color: var(--zp-muted); font-size: 15px; max-width: 36rem; }

/* ── Overall status banner ──────────────────────────────────────── */
.layout-content.status.status-index .page-status,
.layout-content.status.status-index .unresolved-incident { border-radius: var(--zp-radius-card); overflow: hidden; }
.layout-content.status.status-index .page-status { margin-top: 8px; }
.layout-content.status.status-index .page-status .status { font-weight: 700; letter-spacing: -.005em; }
.layout-content.status.status-index .page-status .last-updated-stamp { opacity: .85; }

/* ── Component grid → Zype cards ───────────────────────────────── */
.layout-content.status .components-container {
  background: var(--zp-surface); border: 1px solid var(--zp-border) !important;
  border-radius: var(--zp-radius-card); overflow: hidden;
}
.layout-content.status .components-container .component-container { border-color: var(--zp-border) !important; background: transparent; }
.layout-content.status.status-index .components-statuses .component-container .name,
.layout-content.status .components-container .component-inner-container .name { color: var(--zp-text) !important; font-weight: 600; }
.layout-content.status .component-statuses-legend { color: var(--zp-muted); }
.layout-content.status .components-section .components-uptime-link { color: var(--zp-muted) !important; }

/* Uptime bars (if "Display uptime" is on for components) */
.layout-content.status .shared-partial.uptime-90-days-wrapper .legend .legend-item { color: var(--zp-muted) !important; }

/* ── Incident lists (index, history, incident page) ────────────── */
.layout-content.status .incidents-list > h2,
.layout-content.status .incidents-list .font-largest { font-weight: 300; font-size: 1.6rem; }
.layout-content.status .status-day .date { color: var(--zp-ink); font-weight: 700; border-color: var(--zp-border) !important; }
.layout-content.status .status-day.no-incidents p,
.layout-content.status .status-day .update,
.layout-content.status .update-body { color: var(--zp-text); }
.layout-content.status .update strong,
.layout-content.status .update-title { color: var(--zp-ink); }
.layout-content.status .status-day .update small,
.layout-content.status .update-timestamp,
.layout-content.status .components-affected { color: var(--zp-muted) !important; }
.layout-content.status-full-history .month { background: var(--zp-surface); border: 1px solid var(--zp-border); border-radius: var(--zp-radius-card); padding: 20px 24px; }
.layout-content.status.status-incident .page-title .incident-name { font-weight: 700; }

/* ── Buttons and form controls (subscribe forms, modals) ───────── */
.flat-button, .flat-button.full-width {
  background: var(--zp-accent) !important; color: #000 !important; border-radius: var(--zp-radius);
  box-shadow: none !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.flat-button:hover { background: var(--zp-accent-hover) !important; color: #000 !important; }
.updates-dropdown-container .updates-dropdown,
div[id^="subscribe-modal"], .modal-content { border-radius: var(--zp-radius-card) !important; }
.updates-dropdown input[type="text"], .updates-dropdown input[type="email"], .updates-dropdown select,
.modal input[type="text"], .modal input[type="email"] {
  background: var(--zp-well) !important; color: var(--zp-text) !important; border: 1px solid var(--zp-border) !important; border-radius: var(--zp-radius);
}

/* ── Statuspage's own footer row (history link + powered by) ───── */
.layout-content.status .page-footer { border-color: var(--zp-border) !important; margin-bottom: 40px; }
.layout-content.status .page-footer .history-footer-link { color: var(--zp-link) !important; font-weight: 600; }
.layout-content.status .page-footer .powered-by a { color: var(--zp-muted) !important; }

/* ── Custom footer (black band) ────────────────────────────────── */
.zp-footer { background: var(--zp-chrome); color: #9598A2; font-size: 13px; padding: 36px 0; }
.zp-footer .zp-wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.zp-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.zp-footer a { color: #fff !important; text-decoration: none !important; }
.zp-footer a:hover { color: var(--zp-accent) !important; }

/* ── Small screens ─────────────────────────────────────────────── */
@media (max-width: 1100px) { .zp-nav { display: none; } .zp-btn-secondary { margin-left: auto; } }
@media (max-width: 520px) { .zp-btn-secondary { display: none; } }
@media (max-width: 720px) {
  .zp-header .zp-wrap { justify-content: space-between; }
  .zp-hero { padding: 28px 0 24px; }
}

/* ── Page-specific tweaks ──────────────────────────────────────── */
.layout-content.status .components-affected { border-color: var(--zp-border) !important; background: var(--zp-surface); border-radius: var(--zp-radius); }
/* Keep the hero copy to the main status page; incident + history pages get just the eyebrow + title */
.layout-content.status:not(.status-index) .zp-hero .zp-lede { display: none; }
.layout-content.status:not(.status-index) .zp-hero { padding-bottom: 8px; }