/* ============================================================================
   DAVANTI-WICS STATUSPAGE THEME — v1
   Target: status.davanti-wics.com (page 61b3013b6fcy)
   Brand:  Deep Ocean Blue #0e385e (primary) · WICS Orange #f47920 (accent)
   Fonts:  Lexend (headings) · DM Sans (body)

   HOW TO APPLY: Statuspage Manage page -> Customize -> Custom CSS box -> Save.
   (Custom CSS is UI-only; there is no API field for it.)

   SCOPE: styles the WEB page only. Notification emails/SMS are styled by the
   css_* color fields + email_logo (see apply-colors.sh), NOT this CSS.

   MECHANISM: Statuspage injects this sheet AFTER its main stylesheet, so
   equal-specificity rules win on source order; !important is used only where a
   generated status/graph rule outranks us.

   Selectors marked /* VERIFY */ are undocumented internals — confirm in DevTools
   on the live page before relying on them. Statuspage may rename classes on
   their own updates, so re-verify periodically.
   ========================================================================== */

/* 1. FONT IMPORT — MUST be the first line (CSS drops @import if a rule precedes it). */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Lexend:wght@500;600;700&display=swap');

/* 2. TYPOGRAPHY
   The live page sets its body font via the CSS variable --font-stack-a
   (":root { --font-stack-a: 'Atlassian Sans', ... }"). Overriding that variable
   is the most robust way to swap the global body font to DM Sans. We then set
   Lexend explicitly on headings / large text / status labels. */
:root {
  --font-stack-a: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body,
.font-regular,
.font-small {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.font-large,
.font-largest,
.page-status,
.component-status {
  font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: -0.01em;
}

/* 3. COLORS & LINKS — navy is AAA on white (12:1); orange would fail (2.76:1). */
h1, h2, h3, h4, h5, h6 { color: #0e385e; }

a,
a:visited,
.accessible-link {
  color: #0e385e;
}
a:hover,
.accessible-link:hover {
  color: #f47920;            /* decorative hover only — not load-bearing text */
}

/* 4. OPTIONAL NAVY MASTHEAD — disabled by default.
   The masthead wrapper class is undocumented (.masthead-container is the best
   evidence). Enable ONLY after confirming the selector in DevTools and after a
   hosted hex-pattern asset exists — otherwise you risk dark-on-dark text.
.masthead-container {
  background-color: #0e385e;
  background-image: url('https://YOUR-CDN/dw-hex-pattern.svg');
  background-repeat: repeat;
  background-size: 240px;
  background-blend-mode: soft-light;
}
.masthead-container,
.masthead-container a,
.masthead-container .accessible-link,
.masthead-container .text-color { color: #ffffff !important; }
.masthead-container .show-updates-dropdown { color: #0e385e; background-color: #ffffff; }
*/

/* 5. STATUS BANNER — keep semaphore meaning (operational stays GREEN).
   Only flatten chrome and recolor PARTIAL outage to WICS orange so it is
   on-brand AND distinct from the red major-outage state. */
.page-status { border: none; text-shadow: none; }

.page-status.partial_outage,        /* VERIFY exact compound class on this build */
.page-status.status-partial { background-color: #f47920 !important; }

/* 6. COMPONENTS — white cards, subtle navy-grey border. */
.components-section .components-container.one-column {
  border-radius: 6px;
  border: 1px solid #E0E0E0;
}
.component-status { color: #0e385e; }
.border-color, hr { border-color: #E0E0E0; }

/* 7. UPTIME GRAPH (90-day) — day fill is status-driven; only round the blocks. */
.availability-time-line-graphic rect { rx: 3px; }
/* .uptime-day { border-radius: 3px; }   /* VERIFY: legacy alias */
#uptime-tooltip .tooltip-box,
#uptime-tooltip #box-arrow { background: #0e385e !important; color: #fff; }

/* 8. BUTTONS / SUBSCRIBE — navy primary, orange hover. */
.flat-button,
.show-updates-dropdown {
  box-shadow: none; text-shadow: none;
  background-color: #0e385e; color: #ffffff;
  border-radius: 6px;
}
.flat-button:hover,
.show-updates-dropdown:hover { background-color: #f47920; color: #ffffff; }

/* 9. FOOTER — tone down "powered by" (do not hide; may be plan-restricted). */
.powered-by,
.powered-by a { color: #757575; }

/* 10. RESPONSIVE */
@media (max-width: 600px) {
  .container { width: 94%; }
  .font-largest { letter-spacing: 0; }
}
  
  #about-this-site { 
    display: none !important;
  }