/* ── DJ STIGS FAIRCAMP THEME OVERRIDE ── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500&family=Space+Mono:wght@400;700&display=swap');

/* ── COLOR VARIABLES ── */
:root {
  --green: #7FD44B;
  --green-bright: #AAFF00;
  --black: #080808;
  --white: #F5F2EC;
  --tan: #C4B49A;
  --mid: #161616;
  --dark: #0E0E0E;

  /* Override Faircamp variables */
  --cover-border-radius: 0;
  --bg-1: #080808;
  --bg-1-90: rgba(8,8,8,0.9);
  --bg-1-overlay: rgba(8,8,8,0.8);
  --bg-2: #161616;
  --bg-2-overlay: rgba(22,22,22,0.8);
  --bg-3: #2a2a2a;
  --bg-acc: #7FD44B;
  --bg-acc-overlay: rgba(127,212,75,0.8);
  --bg-mg: #333;
  --fg-1: #F5F2EC;
  --fg-1-focus: #7FD44B;
  --fg-1-veil: rgba(245,242,236,0.04);
  --fg-2: #C4B49A;
  --fg-3: #888;
  --fg-3-focus: #F5F2EC;
  --fg-acc: #080808;
  --fg-mg: #666;
  --mg: #555;
  --mg-acc: #7FD44B;
  --mg-acc-overlay: rgba(127,212,75,0.8);
}

/* ── TYPOGRAPHY ── */
body, button, input {
  font-family: 'DM Sans', sans-serif;
}

h1, h2 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.03em;
  font-weight: 400;
  color: #F5F2EC;
}

h1 { font-size: clamp(2.5rem, 8vw, 5rem); line-height: 0.95; }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }

/* ── BODY & LAYOUT ── */
body {
  background-color: #080808;
  color: #C4B49A;
}

.layout {
  background: #080808;
}

/* ── HEADER / NAV ── */
header {
  background: rgba(8,8,8,0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(127,212,75,0.18);
  padding: 0.9rem 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

#logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  color: #7FD44B !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#logo svg {
  color: #7FD44B;
  height: 1.8em !important;
  width: 1.8em !important;
  top: 0 !important;
}

#logo span {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.08em;
}

header .browse {
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #C4B49A !important;
  border: 1px solid rgba(127,212,75,0.3);
  padding: 0.4rem 0.9rem !important;
  transition: all 0.2s;
}

header .browse:hover {
  color: #7FD44B !important;
  border-color: #7FD44B;
}

/* ── MAIN PAGE AREA ── */
main {
  padding-top: 1rem;
}

/* Grid background */
main::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(127,212,75,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,212,75,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}

.page, .page_split, .page_grid, .page_center {
  position: relative;
  z-index: 1;
}

/* ── ABSTRACT / INTRO SECTION ── */
.abstract {
  position: relative;
}

.abstract h1 {
  color: #F5F2EC;
  margin-bottom: 0.5rem;
}

/* Green top-left corner accent on abstract */
.abstract::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  width: 32px;
  height: 32px;
  border-top: 2px solid #7FD44B;
  border-left: 2px solid #7FD44B;
  pointer-events: none;
}

.abstract::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 32px;
  height: 32px;
  border-bottom: 1px solid rgba(245,242,236,0.2);
  border-right: 1px solid rgba(245,242,236,0.2);
  pointer-events: none;
}

/* ── COVER ART ── */
.cover img,
.image img,
.release img,
.release_compact img {
  border-radius: 0 !important;
  border: 1px solid rgba(127,212,75,0.15);
}

/* Rectangle accent around cover */
.cover,
.release > :first-child {
  position: relative;
}

/* ── TRACK LIST ── */
.tracks {
  background: #0E0E0E;
  border: 1px solid rgba(245,242,236,0.05);
  padding: 1.5rem;
  position: relative;
}

/* Green top line on tracks container */
.tracks::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #7FD44B, transparent);
  pointer-events: none;
}

/* Green corner on tracks */
.tracks::after {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 20px; height: 20px;
  border-top: 3px solid #AAFF00;
  border-left: 3px solid #AAFF00;
  pointer-events: none;
}

.track {
  border-bottom: 1px solid rgba(245,242,236,0.04);
  padding: 0.4rem 0;
  transition: background 0.15s;
}

.track:last-child { border-bottom: none; }

.track:hover {
  background: rgba(127,212,75,0.04);
}

.track a.title {
  color: #F5F2EC !important;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
}

.track a.title:hover { color: #7FD44B !important; }

.track .number {
  color: #7FD44B !important;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  min-width: 1.8rem;
}

.track .time {
  color: #555 !important;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
}

/* Track play button */
.track_playback {
  border-radius: 0 !important;
  border: 1px solid rgba(127,212,75,0.2) !important;
}

.js_enabled .track .track_playback {
  background: rgba(127,212,75,0.06) !important;
}

.js_enabled .track .track_playback:hover {
  background: rgba(127,212,75,0.18) !important;
  border-color: #7FD44B !important;
}

.track.active .track_playback {
  background: #7FD44B !important;
  border-color: #7FD44B !important;
}

/* ── BUTTONS / ACTIONS ── */
.actions.primary a,
.actions.primary button,
a.button,
button.button,
form button {
  background: transparent !important;
  border: 1px solid rgba(127,212,75,0.4) !important;
  color: #7FD44B !important;
  border-radius: 0 !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.5rem 1.1rem !important;
  transition: all 0.2s !important;
}

.actions.primary a:hover,
.actions.primary button:hover,
a.button:hover,
button.button:hover {
  background: #7FD44B !important;
  color: #080808 !important;
  border-color: #7FD44B !important;
}

.actions.primary > .emphasized {
  background: #7FD44B !important;
  color: #080808 !important;
  border-color: #7FD44B !important;
}

.actions.primary > .emphasized:hover {
  background: #AAFF00 !important;
  color: #080808 !important;
}

/* ── DOCKED PLAYER ── */
.docked_player .elements {
  background: rgba(8,8,8,0.96) !important;
  backdrop-filter: blur(14px) !important;
  border-top: 1px solid rgba(127,212,75,0.25) !important;
}

.docked_player .timeline .base {
  background: #2a2a2a !important;
}

.docked_player .timeline .progress {
  background: #7FD44B !important;
}

.docked_player button {
  color: #F5F2EC !important;
}

.docked_player button:hover {
  color: #7FD44B !important;
}

.docked_player .time {
  color: #888 !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 0.78rem !important;
}

/* ── BROWSER / SEARCH ── */
#browser {
  background: rgba(8,8,8,0.96) !important;
}

#browser input {
  border-bottom: 1px solid #7FD44B !important;
  color: #F5F2EC !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 1.1rem !important;
}

#browser .number { color: #7FD44B !important; }

/* ── RELEASE CARDS (grid view) ── */
.release {
  position: relative;
}

.release::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(127,212,75,0);
  transition: border-color 0.3s;
  pointer-events: none;
}

.release:hover::after {
  border-color: rgba(127,212,75,0.25);
}

.release > a {
  color: #F5F2EC !important;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  transition: color 0.2s;
}

.release > a:hover { color: #7FD44B !important; }

/* ── PAGE MORE (sidebar info) ── */
.page_more {
  background: rgba(22,22,22,0.7) !important;
  border: 1px solid rgba(245,242,236,0.07) !important;
  border-radius: 0 !important;
  position: relative;
}

.page_more::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #7FD44B, transparent);
}

/* ── DIVIDERS ── */
.divider > span {
  border-color: rgba(127,212,75,0.15) !important;
}

/* ── FOOTER ── */
footer {
  border-top: 1px solid rgba(127,212,75,0.12);
  background: #080808;
  padding: 2rem 3rem;
}

footer a,
footer .browse { color: #555 !important; }
footer a:hover,
footer .browse:hover { color: #7FD44B !important; }

.faircamp_signature { opacity: 0.3; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: #080808; }
::-webkit-scrollbar-thumb { background: #7FD44B; }

/* ── SELECTION ── */
::selection {
  background: rgba(127,212,75,0.3);
  color: #F5F2EC;
}

/* ── LINKS ── */
a { color: #C4B49A; }
a:hover { color: #7FD44B; }

/* ── INPUT FIELDS ── */
input[type="number"],
input[type="text"] {
  background: #161616 !important;
  border: 1px solid rgba(245,242,236,0.1) !important;
  border-radius: 0 !important;
  color: #F5F2EC !important;
}

input[type="number"]:focus,
input[type="text"]:focus {
  border-color: #7FD44B !important;
  outline: none !important;
}

/* ── HOME PAGE HERO ── */
.page_split > .abstract h1 {
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: 0.92;
  margin-bottom: 1rem;
}

/* ── RELEASE INFO PAGE ── */
.release_info {
  position: relative;
}

/* White corner accent on release info */
.release_info::after {
  content: '';
  position: absolute;
  bottom: -8px; right: -8px;
  width: 28px; height: 28px;
  border-bottom: 1px solid rgba(245,242,236,0.2);
  border-right: 1px solid rgba(245,242,236,0.2);
  pointer-events: none;
}

/* ── ACTIVE / PLAYING STATE ── */
.track.active .title { color: #7FD44B !important; }
.track.active .number { color: #AAFF00 !important; }

/* ── WAVEFORM ── */
/* Base (unplayed) waveform = white */
.waveform path.base {
  stroke: rgba(245,242,236,0.35) !important;
}

/* Seek preview stroke */
.waveform path.seek {
  stroke: rgba(245,242,236,0.15) !important;
}

/* Playback progress = green */
.waveform path.playback {
  stroke: #7FD44B !important;
  stroke-width: 0.07px !important;
}

/* When seeking, dim the base so green stands out */
.waveform.seek path.base {
  stroke: rgba(245,242,236,0.15) !important;
}