/* === Root Variables === */
:root {
  /* Colors */
  --color-background: #1a1a1a;
  --color-background-dark: #121212;
  --color-text: #ffffff;
  --color-text-secondary: #cccccc;
  --color-text-tertiary: #aaaaaa;
  --color-spotify-green: #1db954;
  --color-spotify-green-hover: #1aa34a;
  --color-white: #ffffff;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  --spacing-xxxl: 4rem;

  /* Sizes */
  --header-height: 300px;
  --logo-size: 120px;
  --logo-border: 4px;
  --social-icon-size: 40px;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 10px rgba(29, 185, 84, 0.5),
                 0 0 20px rgba(29, 185, 84, 0.3),
                 0 0 30px rgba(29, 185, 84, 0.2);

  /* Font Sizes */
  --font-size-base: 1rem;
  --font-size-sm: 0.9rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: 1.5rem;
  --font-size-xxl: 3rem;
}

/* === Base Styles === */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: var(--color-background-dark);
  color: var(--color-text);
  text-align: center;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.logo {
  width: var(--logo-size);
  height: var(--logo-size);
  border-radius: 50%;
  border: var(--logo-border) solid var(--color-white);
  background-color: var(--color-background-dark);
  box-shadow: var(--shadow-glow);
  margin-bottom: var(--spacing-lg);
}

main {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1;
}

h1 {
  font-size: var(--font-size-xxl);
  margin-bottom: var(--spacing-xs);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

h2 {
  font-size: var(--font-size-xl);
  font-weight: normal;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xs);
}

h3 {
  font-size: var(--font-size-lg);
  font-weight: lighter;
  color: var(--color-text-tertiary);
  margin-bottom: var(--spacing-xxl);
}

/* === Hero Video Background === */
.hero {
  position: relative;
  overflow: hidden;
  height: 100vh; /* Make the hero section fill the viewport height */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.hero-content {
  position: relative;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.2); /* Match mobile opacity */
  padding: var(--spacing-xxl);
  border-radius: 0; /* Remove rounded corners to match mobile */
  border: none; /* Remove border to match mobile */
  width: 100%; /* Full width */
  max-width: 100%; /* Ensure no max-width constraints */
  height: 100%; /* Fill full height like mobile */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center content vertically like mobile */
  align-items: center;
}


/* === Button Styles === */
.button-container {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
}

.button {
  background-color: var(--color-spotify-green);
  color: var(--color-white);
  border: none;
  padding: 12px 24px;
  font-size: var(--font-size-base);
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}

.button:hover {
  background-color: var(--color-spotify-green-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* === Services Section === */
.content-section {
  margin: var(--spacing-xxl) 0;
  max-width: 800px;
  width: 100%;
  text-align: center;
}

.cta-container {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-xl);
}

.services h4 {
  color: var(--color-spotify-green);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-lg);
}

.lead-text {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 700px; /* Constrains line length for readability */
  margin: 0 auto var(--spacing-lg); /* Centers the text block */
}

.service-area {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xl);
}

.services-grid {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* forces 2 columns */
  gap: var(--spacing-lg);
  max-width: 600px;
}

.services-grid li {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text);
  padding: var(--spacing-lg);
  border-radius: 8px;
  font-weight: 500;
  text-align: center;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}

.services-grid li::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(29, 185, 84, 0.1), transparent);
  transition: left 0.5s ease;
}

.services-grid li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(29, 185, 84, 0.2);
  border-color: var(--color-spotify-green);
  background-color: rgba(29, 185, 84, 0.05);
  color: var(--color-spotify-green);
}

.services-grid li:hover::before {
  left: 100%;
}

.equipment-note {
  margin-top: var(--spacing-xl);
  color: var(--color-text-secondary);
}

/* === Shows Section === */
a.venue-link {
  color: var(--color-spotify-green);
  text-decoration: none;
}
a.venue-link:hover {
  color: var(--color-spotify-green-hover);
  text-decoration: underline;
}
#shows > div {
  margin-bottom: 0.75em;
}
#shows h2 {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-lg);
  font-weight: bold;
  margin-top: 2.5em;
}

/* Loading Spinner Styles */
.loading-spinner {
  text-align: center;
  padding: 2rem;
  color: var(--color-text-secondary);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--color-spotify-green);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* === Footer === */
footer {
  margin-top: auto;
  padding: 30px 10px;
  background-color: var(--color-background-dark);
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 20px;
}

.social-icons a {
  display: inline-block;
  transition: transform 0.3s;
}

.social-icons a:hover {
  transform: scale(1.1);
}

.social-icons img {
  width: var(--social-icon-size);
  height: var(--social-icon-size);
  filter: brightness(0) invert(1);
  transition: transform 0.3s, filter 0.3s;
}

.social-icons a:hover img {
  transform: scale(1.1);
  filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(118deg) brightness(118%) contrast(119%);
}

/* === START: MAILING LIST STYLES === */
.mailing-list-section {
  max-width: 450px;
  margin: 40px auto; /* This replaces the 50px top margin on the email link */
  padding: 0 var(--spacing-lg);
  text-align: center;
}

/* Remove MailerLite default padding and background */
.mailing-list-section .ml-form-embedWrapper {
  background-color: transparent !important;
  padding: 0 !important;
}

.mailing-list-section .ml-form-embedBody {
  padding: 0 !important;
}

/* Style the "SIGN UP..." Header */
.mailing-list-section .ml-form-embedContent h4 {
  font-size: var(--font-size-lg) !important;
  color: var(--color-text) !important;
  margin: 0 0 var(--spacing-lg) 0 !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  text-align: center !important; /* Center the header */
}

/* Style the "Email (required)" Label */
.mailing-list-section .ml-field-group label {
  display: block !important;
  text-align: left !important;
  margin-bottom: var(--spacing-sm) !important;
  font-size: var(--font-size-sm) !important;
  color: var(--color-text-secondary) !important;
  font-weight: normal !important; /* Override MailerLite's bold */
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Style the Email Input Box */
.mailing-list-section .ml-field-group input[type="email"] {
  width: 100% !important;
  padding: 14px !important;
  border-radius: 5px !important;
  border: 1px solid var(--color-white) !important;
  background-color: var(--color-white) !important;
  color: var(--color-background-dark) !important;
  font-size: var(--font-size-base) !important;
  box-sizing: border-box !important;
  margin-bottom: var(--spacing-md) !important; /* Add space before button */
  height: auto !important; /* Override MailerLite's default height */
}

/* Style the "SIGN UP!" Button */
.mailing-list-section .ml-form-embedSubmit button.primary {
  background-color: transparent !important;
  color: var(--color-white) !important;
  border: 2px solid var(--color-white) !important;
  padding: 12px 30px !important;
  font-size: var(--font-size-base) !important;
  border-radius: 5px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  width: auto !important; /* Don't force full width */
  display: inline-block !important;
  height: auto !important; /* Override MailerLite's default height */
  box-shadow: none !important;
}

/* Style the Button on Hover */
.mailing-list-section .ml-form-embedSubmit button.primary:hover {
  background-color: var(--color-white) !important;
  color: var(--color-background-dark) !important;
}

/* Style the Success Message */
.mailing-list-section .ml-form-successContent h4 {
  color: var(--color-spotify-green) !important;
  font-size: var(--font-size-xl) !important;
  font-weight: bold !important;
  text-align: center !important;
  text-transform: none !important; /* Keep "Thank you!" normal case */
  letter-spacing: normal !important;
}

.mailing-list-section .ml-form-successContent p {
  color: var(--color-text-secondary) !important;
  font-size: var(--font-size-lg) !important;
  text-align: center !important;
  line-height: 1.6 !important;
}
/* === END: MAILING LIST STYLES === */

.email {
  /* This margin is much smaller to sit nicely under the new form */
  margin-top: var(--spacing-xl);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: color 0.3s;
  display: inline-block; /* Ensures margin-top works */
}

.email:hover {
  color: var(--color-spotify-green);
}

/* === Media Queries for Responsiveness === */
@media (min-width: 600px) {
  #shows > div {
    font-size: 1.2rem;
  }
  #shows h2 {
    margin-top: 3em;
    font-size: var(--font-size-lg);
    font-weight: bold;
  }
}

/* --- Mobile Styles --- */

/* Desktop video - visible on desktop, hidden on mobile */
.hero-video-desktop {
  display: block;
}

/* Mobile video - hidden on desktop, visible on mobile */
.hero-video-mobile {
  display: none;
}

/* Ensure both videos have proper positioning */
.hero-video-desktop,
.hero-video-mobile {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 1;
  filter: blur(8px);
}
@media (max-width: 768px) {
  .hero-video-desktop {
    display: none;
  }

  .hero-video-mobile {
    display: block;
  }

  .hero {
    /* Mobile video will be the background */
    background: none;
    height: 100vh; /* Keep full viewport height on mobile */
    padding: 0; /* Remove padding so content can fill entire area */
  }

  /* Mobile content styling - fill entire hero area */
  .hero-content {
    background-color: rgba(0, 0, 0, 0.2); /* Dark background to cover video */
    border: none;
    border-radius: 0;
    padding: 2rem var(--spacing-lg);
    max-width: 100%;
    height: 100%; /* Fill entire hero height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* Mobile services section padding */
  .content-section {
    padding: 0 var(--spacing-lg); /* Add left and right padding */
  }

  /* Mobile services grid padding */
  .services-grid {
    padding: 0 var(--spacing-md); /* Add padding to service buttons */
  }
}