:root{
  --red:#d90429;
  --black:#0a0a0a;
  --green:#007a33;
  --yellow:#ffcc00;

  --bg: var(--black);
  --card: #121214;
  --text: #f2f2f6;
  --muted: #a6a6b0;
  --accent: var(--red);
  --ring: #2a2a33;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
a{color:#8ecbff;text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1100px,92vw);margin:0 auto}
.grid-2{display:grid;grid-template-columns:1fr;gap:2rem}
.grid-3{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:900px){.grid-2{grid-template-columns:1.1fr .9fr}.grid-3{grid-template-columns:repeat(3,1fr)}}
.site-header{position:sticky;top:0;background:rgba(12,12,13,.8);backdrop-filter:blur(8px);border-bottom:1px solid var(--ring);z-index:50}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.logo{font-weight:800;font-size:1.2rem;letter-spacing:.02em;color:var(--text)}
.nav a{margin-left:1rem;color:var(--text)}
.nav .btn-ghost{border:1px solid var(--ring);padding:.35rem .7rem;border-radius:.55rem}
.site-main{padding-bottom:4rem}
.site-footer{border-top:1px solid var(--ring);margin-top:3rem;padding:2rem 0;color:var(--muted)}
.site-footer .right a{margin-left:1rem;color:var(--muted)}
.hero{padding:2.5rem 0 1.5rem;border-bottom:1px solid var(--ring)}
.hero h1{font-size:2.5rem;margin:.2rem 0 .3rem}
.tagline{color:var(--muted);max-width:65ch}
.player{background:var(--card);padding:1rem;border-radius:1rem;border:1px solid var(--ring)}
.features .card{background:var(--card);border:1px solid var(--ring);padding:1rem;border-radius:1rem}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:.6rem 1rem;border-radius:.7rem;font-weight:700;border:none}
.btn:hover{opacity:.92;text-decoration:none}
.btn-ghost{border:1px solid var(--ring);color:var(--text);background:transparent}
.badges{display:flex;flex-wrap:wrap;gap:.5rem}
.badge{background:#1f1f26;border:1px solid var(--ring);padding:.5rem .8rem;border-radius:.6rem;color:#fff}
.big-badges .badge{padding:.7rem 1rem;font-size:1.05rem}
.episode-cards{display:grid;grid-template-columns:1fr;gap:.8rem;margin-top:.8rem}
.episode-card{background:var(--card);border:1px solid var(--ring);padding:1rem;border-radius:1rem}
.episode-card h5{margin:.2rem 0}
.episode-list{display:grid;grid-template-columns:1fr;gap:1rem}
.episode-item{background:var(--card);border:1px solid var(--ring);padding:1rem;border-radius:1rem}
.episode-meta{color:var(--muted);font-size:.9rem;margin:.2rem 0 .6rem}
.search-bar{display:flex;gap:.5rem;margin:1rem 0}
.search-bar input,.search-bar select{flex:1;background:#1a1a20;border:1px solid var(--ring);color:var(--text);padding:.5rem .7rem;border-radius:.5rem}
.form .form-row{margin:.5rem 0}
.form input,.form textarea{width:100%;background:#1a1a20;border:1px solid var(--ring);color:var(--text);padding:.5rem .7rem;border-radius:.5rem}
.form .hp{position:absolute;left:-9999px;visibility:hidden}
.status{min-height:1.2rem;color:var(--muted)}
.reading{max-width:75ch}
.resource-list li{margin:.4rem 0}
.backlink{margin-top:1rem}


/* Pan‑African header stripes */
.site-header::after{
  content:"";
  display:block;
  height:4px;
  background: linear-gradient(90deg, var(--red) 0 33.33%, var(--yellow) 33.33% 66.66%, var(--green) 66.66% 100%);
}

/* Links in brand yellow for contrast */
a{color:var(--yellow)}

/* Accent utility helpers */
.accent-red{ --accent: var(--red); }
.accent-green{ --accent: var(--green); }
.accent-yellow{ --accent: var(--yellow); }

/* Buttons/badges pick up --accent automatically */
.btn{ background:var(--accent); }
.badge{ border-color: var(--ring); }
.badge.accent-green{ border-color: var(--green); }
.badge.accent-yellow{ border-color: var(--yellow); }

/* Focus rings with accent */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:.25rem; }



/* Pan‑African accents */
.hero::after{
  content:"";
  display:block;
  height:6px;
  background: linear-gradient(90deg, var(--red), var(--black), var(--green), var(--yellow));
  margin-top:1rem;
  border-radius:999px;
}
.badge{
  box-shadow: inset 0 0 0 1px var(--ring), inset 4px 0 0 var(--green);
}
.episode-card{
  box-shadow: inset 4px 0 0 var(--red);
}
.episode-item{
  box-shadow: inset 4px 0 0 var(--green);
}
.btn:hover{ filter: brightness(1.05); }
.btn-ghost:hover{ border-color: var(--yellow); }
.site-footer .right a:hover{ color: var(--yellow); }
/* --- Audio/Video layout --- */
.stack-on-mobile { gap: 1.5rem; }
@media(max-width: 900px){
  .stack-on-mobile { display: grid; grid-template-columns: 1fr; }
}
.card { background: var(--card); border:1px solid var(--ring); border-radius:1rem; padding:1rem; }

/* --- Video grid --- */
.video-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .8rem; }
@media(max-width: 1000px){ .video-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media(max-width: 600px){ .video-grid { grid-template-columns: 1fr; } }
.video-card { display:block; background:#1a1a20; border:1px solid var(--ring); border-radius:.8rem; overflow:hidden; color:inherit; text-decoration:none; }
.video-card img { width:100%; display:block; aspect-ratio:16/9; object-fit:cover; }
.video-meta { padding:.6rem .7rem; }
.video-title { font-weight:600; }
.video-date { color: var(--muted); font-size:.9rem; }
.small { font-size:.9rem; }

/* === RBT HOTFIX: NAV VISIBILITY + EPISODES LAYOUT (2025-08-28) === */

/* 1) Header navigation: make sure links are visible and laid out */
.site-header { background: #000; }
.site-header .logo, .site-header a { color: #fff; }
.site-header .nav { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.site-header .nav a { display: inline-block; padding: .4rem .6rem; text-decoration: none; font-weight: 600; }
.site-header .btn.btn-ghost { border: 1px solid #fff; border-radius: .4rem; }

/* 2) Generic two-column grid that balances columns on desktop and stacks on mobile */
.grid-2, .grid-2-balanced {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 1024px){
  .grid-2, .grid-2-balanced { grid-template-columns: 1fr; }
}

/* 3) Episodes page: ensure the right column (Video) gets equal space */
.site-main .episode-list, .site-main .video-grid, .site-main .card { width: 100%; }

/* 4) Video grid looks good and wraps */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.video-card { border-radius: .5rem; overflow: hidden; display: block; text-decoration: none; }
.video-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.video-meta { padding: .6rem .4rem; }
.video-title { font-weight: 600; }
.video-date { opacity: .8; font-size: .9rem; }

/* === RBT Episodes Equal Columns (v9) === */
.grid-2.stack-on-mobile{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 1.5rem !important;
  align-items: start !important;
}
@media (max-width: 1024px){
  .grid-2.stack-on-mobile{ grid-template-columns: 1fr !important; }
}

/* === RBT EPISODES: HARD EQUAL COLUMNS (v10) === */
#episodes-columns{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:1.5rem !important;
  align-items:start !important;
}
#episodes-columns > *{
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  float:none !important;
  flex:none !important;
}
#episodes-columns .card,
#episodes-columns .episode-list,
#episodes-columns .video-grid,
#episodes-columns .search-bar{
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
}
@media(max-width:1024px){
  #episodes-columns{ grid-template-columns:1fr !important; }
}
/* ============================
   COMPONENT: Platform icon row (footer)
   ============================ */
.platform-icons a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-left: .75rem;
  color: #e5e7eb;            /* icons inherit currentColor */
  text-decoration: none;
}
.platform-icons a:hover,
.platform-icons a:focus-visible {
  color: #ffffff;
}
.platform-icons .ico {
  width: 22px;
  height: 22px;
  display: block;
}

/* Visually-hidden text for screen readers */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================
   PAGE: Subscribe — Big logo buttons
   ============================ */
.platform-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 1rem;
}

.platform-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #111;
  color: #e5e7eb;            /* icons inherit this */
  text-decoration: none;
  border: 1px solid #222;
  transition: .2s transform, .2s background, .2s border-color;
}
.platform-btn:hover,
.platform-btn:focus-visible {
  transform: translateY(-2px);
  background: #131313;
  border-color: #333;
}
.platform-btn .ico {
  width: 28px;
  height: 28px;
  display: block;
}

/* Brand accents (text color only; SVGs inherit currentColor) */
.platform-btn.apple      { color: #e5e7ff; }
.platform-btn.spotify    { color: #1DB954; }
.platform-btn.amazon     { color: #8ab4ff; }
.platform-btn.youtube    { color: #ff4a4a; }
.platform-btn.rss        { color: #f26522; }
.platform-btn.buzzsprout { color: #7bd389; }

/* Optional: compact footer icons on small screens */
@media (max-width: 480px) {
  .platform-icons a { margin-left: .5rem; }
  .platform-icons .ico { width: 20px; height: 20px; }
}
/* Footer platform icons — light color, horizontal, small */
.platform-icons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: #e5e7eb;          /* SVGs inherit this instead of black */
}
.platform-icons a {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.platform-icons a:hover,
.platform-icons a:focus-visible { color: #ffffff; }

.platform-icons .ico {
  width: 22px;
  height: 22px;
  display: block;
}

/* Accessible hidden label */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* If your footer wrapper enforces vertical stacking, override it */
.site-footer .right { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* TEMP TINT for external SVG <img> icons in footer */
.site-footer .platform-icons .ico {
  width: 22px !important;
  height: 22px !important;
  display: block;
  /* Make black SVGs appear light on dark backgrounds */
  filter: invert(90%) brightness(110%);
}