/*
Theme Name: DJ Set Child
Theme URI: https://barmiso.com/
Author: Joe Rice
Template: twentytwentyfive
Version: 1.0
*/

/* ===== Global ===== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 45px; /* height of sticky A–Z + breathing room */
}

/* ===== Site Header ===== */
.site-header {
  max-width: 1100px;          /* match your content width */
  margin: 0 auto;
  padding: 8px 16px;
}

.site-header__row {
  display: flex;
  align-items: center;
  gap: 16px;                   /* space between logo and nav */
  justify-content: flex-start; /* keep nav right next to the logo */
  flex-wrap: wrap;
}

.site-header__row .wp-block-image,
.site-header__row .wp-block-site-logo {
  flex: 0 0 auto;
}

.site-header__row .wp-block-navigation {
  flex: 0 1 auto;
  margin-left: 0;
}

.site-header__row .wp-block-navigation__container {
  justify-content: flex-start !important;
  gap: 14px;
}

@media (max-width: 700px) {
  .site-header__row { gap: 10px; }
}

/* ===== Nav Icons ===== */
.wp-block-navigation .nav-icon > a {
  position: relative;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.wp-block-navigation .nav-icon > a .wp-block-navigation-item__label {
  position: absolute !important;
  clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  height: 1px; width: 1px; overflow: hidden; white-space: nowrap;
}

/* Generic icon setup: render the actual SVG */
.wp-block-navigation .nav-icon > a::before {
  content: "";
  width: 24px; height: 24px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Specific icons */
.wp-block-navigation .nav-icon--search > a::before {
  background-image: url("/wp-content/themes/dj-set/assets/icons/search.svg");
}

.wp-block-navigation .nav-icon--twitch > a::before {
  background-image: url("/wp-content/themes/dj-set/assets/icons/twitch.svg");
}

/* ===== Single DJ Set ===== */
.djset-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1rem;
}

.single-dj_set a:hover { color: #3285a8; }

/*
.djset-header {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1rem;
  align-items: start;
  margin: 1.5rem 0 2rem;
}
*/

.single-dj_set .djset-title {
  margin: 0 0 .5rem;
  line-height: 1.2;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 700;
}

.single-dj_set .djset-art-stacked { display:flex; justify-content:left; margin:.75rem 0 .25rem; }
.single-dj_set .djset-art-stacked img { display:block; width:100%; max-width:500px; height:auto; border-radius:12px; }

.single-dj_set .djset-date-stacked { margin:.25rem 0 .75rem; color:#666; font-size:.95rem; }
.single-dj_set .djset-desc-stacked {
  margin: .75rem auto 1rem 0; /* auto right margin, 0 left margin */
  line-height: 1.6;
  max-width: 500px;
}

.single-dj_set .djset-audio-stacked { margin:1rem 0 1.25rem; }
/* Audio player styled like a mini card */
.single-dj_set .djset-audio-stacked audio {
  width: 100%;
  max-width: 500px;
  display: block;
  margin-bottom: .75rem;

  /* visual blend */
  background: #fff; /* same as cards */
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);

  /* remove that “object” selectable state */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Optional: tame WebKit’s native controls container */
.single-dj_set .djset-audio-stacked audio::-webkit-media-controls-enclosure {
  box-shadow: none;
  border-radius: 12px;
}
.single-dj_set .djset-download a { text-decoration:none; font-size:15px; }

/* Tracklist (vinyl sleeve vibe) */
.single-dj_set .djset-tracklist-stacked {
  border-top: 1px solid var(--dj-rule);
  padding-top: var(--dj-gap);
  margin-top: var(--dj-gap-lg);
}

.single-dj_set .dj-set-tracklist {
  counter-reset: tracknum;
  display:flex; flex-wrap:wrap; align-content:flex-start;
  gap:8px 18px; margin:0; padding:0; list-style:none;
  font-size:15px; line-height:1.6;
}
.single-dj_set .dj-set-tracklist > li {
  position:relative; flex:0 0 50%; max-width:50%;
  box-sizing:border-box; padding-left:calc(3.5ch + 8px); overflow-wrap:anywhere;
}
.single-dj_set .dj-set-tracklist > li::before {
  counter-increment: tracknum;
  content: counter(tracknum, decimal-leading-zero) ".";
  position:absolute; left:0; width:3.5ch; text-align:right;
  color:#6b7280; font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
@media (max-width:640px){
  .single-dj_set .dj-set-tracklist > li { flex-basis:100%; max-width:100%; }
}
@supports (column-count:2){
  .single-dj_set .dj-set-tracklist.is-columns { display:block; column-count:2; column-gap:18px; }
  .single-dj_set .dj-set-tracklist.is-columns > li { break-inside:avoid; -webkit-column-break-inside:avoid; width:auto; max-width:none; }
}
.single-dj_set .djset-tracklist-heading {
  margin:0 0 .5rem; font-size:1.25rem; font-weight:600;
  border-bottom:1px solid #ddd; padding-bottom:.25rem;
}

.single-dj_set .djset-artistlink {
  color: inherit;
  text-decoration: none;
}
.single-dj_set .djset-artistlink:hover {
  color: #3285a8;         /* optional accent */
  text-decoration: underline;
}

/* ===== Archive Cards ===== */
.djset-archive-header { margin:2rem 0 1rem; }
.djset-archive-title { margin:0; }

.djset-grid { display:grid; gap:1.25rem; grid-template-columns:repeat(var(--dj-cols-desktop,3),minmax(0,1fr)); }
@media (max-width:1000px){ .djset-grid{ grid-template-columns:repeat(var(--dj-cols-tablet,2),minmax(0,1fr)); } }
@media (max-width:640px){ .djset-grid{ grid-template-columns:repeat(var(--dj-cols-mobile,1),minmax(0,1fr)); } }

.djset-card {
  background: var(--wp--preset--color--base-2, #fff);
  border:1px solid rgba(0,0,0,.06); border-radius:12px; overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.04);
  display:flex; flex-direction:column;
}
.djset-card-thumb img, .djset-thumb-fallback {
  display:block; width:100%; aspect-ratio:1/1; object-fit:cover; background:#f4f4f4;
  text-align:center; line-height:1; font-size:14px; color:#888; padding:2rem 0;
}
.djset-card-body { padding:.9rem 1rem 1rem; }
.djset-card-title { margin:0 0 .25rem; font-size:1.05rem; line-height:1.2; }
.djset-card-date { opacity:.8; font-size:.92rem; margin-bottom:.25rem; }
.djset-card-desc { margin:.5rem 0 .75rem; font-size:.96rem; }
.djset-card-cta .djset-button { display:inline-block; padding:.5rem .8rem; border-radius:8px; border:1px solid rgba(0,0,0,.1); text-decoration:none; }
.djset-card-cta .djset-button:hover { background:rgba(0,0,0,.04); }
.djset-pagination { margin:1.25rem 0 2rem; text-align:center; }

/* ===== Search Page =====
   Wrap your search page content in a Group block with class "dj-search" */
.dj-search { max-width:760px; margin:0 auto; padding:0 16px; }

/* Bar layout */
#dj-song-search {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
  margin:0 0 14px;
}
#dj-song-search input#dj-song-query {
  flex:1 1 480px;
  width:100%;
  max-width:100%;
  padding:.55rem .7rem;
  border:1px solid rgba(0,0,0,.15); /* fixed missing semicolon */
  border-radius:8px;
}
#dj-song-search .dj-controls { display:flex; align-items:center; gap:8px; }
#dj-song-search .dj-controls select,
#dj-song-search .dj-controls button {
  padding:.4rem .55rem; border:1px solid rgba(0,0,0,.15); border-radius:8px; background:#fff;
}
#dj-song-search .dj-controls button[disabled]{ opacity:.5; }

/* Initial hint */
.djsearch-hint {
  flex-basis:100%;
  width:100%;
  margin:.5rem 0 0;
  font-size:.9rem;
  color:#6b7280;
}

/* Results reset */
#dj-song-results, #dj-song-results ul, #dj-song-results ol { list-style:none; margin:0; padding:0; }
#dj-song-results > li { padding:.6rem 0; border-bottom:1px solid #e5e7eb; }
#dj-song-results .dj-result__title { display:block; font-weight:600; line-height:1.3; }
#dj-song-results .dj-result__meta { color:#6b7280; font-size:.92rem; margin-top:.15rem; }

/* JS-rendered sections */
.djsearch-meta { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:.75rem; }
.djsearch-counts { font-size:.95rem; color:#6b7280; }
.djsearch-filters label { margin-right:.5rem; font-size:.85rem; }
.djsearch-filters select { margin-left:.25rem; }

.djsearch-subhead { margin:1rem 0 .5rem; font-size:1.05rem; font-weight:600; }
.djsearch-setlist, .djsearch-list { list-style:none; padding:0; margin:0; }
.djsearch-setitem { display:flex; gap:8px; align-items:baseline; padding:4px 0; }
.djsearch-setlink { font-weight:600; text-decoration:none; }
.djsearch-setlink:hover { text-decoration:underline; }
.djsearch-sethits, .djsearch-setdate { color:#6b7280; font-size:.85rem; }

.djsearch-row { padding:8px 0; border-top:1px solid rgba(0,0,0,.06); }
.djsearch-row:first-child { border-top:0; }
.djsearch-trackline { font-weight:500; }
.djsearch-row-sub { color:#6b7280; font-size:.9rem; }
.djsearch-row-sub a { color:inherit; text-decoration:none; }
.djsearch-row-sub a:hover { text-decoration:underline; }

.djsearch-pager { display:flex; gap:10px; align-items:center; margin-top:12px; }
.djsearch-pager button[disabled]{ opacity:.5; pointer-events:none; }

/* Force the search box and results to stack vertically */
.dj-search { display: block; } /* make sure outer wrapper stacks */
.dj-search > #dj-song-search,
.dj-search > #dj-song-results {
  display: block;
  width: 100%;
}
.dj-search #dj-song-results { margin-top: 12px; }

/* Belt-and-suspenders in case the parent is a Row/Flex block */
.wp-block-group.dj-search,
.wp-block-group.is-layout-flex.dj-search {
  display: block !important;
}

.djsearch-artistlink { color: inherit; text-decoration: none; }
.djsearch-artistlink:hover { text-decoration: underline; }

/* ===== Stats (v2) ===== */
.djstats--v2 { --gap:18px; --muted:#6b7280; --border:#e5e7eb; --ink:#111; --bg:#fff; }
.djstats--v2 .djstats-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); margin:0 0 calc(var(--gap)*1.25); }
@media (max-width:960px){ .djstats--v2 .djstats-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .djstats--v2 .djstats-cards{ grid-template-columns:1fr; } }

.djstats--v2 .djstats-card { border:1px solid var(--border); border-radius:12px; background:var(--bg); padding:16px 14px; }
.djstats--v2 .djstats-card__num { font-size:clamp(1.75rem,3vw,2.25rem); font-weight:700; line-height:1.1; }
.djstats--v2 .djstats-card__label { margin-top:4px; color:var(--muted); font-size:.95rem; }

.djstats--v2 .djstats-board { border:1px solid var(--border); border-radius:12px; background:var(--bg); padding:14px 14px 10px; margin-bottom:var(--gap); }
.djstats--v2 .djstats-board__title {
  margin:0 0 .75rem; font-size:1.1rem; font-weight:700; line-height:1.3; text-transform:uppercase; letter-spacing:.03em; color:var(--ink);
  background:linear-gradient(to right, rgba(0,0,0,.08) 0 12px, transparent 12px);
  padding:6px 8px 6px 16px; border-radius:6px;
}
.djstats--v2 .djstats-board__title span { color:var(--ink); }
.djstats--v2 .djstats-board__title::after { content:''; position:absolute; left:0; bottom:0; width:64px; height:2px; background:var(--ink); opacity:.25; border-radius:2px; }

.djstats--v2 .djstats-list__head {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:0 0 .35rem; padding:.2rem .1rem .25rem;
  border-bottom:1px solid var(--border); color:var(--muted);
  font-size:.9rem; text-transform:uppercase; letter-spacing:.03em;
}
.djstats--v2 .djstats-list__head-left { flex:1; min-width:0; }
.djstats--v2 .djstats-list__head-right { min-width:3ch; text-align:right; }

.djstats-artist-link { text-decoration:none; color:inherit; }
.djstats-artist-link:hover { color:var(--ink); text-decoration:underline; }

.djstats-list__item { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:.4rem 0; line-height:1.5; }
.djstats-list__left { flex:1; min-width:0; line-height:1.2; }
.djstats-list__right { font-variant-numeric:tabular-nums; line-height:1; }

/* ===== Artists Index (A–Z) ===== */
.dj-artists-index--compact { --gap:10px; --ink:#111; --muted:#6b7280; }

.dj-artists-index__controls { margin:0 0 12px; }
.dj-artists-index__input {
  width:100%; max-width:520px; padding:.55rem .7rem;
  border:1px solid rgba(0,0,0,.15); border-radius:8px;
}

/* multicolumn list */
.dj-artists-index__grid {
  margin:0; padding:0; list-style:none;
  column-gap:18px; column-width:240px;
}
.dj-artists-index__item { break-inside:avoid; -webkit-column-break-inside:avoid; padding:2px 0; }
.dj-artists-index__item a { display:inline-block; padding:2px 0; text-decoration:none; color:var(--ink); border-bottom:1px solid transparent; }
.dj-artists-index__item a:hover { border-bottom-color:currentColor; }
.dj-artists-index__empty { margin-top:8px; color:var(--muted); font-style:italic; }

/* A–Z sticky nav */
.dj-artists-index__aznav {
  position:sticky; top:0; z-index:100; background:#fff;
  padding:.4rem .25rem; display:flex; flex-wrap:wrap; justify-content:center; gap:0 .25rem;
  border-bottom:1px solid #e5e7eb; font-size:.95rem; letter-spacing:0;
}
.dj-artists-index .dj-artists-index__aznav a {
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 .15rem; text-decoration:none; color:#999; font-weight:500; border-radius:3px;
  transition:background-color .15s ease, color .15s ease;
}
.dj-artists-index .dj-artists-index__aznav a:hover,
.dj-artists-index .dj-artists-index__aznav a:focus { color:#111; background:#f2f2f2; }
.dj-artists-index .dj-artists-index__aznav a.is-active,
.dj-artists-index .dj-artists-index__aznav a[aria-current="true"] { font-weight:600; color:#111; background:transparent; }
.dj-artists-index .dj-artists-index__aznav a.is-active:hover,
.dj-artists-index .dj-artists-index__aznav a[aria-current="true"]:hover { color:#111; background:#f2f2f2; }
.dj-artists-index__aznav > li { list-style:none; margin:0; padding:0; }
@media (min-width:780px){
  .dj-artists-index__aznav { flex-wrap:nowrap; overflow:auto; -webkit-overflow-scrolling:touch; }
}
/* anchor offset if needed beyond global html padding */
.dj-artists-index--compact [id], .dj-artists-index__grid [id] { scroll-margin-top:45px; }
.admin-bar .dj-artists-index--compact [id], .admin-bar .dj-artists-index__grid [id] { scroll-margin-top:77px; }

/* ===== DJ Sets Index — Base wrapper & headings ===== */
.dj-sets-index {
  max-width: 980px;
  margin-inline: auto;
  padding-inline: 1rem;
}
.dj-sets-index .dj-sets-index__year {
  margin: 2rem 0 1rem;
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  font-weight: 700;
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding-bottom: .25rem;
}
.dj-sets-index .dj-sets-index__month {
  margin: 1rem 0 .5rem;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 600;
  opacity: .85;
}

/* =========================================
   DJ Sets Index — Card Fixes & Tight Layout
   (Authority block)
   ========================================= */

/* 0) Bullet killer — belt & suspenders */
.dj-sets-index :where(ul, ol) { list-style: none !important; margin: 0 !important; padding-left: 0 !important; }
.dj-sets-index :where(li) { list-style: none !important; }

/* 1) Make the LI the "card" container so date sits inside the same box */
.dj-sets-index .dj-sets-index__card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: 8px;
  display: block;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}
.dj-sets-index .dj-sets-index__card:hover {
  border-color: rgba(0,0,0,.16);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

/* Tighter grid: 2 columns desktop, 1 on small screens */
.dj-sets-index.is-grid .dj-sets-index__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 12px !important;
}
@media (max-width: 760px) {
  .dj-sets-index.is-grid .dj-sets-index__grid {
    grid-template-columns: 1fr !important;
  }
}

/* 2) Link row inside the card: no inner border/padding */
.dj-sets-index .dj-sets-index__link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0;                /* moved to LI */
  border: 0;                 /* no inner border */
  box-shadow: none;          /* no inner shadow */
  background: transparent;   /* let LI show */
  text-decoration: none;
}

/* 3) Thumbnail: fixed square, no squeeze */
.dj-sets-index .dj-sets-index__thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  background: #f4f4f4;
}
.dj-sets-index .dj-sets-index__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 4) Meta block (title + date) stacks neatly */
.dj-sets-index .dj-sets-index__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dj-sets-index .dj-sets-index__title {
  font-weight: 600;
  line-height: 1.2;
  font-size: clamp(0.98rem, 2.1vw, 1.08rem);
  margin: 0;
}
.dj-sets-index .dj-sets-index__date {
  opacity: .72;
  margin: 2px 0 0 0;
  font-size: .92rem;
}

/* 5) List layout rows stay tidy and within card shell */
.dj-sets-index.is-list .dj-sets-index__list {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 8px; /* spacing between cards */
}
.dj-sets-index .dj-sets-index__row {
  display: grid !important;
  grid-template-columns: 1fr;  /* the card handles layout */
  gap: 0;
  padding: 0;
  border: 0;
}

/* 7) Small polish for year/month headings in tight card grids */
.dj-sets-index .dj-sets-index__year {
  margin: 1.6rem 0 .8rem;
}
.dj-sets-index .dj-sets-index__month {
  margin: .8rem 0 .4rem;
}

/* ========== Artist Page ========== */
/* page wrapper (centered with gutter) */
.dj-artist-page {
  max-width: 980px;
  margin: 0 auto;      /* centers horizontally */
  padding: 0 1.5rem;   /* adds breathing room left & right */
}

/* Top Tracks: header + rows share the same grid so “Plays” lines up */
.dj-artist-page .djstats-list__head,
.dj-artist-page .djstats-list {
  max-width: 720px;
  margin: 0 auto;      /* center inside wrapper */
}

.dj-artist-page .djstats-list__head {
  display: grid;
  grid-template-columns: 1fr 5ch; /* title | plays */
  column-gap: 10px;
  padding: .2rem .1rem .25rem;
  border-bottom: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.dj-artist-page .djstats-list__head-left  { justify-self: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dj-artist-page .djstats-list__head-right { justify-self: end; text-align: right; }

.dj-artist-page .djstats-list { list-style: none; padding: 0; }
.dj-artist-page .djstats-list__item {
  display: grid;
  grid-template-columns: 1fr 5ch; /* title | plays */
  column-gap: 10px;
  align-items: baseline;
  margin: .4rem 0;
}
.dj-artist-page .djstats-list__left  { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dj-artist-page .djstats-list__right { justify-self: end; text-align: right; font-variant-numeric: tabular-nums; }

/* Artist page — Sets block: single column cards, centered */
.dj-artist-page .dj-sets-index.is-artist {
  max-width: 760px;
  margin: 0 auto;      /* center block */
  padding-inline: 0;   /* cards align with tracklist */
}
.dj-artist-page .dj-sets-index.is-artist .dj-sets-index__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 12px;
}

.site-header__twitch:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}