/*
  Scrive Status (status.scrive.com) – custom CSS (Project Phoenix)
  Paste into: Statuspage → Your page → Customize page → Custom CSS
  Goes together with statuspage-custom-header.html and statuspage-custom-footer.html.

  Set these in Statuspage's own colour fields (Customize page → Colors) – Statuspage uses them
  for banners, uptime bars and incident titles, so they belong there rather than in this file.
  Each status colour reads as text on the warm grey page and behind white text (contrast 4.5:1 or more):
    Body background    #FFFFFF   white
    Font color         #1D1D1B   black
    Light font color   #494A50   dark grey
    Link color         #1D1D1B   black
    Border color       #D6D3D1   line grey
    Operational        #61684B   olive
    Degraded           #806A00   gold
    Partial outage     #AD4A0E   orange
    Major outage       #A3203F   crimson
    Under maintenance  #536B69   teal
*/

/* Fonts must be imported first – an @import after any rule is ignored */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=EB+Garamond:wght@400;500&display=swap');

:root {
  --phoenix-yellow: #F9FF81;
  --phoenix-grey: #EFEEE8;
  --phoenix-white: #FFFFFF;
  --phoenix-black: #1D1D1B;
  --phoenix-grey-dark: #494A50;
  --phoenix-line: #D6D3D1;
  --phoenix-serif: 'EB Garamond', Georgia, serif;
  --phoenix-sans: 'DM Sans', Helvetica, Arial, sans-serif;

  /* Statuspage reads its font from this variable; !important wins over the value it sets on the page */
  --font-stack-a: 'DM Sans', Helvetica, Arial, sans-serif !important;
}

/* =====================================================
   Page
   ===================================================== */

body,
body.status,
.layout-content,
input,
button,
select,
textarea {
  font-family: var(--phoenix-sans);
}

/* Section titles in EB Garamond, like scrive.com: "Past Incidents", incident and history page titles */
.layout-content h2.font-largest,
.layout-content .incidents-list h2,
.layout-content .page-title,
.layout-content .incident-name {
  font-family: var(--phoenix-serif);
  font-size: 32px;
  line-height: 42px;
  font-weight: 400;
  color: var(--phoenix-black);
}

/* Overall status banner ("All Systems Operational"): square, with a clear semibold label.
   Its colour comes from the status colours in Statuspage's own colour settings.
   !important on the corners: Statuspage's own rounded corners use stronger selectors */
.layout-content .page-status,
.layout-content .unresolved-incident,
.layout-content .unresolved-incident .incident-title {
  border-radius: 0 !important;
}

.layout-content .page-status {
  padding: 24px 28px;
}

.layout-content .page-status .status {
  font-family: var(--phoenix-sans);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}

/* ---------- Services list ---------- */

/* Warm grey box with square corners on the white page */
.components-container {
  background-color: var(--phoenix-grey);
  border-radius: 0;
}

/* Square rows. Statuspage rounds the first and last rows with a long selector chain and !important,
   so these repeat that chain with body in front to win */
.components-container .component-container {
  border-color: var(--phoenix-line);
  border-radius: 0 !important;
}

body .layout-content.status.status-index .components-section .components-container.one-column .component-container:first-child,
body .layout-content.status.status-index .components-section .components-container.one-column .component-container:last-child,
body .layout-content.status.status-index .components-section .components-container.one-column .component-container:first-child:last-child,
body .layout-content.status.status-index .components-section .components-container.two-columns .component-container:first-child,
body .layout-content.status.status-index .components-section .components-container.two-columns .component-container:last-child,
body .layout-content.status.status-index .components-section .components-container.two-columns .component-container:first-child:last-child {
  border-radius: 0 !important;
}

.components-container .component-inner-container .name {
  font-weight: 600;
  color: var(--phoenix-black);
}

/* ---------- Past incidents ---------- */

/* !important: Statuspage sets the date's weight with a stronger selector */
body .layout-content.status .incidents-list .status-day .date {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--phoenix-black);
}

/* ---------- Incident history (status.scrive.com/history) ---------- */

/* Month headings in EB Garamond, like the section titles */
.layout-content .month-title {
  font-family: var(--phoenix-serif);
  font-size: 32px;
  line-height: 42px;
  font-weight: 400;
  color: var(--phoenix-black);
}

.layout-content .incident-title {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
}

/* Square tabs, filter, month arrows and "Show all incidents" */
.layout-content .history-nav .button,
.layout-content .show-filter,
.layout-content .pagination a,
.layout-content .expand-incidents {
  border-radius: 0 !important;
  border-color: var(--phoenix-line);
}

/* The selected tab (Incidents / Uptime) gets a black underline */
.layout-content .history-nav .button.current {
  border-bottom: 2px solid var(--phoenix-black);
  color: var(--phoenix-black);
  font-weight: 600;
}

/* ---------- Links ---------- */

.layout-content a {
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}

.layout-content a:hover {
  text-decoration: underline;
}

/* ---------- Buttons ---------- */

/* Subscribe button and the buttons in the subscribe form: square, bold, no capitals,
   like the black "Try for free" button on scrive.com */
#show-updates-dropdown,
.show-updates-dropdown,
.flat-button {
  border-radius: 0 !important;
  font-family: var(--phoenix-sans);
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  text-transform: none !important;
  letter-spacing: normal !important;
}

#show-updates-dropdown,
.show-updates-dropdown {
  padding: 12px 16px;
  background-color: var(--phoenix-black) !important;
  color: var(--phoenix-white) !important;
  border: 0;
}

#show-updates-dropdown:hover,
.show-updates-dropdown:hover {
  background-color: var(--phoenix-grey-dark) !important;
}

/* Subscribe panel that drops down from the button */
div[id^="updates-dropdown"],
div[id^="subscribe-modal"] {
  border-radius: 0;
}

/* ---------- Built-in page footer ---------- */

/* Kept from the old custom CSS: less space before the legal text */
.page-footer {
  margin-bottom: 20px;
}

/* =====================================================
   Custom header (statuspage-custom-header.html)
   ===================================================== */

/* White strip like the scrive.com and Help Center header: 80px tall, up to 1536px wide */
.scrive-header {
  background-color: var(--phoenix-white);
  border-bottom: 1px solid var(--phoenix-line);
  font-family: var(--phoenix-sans);
  color: var(--phoenix-black);
}

.scrive-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 1536px;
  min-height: 80px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.scrive-header__logo img {
  display: block;
  height: 28px;
  width: auto;
}

.scrive-header__nav {
  display: flex;
  gap: 28px;
}

.scrive-header__nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--phoenix-black);
  text-decoration: none;
  white-space: nowrap;
}

.scrive-header__nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.scrive-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Statuspage puts its own subscribe dropdown here; this only resets its old masthead spacing */
.scrive-header__actions .updates-dropdown-container {
  float: none;
  margin: 0;
}

/* Outlined secondary button, like scrive.com: black with white text on hover */
.scrive-header__cta {
  padding: 11px 16px;
  border: 1px solid var(--phoenix-black);
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  color: var(--phoenix-black);
  text-decoration: none;
  white-space: nowrap;
}

.scrive-header__cta:hover {
  background-color: var(--phoenix-black);
  color: var(--phoenix-white);
  text-decoration: none;
}

/* Page title band, like "Help Center" on the Help Center */
.scrive-hero {
  padding: 56px 24px 40px;
  text-align: center;
}

.scrive-hero h1 {
  margin: 0;
  font-family: var(--phoenix-serif);
  font-size: 48px;
  line-height: 58px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--phoenix-black);
}

.scrive-hero p {
  margin: 8px 0 0;
  font-family: var(--phoenix-sans);
  font-size: 16px;
  line-height: 26px;
  color: var(--phoenix-black);
}

@media only screen and (min-width: 768px) {
  .scrive-header__inner {
    padding: 0 64px;
  }
}

@media only screen and (min-width: 1280px) {
  .scrive-header__inner {
    padding: 0 80px;
  }
}

/* =====================================================
   Custom footer (statuspage-custom-footer.html)
   ===================================================== */

/* The legal notice keeps its text; it just gets brand spacing */
.custom-footer-class .text-section p {
  font-size: 13px;
  line-height: 21px;
}

/* Link row and copyright, like the bottom row of the scrive.com footer.
   It also has Statuspage's own .container class, so it lines up with the page on every screen size */
.scrive-footer {
  padding-top: 24px;
  padding-bottom: 48px;
  border-top: 1px solid var(--phoenix-line);
  font-family: var(--phoenix-sans);
  font-size: 14px;
  line-height: 22px;
  color: rgba(29, 29, 27, 0.7);
}

.scrive-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 12px;
}

.scrive-footer__links a {
  color: var(--phoenix-black);
  text-decoration: none;
}

.scrive-footer__links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =====================================================
   Phones
   ===================================================== */

@media only screen and (max-width: 768px) {
  .scrive-header__inner {
    gap: 12px;
    min-height: 64px;
  }

  .scrive-header__logo img {
    height: 22px;
  }

  /* Only the logo, Subscribe and Contact Support fit on a phone */
  .scrive-header__nav {
    display: none;
  }

  .scrive-hero {
    padding: 32px 24px 24px;
  }

  .scrive-hero h1 {
    font-size: 32px;
    line-height: 42px;
  }

  .layout-content h2.font-largest,
  .layout-content .incidents-list h2,
  .layout-content .page-title,
  .layout-content .incident-name,
  .layout-content .month-title {
    font-size: 26px;
    line-height: 34px;
  }
}

/* =====================================================
   Accessibility
   ===================================================== */

/* Keyboard focus: black ring with a 2px gap, like scrive.com */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--phoenix-black);
  outline-offset: 2px;
}