/* ============================================================================
   Eyefinity-branded Custom CSS for Statuspage.io (Atlassian Statuspage)
   ----------------------------------------------------------------------------
   Built from the official Eyefinity Brand Guidelines (Updated Nov 2024).
   Paste into: Manage account > Page > Customize page > Custom CSS
   NOTE: Statuspage only publishes custom CSS on a custom domain
         (e.g. status.eyefinity.com).

   --- OFFICIAL PALETTE (from brand book) -------------------------------------
   CORE
     Eyefinity Blue    #3A60FF   (primary brand blue / links / buttons)
     Blue-Black        #0B2335   (dark header / dark backgrounds)
     White             #FFFFFF
   NEUTRALS
     Gray 06           #F6F6F6   (page background / light fills)
     Gray 05           #D6D6D6   (borders)
     Eyefinity Gray    #595959   (VSP Gray - secondary text)
     Gray 01           #333333   (body text)
   CORE ACCENTS (use sparingly - no more than two)
     Teal              #00C2C0
     Medium Blue       #241ED6
     Light Blue        #7BE0FC
     Dark Teal         #004761
   TYPOGRAPHY
     Gotham (Book/Medium/Bold) first choice; Arial system fallback.
   NOTE ON STATUS COLORS: brand accents aren't semantic, so status states use
   AA-compliant hues aligned to the palette (brand green/orange/red family).
============================================================================ */

:root {
  --ef-blue:       #3A60FF;   /* Eyefinity Blue  */
  --ef-blue-dk:    #241ED6;   /* Medium Blue (hover/active) */
  --ef-blueblack:  #0B2335;   /* Blue-Black */
  --ef-teal:       #00C2C0;   /* Core accent */
  --ef-darkteal:   #004761;   /* Core accent */
  --ef-gray-text:  #595959;   /* Eyefinity Gray */
  --ef-ink:        #333333;   /* Gray 01 - body text */
  --ef-border:     #D6D6D6;   /* Gray 05 */
  --ef-bg:         #FFFFFF;   /* Gray 06 */
  --ef-card:       #FFFFFF;

  /* Semantic status colors (AA-compliant, palette-aligned) */
  --ef-ok:         #007036;   /* Medium Green  */
  --ef-warn:       #EF6E0B;   /* Premier Orange */
  --ef-major:      #9F0000;   /* Dark Red */
  --ef-maint:      #0B2335;   /* Blue-Black */

  --ef-radius:     8px;
  /* Gotham first, Arial system fallback per brand typography guidance */
  --ef-font: "Gotham", "Gotham Book", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* ---------- Global type & background ------------------------------------ */
body {
    background-color: #FFFFFF;
    color: var(--ef-ink);
    font-family: var(--ef-font);
    -webkit-font-smoothing: antialiased;
}

.layout-content,
.container { color: var(--ef-ink); }

a, a:link, a:visited { color: var(--ef-blue); }
a:hover, a:active { color: var(--ef-blue-dk); }

/* ---------- Top header / banner --------------------------------------- */
/* Approved dark background = Blue-Black, with Eyefinity Blue accent rule */
.layout-content.status .page-status,
.header-container,
.banner-container,
header .banner {
  background-color: var(--ef-blueblack) !important;
  color: #FFFFFF !important;
}

.header {
  background-color: var(--ef-blueblack);
  border-bottom: 3px solid var(--ef-blue);
  padding: 14px 0;
}

/* Logo sizing - brand min digital height is 52px; keep it legible */
.header .logo-wrapper img,
.header img.company-logo { max-height: 46px; }

/* ---------- Overall status banner (big colored bar) ------------------- */
.page-status.status-none      { background-color: var(--ef-ok)    !important; }
.page-status.status-minor     { background-color: var(--ef-warn)  !important; }
.page-status.status-major     { background-color: var(--ef-major) !important; }
.page-status.status-critical  { background-color: var(--ef-major) !important; }
.page-status.status-maintenance { background-color: var(--ef-maint) !important; }

.page-status .status { color: #FFFFFF !important; font-weight: 700; }

/* ---------- Component cards ------------------------------------------- */
.component-container {
    background-color: #FFFFFF;
    border: 1px solid #D6D6D6;
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 14px 16px;
    box-shadow: none;
}
.component-container .name { color: var(--ef-ink); font-weight: 500; }
.component-inner-container.status-green .name,
.component-status { color: var(--ef-gray-text); }

/* ---------- Section headings ------------------------------------------ */
.uptime-title,
.incidents-list .status-day .date,
h1, h2, h3 { color: var(--ef-blueblack); font-weight: 700; }

/* ---------- Buttons (Subscribe, etc.) --------------------------------- */
.btn-default,
.btn-subscribe,
#subscribe-btn,
.subscribe-toggle {
  background-color: var(--ef-blue) !important;
  border: 1px solid var(--ef-blue) !important;
  color: #FFFFFF !important;
  border-radius: 20px !important;
  font-weight: 600;
}
.btn-default:hover,
.btn-subscribe:hover,
#subscribe-btn:hover,
.subscribe-toggle:hover {
  background-color: var(--ef-blue-dk) !important;
  border-color: var(--ef-blue-dk) !important;
}

/* ---------- Incident entries ------------------------------------------ */
.incident-title,
.incident-title a { color: var(--ef-blueblack); }
.incident-updates .update .update-title { color: var(--ef-ink); }
.incident-updates .update .update-timestamp { color: var(--ef-gray-text); }

/* Severity pills */
.incident-title .impact-none        { background-color: var(--ef-ok); }
.incident-title .impact-minor       { background-color: var(--ef-warn); }
.incident-title .impact-major       { background-color: var(--ef-major); }
.incident-title .impact-maintenance { background-color: var(--ef-blueblack); }

/* ---------- Uptime bars ----------------------------------------------- */
.availability-time-line-graphic rect.uptime-day { fill: var(--ef-ok); }

/* ---------- Footer ---------------------------------------------------- */
.footer, .powered-by { color: var(--ef-gray-text); }
.footer a { color: var(--ef-blue); }

/* ---------- Responsive polish ----------------------------------------- */
@media screen and (max-width: 650px) {
  .header .logo-wrapper img,
  .header img.company-logo { max-height: 36px; }
  .component-container { padding: 12px; }
}