/*
Theme Name: Klaatu Records 1.4
Theme URI: https://klaaturecords.com/
Author: Klaatu Records
Description: A dark, cinematic, horror-inspired WordPress theme for an independent soundtrack and genre label.
Version: 1.4.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: klaatu-records
*/

:root {
  --bg: #090909;
  --panel: #111111;
  --panel-2: #171717;
  --text: #f1f1f1;
  --muted: #aaa;
  --line: #2b2b2b;
  --accent: #d11b1b;
  --accent-dark: #8f0f0f;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.65;
}
a { color: var(--text); text-decoration: none; }
a:hover { color: #fff; }
img { max-width: 100%; height: auto; display: block; }
.container { width: min(100% - 40px, var(--max)); margin-inline: auto; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7,7,7,.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.header-inner {
  min-height: 76px; display: flex; align-items: center;
  justify-content: space-between; gap: 30px;
}
.site-brand { display:flex; align-items:center; gap:14px; font-weight:900; letter-spacing:2px; }
.site-brand img { max-height: 48px; width:auto; }
.brand-text { font-size: 20px; }
.main-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:22px; align-items:center; }
.main-nav a { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
.menu-toggle { display:none; background:none; border:1px solid var(--line); color:#fff; padding:8px 11px; }

.hero {
  min-height: 610px; display:flex; align-items:center;
  background:
    linear-gradient(90deg, rgba(0,0,0,.94), rgba(0,0,0,.62), rgba(0,0,0,.88)),
    radial-gradient(circle at 70% 40%, #3b0909 0, #100909 38%, #090909 70%);
  border-bottom: 1px solid var(--line);
}
.hero h1 { font-size: clamp(42px, 7vw, 86px); line-height:.95; margin:0 0 22px; max-width:820px; text-transform:uppercase; letter-spacing:-2px; }
.hero p { max-width:680px; color:#c4c4c4; font-size:18px; }
.eyebrow { color:#e12a2a; font-size:12px; font-weight:800; letter-spacing:3px; text-transform:uppercase; }

.btn {
  display:inline-block; padding:12px 20px; margin:8px 8px 0 0;
  background:var(--accent); border:1px solid var(--accent); color:#fff;
  text-transform:uppercase; font-size:12px; font-weight:800; letter-spacing:1px;
}
.btn:hover { background:transparent; color:#fff; }

.section { padding:72px 0; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:28px; }
.section h2 { font-size:34px; line-height:1.1; margin:5px 0; text-transform:uppercase; }
.muted { color:var(--muted); }

.release-grid, .post-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.card {
  background:var(--panel); border:1px solid var(--line); overflow:hidden;
  transition:transform .2s ease, border-color .2s ease;
}
.card:hover { transform:translateY(-4px); border-color:#555; }
.card-image { aspect-ratio:1/1; background:#151515; overflow:hidden; }
.card-image img { width:100%; height:100%; object-fit:cover; }
.card-body { padding:20px; }
.card h3 { margin:0 0 7px; font-size:20px; }
.card-meta { color:#999; font-size:12px; text-transform:uppercase; letter-spacing:1px; }
.content { max-width:850px; }
.content h1 { font-size:48px; line-height:1.05; }
.content h2, .content h3 { line-height:1.2; }
.content a { color:#e33; text-decoration:underline; }
.wp-block-button__link { background:var(--accent); }
.pagination { margin-top:35px; display:flex; gap:8px; }
.pagination a, .pagination span { padding:9px 13px; border:1px solid var(--line); }

.site-footer { border-top:1px solid var(--line); background:#060606; padding:50px 0 25px; margin-top:50px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; }
.footer-title { font-weight:900; letter-spacing:2px; text-transform:uppercase; }
.site-footer ul { list-style:none; margin:10px 0 0; padding:0; }
.site-footer li { margin:5px 0; color:#999; }
.copyright { border-top:1px solid var(--line); margin-top:35px; padding-top:18px; color:#777; font-size:12px; }

.no-results { padding:35px; border:1px dashed var(--line); }

@media (max-width: 800px) {
  .header-inner { min-height:64px; }
  .menu-toggle { display:block; }
  .main-nav { display:none; position:absolute; top:64px; left:0; right:0; background:#080808; border-bottom:1px solid var(--line); padding:18px 20px; }
  .main-nav.is-open { display:block; }
  .main-nav ul { flex-direction:column; align-items:flex-start; }
  .hero { min-height:520px; }
  .release-grid, .post-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
  .container { width:min(100% - 28px, var(--max)); }
  .release-grid, .post-grid { grid-template-columns:1fr; }
  .hero h1 { font-size:48px; }
  .section { padding:52px 0; }
}


/* Release page additions */
.release-hero{padding:65px 0 25px}.release-layout{display:grid;grid-template-columns:minmax(280px,480px) 1fr;gap:55px;align-items:start}.release-cover{background:#111;border:1px solid var(--line)}.release-info h1{font-size:clamp(40px,6vw,72px);line-height:.95;margin:8px 0 18px;text-transform:uppercase;letter-spacing:-3px}.release-kicker{color:#df3038;font-size:11px;font-weight:900;letter-spacing:3px;text-transform:uppercase}.release-subtitle{color:#aaa;text-transform:uppercase;letter-spacing:1.5px;font-size:12px}.release-details{display:grid;grid-template-columns:1fr 1fr;margin:28px 0;border-top:1px solid var(--line)}.release-detail{padding:13px 10px 13px 0;border-bottom:1px solid var(--line)}.release-detail strong{display:block;color:#777;font-size:9px;letter-spacing:1.3px;text-transform:uppercase}.release-detail span{font-size:14px}.release-description{max-width:850px;margin-top:45px}.release-tracklist{max-width:900px;margin-top:55px}.release-track{border-top:1px solid var(--line);padding:16px 0;display:grid;grid-template-columns:42px 1fr 70px;gap:15px;align-items:center}.release-track-number{color:#777}.release-track-title{font-weight:700}.release-track-duration{text-align:right;color:#777;font-size:11px}.release-track audio{grid-column:2/-1;width:100%;height:35px}.release-back{margin-top:30px}
@media(max-width:760px){.release-layout{grid-template-columns:1fr;gap:28px}.release-details{grid-template-columns:1fr}.release-track{grid-template-columns:34px 1fr 55px}}


/* v1.4 release template */
.release-hero{padding:65px 0 35px}
.release-layout{display:grid;grid-template-columns:minmax(280px,480px) 1fr;gap:55px;align-items:start}
.release-cover{background:#111;border:1px solid var(--line)}
.release-cover img{width:100%;height:auto}
.release-info h1{font-size:clamp(40px,6vw,72px);line-height:.95;margin:8px 0 18px;text-transform:uppercase;letter-spacing:-3px}
.release-kicker{color:#df3038;font-size:11px;font-weight:900;letter-spacing:3px;text-transform:uppercase}
.release-subtitle{color:#aaa;text-transform:uppercase;letter-spacing:1.5px;font-size:12px}
.release-details{display:grid;grid-template-columns:1fr 1fr;margin:28px 0;border-top:1px solid var(--line)}
.release-detail{padding:13px 10px 13px 0;border-bottom:1px solid var(--line)}
.release-detail strong{display:block;color:#777;font-size:9px;letter-spacing:1.3px;text-transform:uppercase}
.release-detail span{font-size:14px}
.release-description{max-width:900px;margin-top:48px}
.release-tracklist{max-width:900px;margin-top:55px}
.release-track{border-top:1px solid var(--line);padding:16px 0;display:grid;grid-template-columns:42px 1fr 70px;gap:15px;align-items:center}
.release-track-number{color:#777}
.release-track-title{font-weight:700}
.release-track-duration{text-align:right;color:#777;font-size:11px}
.release-track audio{grid-column:2/-1;width:100%;height:35px}
.release-back{margin-top:35px}
@media(max-width:760px){
  .release-layout{grid-template-columns:1fr;gap:28px}
  .release-details{grid-template-columns:1fr}
  .release-track{grid-template-columns:34px 1fr 55px}
}