/* rmpm.org placeholder: bold navy variant.
   Loaded after styles.css; overrides only what differs. */

/* ---- Header: light bar over the navy page --------------------------------
   The full-colour logo's dark-blue peak disappears on navy, so the header stays
   white. Near-opaque so navy and blue sections scrolling under it don't tint it. */
.site-header {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: rgba(10, 20, 90, .08);
}

/* ---- Hero ----------------------------------------------------------------- */
.hero { background: var(--rmpm-navy); color: #fff; padding-bottom: clamp(56px, 8vw, 96px); }
.hero-glow {
  right: -15%; top: -35%;
  width: min(1000px, 110vw);
  background:
    radial-gradient(circle at 35% 45%, rgba(72, 211, 205, .45), transparent 55%),
    radial-gradient(circle at 70% 65%, rgba(193, 207, 51, .38), transparent 55%),
    radial-gradient(circle at 50% 20%, rgba(38, 56, 196, .9), transparent 60%);
  filter: blur(40px);
  opacity: .9;
  animation: none;
}
.hero-glow::before, .hero-glow::after { display: none; }
.status { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .85); }
.eyebrow { color: var(--rmpm-teal); }
h1 { color: #fff; }
.hl {
  background-size: 100% 100%; background-position: 0 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.lede { color: rgba(255, 255, 255, .78); }
.hero .btn--primary { background: #fff; color: var(--rmpm-navy); }
.hero .btn--primary:hover { background: var(--rmpm-teal); box-shadow: 0 10px 30px rgba(72, 211, 205, .35); }
.hero .btn--ghost { color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.hero .btn--ghost:hover { box-shadow: inset 0 0 0 2px #fff; }
.stats { border-top-color: rgba(255, 255, 255, .35); }
.stat + .stat { border-color: rgba(255, 255, 255, .15); }
.stat dt { color: #fff; }
.stat dd { color: rgba(255, 255, 255, .7); }

/* ---- Stations: bento grid ------------------------------------------------ */
.stations { background: #fff; }
.station-list {
  border-top: 0;
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) {
  .station-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .station { grid-column: span 3; }
}
.station { border-bottom: 0; }
.station-link {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  height: 100%; min-height: 220px;
  padding: 28px;
  border-radius: 22px;
  background: var(--panel);
  overflow: hidden;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), background 300ms var(--ease);
}
.station-link::before {
  left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 6px;
  transform: none;
}
.station-link:hover, .station-link:focus-visible {
  padding-left: 28px;
  background: #fff;
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(10, 20, 90, .14);
}
.station-num { order: -2; }
.station-meta { order: -1; }
.station-desc { flex: 1; }
.station-url { margin-top: auto; }

/* Feature card: Rocky Mountain PBS, with RMPBS+ inset as its streaming service */
.station--feature {
  grid-column: 1 / -1;
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  padding: 12px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 12%, rgba(72, 211, 205, .38), transparent 42%),
    radial-gradient(circle at 10% 100%, rgba(193, 207, 51, .26), transparent 48%),
    var(--rmpm-blue);
  color: #fff;
  transition: translate 300ms var(--ease), box-shadow 300ms var(--ease);
}
/* This card also carries the scroll-reveal (which owns `transform`), so the hover
   lift uses `translate` and the transition list must name both effects. */
.js .station--feature[data-reveal] {
  transition: opacity 700ms var(--ease), transform 700ms var(--ease),
              translate 300ms var(--ease), box-shadow 300ms var(--ease);
}
.station--feature:hover { translate: 0 -4px; box-shadow: 0 26px 56px rgba(38, 56, 196, .28); }
@media (min-width: 900px) {
  .station--feature { grid-template-columns: minmax(0, 1fr) minmax(280px, 34%); align-items: stretch; }
}
.station--feature .station-link,
.station--feature .station-link:hover,
.station--feature .station-link:focus-visible {
  background: transparent; box-shadow: none; transform: none;
  padding: 20px 16px 16px 20px;
}
.station--feature .station-link { min-height: 0; }
@media (min-width: 900px) { .station--feature .station-link { min-height: 380px; } }
.station--feature .station-link::before { display: none; }
.station--feature .station-name { font-size: clamp(2.25rem, 5vw, 4rem); color: #fff; }
.station--feature .station-desc { color: rgba(255, 255, 255, .84); font-size: 1.125rem; max-width: 34ch; }
.station--feature .station-num,
.station--feature .station-meta { color: rgba(255, 255, 255, .8); }
.station--feature .station-meta::before { background: #fff; }
.station--feature .station-url { color: var(--rmpm-lime); }

.station--feature .sub-station {
  margin: 0; border-left: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 26px;
  border-radius: 18px;
  background: var(--rmpm-navy);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  color: #fff; text-decoration: none;
  transition: background 260ms var(--ease), box-shadow 260ms var(--ease);
}
.station--feature .sub-station:hover, .station--feature .sub-station:focus-visible { background: #060d3f; box-shadow: inset 0 0 0 1px var(--rmpm-teal); }
.sub-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}
.sub-kicker::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--rmpm-teal); }
.sub-name { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 900; line-height: 1.05; color: #fff; }
.sub-desc { flex: 1; color: rgba(255, 255, 255, .75); }
.sub-url { align-self: flex-start; margin-top: auto; padding-top: 12px; white-space: nowrap; font-weight: 700; color: var(--rmpm-teal); display: inline-flex; gap: 10px; }
.sub-station:hover .arrow { transform: translateX(6px); }

/* ---- Mission: gradient band ---------------------------------------------- */
.mission { background: var(--accent); }
.mission .label { color: var(--rmpm-navy); border-image: none; border-color: var(--rmpm-navy); }

/* ---- Support -------------------------------------------------------------- */
.support { background: #fff; padding-top: clamp(72px, 10vw, 128px); }

/* ---- Footer: navy ---------------------------------------------------------- */
.site-footer { background: var(--rmpm-navy); border-top: 0; color: rgba(255, 255, 255, .72); }
.site-footer .logo--dark { display: none; }
.site-footer .logo--light { display: block; }
.site-footer address,
.footer-col a,
.footer-legal,
.footer-legal a { color: rgba(255, 255, 255, .72); }
.footer-col h2 { color: #fff; }
.footer-col a:hover { color: var(--rmpm-teal); }
.footer-legal { border-top-color: rgba(255, 255, 255, .14); }