@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap");

/* =====================================================================
   Kuda Status — Custom CSS (rebrand)
   Paste into: Statuspage > Your page > Customize page and emails >
   Customize HTML & CSS > Custom CSS  (replace the existing content).

   Tokens come from the Kuda brand guide (Foundations V1.5).
   Statuspage class names can change; check any rule that doesn't apply
   with your browser's inspector before going live.
   ===================================================================== */

/* ---------- Brand fonts ----------
   Archivo Black (headings) loads from Google Fonts.
   Helvetica Neue (body) is a system font, so it needs no loading;
   Arial is the fallback where it isn't installed (most Windows/Android). */

/* ---------- Rebrand tokens ---------- */
:root {
  --kuda-soft-black: #1b161d;
  --kuda-off-white: #fcf7f2;
  --kuda-container: #f5efe6;
  --kuda-purple: #40196d;
  --kuda-lavender: #cc77e9;
  --kuda-lavender-tint: #e6bdf4;
  --kuda-gray: #69656c;
  --kuda-line: #e7dfd3;
  --kuda-success: #346f36;   /* darker variant for text on light backgrounds */
  --kuda-critical: #c22c0a;

  --kuda-font-display: "Archivo Black", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --kuda-font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --kuda-radius-md: 8px;
  --kuda-radius-lg: 12px;
}

/* ---------- Base ---------- */
body,
.layout-content {
  background-color: var(--kuda-off-white) !important;
  color: var(--kuda-soft-black);
  font-family: var(--kuda-font-body);
  -webkit-font-smoothing: antialiased;
}

a,
a:visited {
  color: var(--kuda-purple);
}
a:hover {
  color: var(--kuda-purple);
  text-decoration: underline;
}

/* Headings in Archivo Black; body copy in Helvetica Neue */
h1, h2, h3,
.font-largest,
.font-large {
  font-family: var(--kuda-font-display);
  font-weight: 400;
  color: var(--kuda-soft-black);
  letter-spacing: 0;
}

/* ---------- Masthead & subscribe button ---------- */
.masthead {
  background-color: var(--kuda-off-white) !important;
  border-bottom: 1px solid var(--kuda-line);
}

.updates-dropdown-container .show-updates-dropdown,
.flat-button {
  background-color: var(--kuda-purple) !important;
  border-color: var(--kuda-purple) !important;
  color: var(--kuda-off-white) !important;
  font-family: var(--kuda-font-body);
  font-weight: 600;
  border-radius: var(--kuda-radius-md);
}
.updates-dropdown-container .show-updates-dropdown:hover,
.flat-button:hover {
  background-color: var(--kuda-soft-black) !important;
  border-color: var(--kuda-soft-black) !important;
}

/* ---------- Overall status banner ---------- */
.page-status {
  border-radius: var(--kuda-radius-lg);
  font-family: var(--kuda-font-display);
  font-weight: 400;
}

/* ---------- Component list ---------- */
.components-section .components-container,
.component-container {
  background-color: #ffffff;
  border-color: var(--kuda-line) !important;
}
.components-section .components-container {
  border-radius: var(--kuda-radius-lg);
  overflow: hidden;
}
.component-container .name {
  font-weight: 600;
  color: var(--kuda-soft-black);
}
.component-container .component-status {
  font-weight: 600;
}
.component-container .component-status.status-green,
.component-container .status-green .component-status {
  color: var(--kuda-success) !important;
}
.component-container .component-status.status-red,
.component-container .status-red .component-status {
  color: var(--kuda-critical) !important;
}

/* ---------- Incident history ---------- */
.incidents-list .status-day {
  border-color: var(--kuda-line) !important;
}
.incidents-list .status-day .date {
  font-family: var(--kuda-font-display);
  font-weight: 400;
  color: var(--kuda-soft-black);
}
.incidents-list .incident-title a {
  font-weight: 600;
}
.incidents-list .update,
.incidents-list .update small,
.color-secondary {
  color: var(--kuda-gray) !important;
}

/* ---------- Statuspage's own footer row (history link, "Powered by") ---------- */
.page-footer {
  border-top: 1px solid var(--kuda-line);
  color: var(--kuda-gray);
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .page-status,
  .components-section .components-container {
    border-radius: var(--kuda-radius-md);
  }
}