/* ================================================================
   Bird brand re-skin (LIGHT) — status.bird.com (statuspage.io Custom CSS)
   Matches the bird.com marketing shell: paper background, ink text,
   TWK Lausanne, hairline borders, pill buttons.

   Source of truth in the monorepo:
     packages/design-tokens/tokens.css            (palette)
     apps/marketing/components/react/marketing-shell.module.css
                                                  (header/footer)

   Colors tab reference (drives page + notification emails):
     Body background #FAFAF9 · Font #100F0C · Light font #70706B
     Greens #24B200 · Yellows #FFC330 · Oranges #FF6700
     Reds #FA3726 · Blues #01ABC9 (maintenance, cyan-500) · Link #100F0C
     Border #DEDEDA · Graph #0C5CF1 · No data #F3F3F1

   The custom header HTML carries the logotype, so statuspage's own
   masthead logo is hidden below.
   ================================================================ */

/* ---- TWK Lausanne, served from bird.com (CORS: allow-origin *) ----
   File hashes change on every bird.com deploy that touches the fonts;
   re-check them against the <link rel="preload"> tags on bird.com. */
@font-face {
  font-family: "TWK Lausanne";
  src: url("https://bird.com/_next/static/media/TWKLausanne_300-s.p.3pv05iqjudn76.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_600-s.p.2pxyfx0ats9_s.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched Arial fallback, same overrides next/font emits on bird.com */
@font-face {
  font-family: "TWK Lausanne Fallback";
  src: local("Arial");
  ascent-override: 90.65%;
  descent-override: 19.92%;
  line-gap-override: 0%;
  size-adjust: 100.51%;
}

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;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* ---- Headings: bird.com uses the 500 cut with tight tracking ---- */
html .font-largest,
html .incident-title,
html .date.border-color.font-large {
  font-weight: 500;
  letter-spacing: -0.03em;
}

/* Statuspage's own masthead logo: the custom header HTML already shows the logotype */
html .masthead .logo-container {
  display: none;
}

/* ---- Subscribe button: ink pill, paper text ----
   Background comes from the Link color field (#100F0C); statuspage
   hardcodes white button text, which is the intended contrast here.
   Selector mirrors statuspage's own so it outranks the uppercase default. */
html .layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown {
  border-radius: 50px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  padding: 10px 19px;
  box-shadow: none;
  text-shadow: none;
}

/* The brand bar above carries the identity, so the masthead only holds the button */
html .layout-content.status .masthead-container.basic .masthead {
  padding-top: 32px;
  margin-bottom: 40px;
}

html .flat-button {
  border-radius: 50px;
  font-weight: 500;
  box-shadow: none;
  text-shadow: none;
}

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

/* ---- Component cards: white on paper, hairline border ---- */
html .components-section .component-container {
  background: #ffffff;
  border: 1px solid #dededa;
  border-top-width: 1px !important; /* statuspage zeroes top borders on stacked cards */
  border-radius: 8px;
  margin-bottom: 1rem;
}

/* ---- Subscribe popover, inputs ---- */
html .updates-dropdown {
  border-radius: 8px;
  border-color: #dededa;
  box-shadow: 0 35px 70px rgba(16, 15, 12, 0.1);
}
html input[type="text"],
html input[type="email"],
html input[type="tel"],
html select,
html textarea {
  border-color: #dededa;
  border-radius: 6px;
}
html input:focus-visible,
html select:focus-visible,
html textarea:focus-visible,
html a:focus-visible,
html button:focus-visible {
  outline: 2px solid #2d687b;
  outline-offset: 3px;
}

/* Links: ink, teal on hover (bird.com shell hover colour) */
html a:hover {
  color: #2d687b;
}

/* ================================================================
   Status colours as text on paper
   The Colors tab drives both fills and text with one value per hue.
   Fills keep the 500 primitives; text uses the tones bird.com/status
   maps each state to (yellow-800, orange-600, green-600, cyan-600).
   The generated color CSS can load after this file, hence !important.
   ================================================================ */
.layout-content.status-index .components-statuses .component-container.status-yellow:after,
.layout-content.status-full-history .month .incident-container .impact-minor,
.layout-content.status-incident .incident-name.impact-minor,
.layout-content.status.status-index .incidents-list .incident-title.impact-minor a,
.status-yellow .icon-indicator,
.incident-history .impact-minor,
.components-container .component-inner-container.status-yellow .component-status,
.components-container .component-inner-container.status-yellow .icon-indicator {
  color: #522c00 !important;
}
.layout-content.status-index .components-statuses .component-container.status-orange:after,
.layout-content.status-full-history .month .incident-container .impact-major,
.layout-content.status-incident .incident-name.impact-major,
.layout-content.status.status-index .incidents-list .incident-title.impact-major a,
.status-orange .icon-indicator,
.incident-history .impact-major,
.components-container .component-inner-container.status-orange .component-status,
.components-container .component-inner-container.status-orange .icon-indicator {
  color: #ac4500 !important;
}
.layout-content.status-index .components-statuses .component-container.status-green:after,
.status-green .icon-indicator,
.components-container .component-inner-container.status-green .component-status,
.components-container .component-inner-container.status-green .icon-indicator {
  color: #187501 !important;
}
.layout-content.status-index .components-statuses .component-container.status-blue:after,
.layout-content.status-full-history .month .incident-container .impact-maintenance,
.layout-content.status-incident .incident-name.impact-maintenance,
.layout-content.status.status-index .incidents-list .incident-title.impact-maintenance a,
.status-blue .icon-indicator,
.incident-history .impact-maintenance,
.components-container .component-inner-container.status-blue .component-status,
.components-container .component-inner-container.status-blue .icon-indicator {
  color: #016d80 !important;
}

/* Yellow fills: statuspage paints white text on them, ink is needed */
.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;
}

/* ================================================================
   Custom header HTML — bird.com brand bar
   ================================================================ */
.bird-header {
  background: #fafaf9;
  border-bottom: 1px solid #dededa;
  color: #100f0c;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
}
.bird-header .container {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.bird-header a {
  color: inherit;
  text-decoration: none;
}
.bird-header a:hover {
  color: #2d687b;
}
.bird-header__brand img {
  display: block;
  width: 96px;
  height: auto;
}
.bird-header__nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.bird-header__nav .bird-pill {
  padding: 10px 19px;
  border: 1px solid #100f0c;
  border-radius: 50px;
  background: #100f0c;
  color: #fafaf9;
}
.bird-header__nav .bird-pill:hover {
  color: #fafaf9;
  background: #2b2a27;
  border-color: #2b2a27;
}
@media (max-width: 700px) {
  .bird-header__brand img {
    width: 85px;
  }
  .bird-header__nav > a:not(.bird-pill) {
    display: none;
  }
}

/* ================================================================
   Custom footer HTML — "Other Bird platforms"
   ================================================================ */
#other-platform {
  padding: 0 0 70px;
  font-size: 14px;
  line-height: 1.45;
}
#other-platform p {
  font-size: 13px;
  font-weight: 500;
  color: #697161;
  margin: 0 0 12px;
}
#other-platform ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}
#other-platform a {
  color: #454a40;
  font-weight: 500;
  text-decoration: none;
}
#other-platform a:hover {
  color: #2d687b;
}