/* additions & tweaks to improve text legibility and environment badge */
:root{
  --env-dev-bg: rgba(255,230,200,0.95);
  --env-dev-color: #8a4b00;
  --env-staging-bg: rgba(255,249,230,0.95);
  --env-staging-color: #6b4b00;
  --env-prod-bg: rgba(225,245,255,0.95);
  --env-prod-color: #004e8a;
}

/* Environment badge */
.env-wrap { display:flex; align-items:center; margin-left:0.5rem; }
.env-badge{
  display:inline-block;
  padding: .28rem .6rem;
  font-size: .78rem;
  font-weight: 800;
  border-radius: 999px;
  letter-spacing: .02em;
  box-shadow: 0 4px 10px rgba(2,6,23,0.06);
  border: 1px solid rgba(2,6,23,0.04);
  color: var(--env-prod-color);
  background: var(--env-prod-bg);
  text-transform: uppercase;
  white-space:nowrap;
}

/* environment color variants */
.env-dev { color: var(--env-dev-color); background: var(--env-dev-bg); }
.env-staging { color: var(--env-staging-color); background: var(--env-staging-bg); }
.env-prod { color: var(--env-prod-color); background: var(--env-prod-bg); }

/* Text legibility helpers */

/* 1) subtle, readable backdrop used for hero text and can be applied to any element.
   This helps when text sits on gradients or images. */
.text-bg {
  display: inline-block;
  background: rgba(255,255,255,0.88); /* light backdrop for readability */
  padding: 0.08rem 0.36rem;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(2,6,23,0.04);
  color: inherit;
}

/* For dark-mode we invert backdrop to keep contrast */
@media (prefers-color-scheme: dark) {
  .text-bg {
    background: rgba(6,12,20,0.64);
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  }
}

/* 2) stronger text shadow option for prominent headlines */
.text-shadow {
  text-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 6px 20px rgba(2,6,23,0.06);
}

/* 3) compact micro-backdrop (for inline tokens like symbol or small labels) */
.text-pill {
  display:inline-block;
  padding: 0.06rem .36rem;
  border-radius: 6px;
  background: rgba(250,250,250,0.95);
  border: 1px solid rgba(2,6,23,0.04);
  font-weight:700;
  font-size: .92rem;
  color: inherit;
}

/* Make sure hero text uses the readable backdrop by default */
.site-header .hero-left h1,
.site-header .hero-left .hero-sub {
  background: transparent;
}
.site-header .hero-left h1.readable,
.site-header .hero-left .hero-sub.readable {
  display: inline-block;
  padding: 0.06rem .36rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Slightly increase contrast for card summaries where needed */
.iso-summary.readable { color: #14243a; }

/* utility: if you want strong foreground color on small text */
.fg-strong { color: #07122b; font-weight: 600; }

/* ensure env-badge and helpers don't break mobile layout */
@media (max-width: 520px) {
  .env-wrap { margin-left: 0; }
  .env-badge { padding: .22rem .45rem; font-size:.72rem; }
}