/* ================================================================
   Bird brand re-skin (DARK) — status.bird.com (statuspage.io Custom CSS)
   Matches the dark public brand surfaces (bird.com marketing + docs).
   Colors live in the Colors tab; this file handles fonts, shape,
   dark surfaces, and contrast.

   Colors tab reference (drives page + notification emails):
     Body background #100F0C · Font #FAFAF9 · Light font #A5A4A1
     Greens #24B200 · Yellows #FFC330 · Oranges #FF6700
     Reds #FA3726 · Blues #0C5CF1 · Link #FAFAF9
     Border #2B2A27 · Graph #6BB0EF · No data #2B2A27

   Also required outside this file: re-upload a WHITE logo
   (current wordmark is black-on-transparent — invisible on dark).
   ================================================================ */

/* ---- TWK Lausanne, served from bird.com ----
   NOTE: applies only once bird.com serves these files with an
   Access-Control-Allow-Origin header; until then the metric-matched
   Arial fallback below renders instead. */
@font-face {
  font-family: "TWK Lausanne";
  src: url("https://bird.com/_next/static/media/TWKLausanne_350-s.p.2gycurcxpfq2j.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("https://bird.com/_next/static/media/TWKLausanne_450-s.p.2ui4zq6tq1815.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("https://bird.com/_next/static/media/TWKLausanne_550-s.p.138s1lcul90-b.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched Arial fallback — same overrides bird.com uses */
@font-face {
  font-family: "TWK Lausanne Fallback";
  src: local("Arial");
  ascent-override: 89.84%;
  descent-override: 19.66%;
  line-gap-override: 0%;
  size-adjust: 101.31%;
}

html body,
html button,
html input,
html select,
html textarea {
  font-family: "TWK Lausanne", "TWK Lausanne Fallback",
    ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ---- Headings: Bird display type ---- */
html .font-largest,
html .incident-title,
html .date.border-color.font-large {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ---- Subscribe button: white pill, dark text ----
   Background comes from the Link color field (#FAFAF9); statuspage
   hardcodes white button text, so the text color must flip here. */
html .show-updates-dropdown {
  border-radius: 9999px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 10px 20px;
  box-shadow: none;
  text-shadow: none;
  color: #100F0C !important;
}

/* Form buttons inside the subscribe dropdown — same inversion */
html .flat-button {
  border-radius: 9999px;
  font-weight: 500;
  box-shadow: none;
  text-shadow: none;
  color: #100F0C !important;
}

/* ---- Status banner ---- */
html .page-status {
  border-radius: 12px;
  border: none;
  text-shadow: none;
  padding: 1rem 1.5rem;
}

/* ---- Component cards: dark surface on near-black ---- */
html .components-section .component-container {
  background: #1E1D1A; /* bird.com dark --color-card */
  border-radius: 12px;
  border-top-width: 1px !important; /* statuspage zeroes top borders on stacked cards */
  margin-bottom: 1rem;
}

/* ================================================================
   Dark surfaces statuspage hardcodes as light
   (verify these in the preview — defaults vary by widget)
   ================================================================ */

/* Subscribe popover */
html .updates-dropdown {
  background: #1E1D1A;
  border-radius: 12px;
  border-color: #2B2A27;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
html .updates-dropdown,
html .updates-dropdown label,
html .updates-dropdown p,
html .updates-dropdown a:not(.flat-button) {
  color: #FAFAF9;
}

/* Text inputs and selects (popover forms, history-page filter) */
html input[type="text"],
html input[type="email"],
html input[type="tel"],
html select,
html textarea {
  background-color: #100F0C;
  color: #FAFAF9;
  border-color: #2B2A27;
}
html input::placeholder,
html textarea::placeholder {
  color: #A5A4A1;
}

/* Tooltips (the "?" hints next to components) */
html .tooltip-base {
  background: #1E1D1A;
  color: #FAFAF9;
  border: 1px solid #2B2A27;
}

/* ================================================================
   Contrast fix for Bird yellow #FFC330 on dark
   Yellow TEXT is fine on near-black (no override needed) — only
   yellow BACKGROUNDS still need dark text instead of white.
   The generated color CSS can load after this file, hence !important.
   ================================================================ */
.layout-content.status.status-index .page-status.status-minor,
.layout-content.status.status-index .page-status.status-minor .status,
.layout-content.status.status-index .unresolved-incident.impact-minor .incident-title,
.layout-content.status.status-index .unresolved-incident.impact-minor .incident-title a,
.layout-content.status.status-index .status-day .update-title.impact-minor a,
.layout-content.status.status-index .scheduled-incidents-container .tab {
  color: #100F0C !important;
  text-shadow: none !important;
}

/* ================================================================
   Footer — "Other Bird platforms" block (custom footer HTML)
   ================================================================ */
#other-platform {
  margin-bottom: 5%; /* pre-existing rule, kept */
}
#other-platform p {
  font-weight: 600;
  color: #FAFAF9;
}
#other-platform ul {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
#other-platform a {
  color: #A5A4A1;
  text-decoration: none;
}
#other-platform a:hover {
  color: #FAFAF9;
  text-decoration: underline;
}