@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600&display=swap');

/* =====================================================================
   Design tokens - one place to change the palette
   ===================================================================== */
:root {
  --ac-canvas:      #F7F8FC;
  --ac-surface:     #FFFFFF;
  --ac-border:      #E5E7EB;
  --ac-ink:         #111827;  /* headings */
  --ac-text:        #374151;  /* body */
  --ac-muted:       #6B7280;  /* timestamps, secondary */
  --ac-brand:       #216358;  /* links + CTA (7:1 contrast on canvas) */
  --ac-brand-dark:  #002620;  /* hover */
  --ac-cream:       #F7F6F0;
  --ac-cta:         #002620;  /* Subscribe button = logo icon colour */
  --ac-cta-hover:   #216358;
  --ac-radius:      10px;
  --ac-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* =====================================================================
   Base - set the font once, let everything inherit
   ===================================================================== */
body {
  font-family: var(--ac-font);
  background-color: var(--ac-canvas);
  color: var(--ac-text);
  -webkit-font-smoothing: antialiased;
}

/* Statuspage sets font-family on a few elements directly; force inherit */
/* :where() keeps this at near-zero specificity, so the heading font
   rules further down can override it */
body :where(*:not(.fa):not([class^="fa-"]):not([class*=" fa-"])) {
  font-family: inherit !important;
}

h1, h2, h3 {
  font-weight: 600;
  color: var(--ac-ink);
}

/* =====================================================================
   Links - brand green that passes WCAG AA
   ===================================================================== */
a { color: var(--ac-brand); text-decoration: none; }
a:hover { color: var(--ac-brand-dark); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--ac-brand); outline-offset: 2px; border-radius: 4px; }

/* =====================================================================
   Cards - white on canvas reads cleaner than gray-on-gray
   NOTE: .unresolved-incidents is intentionally NOT here, so Statuspage's
   red/orange/yellow incident banners keep their impact colours.
   ===================================================================== */
.components-container,
.scheduled-maintenance,
.incident-container {
  background-color: var(--ac-surface) !important;
  border: 1px solid var(--ac-border) !important;
  border-radius: var(--ac-radius) !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

/* Inner breathing room for each maintenance / incident card */
.scheduled-maintenance,
.incident-container {
  padding: 20px 24px !important;
  margin-bottom: 16px;
}

/* The section wrapper holds the "Scheduled Maintenance" heading,
   so it stays transparent - only the items inside are cards */
.scheduled-maintenances-container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Active (unresolved) incident banner - same card shape as the rest.
   Header and border colours stay dynamic (yellow/orange/red by impact). */
.unresolved-incident {
  border-radius: var(--ac-radius);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
  margin-bottom: 24px;
}
.unresolved-incident .incident-title {
  border-radius: var(--ac-radius) var(--ac-radius) 0 0 !important;
  padding: 18px 24px !important;
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.unresolved-incident .incident-title .actual-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
.unresolved-incident .incident-title .subscribe {
  font-family: var(--ac-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  flex-shrink: 0;
  padding: 6px 12px;
  border: 1px solid currentColor;
  border-radius: 8px;
  line-height: 1;
  margin-top: 2px;
}
.unresolved-incident .updates {
  background: var(--ac-surface) !important;
  border-radius: 0 0 var(--ac-radius) var(--ac-radius) !important;
  padding: 20px 24px !important;
}

/* Component status text: only recolour "Operational".
   Degraded / Partial / Major / Maintenance keep Statuspage's colours. */
.component-inner-container.status-green .component-status {
  color: var(--ac-brand);
  font-weight: 500;
}

/* Overall status banner - vertically centred, keeps the dynamic colour */
.page-status {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px !important;
  border-radius: var(--ac-radius);
}
.page-status .status {
  margin: 0 !important;
  line-height: 1.3 !important;
}
.page-status .last-updated-stamp {
  margin: 0 !important;
}
.page-status .last-updated-stamp:empty {
  display: none;
}

/* =====================================================================
   Incident text
   ===================================================================== */
.incident-title,
.update-title { font-weight: 600; color: var(--ac-ink); }

.update-body { font-size: 15px; line-height: 1.6; color: #4B5563; }

.font-small, small { font-size: 13px; color: var(--ac-muted); }

/* =====================================================================
   "About This Site" - readable, not tiny
   ===================================================================== */
.page-status + .text-section p.color-secondary,
.text-section .color-secondary {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ac-muted);
}

/* Rename heading. NOTE: no greater-than character anywhere in this file - Statuspage
   escapes it on save, which silently invalidates the whole rule. */
.text-section h2 {
  font-size: 0 !important;
}
.text-section h2::before {
  content: "Aircall Status Page";
  color: var(--ac-ink);
}

/* =====================================================================
   Header + logo
   Masthead intentionally left transparent so it blends into the canvas.
   ===================================================================== */

/* PASTE YOUR EXISTING "Logo" BLOCK HERE UNCHANGED
   (or, better: upload the SVG as the logo in Statuspage admin and delete it) */

/* =====================================================================
   Subscribe CTA - matches aircall.io "GET FREE ACCESS"
   ===================================================================== */
.show-updates-dropdown {
  background-color: var(--ac-cta) !important;
  border: 1px solid var(--ac-cta) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease;
}
.show-updates-dropdown,
.show-updates-dropdown .subscribe-text-full,
.show-updates-dropdown .subscribe-text-short {
  color: var(--ac-cream) !important;
}
.show-updates-dropdown:hover,
.show-updates-dropdown:focus-visible {
  background-color: var(--ac-cta-hover) !important;
  border-color: var(--ac-cta-hover) !important;
  text-decoration: none !important;
}

/* =====================================================================
   Footer
   ===================================================================== */
.page-footer,
.footer {
  color: var(--ac-muted);
  font-size: 13px;
}

/* Container width: leave Statuspage's responsive .container alone
   (overriding padding/max-width breaks the mobile layout). */

/* =====================================================================
   Section order (home page only): move "About This Site" from under the
   status banner to just before "Past Incidents".
   Resulting order: status banner, components, scheduled maintenance,
   About, past incidents, footer. Visual order only - screen readers and
   keyboard tabbing still follow the original HTML order.
   ===================================================================== */
.layout-content.status-index .container {
  display: flex !important;
  flex-direction: column;
}
.layout-content.status-index .container .text-section {
  order: 1;
}
.layout-content.status-index .container .incidents-list,
.layout-content.status-index .container .incidents-list ~ * {
  order: 2;
}

/* Hide "Past Incidents" on the home page only. The full list stays
   available via the "Incident History" link in the footer
   (status.aircall.com/history), and incident detail pages are unaffected. */
.layout-content.status-index .incidents-list {
  display: none !important;
}

/* =====================================================================
   Display font - Poppins for headings (closest free match to aircall.io's
   Fellix); Inter stays for body text and the Subscribe button.
   Kept last so it wins over the "force inherit" rule.
   ===================================================================== */
:root {
  --ac-display: 'Poppins', var(--ac-font);
}

h1, h2, h3,
.page-status .status,
.incident-title,
.text-section h2::before {
  font-family: var(--ac-display) !important;
  letter-spacing: -0.01em;
}

/* One style for every section title (About, Scheduled Maintenance,
   Past Incidents) - same font, size and weight */
h2.font-largest,
.text-section h2::before,
.components-section::before {
  font-size: 26px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* Add a "Current Status" title above the components list
   (Statuspage has no heading there, so we inject one) */
.components-section::before {
  content: "Current Status";
  display: block;
  font-family: var(--ac-display) !important;
  letter-spacing: -0.01em;
  color: var(--ac-ink);
  margin-bottom: 4px;
}

/* Statuspage puts an invisible icon at the top of this section that
   still takes up a full line - take it out of the flow to close the gap */
.components-section i.component-status.hidden {
  position: absolute !important;
}
.text-section h2 {
  font-size: 0 !important;
}

/* Timestamps inside headings ("Scheduled for ...") stay in Inter */
h1 small, h2 small, h3 small,
.incident-title small {
  font-family: var(--ac-font) !important;
}

.show-updates-dropdown,
.show-updates-dropdown .subscribe-text-full,
.show-updates-dropdown .subscribe-text-short {
  font-family: var(--ac-font) !important;
}