/* Reloading Podcast — site stylesheet
   Palette: blue/gold primary (from the show's own logo), red/green as accents
   (nod to Lee/Dillon/Redding/RCBS without literally reproducing their marks).
   Structural conventions (cards, pill nav, eyebrow labels, dark theme) borrowed
   from umbra-noesis.com's structure, NOT its color scheme. */

:root {
  --bg: #0b0d10;
  --bg-elevated: #14171c;
  --border: #262b33;

  --blue: #1791c7;        /* brightened from the sampled #00709A for on-screen contrast */
  --blue-chrome-1: #bfe9ff;
  --blue-chrome-2: #2fa8de;
  --blue-chrome-3: #0c4a68;
  --gold: #d4af52;        /* brightened from sampled #BE9A3A */

  --red-accent: #b72b29;  /* Lee */
  --green-accent: #04703a;/* Redding/RCBS */

  --text: #eef1f4;
  --text-dim: #9aa4b2;

  --radius: 10px;

  /* Content width: 1180px on anything up to ~1245px viewport (phones,
     tablets, small laptops — unchanged from before), scales toward 95% of
     the viewport above that, leaving just a thin margin either side. Caps
     at 1900px so it doesn't stretch too thin on ultrawide monitors. */
  --content-width: clamp(1180px, 95vw, 1900px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    linear-gradient(180deg, rgba(6,7,9,0.80) 0%, rgba(6,7,9,0.88) 60%, var(--bg) 100%),
    url("../img/bg-brass-1.jpg") center top / cover no-repeat fixed;
  background-color: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.5;
}

a { color: var(--blue-chrome-2); text-decoration: none; }
a:hover { color: var(--gold); }

.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.eyebrow a { color: inherit; }
.eyebrow a:hover { text-decoration: underline; }

/* Small badge for a card that links to a vendor's specific reloading-data
   page rather than their general site/homepage — flags it as reference
   material so it doesn't read as a redundant duplicate of that vendor's
   other card elsewhere on the page. Sits above the logo inside the card. */
.tag-loaddata {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  margin-bottom: 0.7rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Chrome-blue heading treatment */
h1, h2, h3, .chrome-text {
  font-weight: 800;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, #ffffff 0%, var(--blue-chrome-1) 28%, var(--blue-chrome-2) 55%, var(--blue-chrome-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

/* Live-stream banner — sits above the site header, links out to the
   Tuesday-night Rumble stream. Red "Live" pill echoes the tag-loaddata
   pill pattern but filled solid so it reads as an active/live marker
   rather than a reference tag. */
.live-banner {
  background: linear-gradient(180deg, rgba(183,43,41,0.20) 0%, rgba(6,7,9,0.4) 100%);
  border-bottom: 1px solid var(--border);
}

.live-banner-link {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0.55rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}
.live-banner-link:hover { color: var(--gold); }

.tag-live {
  display: inline-block;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: var(--red-accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex: 0 0 auto;
}

header.site-header {
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(6,7,9,0.25) 0%, rgba(6,7,9,0.35) 100%),
    url("../img/bg-header-bench.png") center 35% / cover no-repeat;
}

.site-header-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-header img.logo {
  height: 56px;
  width: auto;
  display: block;
  border-radius: 6px;
}

nav.pill-nav {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

nav.pill-nav a {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 600;
}

nav.pill-nav a:hover,
nav.pill-nav a.active {
  border-color: var(--blue);
  color: var(--blue-chrome-2);
}

.hero {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 3.5rem 1.25rem 1rem;
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin: 0 0 0.75rem;
}

.hero p.lede {
  color: var(--text-dim);
  max-width: 640px;
  font-size: 1.05rem;
}

/* Hero + sidebar layout, matching FRN's own episode-page share/support widget.
   hero-content wraps hero-main + hero-episodes so they stack independently
   of the sidebar's height, then that whole block sits beside sidebar-stack
   as a plain two-item row. This is deliberately NOT one flex/grid row split
   three ways (hero-main, hero-episodes, sidebar-stack): both flex-wrap and
   a spanning grid item let a tall sidebar dictate where hero-episodes
   starts, dropping it below the sidebar and opening a gap under the
   (shorter) button row. Two items only, no wrap, no span — the sidebar's
   height can't leak into hero-content's layout at all. */
.hero-with-sidebar {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}
.hero-with-sidebar .hero-content {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
}
.hero-with-sidebar .sidebar-stack {
  flex: 0 0 280px;
}

/* Small floating visitor counter. Absolutely positioned so it's lifted
   completely out of the hero-with-sidebar flex flow -- it can't shift
   hero-content, sidebar-stack, or anything else's spacing. Anchored to
   the gap just left of the sidebar, top offset lined up with the "Keep
   Us Loaded" heading text (the sidebar's own padding pushes that text
   down from the sidebar's outer edge, so the counter needs the same
   nudge to read as level with it). Hidden below 1300px: below that,
   --content-width has already started shrinking (see the clamp() above)
   and the hero title can grow wide enough to run under it. */
.visitor-counter {
  display: none;
  position: absolute;
  top: 4.15rem;
  right: calc(280px + 2rem + 0.5rem);
  width: 150px;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  background: rgba(20, 23, 28, 0.85);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.visitor-counter-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  color: var(--text);
}
.visitor-counter strong {
  color: var(--blue-chrome-2);
  font-weight: 700;
}
@media (min-width: 1300px) {
  .visitor-counter { display: flex; }
}

.sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.side-widget {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.side-widget h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  margin: 0 0 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.side-widget h3:not(:first-child) { margin-top: 1.25rem; }

.share-icons { display: flex; gap: 0.5rem; }
.share-icons .share-icon {
  flex: 1;
  text-align: center;
  padding: 0.6rem 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text);
}
.share-icons .share-icon:hover { border-color: var(--blue); color: var(--blue-chrome-2); }

.btn-block { display: block; text-align: center; }

.widget-links {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--text-dim);
}
.widget-links a { color: var(--gold); }
.widget-links a:hover { color: var(--blue-chrome-2); }

@media (max-width: 700px) {
  .side-widget { flex-basis: 100%; }
}

.btn {
  display: inline-block;
  padding: 0.65rem 1.3rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.9rem;
  border: 1px solid transparent;
  /* Reset for when .btn lands on a real <button> (e.g. #calc-download)
     instead of an <a> -- UA button styling otherwise leaks through. */
  font-family: inherit;
  appearance: none;
}

.btn-primary {
  background:
    radial-gradient(120% 180% at 12% -30%, rgba(191,233,255,0.55) 0%, rgba(191,233,255,0) 32%),
    radial-gradient(90% 140% at 90% 130%, rgba(47,168,222,0.5) 0%, rgba(47,168,222,0) 42%),
    linear-gradient(135deg, #051622 0%, #0c4a68 20%, #14547a 32%, #051622 48%, #1791c7 64%, #08202f 80%, #0c4a68 100%);
  border-color: rgba(191,233,255,0.28);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.btn-primary:hover { filter: brightness(1.18); }

.btn-accent-red {
  background: var(--red-accent);
  color: #fff;
}
.btn-accent-green {
  background: var(--green-accent);
  color: #fff;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

section {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem;
}

.card h3 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.card p { color: var(--text-dim); font-size: 0.9rem; margin: 0; }

.episode-card p + p { margin-top: 0.5rem; }
.episode-watch a { color: var(--gold); font-weight: 600; }
.episode-watch a:hover { color: var(--blue-chrome-2); }

.tool-card { position: relative; }
.tool-card-preview {
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--border);
  margin-bottom: 0.6rem;
  display: block;
  cursor: zoom-in;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tool-card-preview:hover {
  transform: scale(3);
  transform-origin: top left;
  z-index: 20;
  box-shadow: 0 16px 40px rgba(0,0,0,0.65);
}
.tool-card p { margin-bottom: 0.8rem; }

/* Recent Episodes and the ledger card side by side, both starting right
   under the button block instead of one stacked below the other.
   align-items:flex-start (not stretch) so the shorter one doesn't get
   forced to match the taller one's height -- same reasoning as
   .hero-episodes .card-grid below. */
.hero-episodes-row {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.hero-episodes-row .hero-episodes { flex: 1 1 420px; }
.hero-episodes-row .tool-card { flex: 0 0 260px; }

/* Recent Episodes no longer shares its row with anything taller than an
   episode card, but keep this explicit -- default grid stretch is what
   caused the dead space under the episode cards in the first place. */
.hero-episodes .card-grid { align-items: start; }

.card.accent-red { border-top: 3px solid var(--red-accent); }
.card.accent-green { border-top: 3px solid var(--green-accent); }
.card.accent-gold { border-top: 3px solid var(--gold); }

.sponsor-logo {
  max-height: 48px;
  max-width: 100%;
  width: auto;
  height: auto;
  margin-bottom: 0.6rem;
  border-radius: 6px;
  background: #fff;
  padding: 0.3rem;
}

.sponsor-logo-transparent {
  max-height: 84px;
  max-width: 100%;
  width: auto;
  height: auto;
  background: none;
  padding: 0;
  border-radius: 0;
}

/* Crisis resources gets its own boxed-in region, deliberately set apart
   from the surrounding sections rather than folded into show notes —
   but aligned to the same content width as everything else, not full-bleed. */
.crisis-resources {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0;
  background: rgba(183, 43, 41, 0.08);
  border: 1px solid var(--red-accent);
  border-radius: var(--radius);
}
.crisis-resources .section-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
}
.crisis-resources .card.accent-red p a { color: var(--blue-chrome-2); }
.crisis-resources .card-grid { margin-top: 1rem; }

/* Disclaimer box — hero, static, soft red outline (same "pay attention"
   language as crisis-resources, but no motion; this one's meant to be
   read in full, not caught out of the corner of an eye). */
.disclaimer-box {
  border: 1px solid rgba(183, 43, 41, 0.45);
  background: rgba(183, 43, 41, 0.06);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin: 1rem 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.disclaimer-box strong { color: var(--text); }

/* Load Increment Calculator — rebuilt client-side from the "Public Ladder
   Load Calculator" Google Sheet rather than embedded, so visitors can
   adjust numbers without write access to the source sheet. Red load
   cells echo that sheet's own conditional-formatting convention. */
.calc-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.calc-instructions {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

.calc-inputs {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.calc-inputs label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-dim);
  font-weight: 600;
}
.calc-inputs input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.95rem;
  padding: 0.45rem 0.6rem;
  width: 9rem;
}
.calc-inputs input:focus {
  outline: none;
  border-color: var(--blue-chrome-2);
}

.calc-hint {
  color: var(--text-dim);
  font-size: 0.78rem;
  font-style: italic;
  margin: 0 0 1.25rem;
}

.calc-table-wrap {
  overflow-x: auto;
}

#calc-download {
  margin-top: 1.1rem;
  cursor: pointer;
}

.calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.calc-table th {
  text-align: left;
  color: var(--text-dim);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
.calc-table td {
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
.calc-table .calc-label {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.calc-table .calc-load {
  background: var(--red-accent);
  color: #fff;
  font-weight: 700;
  border-radius: 4px;
}
.calc-table .calc-exact {
  color: var(--text-dim);
  font-size: 0.82rem;
}

.host-card {
  text-align: center;
}
.host-card img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--blue);
  margin-bottom: 0.6rem;
  background: var(--border);
}

footer.site-footer {
  border-top: 1px solid var(--border);
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.85rem;
}
footer.site-footer p { margin: 0; }
footer.site-footer p + p { margin-top: 0.5rem; }

.footer-credit {
  font-size: 0.72rem;
}
.footer-credit a { color: var(--gold); }
.footer-credit a:hover { color: var(--blue-chrome-2); }