/* ds-episode-frontend.css (v3) — FRONTEND ONLY when enqueued via wp_enqueue_scripts */

/* ===== Config ===== */
:root{
  --ds-sb-pad: 24px;   /* Sidebar padding; override via class or inline: style="--ds-sb-pad:20px" */
  --ds-gap: 16px;
}

/* ===== Sidebar subnav helpers =====
Usage patterns (choose ONE):
A) Two-element pattern (preferred):
   <div class="ds-sb ds-sb--p24 ds-sb--unclip">
     <nav class="ds-subnav-bleed">…</nav>
   </div>

B) One-element pattern (apply both roles on the same node):
   <nav class="ds-subnav-bleed ds-sb ds-sb--p24 ds-sb--unclip">…</nav>

If the container clips content, add ds-sb--unclip to the WRAPPER.
If the padding differs, use ds-sb--p20 / ds-sb--p32 or inline variable.
------------------------------------ */

/* Wrapper flags (no visuals by default) */
.ds-sb{}
.ds-sb.ds-sb--unclip{ overflow: visible !important; }

/* preset sizes */
.ds-sb.ds-sb--p20{ --ds-sb-pad: 20px; }
.ds-sb.ds-sb--p24{ --ds-sb-pad: 24px; }
.ds-sb.ds-sb--p32{ --ds-sb-pad: 32px; }

/* Two-element pattern */
.ds-sb > .ds-subnav-bleed{
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  padding-block:.25rem;

  margin-inline: calc(var(--ds-sb-pad) * -1);
  padding-inline: var(--ds-sb-pad);
}

/* One-element pattern (same node is wrapper + nav) */
.ds-subnav-bleed.ds-sb{
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  padding-block:.25rem;

  margin-inline: calc(var(--ds-sb-pad) * -1);
  padding-inline: var(--ds-sb-pad);
}

/* List hygiene (optional) */
.ds-subnav-bleed > ul{ display:flex; gap:.5rem; margin:0; padding:0; list-style:none; }
.ds-subnav-bleed li{ flex:0 0 auto; }
.ds-subnav-bleed a, .ds-subnav-bleed button{
  display:inline-flex; align-items:center; white-space:nowrap;
  border-radius:9999px; padding:.375rem .75rem; text-decoration:none;
  border:1px solid rgba(0,0,0,.08);
}

/* ===== Footer helper ===== */
.ds-footer-2col{
  display:grid; gap:var(--ds-gap);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
@media (max-width:780px){ .ds-footer-2col{ grid-template-columns:1fr; } }

/* ===== DEBUG (enable temporarily) ===== */
/*
.ds-subnav-bleed{ outline:2px dashed #e11; background: repeating-linear-gradient(90deg, rgba(255,0,0,.06) 0 10px, transparent 10px 20px); }
.ds-sb{ outline:2px dashed #1e90ff; }
*/