/* Core Terminal Vibe */
:root {
  --terminal-green: #39ff14; /* Classic neon green */
  --terminal-dark-green: #0b5306;
  --bg-black: #050505;
  --font-stack: "Courier New", Courier, monospace;
}

/* Custom Text Highlight Color */
::selection {
  background-color: var(--terminal-green);
  color: var(--bg-black);
}

body {
  background-color: var(--bg-black);
  color: var(--terminal-green);
  font-family: var(--font-stack);
  margin: 0;
  padding: 20px;
}

/* Links Global */
a {
  color: var(--terminal-green);
  transition: all 0.2s ease;
}

a:hover {
  background-color: var(--terminal-green);
  color: var(--bg-black);
}

/* Retro border framing the whole screen */
.screen-border {
  border: 2px solid var(--terminal-green);
  padding: 20px;
  min-height: calc(100vh - 84px);
  box-shadow: inset 0 0 10px var(--terminal-dark-green);
}

/* Header & Nav */
header h1 {
  text-shadow: 0 0 5px var(--terminal-green);
  margin-top: 0;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

nav a {
  color: var(--terminal-green);
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid transparent;
}

nav a:hover, nav a.active {
  background-color: var(--terminal-green);
  color: var(--bg-black);
  font-weight: bold;
  border-color: var(--terminal-green);
  box-shadow: 0 0 8px var(--terminal-green);
}

/* Section Title Styling */
.section-title {
  border-bottom: 1px dashed var(--terminal-green);
  padding-bottom: 5px;
  margin-top: 40px;
}

/* Global Form Elements (Contact, Booking, Newsletter) */
input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
textarea {
  background-color: var(--bg-black);
  border: 1px solid var(--terminal-green);
  color: var(--terminal-green);
  font-family: var(--font-stack);
  padding: 10px;
  outline: none;
  box-sizing: border-box;
}

input:focus,
textarea:focus {
  box-shadow: 0 0 8px var(--terminal-green);
  border-color: var(--terminal-green);
}

button[type="submit"],
.retro-btn {
  background-color: var(--terminal-green);
  color: var(--bg-black);
  border: 1px solid var(--terminal-green);
  font-family: var(--font-stack);
  font-weight: bold;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

button[type="submit"]:hover,
.retro-btn:hover {
  background-color: var(--bg-black);
  color: var(--terminal-green);
  box-shadow: 0 0 10px var(--terminal-green);
}

/* Grid Layout for Music */
.music-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

/* Custom terminal card style for player embeds */
.music-card, .mix-card {
  border: 1px solid var(--terminal-green);
  padding: 15px;
  background-color: rgba(5, 5, 5, 0.8);
}

.music-card h3, .mix-card h3 {
  margin-top: 0;
  font-size: 0.95rem;
  letter-spacing: 1px;
}

/* Player Embed Filter Effects */
iframe {
  filter: grayscale(100%) brightness(80%) contrast(120%);
  transition: filter 0.3s ease;
}

iframe:hover {
  filter: none;
}

/* Footer & Global Signup Styling */
footer {
  border-top: 1px dashed var(--terminal-green);
  margin-top: 50px;
  padding-top: 20px;
  text-align: center;
  font-size: 0.85rem;
}

.footer-signup {
  margin-bottom: 25px;
}

.footer-signup label {
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.footer-signup input[type="email"] {
  width: 280px;
}

.footer-signup button {
  margin-left: 10px;
}

/* Small screen optimization */
@media (max-width: 640px) {
  .footer-signup input[type="email"] {
    width: 100%;
    margin-bottom: 10px;
  }
  .footer-signup button {
    width: 100%;
    margin-left: 0;
  }
}