/* ============================================================
   TinyMobileRobots Statuspage theme  (Visual Guidelines v2.0)
   Paste into: Custom CSS  (both Status page AND History page)
   ============================================================ */

/* --- 1. Brand fonts (Space Grotesk = headings, Inter = body) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* --- 2. Brand palette --- */
:root {
  --tmr-nordic-woods: #083400;
  --tmr-spring-beech: #8CDC59;
  --tmr-grass:        #267700;
  --tmr-asphalt:      #121410;
  --tmr-asphalt-60:   #71726F;
  --tmr-stainless:    #C5CAC4;
  --tmr-light-stain:  #E8EAE7;
  --tmr-chalk:        #FFFFFF;
  --tmr-signal-red:   #D10C0C;
  --tmr-signal-blue:  #09A1FF;
  --tmr-radius:       16px;
  --tmr-shadow:       0 4px 16px rgba(8, 52, 0, 0.08);
}

/* --- 3. Base typography: Inter for all running text --- */
/* NOTE: do NOT list .component-status here. It is also applied to icon <i>
   elements (e.g. the partial/major-outage square in uptime tooltips), and
   forcing Inter on them blanks the FontAwesome glyph. The status text still
   gets Inter by inheriting from body. */
body,
.layout-content,
.font-regular, .font-small,
.text-section, .text-section p,
.name, .date,
.status-day, .update, .help-block, .label,
.page-footer {
  font-family: 'Inter', Arial, sans-serif !important;
  color: var(--tmr-asphalt);
}

/* --- 3b. Keep FontAwesome icons intact (the Inter override above also
   matches .font-small, which icons carry; this restores the glyph font).
   Covers static icons, their :before glyphs, and tooltip-injected markup. --- */
.fa, .fa::before, .icon-indicator, .tooltip-content .fa {
  font-family: FontAwesome !important;
}

/* --- 4. Headings & titles: Space Grotesk --- */
.status.font-large,                 /* the "All Systems Operational" banner text */
.font-largest,                      /* "About This Site", "Past Incidents", month headers */
.incident-title,                    /* history incident headlines */
.date.border-color,                 /* date group headers */
h1, h2, h3, h4 {
  font-family: 'Space Grotesk', Arial, sans-serif !important;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tmr-asphalt);
}

/* --- 5. Status banner: Grass green, rounded, soft shadow --- */
.page-status {
  border-radius: var(--tmr-radius);
  box-shadow: var(--tmr-shadow);
  border: none;
}
.page-status .status.font-large { color: var(--tmr-chalk); }

/* operational banner = brand Grass. Do NOT style .status-green: that class is
   on the whole component row, and the operational green for component rows and
   uptime bars is set in admin Customize > Page colors (Operational = #267700). */
.page-status.status-none        { background-color: var(--tmr-grass)      !important; }
.page-status.status-critical    { background-color: var(--tmr-signal-red)  !important; }
.page-status.status-maintenance { background-color: var(--tmr-signal-blue) !important; }

/* --- 6. Components: rounded cards with Stainless borders --- */
.component-container.border-color {
  border-radius: var(--tmr-radius);
  border-color: var(--tmr-light-stain);
}
.components-section { border-radius: var(--tmr-radius); }

/* --- 7. Links --- */
a, .color-primary { color: var(--tmr-nordic-woods); }
a:hover { color: var(--tmr-grass); }
.color-secondary { color: var(--tmr-asphalt-60); }

/* --- 8. Subscribe button: Nordic Woods pill (design-language CTA) --- */
#show-updates-dropdown {
  background-color: var(--tmr-nordic-woods) !important;
  color: var(--tmr-chalk) !important;
  border-radius: 9999px !important;     /* 100% pill */
  border: none !important;
  padding: 10px 22px !important;
  font-family: 'Space Grotesk', Arial, sans-serif !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: var(--tmr-shadow);
  transition: background-color 0.15s ease;
}
#show-updates-dropdown:hover { background-color: var(--tmr-grass) !important; }

/* recaptcha / dropdown submit buttons follow the same pill style */
.flat-button {
  background-color: var(--tmr-nordic-woods) !important;
  color: var(--tmr-chalk) !important;
  border-radius: 9999px !important;
  border: none !important;
}
.flat-button:hover { background-color: var(--tmr-grass) !important; }

/* --- 9. Section headers spacing --- */
.font-largest { font-weight: 600; }

/* --- 10. Footer --- */
.page-footer, .powered-by { color: var(--tmr-asphalt-60); }

/* --- 11. Brand accent bar at the very top.
   CSS-only via a pseudo-element. Do NOT use Custom Header HTML for this:
   custom header HTML REPLACES the native masthead, which removes the logo
   and the subscribe button. This keeps the masthead intact. --- */
.layout-content::before {
  content: "";
  display: block;
  height: 6px;
  width: 100%;
  background: linear-gradient(90deg, var(--tmr-nordic-woods) 0%, var(--tmr-spring-beech) 100%);
}

/* --- 12. Custom footer block (pairs with Custom footer HTML) --- */
.tmr-footer {
  text-align: center;
  padding: 24px 0 8px;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.85rem;
  color: var(--tmr-asphalt-60);
  border-top: 1px solid var(--tmr-light-stain);
  margin-top: 16px;
}
.tmr-footer a {
  color: var(--tmr-nordic-woods);
  font-weight: 600;
  text-decoration: none;
}
.tmr-footer a:hover { color: var(--tmr-grass); }
.tmr-footer .tmr-tagline { display: block; margin-top: 4px; }