/* Nocturnal Music — Base stylesheet
   Loads after tokens.css. Provides typography, layout, header, footer,
   record cards, FAQ, and shared interactive states.
   Class names match the markup in templates/*.html.
*/

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--nm-bg);
  color: var(--nm-ink);
  font-family: var(--nm-font-sans);
  font-size: var(--nm-fs-body);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1 { font-size: var(--nm-fs-h1); letter-spacing: var(--nm-tracking-display); font-weight: 700; line-height: 0.95; }
h2 { font-size: var(--nm-fs-h2); letter-spacing: var(--nm-tracking-display); font-weight: 700; line-height: 1.0; }
h3 { font-size: var(--nm-fs-h3); letter-spacing: -0.02em; font-weight: 700; line-height: 1.05; }
h4 { font-size: var(--nm-fs-h4); letter-spacing: -0.02em; font-weight: 700; line-height: 1.1; }

p { margin: 0 0 1em; }
.nm-lead { font-size: var(--nm-fs-lead); line-height: 1.55; color: var(--nm-mute); max-width: 56ch; }

.nm-eyebrow {
  font-family: var(--nm-font-mono);
  font-size: var(--nm-fs-eyebrow);
  letter-spacing: var(--nm-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--nm-mute);
}

.nm-mono { font-family: var(--nm-font-mono); }

/* ---------- Layout ---------- */
.nm-page { background: var(--nm-bg); color: var(--nm-ink); }
.nm-container { padding-left: var(--nm-container-pad); padding-right: var(--nm-container-pad); }
.nm-section { padding-top: var(--nm-sp-16); padding-bottom: var(--nm-sp-16); }
.nm-section--tight { padding-top: var(--nm-sp-12); padding-bottom: var(--nm-sp-12); }
.nm-rule-top    { border-top: 1px solid var(--nm-rule); }
.nm-rule-bottom { border-bottom: 1px solid var(--nm-rule); }

/* ---------- Logo / wordmark ----------
   Real implementation: SVG file with the moon glyph in the 'c' position.
   Use one consolidated `nocturnal-wordmark.svg` and color via `currentColor`. */
.nm-wordmark {
  display: inline-flex;
  align-items: center;
  height: 32px;
  color: var(--nm-ink);
}
.nm-wordmark svg { height: 100%; width: auto; }

/* ---------- Header / nav ---------- */
.nm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px var(--nm-container-pad);
  border-bottom: 1px solid var(--nm-rule);
}
.nm-nav {
  display: flex;
  align-items: center;
  gap: 40px;
  font-size: 15px;
  white-space: nowrap;
}
.nm-nav-link {
  text-decoration: none;
  color: var(--nm-ink);
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color var(--nm-dur-fast);
}
.nm-nav-link:hover { border-bottom-color: var(--nm-ink); }
.nm-nav-link[aria-current="page"] {
  font-weight: 600;
  border-bottom-color: var(--nm-yellow);
}

/* CTA pill — Shop on Discogs in nav, Buy on Discogs on product */
.nm-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--nm-sp-2);
  padding: 10px 16px;
  border-radius: var(--nm-radius-pill);
  text-decoration: none;
  border: 1px solid var(--nm-ink);
  background: var(--nm-ink);
  color: var(--nm-bg);
  font-family: var(--nm-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background var(--nm-dur), color var(--nm-dur), transform var(--nm-dur-fast);
}
.nm-pill:hover { transform: translateY(-1px); background: var(--nm-blue); }
.nm-pill--ghost {
  background: transparent;
  color: var(--nm-ink);
}
.nm-pill--ghost:hover { background: var(--nm-ink); color: var(--nm-bg); }
.nm-pill .nm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--nm-yellow); }

/* Top utility / ticker bar */
.nm-ticker {
  padding: 10px var(--nm-container-pad);
  display: flex;
  justify-content: space-between;
  font-family: var(--nm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nm-mute);
  border-bottom: 1px solid var(--nm-rule);
}

/* ---------- Record card ---------- */
.nm-card {
  display: block;
  text-decoration: none;
  color: var(--nm-ink);
  transition: transform var(--nm-dur) var(--nm-ease);
}
.nm-card:hover { transform: translateY(-3px); }

.nm-card__cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--nm-rule);
  border-radius: var(--nm-radius-tag);
  transition: box-shadow var(--nm-dur);
}
.nm-card:hover .nm-card__cover {
  box-shadow: 0 12px 28px rgba(10, 10, 10, 0.12);
}
.nm-card__cover img { width: 100%; height: 100%; object-fit: cover; }

.nm-card__catno {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--nm-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nm-mute);
  background: rgba(255, 255, 255, 0.88);
  padding: 3px 7px;
}
.nm-card__cond,
.nm-card__new {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--nm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 7px;
  background: var(--nm-yellow);
  color: var(--nm-ink);
}
.nm-card__new { right: auto; left: auto; top: 12px; right: 12px; }
/* If both badges show, condition stays right and new replaces a left badge slot below the catno. Adjust in template as needed. */

.nm-card__quickbuy {
  position: absolute;
  inset: auto 0 0 0;
  background: rgba(10, 10, 10, 0.92);
  color: var(--nm-bg);
  padding: 10px 12px;
  font-family: var(--nm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  transform: translateY(100%);
  transition: transform var(--nm-dur) var(--nm-ease);
}
.nm-card:hover .nm-card__quickbuy { transform: translateY(0); }

.nm-card__meta {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.nm-card__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nm-card__artist {
  font-size: 14px;
  color: var(--nm-mute);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nm-card__price {
  font-family: var(--nm-font-mono);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.nm-card__row3 {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Tag (genre pill) */
.nm-tag {
  font-family: var(--nm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid var(--nm-rule-strong);
  border-radius: var(--nm-radius-pill);
  color: var(--nm-ink);
}

/* ---------- Record grid ---------- */
.nm-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; row-gap: 56px; }
.nm-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; row-gap: 44px; }
.nm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; row-gap: 48px; }
@media (max-width: 960px) {
  .nm-grid-4, .nm-grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .nm-grid-4, .nm-grid-5, .nm-grid-3 { grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */
.nm-faq { border-bottom: 1px solid var(--nm-rule); padding: 20px 0; }
.nm-faq:first-of-type { border-top: 1px solid var(--nm-ink); }
.nm-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.nm-faq summary::-webkit-details-marker { display: none; }
.nm-faq-plus {
  font-family: var(--nm-font-mono);
  font-size: 18px;
  color: var(--nm-mute);
  width: 18px;
  text-align: center;
}
.nm-faq-plus::before { content: "+"; }
.nm-faq[open] .nm-faq-plus::before { content: "–"; }
.nm-faq p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--nm-mute);
  margin: 12px 0 0;
}

/* ---------- Footer ---------- */
.nm-footer {
  background: var(--nm-ink);
  color: var(--nm-bg);
  padding: var(--nm-sp-12) var(--nm-container-pad) var(--nm-sp-6);
}
.nm-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
  gap: 56px;
  align-items: start;
}
.nm-footer h5 {
  font-family: var(--nm-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nm-yellow);
  margin: 0 0 18px;
  font-weight: 500;
}
.nm-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.nm-footer a { color: var(--nm-bg); text-decoration: none; font-size: 14px; transition: color var(--nm-dur-fast); }
.nm-footer a:hover { color: var(--nm-yellow); }
.nm-footer address { font-style: normal; font-size: 14px; line-height: 1.7; color: rgba(250, 250, 247, 0.85); }
.nm-footer__rule {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(250, 250, 247, 0.12);
  display: flex;
  justify-content: space-between;
  font-family: var(--nm-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(250, 250, 247, 0.5);
  text-transform: uppercase;
}

/* ---------- Utilities ---------- */
.nm-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* sr-only */

/* ---------- Newsletter card ---------- */
.nm-newsletter {
  background: var(--nm-yellow);
  color: var(--nm-ink);
  padding: 32px;
  border-radius: var(--nm-radius-card);
}
.nm-newsletter-field {
  display: flex;
  gap: var(--nm-sp-2);
  background: var(--nm-bg);
  padding: 6px;
  border-radius: var(--nm-radius-pill);
  border: 1px solid var(--nm-ink);
}
.nm-newsletter-field input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 10px 16px;
  font: inherit;
  outline: none;
  min-width: 0;
}
.nm-newsletter-field button {
  border: 0;
  background: var(--nm-ink);
  color: var(--nm-bg);
  padding: 10px 18px;
  border-radius: var(--nm-radius-pill);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

/* ============================================================
   RESPONSIVE — Added post-handoff
   ============================================================ */

/* Tokens override for mobile */
@media (max-width: 768px) {
  :root { --nm-container-pad: 20px; }
}

/* Global base */
html { overflow-x: hidden; }
body { overflow-x: hidden; }
img, iframe { max-width: 100%; }

/* Nav toggle hidden on desktop */
.nm-nav-toggle { display: none; }

/* Mobile nav */
@media (max-width: 768px) {
  .nm-nav-toggle { display: flex !important; }
  .nm-nav { display: none; flex-direction: column; width: 100%; }
  .nm-nav.nm-nav--open { display: flex; }
  .nm-header-inner { flex-wrap: wrap; }

  /* Two-column grids collapse */
  .nm-buy-layout { display: block !important; }
  .nm-buy-sidebar { display: none !important; }

  /* Record grids: 2 columns on tablet */
  .nm-grid-4, .nm-grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* Typography */
  h1 { font-size: 2.5rem !important; }
  h2 { font-size: 1.8rem !important; }
}

/* Single column on small phones */
@media (max-width: 480px) {
  .nm-grid-4, .nm-grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* ============================================================
   RESPONSIVE — Mobile & Tablet
   ============================================================ */

@media (max-width: 768px) {
  :root { --nm-container-pad: 20px; }

  /* Nav */
  .nm-nav-toggle { display: flex !important; }
  .nm-nav { display: none; flex-direction: column; width: 100%; padding: 12px 0; border-top: 1px solid var(--nm-rule); }
  .nm-nav.nm-nav--open { display: flex; }
  .nm-nav a { padding: 12px 0; border-bottom: 1px solid var(--nm-rule); font-size: 18px; }
  .nm-header-inner { flex-wrap: wrap; padding: 0 20px; }
  .nm-header { padding: 20px 0; }
  .nm-ticker { padding-left: 20px; padding-right: 20px; flex-wrap: wrap; }

  /* Grids */
  .nm-grid-4, .nm-grid-3, .nm-grid-5 { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; row-gap: 28px !important; }
  .nm-buy-layout { display: block !important; }
  .nm-buy-sidebar { display: none !important; }
  .nm-buy-search { display: none !important; }

  /* Two-column section layouts */
  section[style*="grid-template-columns:1fr 1fr"],
  section[style*="grid-template-columns:1fr 1.6fr"],
  section[style*="grid-template-columns:1.05fr"],
  section[style*="grid-template-columns:1.3fr"],
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Typography */
  h1[style*="font-size"] { font-size: 2.5rem !important; line-height: 1.1 !important; }
  h2[style*="font-size"] { font-size: 1.8rem !important; }
  h3[style*="font-size:48px"] { font-size: 1.6rem !important; }

  /* Dark cards */
  div[style*="background:var(--nm-ink)"] { padding: 32px 20px !important; }

  /* Footer */
  .nm-footer-grid { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* Sticky elements */
  div[style*="position:sticky"] { position: relative !important; top: auto !important; }
}

@media (max-width: 480px) {
  .nm-grid-4, .nm-grid-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}