/* --- Dstny brand: fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root {
  --dstny-cyan: #1BA9B5;
  --dstny-dark-blue: #005C87;
  --dstny-dark-gray: #38344D;
  --dstny-black: #261616;
  --dstny-magenta: #B41284;
  --dstny-yellow: #FFE652;
  --dstny-orange: #FE9305;
  --dstny-green: #2BB673;  /* operational — harmonised green */
  --dstny-red: #D64535;    /* major outage — conventional red */
  --dstny-bg: #F4F8F9;
}

/* Apply Inter to text elements ONLY.
   Do NOT target span / i / [class*=icon] — Statuspage renders the
   component expand/collapse toggles with an icon font, and forcing
   Inter onto those elements (or their :before pseudo) hides the glyphs. */
body,
.layout-content,
.font-regular,
.incident-name,
p, a, h1, h2, h3, h4, h5, h6,
label, button, input, textarea, .btn {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.fa::before,
.fa::after {
    font-family: FontAwesome !important;
    font-style: normal;
    font-weight: normal;
}

body { background: var(--dstny-bg) !important; color: var(--dstny-black); }

/* Headings: Inter Bold, brand black */
h1, h2, h3, h4,
.page-title, .status-page-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--dstny-black) !important;
}

/* Scheduled maintenance times */
h3.incident-title small {
    color: var(--dstny-dark-gray) !important;
}

/* --- Header / masthead: Dstny Ocean gradient --- */
/* Gradient ONLY on the inner .masthead. Keep the outer .masthead-container
   transparent with no padding — painting both produced a second, offset
   gradient box (the inner one inset by the outer's padding). */
.masthead-container {
  background: none !important;
  padding: 0 !important;
}
.masthead {
  background: linear-gradient(135deg, #005C87 0%, #1BA9B5 100%) !important;
  box-sizing: border-box !important;
  padding: 40px 40px 28px 40px !important;   /* breathing room on both sides */
  margin-bottom: 20px !important;
  border-radius: 6px !important;
}
.masthead *,
.masthead a { color: #FFFFFF !important; }

/* Keep the logo and Subscribe button clear of the edges */
.masthead .logo-container,
.masthead .logo,
.masthead img            { margin-left: 4px !important; }
.masthead .btn,
.masthead .subscribe-btn { margin-right: 4px !important; }

@media (max-width: 600px) {
  .masthead { padding: 20px 20px !important; }
}

/* Tighten the gap between the masthead and the "All Systems Operational"
   status banner (and trim the banner's own vertical margins). */
.masthead-container { margin-bottom: 0 !important; }
.container > .page-status,
.page-status {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

/* --- Links --- */
a { color: var(--dstny-cyan); text-decoration: none; }
a:hover { color: var(--dstny-dark-blue); text-decoration: underline; }

/* Content links (e.g. scheduled-maintenance titles, .color-primary) sit on
   the off-white background where cyan is only ~2:1 contrast. Use dark blue
   (~8:1) in the content area. Scoped to .container so masthead links, which
   are forced white above, are untouched. */
.container a.color-primary,
.container .color-primary,
.scheduled-incidents-container a.color-primary {
  color: var(--dstny-dark-blue) !important;
}
.container a.color-primary:hover,
.scheduled-incidents-container a.color-primary:hover {
  color: var(--dstny-black) !important;
  text-decoration: underline !important;
}

/* --- Buttons --- */
.btn-default, .btn-primary, button.btn {
  background-color: var(--dstny-cyan) !important;
  border-color: var(--dstny-cyan) !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}
.btn-default:hover, .btn-primary:hover {
  background-color: var(--dstny-dark-blue) !important;
  border-color: var(--dstny-dark-blue) !important;
}

.show-updates-dropdown {
  background-color: transparent !important;
  border: 1.5px solid #FFFFFF !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}

.updates-dropdown-sections-container *,
.updates-dropdown-sections-container * a {
    color: var(--dstny-dark-gray) !important;
}

.updates-dropdown-sections-container .flat-button {
    background-color: #FFFFFF !important;
}

/* --- Cards / components --- */
/* ONE card per component / group = .component-container.
   Everything inside it (.component-inner-container — the parent row and each
   child row — plus .child-components-container) gets padding ONLY, with no
   background/shadow/radius of its own. That removes the box-inside-a-box. */
.components-container .component-container {
  background: #FFFFFF !important;
  overflow: hidden !important;   /* clip rows so the corners stay rounded */
  margin-bottom: 6px !important;
}

.components-container .component-inner-container,
.components-container .child-components-container {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Incident cards keep their own card treatment */
.unresolved-incident,
.card {
  background: #FFFFFF !important;
}

/* --- Status state colours --- */
/* Overall banner */
.page-status.status-none  { background-color: var(--dstny-green) !important;     color: #FFFFFF !important; }
.page-status.status-minor { background-color: var(--dstny-orange) !important;    color: var(--dstny-black) !important; }
.page-status.status-major { background-color: var(--dstny-red) !important;       color: #FFFFFF !important; }
.page-status.status-maintenance { background-color: var(--dstny-dark-blue) !important; color: #FFFFFF !important; }

/* Component status dots / labels */
.component-status.operational,          span.operational          { color: var(--dstny-green) !important; }
.component-status.under_maintenance,    span.under_maintenance    { color: var(--dstny-dark-blue) !important; }
.component-status.degraded_performance, span.degraded_performance { color: var(--dstny-orange) !important; }
.component-status.partial_outage,       span.partial_outage       { color: var(--dstny-orange) !important; }
.component-status.major_outage,         span.major_outage         { color: var(--dstny-red) !important; }

.uptime-graph .availability { color: var(--dstny-green) !important; }

/* --- Login / authentication screen --------------------------------------- */
/* The uploaded logo is the white (inverted) variant, which disappears on the
   light login background (there's no blue masthead there). Sit it on a small
   dark gradient "plate" so it stays visible, WITHOUT darkening the page bg. */
.status-authenticate .branding-container {
  text-align: center !important;
}
.status-authenticate .branding-container .logo-container {
  display: inline-block !important;
  background: linear-gradient(135deg, #005C87 0%, #1BA9B5 100%) !important;
  padding: 24px 24px 16px 24px !important;
  border-radius: 8px !important;
}

.status-authenticate .container-for-border h5 {
  font-size: 0 !important;
}
.status-authenticate .container-for-border h5::after {
  content: "Authentication Required";
  font-size: 1.25rem !important;
}

.status-authenticate .container-for-border .flat-button {
  font-weight: 700 !important;
}

/* Remove components we don't want to show for now */
.page-status, .components-section, .uptime-graph, .incidents-list {
    display: none !important;
}