/* =====================================================================
   Shiftmove Status Page — Custom CSS
   Paste into: Statuspage → Settings → Customize page → Custom CSS
   Brand Blue: #0043CE (RGB 0, 67, 206)

   NOTE: Statuspage class names vary between template versions. Before
   publishing, inspect the live page (right-click → Inspect) and confirm
   each selector matches the real markup, then tighten if needed.
   ===================================================================== */

/* =====================================================================
   0. Typography — Shiftmove brand fonts
   Pangea (the intended headline font) is a licensed font with no available
   webfont, so we use INTER throughout with ARIAL as the fallback:
     Headlines -> Inter SemiBold (600)
     Body text -> Inter Regular (400)
   (Per Marketing / Angela Zippelius, Aug 2026.)

   Inter loads from Google Fonts. If the account's CSP blocks the external
   @import, headlines/body fall through to Arial — still on-brand fallback.
   @import must be the FIRST statement in the stylesheet — keep this block
   at the very top, above every other rule. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

/* Body text -> Inter regular, Arial fallback */
body,
.layout-content,
.markdown-display,
p, li, td, th, label, input, textarea, select, button {
  font-family: "Inter", Arial, Helvetica, sans-serif !important;
  font-weight: 400;
}

/* Headlines -> Inter semi-bold, Arial fallback. Covers the page/company
   name, the status banner, section headings, incident titles and h1–h6.
   The ::after text-swaps (banner reword, About heading) inherit these. */
h1, h2, h3, h4, h5, h6,
.page-status .status,
.page-name, .company-name,
#about-this-site,
.incident-title, .incident-title a,
.font-largest, .font-large {
  font-family: "Inter", Arial, Helvetica, sans-serif !important;
  font-weight: 600 !important;
}

/* 1. Subscribe button: black text, black outline, no fill ---------------
   Selector confirmed against live markup: the control is the anchor
   #show-updates-dropdown, with the label in child spans. */
#show-updates-dropdown,
.show-updates-dropdown {
  background: transparent !important;
  border: 1.5px solid #000 !important;
  color: #000 !important;
  box-shadow: none !important;
}
/* keep the label black and prevent a filled hover/focus state */
#show-updates-dropdown .subscribe-text-full,
#show-updates-dropdown .subscribe-text-short,
.show-updates-dropdown span {
  color: #000 !important;
}
#show-updates-dropdown:hover,
#show-updates-dropdown:focus,
.show-updates-dropdown:hover,
.show-updates-dropdown:focus {
  background: transparent !important;
  border-color: #000 !important;
  color: #000 !important;
}

/* 1b. Subscribe DIALOG action buttons: same black-outline, no-fill style.
   Confirmed against live markup: every CTA in the dropdown carries the
   .flat-button class (Subscribe via Email / SMS / Slack / Teams — a mix
   of <input type="submit"> and <a>). */
#updates-dropdown .flat-button {
  background: transparent !important;
  border: 1.5px solid #000 !important;
  color: #000 !important;
  box-shadow: none !important;
}
#updates-dropdown .flat-button:hover,
#updates-dropdown .flat-button:focus {
  background: transparent !important;
  border-color: #000 !important;
  color: #000 !important;
}

/* 1c. OPTIONAL — tint the dropdown's active tab + links with Shiftmove
   blue so the accent inside the dialog isn't the old theme color.
   Remove if Marketing wants the dialog strictly black + white. */
#updates-dropdown .updates-dropdown-nav a.active,
#updates-dropdown a:not(.flat-button):not(.accessible-link) {
  color: #0043CE !important;
}

/* 2. "All Systems Operational" banner -> Shiftmove blue -----------------
   Selector confirmed against live markup:
   <div class="page-status status-none"><h2 class="status font-large">…</h2></div> */
.page-status.status-none {
  background-color: #0043CE !important;
  border-color: #0043CE !important;
}

/* 2b. Reword banner text via CSS (no native override exists for the
   auto-generated "All Systems Operational" string). The label lives
   directly in the .status h2, so hide it and overlay new centered text.
   The ::after inherits the h2's font-large size. Verify on mobile. */
.page-status.status-none .status {
  visibility: hidden;
  position: relative;
}
.page-status.status-none .status::after {
  content: "Everything is running smoothly";
  visibility: visible;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* 3. "About This Site" heading -> "Welcome to the Shiftmove Status Page"
   Confirmed against live markup: the heading is a FIXED generated label
   <h2 class="font-largest"><a id="about-this-site">About This Site</a></h2>
   — not editable in Page settings (only the body text below it is). So we
   swap it via CSS: hide the anchor and overlay new text. Keeping the
   anchor visibility:hidden (not font-size:0) means ::after inherits the
   correct font-largest size. NOTE: cosmetic only — screen readers / the
   #about-this-site anchor id still read "About This Site". */
#about-this-site {
  position: relative;
  visibility: hidden;
}
#about-this-site::after {
  content: "Welcome to the Shiftmove Status Page";
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  color: inherit;
}

/* 4. Uptime bars: operational green -> Shiftmove blue -------------------
   Scoped to the STATUS PAGE day bars only (<rect class="uptime-day">).
   The /uptime page's calendar rects are bare <rect fill="#1e8542"> inside
   <svg class="day"> WITHOUT the uptime-day class, so they are intentionally
   left at their default green (per request). Operational green is #1e8542;
   outage days use other shades (#d69811, #c5b71a, #dda411, #c17513,
   #c84717) and keep their colors. (A presentation attribute loses to any
   CSS rule, so this wins.) */
rect.uptime-day[fill="#1e8542"] {
  fill: #0043CE !important;
}

/* 4b. OPTIONAL — for visual consistency, recolor the green "Operational"
   text label, check icons and legend swatch to match the blue bars.
   Confirmed against live markup: the "Operational" word is a
   <span class="component-status"> inside a wrapper carrying .status-green.
   Remove this block if Marketing only wants the bars changed. */
.component-inner-container.status-green .component-status,
.component-status.status-green .icon-indicator,
.icon-indicator.fa-check,
.component-statuses-legend .legend-item.status-green,
.component-statuses-legend .legend-item.status-green .icon-indicator {
  color: #0043CE !important;
}

/* 6. Incident titles -> Shiftmove blue (ALL incidents, any severity) -----
   Two different DOM shapes exist and both are covered here:
   - Status page:  <div class="incident-title impact-*"><a>…</a></div>
   - History page: <a class="impact-* incident-title">…</a>
   The default color comes from the impact-* class (e.g. critical = red);
   this overrides all of them to brand blue. Severity is still conveyed by
   the uptime bars and the Resolved/Identified update labels. */
.incident-title,
.incident-title a {
  color: #0043CE !important;
}

/* =====================================================================
   7. Incident History page ( /history )
   Statuspage serves ONE Custom CSS across all pages, so rules 1–6 above
   already apply here — the /history incident titles are handled by rule 6.

   Confirmed against live markup: the month pagination is
   <div class="pagination"><a class="previous-page ..."><a class="next-page ...">
   with grey (color-secondary) arrows — NOT green, so it wasn't the source
   of inconsistency and doesn't strictly need changing. This OPTIONAL rule
   just tints the pagination arrows brand blue if you want them on-brand.
   Remove it to leave them neutral grey. */
.pagination .previous-page,
.pagination .next-page {
  color: #0043CE !important;
}
.pagination .previous-page.disabled,
.pagination .next-page.disabled {
  color: #b3bac5 !important; /* keep disabled arrow muted (css_no_data grey) */
}

/* =====================================================================
   8. Maintenance state -> Shiftmove blue
   Decision: Maintenance should use the SAME Shiftmove blue as the rest
   of the branding (so it no longer clashes with the now-blue Operational
   state). Statuspage marks maintenance with the .status-blue class and,
   when a maintenance is active, a .page-status.status-blue banner.
   ===================================================================== */
.page-status.status-blue {
  background-color: #0043CE !important;
  border-color: #0043CE !important;
}
.component-statuses-legend .legend-item.status-blue,
.component-statuses-legend .legend-item.status-blue .icon-indicator,
.status-blue .icon-indicator {
  color: #0043CE !important;
}

/* 8b. Maintenance day-bars on the STATUS PAGE uptime graphs use the
   maintenance blue (css_blues = #207ab6, which is also css_link_color).
   Scoped to .uptime-day so the /uptime calendar rects stay at their
   default colors, matching rule 4. */
rect.uptime-day[fill="#207ab6"] {
  fill: #0043CE !important;
}