/* ==========================================================================
   Statuspage Custom CSS
   Self-contained two-column icon-only component layout + uniform row
   background + branded subscribe button/links (#004C46)

   Pair this with the Custom Footer HTML snippet that adds the
   `two-columns` class via jQuery (MutationObserver version).

   NOTE: This version DEFINES the two-column grid itself (width/float)
   instead of relying on Statuspage's native .two-columns rule. That
   native rule only applies under a very specific ancestor chain
   (.layout-content.status.status-index .components-section ...), and if
   your page structure doesn't match it exactly, the grid silently
   collapses back to one column. Defining it ourselves guarantees it
   works regardless of that ancestor match.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. TWO-COLUMN GRID (self-contained - does not depend on Statuspage's
      native two-columns rule taking effect)
   -------------------------------------------------------------------------- */

.components-container.two-columns {
  overflow: hidden;
}

.components-container.two-columns .component-container {
  width: 50% !important;
  float: left !important;
  box-sizing: border-box;
  border-bottom: 1px solid #e0e0e0;
}

/* Vertical divider + row-clearing between the two columns */
.components-container.two-columns .component-container:nth-child(odd) {
  border-right: 1px solid #e0e0e0;
  clear: left;
}

/* Collapse back to a single column on narrow screens */
@media screen and (max-width: 700px) {
  .components-container.two-columns .component-container {
    width: 100% !important;
    float: none !important;
    border-right: none !important;
  }
}


/* --------------------------------------------------------------------------
   1. TWO-COLUMN LAYOUT: remove the two-tone/alternating background
   -------------------------------------------------------------------------- */

/* Force every component row to the same background color regardless of
   its position (odd/even) in the grid. Change #ffffff to your page's
   actual background color if it's not pure white. */
.components-container.two-columns .component-container,
.components-container.two-columns .component-container:nth-child(odd),
.components-container.two-columns .component-container:nth-child(even) {
  background-color: #ffffff !important;
}

/* Fallback for any component list, even outside two-column mode */
.components-container .component-container {
  background-color: #ffffff !important;
}


/* --------------------------------------------------------------------------
   2. TWO-COLUMN LAYOUT: hide the status text, icon-only
   Statuspage already ships its own status icon button
   (button.icon-indicator.fa.fa-check / .fa-times / etc., swapped
   automatically based on data-component-status) sitting right next to
   the text label in the real markup. We don't need to build our own
   icon - just hide the text and make sure the native icon shows.
   -------------------------------------------------------------------------- */

/* Hide the "Operational" / "Degraded Performance" / etc. text label,
   for both flat components and components nested inside a group */
.components-container.two-columns .component-status {
  display: none !important;
}

/* Make sure the native status icon button is visible in two-column mode */
.components-container.two-columns .icon-indicator {
  display: inline-block !important;
  float: right;
}


/* --------------------------------------------------------------------------
   3. SUBSCRIBE BUTTON + LINKS -> #004C46
   Statuspage uses DIFFERENT markup for the subscribe element depending on
   page template:
     - Main status page  -> #show-updates-dropdown (in .masthead-container)
     - Incident pages     -> .subscribe-button (in .status-incident)
     - Subscribe modal's own submit button -> .incident-subscribe-btn
   All three (plus OTP/send buttons) also share Statuspage's universal
   .flat-button class, so we target that FIRST as the broad catch-all,
   then list the specific classes as belt-and-suspenders in case a future
   Statuspage template update drops the shared class from one of them.
   -------------------------------------------------------------------------- */

.flat-button,
.layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown,
#show-updates-dropdown,
.subscribe-button,
.incident-subscribe-btn {
  background-color: #004C46 !important;
  border-color: #004C46 !important;
}

.flat-button:hover,
.subscribe-button:hover,
.incident-subscribe-btn:hover,
#show-updates-dropdown:hover {
  background-color: #00332f !important;
}

/* Links inside the subscribe dropdown (email/SMS/Slack/webhook/RSS options) */
.updates-dropdown-container a,
.updates-dropdown a {
  color: #004C46;
}

/* General page links, on-brand - applies sitewide, including incident pages */
a {
  color: #004C46;
}
a:hover {
  color: #00332f;
}


/* --------------------------------------------------------------------------
   4. PAGE STATUS BANNER - match operational green used elsewhere
   -------------------------------------------------------------------------- */

.layout-content.status.status-index .page-status.status-none {
  background-color: #004C46 !important;
}