/* ===== ORB minimal polish + full-bleed ===== */

/* 1) Fonts: Relative for headings, Inter for body */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
body.status { font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
h1, h2, h3, .font-largest, .font-large { font-family: "Relative", "Inter", sans-serif; font-weight:600; }

/* 2) Brand blue for links + quiet hover */
a { color:#3683ff; }
a:hover { text-decoration: underline; }

/* 3) Make the existing subscribe trigger look like a button (text is empty in HTML) */
.show-updates-dropdown{
  display:inline-block !important; padding:10px 16px; border-radius:999px;
  border:1px solid #e6e8eb; background:#fff; color:#3683ff; font-weight:600;
}
.show-updates-dropdown::after{ content:"Subscribe to updates"; }

/* 4) Slight rounding on cards (components, incidents, about) — no shadows */
.text-section,
.component-inner-container,
.status-day { border-radius:12px; }

/* 5) Status banner: keep green, add gentle radius (overridden to Orb blue below) */
.page-status .status { border-radius:12px; }

/* Hide uptime % and the middle divider line; keep date labels */
.legend-item-uptime-value,
.legend .spacer { display: none !important; }

/* 6) Uptime bars: tiny rounding; keep their colors */
.availability-time-line-graphic rect { rx:3px; ry:3px; }

/* Banner in Orb blue, lighter weight */
.page-status { background: transparent !important; border: 0 !important; padding: 0 !important; }
.page-status .status{
  background:#3683ff !important;   /* Orb blue */
  color:#fff !important;
  border-radius:8px;
  padding:12px 16px !important;
  line-height:1.25;
  font-weight:600;
  box-shadow:none; border:none;
}

/* Use the same blue for the subscribe pill and reduce visual weight */
.show-updates-dropdown{
  background:#3683ff !important;
  color:#fff !important;
  border:1px solid #2b6fe0 !important;
  border-radius:8px !important;
  padding:10px 14px !important;
  letter-spacing:.06em;
}

/* ===== Full-bleed like Vercel ===== */

/* Let the main container span the viewport, with comfortable side padding */
.container{
  max-width: none !important;
  width: 100% !important;
  padding: 0 32px !important;
  box-sizing: border-box;
}

/* Keep content readable on very wide monitors */
.layout-content.status,
.components-section,
.page-footer{
  max-width: 1400px;
  margin: 0 auto;
}

/* Ensure the banner uses the full available width without extra chrome */
.page-status.status-none{
  width: 100% !important;
  padding: 0 !important;
  margin: 0 auto;
}

/* Light delineation for component rows when on dark themes, without boxing them in */
.component-inner-container{
  background: transparent !important;
  border: 1px solid rgba(31,41,55,0.6);
  border-radius: 8px;
}

/* Footer spacing consistent with full-bleed rhythm */
.page-footer{
  padding: 0 0 60px !important;
}

/* --- Full-bleed tidy: remove card boxes/borders, keep simple dividers --- */

/* Kill the outer gray boxes around components */
.component-container.border-color,
.components-container .component-inner-container,
.status-day {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Use a subtle single divider between rows (optional) */
.component-container + .component-container {
  border-top: 1px solid rgba(0,0,0,0.08) !important; /* dark mode will auto-dim */
  margin-top: 20px;
  padding-top: 20px;
}

/* Remove the inner “card” around grouped components */
.component-inner-container.open { background: transparent !important; }

/* Uptime legend: keep dates, remove center % + the hairline rule */
.legend-item-uptime-value,
.legend .spacer { display: none !important; }

/* Nicer spacing for the About block in full-bleed mode */
.text-section {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Keep the banner clean and consistent at full width */
.page-status { background: transparent !important; border: 0 !important; padding: 0 !important; }
.page-status .status {
  background: #3683ff !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px;
  padding: 12px 16px !important;
}

/* Subscribe button match + lighter touch */
.show-updates-dropdown{
  background:#3683ff !important;
  color:#fff !important;
  border:1px solid #2b6fe0 !important;
  border-radius:8px !important;
  padding:10px 14px !important;
}

/* Keep uptime bars rounded, no extra borders */
.availability-time-line-graphic rect { rx:3px; ry:3px; stroke: none !important; }
/* 1. Create a distinct, spacious header block, just like Vercel's.
   This gives 48px of space above and below the logo/button. */
.page-header {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

/* 2. Control the banner spacing.
   - 'margin-top: 0' lets it sit right below the header's padded space.
   - 'margin-bottom: 48px' gives it equal space *below* it.
*/
.page-status.status-none {
    /* This CSS shorthand means:
       margin-top: 0;
       margin-left/right: auto; (which you already set)
       margin-bottom: 48px;
    */
    margin: 0 auto 48px !important; 
}

/* 3. Add space *after* the "About This Site" block to separate
   it from the component list. */
.text-section {
    margin-bottom: 32px !important;
}