/* Review Text Color Change - sp */

.review-text .text-center {
    color: white;
}



/* Video Responsive CSS Only - sp */
/* Targets the actual video player classes from your site */

/* Video styling inside the container - apply shadow directly to video */
.video-player-for-wpbakery video,
.video-player-for-wpbakery-container video {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  
  /* SOFT SHADOW GLOW - only peeks around the edges */
  box-shadow: 0 0 30px 8px rgba(82, 155, 177, 0.6);
}

/* Remove any padding/margin from containers that might add extra space */
.video-player-for-wpbakery,
.video-player-for-wpbakery-container {
  padding: 0;
  margin: 0;
  line-height: 0;
}

/* Mobile - up to 768px */
@media only screen and (max-width: 768px) {
  .responsive-video video {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 250px;
    max-height: 400px;
    object-fit: cover;
    margin: 0 auto;
  }
}

/* Tablet - 769px to 1024px */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .responsive-video video {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 400px;
    max-height: 600px;
    object-fit: cover;
    margin: 0 auto;
  }
}

/* Small Mobile - 320px to 480px */
@media only screen and (max-width: 480px) {
  .responsive-video video {
    min-height: 200px;
    max-height: 300px;
  }
}

/* Video wrapper */
.responsive-video {
  width: 100%;
}









/* ========================================
   RESPONSIVE CSS
   Handles mobile, tablet, AND large displays
   Does NOT affect normal desktop (1200px-1919px)
   ======================================== */

/* ========================================
   OPTIONAL CUSTOM CLASSES
   Add these classes manually in WPBakery
   ======================================== */

/* Add class "image-bottom-right" to image column if needed */
.image-bottom-right {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.image-bottom-right img {
  align-self: flex-end;
}

/* Keep image at bottom on tablet */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .image-bottom-right {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
  
  .image-bottom-right img {
    align-self: flex-end;
  }
}

/* Keep image at bottom on large screens too */
@media only screen and (min-width: 1920px) {
  .image-bottom-right {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
  
  .image-bottom-right img {
    align-self: flex-end;
  }
}

/* Add class "venue-section" to venue types row if needed */
.venue-section {
  text-align: center;
}

.venue-section h3,
.venue-section h2,
.venue-section p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ========================================
   LARGE SCREENS (1920px+) - Retina/4K/5K
   Keeps content centered on huge displays
   ======================================== */

@media only screen and (min-width: 1920px) {
  
  /* Prevent site from stretching too wide */
  body,
  .site,
  #page {
    max-width: 1920px;
    margin: 0 auto;
  }
  
  /* Match navigation width - keep everything aligned */
  nav,
  .main-navigation,
  header,
  footer,
  .vc_row,
  .wpb_row,
  section,
  .content-section,
  .about-section,
  .wp-carousel-free,
  .shows-grid,
  .gallery-section {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
  
  /* Ensure content doesn't stretch beyond comfortable reading width */
  .vc_row .vc_column_container,
  .wpb_row .wpb_column {
    max-width: 1600px;
    margin: 0 auto;
  }
}

/* ========================================
   TABLET (768px to 1199px)
   ======================================== */

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  
  .vc_row,
  .wpb_row {
    padding-left: 30px;
    padding-right: 30px;
  }
  
  nav ul li {
    padding: 8px 12px;
    font-size: 0.95rem;
  }
  
  /* Image still bottom aligned on tablet */
  .image-bottom-right {
    align-items: flex-end;
  }
}

/* ========================================
   MOBILE (up to 767px)
   ======================================== */

@media only screen and (max-width: 767px) {
  
  .vc_row,
  .wpb_row {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  /* Mobile Navigation Stack */
  nav ul {
    flex-direction: column;
    width: 100%;
  }
  
  nav ul li {
    width: 100%;
    text-align: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  /* Logo smaller on mobile */
  .site-logo,
  header .logo,
  header img {
    max-width: 180px;
  }
  
  /* Image centered on mobile instead of bottom-right */
  .image-bottom-right {
    align-items: center;
    justify-content: center;
  }
  
  .image-bottom-right img {
    align-self: center;
    margin: 0 auto;
  }
  
  /* Venue section stays centered on mobile */
  .venue-section {
    text-align: center;
  }
  
  /* Footer stack vertically */
  footer ul {
    flex-direction: column;
    gap: 10px;
  }
  
  .footer-contact,
  .footer-info {
    flex-direction: column;
    gap: 15px;
  }
}

/* ========================================
   SMALL MOBILE (up to 480px)
   ======================================== */

@media only screen and (max-width: 480px) {
  
  .site-logo,
  header .logo,
  header img {
    max-width: 150px;
  }
  
  section {
    padding: 20px 15px;
  }
  
  h1 {
    font-size: 1.75rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  p {
    font-size: 0.95rem;
  }
}



  
  
  /*=====================================
    Keeps Scott silhouette at bottom 
   ====================================== */

/* Add class "image-bottom-right" to the column with Scott's image */
.image-bottom-right {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: 100%;
  min-height: 500px;
}

.image-bottom-right .wpb_wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
}

.image-bottom-right img {
  align-self: flex-end;
  margin-top: auto;
  display: block;
}

.image-bottom-right.vc_col-sm-6 {
  align-self: stretch;
}