/* ═══════════════════════════════════════════════════════════
   VOLTAGE — a dark, minimal, modern LinkStack theme
   Built for metal bands. Black & electric yellow.
   ───────────────────────────────────────────────────────────
   Table of contents
   - Fonts
   - Variables (:root)  ← change your colors here
   - Grid
   - Base / Background
   - Typography
   - Links
   - Spacing & Utilities
   - Misc / Scrollbar
   - Credit footer
   ═══════════════════════════════════════════════════════════ */


/* Fonts
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600&display=swap');


/* Variables — edit these to re-skin the whole theme
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  /* Fonts */
  --font-display: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;   /* band name / headings */
  --font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-size: 16px;

  /* Core palette — black & electric yellow */
  --accent: #ffd100;
  --accent-soft: rgba(255, 209, 0, 0.16);
  --accent-glow: rgba(255, 209, 0, 0.35);

  --background-color: #0a0a0a;
  --background-edge:  #000000;

  /* Text */
  --title-color: #ffffff;
  --description-color: #b9b9b9;
  --svg-color: #e8e8e8;

  /* Avatar */
  --image-width: 132px;
  --image-height: 132px;
  --image-border-color: #1c1c1c;
  --image-radius: 20px;

  /* Buttons */
  --button-background-color: #121212;
  --button-background-hover: #181818;
  --button-border-color: #232323;
  --button-text-color: #f2f2f2;
  --button-text-hover-color: var(--accent);
  --button-radius: 12px;

  /* Footer / misc */
  --footer-text-color: #7a7a7a;
  --hairline: rgba(255, 255, 255, 0.07);
}

::selection      { background: var(--accent); color: #000; }
::-moz-selection { background: var(--accent); color: #000; }


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 600px;
  text-align: center;
  margin: 0 auto;
  box-sizing: border-box;
}
.column {
  position: center;
  width: 100%;
  float: center;
  box-sizing: border-box;
}

@media (min-width: 400px) {
  .container { width: 88%; padding: 0; }
}
@media (min-width: 550px) {
  .container { width: 80%; }
  .column, .columns { margin-left: 0; }
  .column:first-child, .columns:first-child { margin-left: 0; }
}


/* Base / Background
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html { font-size: 100%; }

body {
  min-height: 100vh;
  font-family: var(--font-body) !important;
  font-size: var(--font-size);
  line-height: 1.6;
  font-weight: 400;
  color: var(--title-color);
  background-color: var(--background-color);
  /* Subtle vignette with a faint top spotlight for depth */
  background:
    radial-gradient(120% 80% at 50% -10%, #1a1a1a 0%, var(--background-color) 42%, var(--background-edge) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Faint hazard-grid texture behind everything (pure CSS, no assets) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 75%);
  opacity: 0.5;
}

.background {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1 {
  margin-top: 0;
  margin-bottom: 14px;
  color: var(--title-color);
  font-family: var(--font-display);
  font-weight: 400;            /* Bebas Neue ships a single weight */
  font-size: 2.9em;            /* condensed face → size up a touch */
  line-height: 1.0;
  letter-spacing: 0.05em;      /* tighter, clean tracking */
  text-transform: uppercase;
}
@media (min-width: 550px) {
  h1 { font-size: 3.6em; }
}

/* Accent underline beneath the band name */
h1::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin: 18px auto 0;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

p {
  color: var(--description-color);
  font-size: 1.02em;
  line-height: 1.6em;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: var(--accent); }

.spacing { padding: 0 10px; }


/* Spacing & Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button, .button { margin-bottom: 1rem; display: block !important; }
input, textarea, select, fieldset { margin-bottom: 1.5rem; }
pre, blockquote, dl, figure, p, ol { margin-bottom: 2.2rem; }

.u-full-width { width: 100%; box-sizing: border-box; }
.u-max-full-width { max-width: 100%; box-sizing: border-box; }
.u-pull-right { float: right; }
.u-pull-left { float: left; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #161616;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  color: var(--accent);
}
pre > code { display: block; padding: 1rem 1.5rem; white-space: pre; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid var(--hairline);
}

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--accent) #0d0d0d; }
*::-webkit-scrollbar { width: 8px; }
*::-webkit-scrollbar-track { background: #0d0d0d; }
*::-webkit-scrollbar-thumb {
  background-color: #2a2a2a;
  border-radius: 30px;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--accent); }


/* Credit footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer { margin-top: 4% !important; }

.footer a,
.credit-txt {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--footer-text-color) !important;
}
.footer a:hover { color: var(--accent) !important; }

.credit-txt-clr { color: var(--footer-text-color) !important; }

/* Tone down the "powered by" logo so it sits quietly */
.credit-hover img { opacity: 0.45; transition: opacity 0.25s ease; }
.credit-hover:hover img { opacity: 0.9; }


/* Embed block (click-to-play) — re-skin in the band palette
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ls-embed { --ls-embed-accent: var(--accent); }
.ls-embed__facade {
  border: 1px solid var(--button-border-color);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}
.ls-embed__facade:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft), 0 8px 28px rgba(0, 0, 0, 0.6);
}
.ls-embed__play {
  background: rgba(10, 10, 10, 0.62) !important;
  box-shadow: 0 0 18px var(--accent-glow);
}
.ls-embed__title {
  font-family: var(--font-body);
  letter-spacing: 0.02em;
}