/*
Theme Name: Molina-SoundPro
Description: Professional WordPress theme for Molina-SoundPro LLC - Audio and lighting equipment rental, sales, installation, and maintenance for bars, clubs, discotheques, and outdoor events in New York and Orlando. Modern, dynamic design inspired by MGANow.com with smooth transitions and professional branding.
Author: Molina-SoundPro LLC
Version: 1.0.0
Tags: audio, lighting, professional, business, events, nightclub, bar, entertainment
Text Domain: molina-soundpro
*/

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;300;400;600;700;900&display=swap');

/* WordPress Theme Styles */
:root {
  --primary-dark: #1a1a1a;
  --secondary-dark: #2d2d2d;
  --accent-yellow: #f1c40f;
  --accent-orange: #f39c12;
  --text-light: #ffffff;
  --text-gray: #cccccc;
  --text-muted: #999999;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Titillium Web', sans-serif;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-light);
  background: var(--primary-dark);
  overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p { margin-bottom: 1rem; }

/* WordPress Core Styles */
.wp-block-image {
  margin: 1rem 0;
}

.wp-block-quote {
  border-left: 4px solid var(--accent-yellow);
  padding-left: 1rem;
  margin: 1rem 0;
  font-style: italic;
}

/* Header Styles */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-light);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.site-logo:hover {
  color: var(--accent-yellow);
  text-decoration: none;
}

/* Navigation */
.main-navigation {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.main-navigation ul {
  display: flex;
  list-style: none;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.main-navigation a {
  color: var(--text-light);
  text-decoration: none;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.main-navigation a:hover,
.main-navigation .current-menu-item a {
  color: var(--accent-yellow);
}

.location-badges {
  display: flex;
  gap: 0.5rem;
}

.location-badge {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.75rem;
}

/* Hero Section */
.hero-section {
  min-height: 100vh;
  background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(30,30,50,0.9) 100%),
              url('https://hpro-web-assets.s3.amazonaws.com/insights/uploads/2020/12/Motion-City-Soundtrack.By-Alive-One-Coverage.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.hero-content {
  max-width: 800px;
  padding: 0 2rem;
  animation: fadeInUp 1s ease-out;
}

.hero-title {
  font-size: 4rem;
  font-weight: 900;
  margin-bottom: 1rem;
  text-shadow: 0 0 20px rgba(255,255,255,0.3);
  letter-spacing: 3px;
}

.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: var(--text-gray);
  letter-spacing: 2px;
}

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--accent-yellow) 0%, var(--accent-orange) 100%);
  color: #000;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 1rem 2rem;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(241, 196, 15, 0.3);
  color: #000;
  text-decoration: none;
}

/* Content Sections */
.content-section {
  padding: 4rem 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.section-title {
  text-align: center;
  margin-bottom: 3rem;
}

.section-title h2 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.section-title::after {
  content: '';
  display: block;
  width: 100px;
  height: 4px;
  background: var(--accent-yellow);
  margin: 1rem auto;
}

/* Service Cards */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.service-card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 15px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}

.service-icon {
  width: 80px;
  height: 80px;
  background: rgba(241, 196, 15, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 2rem;
  color: var(--accent-yellow);
}

/* Footer */
.site-footer {
  background: var(--primary-dark);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 3rem 0 1rem;
  margin-top: 4rem;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-section h3 {
  color: var(--accent-yellow);
  margin-bottom: 1rem;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 0.5rem;
}

.footer-section a {
  color: var(--text-gray);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-section a:hover {
  color: var(--accent-yellow);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeInUp 0.8s ease-out;
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .main-navigation ul {
    flex-direction: column;
    gap: 1rem;
  }

  .header-container {
    flex-direction: column;
    height: auto;
    padding: 1rem 2rem;
  }

  .location-badges {
    margin-top: 1rem;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
}

@media (max-width: 480px) {
  .container {
    padding: 0 1rem;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: 2rem;
  }
}