/* =========================================================================
 * Super Live Music Lyrics — Smule-style skin for the single
 * song / artist / album pages. Scoped under body.niyal-single so it never
 * leaks onto other templates. Uses --nmui-* tokens (light + dark aware).
 * ========================================================================= */

/* The theme's inc/customcss.php prints `body{ background:<old pink option> !important }`
   in wp_head. Single pages don't load home.css (which neutralises it elsewhere), so
   that pink shows down the page EDGES beside the content sheet as vertical strips.
   Beat it here — var(--nmui-bg) is white in light mode and dark in dark mode, so the
   page reads clean in both. (`html body.niyal-single` out-specifies the plain `body`.) */
html body.niyal-single { background: var(--nmui-bg, #fff) !important; }

/* ------------------------------- Hero ---------------------------------- */
/* A dark scrim over the background photo so the title always reads cleanly. */
/* The base theme absolutely-positions .lyrics-title at bottom:105px inside a
   fixed 350px hero — on short mobile heros that pins the title OVER the logo.
   Make the hero auto-height and let the logo → title stack normally. */
body.niyal-single .background-single-lyrics {
  height: auto !important;
  padding-bottom: 0 !important;
  background-size: cover !important;
  background-position: center !important;
}
body.niyal-single .single-lyrics-overlay {
  position: relative;
  height: auto !important;
  padding-bottom: 0 !important;
  min-height: 140px;
  background: linear-gradient(180deg, rgba(10, 11, 16, .35) 0%, rgba(10, 11, 16, .8) 100%);
}
body.niyal-single .single-lyrics-overlay .container { position: relative; z-index: 2; }

body.niyal-single .lyrics-title,
body.niyal-single .lyrics-title.album {
  position: static !important;
  bottom: auto !important;
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px 0 26px;
}

/* The base theme yanks .content-pull up 100px (position:absolute; top:-100px) to
   overlap the old tall hero — with our compact hero that dragged the content up
   OVER the title. Flow it normally so content sits cleanly below the hero. */
body.niyal-single .content-capsule { position: static; }
body.niyal-single .content-pull {
  position: static !important;
  top: auto !important;
  left: auto !important;
}
/* home.css (loaded on artist/album for their card grids) sets a GLOBAL
   `.content-pull{margin-top:-56px}` — a hero-overlap tuned for the tall HOME hero.
   On the SHORT artist/album heros that -56px drags the content sheet UP so it
   covers the page title (e.g. "Mustafa Zahid" overlapping "INFORMATION"). Cancel
   the pull on these two templates; the song page never loads home.css so it is
   unaffected, and the sheet still sits cleanly right below the title. */
body.niyal-single-artist .content-pull,
body.niyal-single-album .content-pull,
body.niyal-single-listing .content-pull,
body.niyal-single-content .content-pull { margin-top: 0 !important; }
body.niyal-single .lyrics-title h1 {
  font-size: clamp(26px, 6vw, 46px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
  margin: 4px 0 0;
}
body.niyal-single .lyrics-title h3 a,
body.niyal-single .lyrics-title h4,
body.niyal-single .lyrics-title h4 a { color: rgba(255, 255, 255, .92); }
body.niyal-single .lyrics-title h3 a:hover,
body.niyal-single .lyrics-title h4 a:hover { color: var(--nmui-accent, #e4422e); }

/* Artist hero: circular avatar + name inline */
body.niyal-single .artist-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
body.niyal-single .artist-hero .artist-avatar { float: none; }
body.niyal-single .artist-hero .artist-avatar img {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, .6);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .4);
}

/* ---------------------------- Content sheet ---------------------------- */
body.niyal-single .content-capsule { position: relative; }
body.niyal-single .lyric-text { color: var(--nmui-text, #23262d); }
/* The base theme hard-codes `.second-container{background:#fff}`, which is NOT
   theme-aware — in dark mode it stays white and shows through wherever a child
   doesn't cover it (e.g. an empty ADVERTISEMENT slot = a jarring white block).
   Make it follow the theme (white in light, dark in dark). Child cards/lyric-card
   keep their own backgrounds, so only the bare gaps change. */
body.niyal-single .second-container { background: var(--nmui-bg, #fff) !important; }

/* Section headings (Other songs / Related / Albums / Lyrics …) */
body.niyal-single .same-album h3,
body.niyal-single .related-list + .related-list h3,
body.niyal-single .margint20 h3,
body.niyal-single .title.lyric-line h4,
body.niyal-single .lyric-line h4 {
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ------------------------- Song lyric block ---------------------------- */
/* Smule-style lyric card: centered, roomy, big readable type. */
body.niyal-single-song .lyric-text .niyal-lyric-lines {
  max-width: 680px;
  margin: 6px auto 8px;
  padding: 22px 22px;
  border-radius: var(--nmui-r-lg, 20px);
  background: var(--nmui-surface, #f6f7f9);
  box-shadow: var(--nmui-shadow-sm, 0 2px 10px rgba(0, 0, 0, .06));
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 2;
  text-align: center;
}
body.niyal-single-song .niyal-ll { padding: 1px 6px; }
/* Keep lyric text readable on the card in BOTH themes — the base theme colours
   lyric text white for its dark hero, which vanished on the light Smule card. */
body.niyal-single-song .niyal-lyric-lines,
body.niyal-single-song .niyal-lyric-lines .niyal-ll { color: var(--nmui-text, #23262d) !important; }
body.niyal-single-song .niyal-lyric-lines .niyal-ll.is-active { color: var(--nmui-accent, #e4422e) !important; }

/* Retire the redundant "Please add widget" placeholder + empty sidebar chrome. */
body.niyal-single .no-widget { display: none; }

/* Related / other-songs lists as neat pill rows. */
body.niyal-single .related-list {
  list-style: none;
  margin: 8px 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.niyal-single .related-list li { list-style: none; }
body.niyal-single .related-list li a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--nmui-r-md, 12px);   /* match the image/card corners, not a full pill */
  font-size: 13px;
  font-weight: 600;
  background: var(--nmui-elev, rgba(0, 0, 0, .05));
  color: var(--nmui-text, #33363d);
  text-decoration: none;
  transition: background .2s, color .2s, transform .15s;
}
body.niyal-single .related-list li a:hover {
  background: var(--nmui-accent, #e4422e);
  color: #fff;
  transform: translateY(-1px);
}
body.niyal-single .genre-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0; margin: 14px 0; }
body.niyal-single .genre-list li { list-style: none; }

/* Added-by / share footer */
body.niyal-single .lyric-bottom {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--nmui-border, rgba(0, 0, 0, .08));
}
body.niyal-single .lyric-share ul { display: flex; gap: 8px; margin: 0; padding: 0; }
body.niyal-single .lyric-share li { list-style: none; }
body.niyal-single .lyric-share a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  background: var(--nmui-elev, rgba(0, 0, 0, .06));
  color: var(--nmui-text, #33363d);
  transition: background .2s, color .2s, transform .15s;
}
body.niyal-single .lyric-share a:hover { background: var(--nmui-accent, #e4422e); color: #fff; transform: translateY(-2px); }

/* ------------------------------ Widgets -------------------------------- */
body.niyal-single .single-widget { margin-bottom: 22px; }
body.niyal-single .single-widget .title h4 {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--nmui-text-dim, #8a9099); margin: 0 0 10px;
}
body.niyal-single .single-widget img { border-radius: var(--nmui-r-md, 14px); box-shadow: var(--nmui-shadow-sm, 0 2px 10px rgba(0, 0, 0, .08)); }
body.niyal-single .artist-photo-empty {
  padding: 34px 14px; text-align: center; border-radius: var(--nmui-r-md, 14px);
  background: var(--nmui-elev, rgba(0, 0, 0, .05)); color: var(--nmui-text-dim, #8a9099); font-size: 13px;
}

/* --------------------------- Artist info ------------------------------- */
body.niyal-single-artist .lyric-text table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 18px;
  border-radius: var(--nmui-r-md, 14px);
  overflow: hidden;
  background: var(--nmui-surface, #f6f7f9);
}
body.niyal-single-artist .lyric-text table td { padding: 11px 14px; border-bottom: 1px solid var(--nmui-border, rgba(0, 0, 0, .06)); vertical-align: top; }
body.niyal-single-artist .lyric-text table tr:last-child td { border-bottom: none; }
body.niyal-single-artist .lyric-text table td:first-child { width: 150px; color: var(--nmui-text-dim, #8a9099); white-space: nowrap; }

/* Artist → albums row: reuse the card grid look instead of the old carousel. */
body.niyal-single-artist .full-artist-album-list ul {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
body.niyal-single-artist .full-artist-album-list ul li {
  list-style: none; float: none; position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--nmui-r-md, 16px);
  overflow: hidden;
  background-color: var(--nmui-elev, #23262d);
  /* the template sets `background:url(...) no-repeat` inline, which drops sizing —
     force cover so album art fills the tile. */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: var(--nmui-shadow-sm, 0 3px 12px rgba(0, 0, 0, .12));
  transition: transform .18s ease, box-shadow .18s ease;
}
body.niyal-single-artist .full-artist-album-list ul li:hover {
  transform: translateY(-3px);
  box-shadow: var(--nmui-shadow-md, 0 8px 22px rgba(0, 0, 0, .2));
}
body.niyal-single-artist .full-artist-album-list ul li .item-text {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 12px 12px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .82));
}
body.niyal-single-artist .full-artist-album-list ul li .item-text h3 { margin: 0; font-size: 14px; }
body.niyal-single-artist .full-artist-album-list ul li .item-text h3 a { color: #fff; text-decoration: none; }
body.niyal-single-artist .full-artist-album-list ul li .item-text a { color: rgba(255, 255, 255, .75); font-size: 12px; text-decoration: none; }
body.niyal-single-artist .full-artist-album-list ul li .item1,
body.niyal-single-artist .full-artist-album-list ul li .item2,
body.niyal-single-artist .full-artist-album-list ul li .item3,
body.niyal-single-artist .full-artist-album-list ul li .item4 { display: none; }

/* --------------------- Language tabs + trust badge --------------------- */
body.niyal-single .niyal-lyrics-tabs { margin: 0 0 6px; }

/* "Verified Lyrics" trust badge */
body.niyal-single .niyal-verified {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 14px; padding: 6px 12px;
  border-radius: var(--nmui-r-pill, 999px);
  font-size: 12.5px; font-weight: 700;
  color: #16a34a; background: rgba(34, 197, 94, .12);
  border: 1px solid rgba(34, 197, 94, .35);
}
body.niyal-single .niyal-verified svg { color: #22c55e; flex: 0 0 auto; }

/* Tab nav — pill buttons */
body.niyal-single .niyal-tab-nav {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 16px; padding: 0;
}
body.niyal-single .niyal-tab-nav li { list-style: none; margin: 0; float: none; }
body.niyal-single .niyal-tab {
  display: inline-block; padding: 9px 20px;
  border-radius: var(--nmui-r-pill, 999px);
  font-size: 14px; font-weight: 700; text-decoration: none;
  color: var(--nmui-text, #33363d);
  background: var(--nmui-elev, rgba(0, 0, 0, .06));
  border: 1px solid transparent;
  transition: background .18s, color .18s, transform .15s;
}
body.niyal-single .niyal-tab:hover { transform: translateY(-1px); color: var(--nmui-text, #33363d); }
body.niyal-single .niyal-tab.is-active { background: var(--nmui-accent, #e4422e); color: #fff; }

/* Panes */
body.niyal-single .niyal-tab-pane[hidden] { display: none; }
body.niyal-single .niyal-tab-pane.is-active { display: block; animation: niyalTabIn .25s ease; }
@keyframes niyalTabIn { from { opacity: .35; } to { opacity: 1; } }

/* Song info + FAQ block (kept from the generator body) */
body.niyal-single .niyal-song-info { margin-top: 20px; }
body.niyal-single .niyal-song-info h3 { font-weight: 700; letter-spacing: -.01em; margin: 22px 0 8px; font-size: 18px; }
body.niyal-single .niyal-song-info p { line-height: 1.75; color: var(--nmui-text, #33363d); }
body.niyal-single .niyal-song-info ul { list-style: none; margin: 10px 0 0; padding: 0; }
body.niyal-single .niyal-song-info li {
  list-style: none; float: none; padding: 13px 15px; margin: 0 0 9px;
  border-radius: var(--nmui-r-md, 12px);
  background: var(--nmui-surface, #f6f7f9);
  color: var(--nmui-text, #33363d);
}
body.niyal-single .niyal-song-info li b { display: block; margin-bottom: 4px; }

/* --------------------------- Responsive -------------------------------- */
@media (max-width: 900px) {
  body.niyal-single .col-lg-4.col-sm-4 { margin-top: 20px; }
  body.niyal-single-song .lyric-text .niyal-lyric-lines { padding: 18px 14px; }
}