body, html {
  height: 100%;
  margin: 0;
  /*font-family: Arial, sans-serif;*/
  font-family: 'Lato', sans-serif;
  background-color: #E3E8FA;
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lato', sans-serif; /* Consistent font family for all headers */
  font-weight: 700; /* Bold weight for headers */
  color: #151F42; /* A consistent color for all headers */
  margin-top: 0.5em; /* Top margin */
  margin-bottom: 0.5em; /* Bottom margin */
}

/* Specific size adjustments for each header, if necessary */
h1 {
  font-size: 2.5em; /* Larger size for main titles */
}

h2 {
  font-size: 2.5em; /* Slightly smaller than h1 */
  width: fit-content;
  justify-self: center;
}

h3 {
  font-size: 1.75em; /* Smaller than h2 */
}

.section-title {
  text-align: center;
  border-bottom: 0.1em solid;
}

.shows-table .center-text {
  text-align: center;
  width: 100%; /* To ensure the cell takes up the full width of the table */
}

/* Header slider styles */
.header-slider {
  position: relative;
  height: 80vh;
  width: 100%;
  overflow: hidden;
}

.header-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 3s ease;
  opacity: 0;
}

.header-slide.active {
  opacity: 1;
}

.header-slide img {
  width: 100%;
  height: 80vh;
  object-fit: cover;
}

.centered-band-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 95%;
  height: auto;
  filter: drop-shadow(0px 10px 0px rgba(0,0,0,0.7)); /* Default shadow */
}

/* For smaller screens */
@media (max-width: 800px) {
  .centered-band-logo {
    filter: drop-shadow(0px 5px 0px rgba(0,0,0,0.7));
  }
}

/* For even smaller screens */
@media (max-width: 500px) {
  .centered-band-logo {
    filter: drop-shadow(0px 3px 0px rgba(0,0,0,0.7));
  }
}

/* Navigation menu */
.nav-menu {
  text-align: center;
  background-color: #151F42;
  padding: 10px 0;
}

.nav-menu a {
  color: #f2f2f2;
  text-align: center;
  padding: 8px 16px;
  text-decoration: none;
  display: inline-block;
  margin: 0 10px;
  border: 2px solid transparent; /* Initial border */
  box-sizing: border-box;
  transition: all 0.3s ease; /* Smooth transition */
}

.nav-menu a:hover {
  color: #f2f2f2; /* Keep the text color the same */
  border: 2px solid rgba(255, 255, 255, 0.5); /* White border on hover */
  animation: drawBorder 0.3s forwards; /* Animation for drawing border */
}

/* Reusing the same keyframes animation for drawing border */
@keyframes drawBorder {
  from {
    border-color: transparent;
  }
  to {
    border-color: rgba(255, 255, 255, 0.5);
  }
}

.social-icons {
  position: absolute;
  bottom: 15px; /* Adjust this value as needed */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.social-icons .icon-container {
    display: inline-block;
    transition: all 0.3s ease; /* Smooth transition */
    padding: 8px; /* Space around the icon */
    /* Remove filter from here */
    border: 2px solid transparent; /* Initial border */
    box-sizing: border-box;
    margin: 0 0.5em;
}

.social-icons .icon-container:hover {
    border: 2px solid rgba(255, 255, 255, 0.5); /* White border */
    animation: drawBorder 0.3s forwards; /* Animation for drawing border */
}

/* Animation for drawing border */
@keyframes drawBorder {
    from {
        border-color: transparent;
    }
    to {
        border-color: rgba(255, 255, 255, 0.5);
    }
}

.social-icons img {
  display: block;
  min-width: 26px;
  min-height: 26px;
  width: 2.45vw;
  height: 2.45vw;
  max-height: 38px;
  max-width: 38px;
}

.social-icons.release-icons {
  position: relative; 
  bottom: 0px;
}

.icon-container.release-icon {
  margin:0;
}

/* Main container */
.main-container {
  max-width: 1000px;
  margin: auto;
  padding: 1em;
}

.band-icon {
  height: 85%; /* 95% of the navbar's height */
  width: auto; /* Maintain aspect ratio */
}

.navbar-center a {
  margin: 0 10px;
}

/* New style for the image container */
.centered-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh; /* This sets the height of the container; adjust as needed */
  margin-top: 20px; /* This adds some space above the container; adjust as needed */
}

.centered-image {
  max-width: 100%; /* Ensures the image is not wider than the container */
  max-height: 100%; /* Ensures the image is not taller than the container */
}


/* Basic styling for the #store section */
.store-section {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 2em 0;
text-align: center;
}

/* 3-COLUMN GRID (no horizontal scroll) */
.store-items {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2em;
/* Removed horizontal scroll code */
}

/* EACH ITEM CARD */
.store-item {
background: #fff;
border-radius: 1em;
text-align: center;
padding: 1em;
}

/* IMAGE CONTAINER:
 We let the front image be 'normal flow' so container has height.
 The back image is absolute on top and hidden by opacity. */
.store-item-image-container {
position: relative;  /* for back image absolute positioning */
width: 100%;
overflow: hidden;    /* hides any overflow from the absolute image */
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.store-item-image-container:hover {
transform: scale(1.0775);
}

/* FRONT IMAGE: normal static position, sets container height */
.front-image {
display: block;      /* ensure it's recognized in normal flow */
width: 100%;
height: auto;
border-radius: 0.5em;
}

/* BACK IMAGE: absolute, fades in on hover */
.back-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
border-radius: 0.5em;

opacity: 0;                 /* hidden initially */
z-index: 0;
transition: opacity 0.6s ease;
}

/* Hover: front fades out (if we want) and back fades in
 We can simply fade in the back. The front image remains visible
 beneath if you want to do an actual "swap." If you want the front
 to fade out, see the optional rule below. */
.store-item-image-container:hover .back-image {
opacity: 1;
z-index: 1;
}

/* (Optional) If you wish the front to fade out, uncomment:
.store-item-image-container:hover .front-image {
opacity: 0;
transition: opacity 0.6s ease;
}
*/

/* ITEM TITLE STYLING */
.store-item-title {
margin-top: 0.75em;
font-weight: bold;
color: #151F42;
}

/* OPTIONAL RESPONSIVE TWEAK */
@media (max-width: 600px) {
.store-items {
  grid-template-columns: 1fr; /* stack items vertically on small screens */
}
}

/*NEXT SHOW*/
.next-show-link {
  text-decoration: none; /* Removes underline from the link */
  color: inherit; /* Inherits text color from parent elements */
}

.next-show-container-container {
  background-color: #151F42; /* Deep blue background */
  color: #FFFFFF; /* White text */
  padding: 20px 0;
  max-width: 580px; /* Set width to match video container */
  margin: 20px auto; /* Centering the container */
  border-radius: 1em;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow for depth */
  text-align: center; /* Center align the text */
  cursor: pointer; /* Changes cursor to pointer to indicate clickable area */
}

/* Removed empty .next-show-container rule */

.next-show-title {
    font-size: 1.8em; /* Slightly larger font size */
    font-weight: bold; /* Bold the title */
    margin: 0; /* Space below the venue name */
    color: inherit;  /* Inherits the color from the parent element */
    text-decoration: none;  /* Removes underline */
}

.next-show-title:hover,
.next-show-title:visited,
.next-show-title:link,
.next-show-title:active {
    color: inherit;  /* Keeps the color consistent in all states */
    text-decoration: none;  /* Ensures no underline appears on hover or other states */
}

.next-show-image-container {
    display: flex; /* Uses flexbox to align images side by side */
    justify-content: space-around; /* Distributes space evenly */
    align-items: center; /* Aligns items vertically */
    padding: 20px; /* Sets padding around the container */
    gap: 20px; /* Sets a gap between the images */
}

@media (max-width: 768px) {
  .next-show-image-container {
    flex-direction: column; /* Stack vertically */
    align-items: center;    /* Center them horizontally */
    flex-wrap: wrap;       /* Allow wrapping if needed */
  }
}

.next-show-logo, .next-show-venue-image {
    flex: 1; /* Allows each image to expand equally */
    /*height: 30vw;  Sets the height relative to the viewport width */
    width: 30vw; /* Sets the width equal to the height for a square shape */
    object-fit: cover;  /*Ensures the images cover the area without distortion */
    /*object-fit: scale-down;*/  /*Ensures the images cover the area without distortion */
    border-radius: 1em; /* Rounds the corners */
    transition: width 0.5s ease, height 0.5s ease; /* Smooth transition for resizing */
    max-height: 200px; /* Maximum height limit */
    max-width: 200px; /* Maximum width limit */
    min-width: 100px; /* Minimum width to prevent images from becoming too small */
    min-height: 100px; /* Minimum height to maintain aspect ratio */
}

@media (max-width: 768px) {
    .next-show-logo, .next-show-venue-image {
        max-height: 150px; /* Adjust maximum size for mobile */
        max-width: 150px; /* Adjust maximum size for mobile */
    }
}

.next-show-details p {
    font-size: 1.1em;
    margin: 0px;
}

.next-show-location p {
    margin: 0 0 10 0px;
}

.next-show-date p {
    margin: 0px;
}


/*VIDEOS*/
.video-container {
  display: grid;
  grid-template-columns: 1fr;               /* default to single column */
  gap: 2.5em;                                 /* space between video blocks */
  padding: 0;                               /* Changed from 'padding: 0 20px' - remove horizontal padding */
  max-width: 1000px;                        /* Changed from 1400px to match main-container */
  margin: 0 auto;                           /* center the container */
  transition: grid-template-columns 0.5s ease; /* animate the column change */
  justify-items: center;                    /* center items horizontally in each cell */
  align-items: start;                       /* align items to top for consistent height */
  position: relative;
}

/* Switch to two columns on larger screens */
@media (min-width: 1100px) {
  .video-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Constrain odd last video to match paired video width */
  article.video-block:last-child:nth-child(odd) {
    max-width: 48%;  /* Matches width of one column in 2-column layout */
  }
}

.video-container video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 1em;
}

.video-block iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 1em;
}

.video-block {
  text-align: center;
  margin-bottom: 1em; /* Space between video blocks */
  max-width: 42em;    /* Slightly increased for larger video players */
  width: 95%;         /* Changed from 100% to allow centering in grid cells */
  min-width: 266px;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  /* Optional small hover animation if you like */
  transition: transform 0.5s ease;
}

.video-block:hover {
  transform: scale(1.02);
}

.video-title {
  color: #151F42;
  margin-bottom: 10px;
  min-height: 2.5em;  /* Ensure consistent height for titles */
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-promo {
  color: #333;
  font-size: 1.2em;
  text-align: center;
  padding: 0.5em 0 0 0;
}

.video-block:last-child {
  grid-column: 1 / -1;  /* spans the full grid width */
  justify-self: center; /* center horizontally */
}

.main-quote-container {
  display: flex;
  justify-content: center;
  width: 100%
}

.main-quote {
  font-size: 1.22em;
  font-style: italic;
  text-align: center;
  min-width: 266px;
  max-width: 34em;
  width: 65vw;
}

.release-icons{
  display: flex;
  justify-content: center
}

.store-section h2, .store-section h3 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #151F42;
  margin-bottom: 15px;
  font-weight: bold;
}

/*EVENT SECTION*/

/* EVENT SECTION */
.shows-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Modern font-family */

/* Needed for ellipsis to work properly on fixed column widths */
table-layout: fixed;
}

.shows-table th,
.shows-table td {
width: 33.33%; /* Each column gets a fixed portion of the table width */
padding: 12px 15px;
text-align: center;
border-bottom: 1px solid #ddd;

/* Single-line truncation with ellipsis */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

/* Use clamp() for a smooth, fluid font size */
font-size: clamp(11px, 1.75vw, 14px);
}

.shows-table th {
background-color: #2E3B55; /* A modern shade for header */
color: #ffffff;
font-weight: normal;
text-align: center;
}

/* .shows-table tr:nth-child(even) {
background-color: #dddfe2;  Light row color for even rows 
}*/

.shows-table tr:hover {
background-color: #F5F5F5; /* Subtle hover effect */
}

/* Section Titles */

.shows-section {
width: 90%;
margin: 0 auto;
}

.shows-section h2,
.shows-section h3 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #151F42;
margin-bottom: 15px;
font-weight: bold;
text-align: center;
}

/* Margin after the first table, if desired */
.shows-section > section:nth-of-type(1) .shows-table {
margin-bottom: 30px; /* Adjust the value as needed */
}

/* ============== PREVIOUS SHOWS IMAGES ============== */
.previous-shows-img-container {
display: flex;
justify-content: center;
/* Additional layout or spacing as desired */
}

.previous-shows-img-container a {
display: inline-block;
vertical-align: top;
}

.previous-shows-img-container img {
display: block;  
height: 11.5em;
width: 20.85em;  /* adjust as needed */
cursor: pointer;
object-fit: cover; /* ensures images fill the area nicely */
}

/* Hide the first and third anchors on screens narrower than 1020px */
@media (max-width: 1020px) {
.previous-shows-img-container a:first-child,
.previous-shows-img-container a:last-child {
  display: none;
}
}

/* Make the middle image larger on smaller screens */
@media (max-width: 1020px) {
.previous-shows-img-container a:not(:first-child):not(:last-child) img {
  width: 80vw;   /* 80% of the viewport width */
  height: auto;  /* Let the height scale naturally to preserve aspect ratio */
  max-width: 20.85em; /* Maintain a maximum so it doesn't scale too large */
}
}
/*ABOUT SECTION*/

.about-section {
  padding: 20px;
  /*background-color: #f0f0f0;  Example background color, adjust as needed */
  color: #333; /* Example text color, adjust as needed */
  margin-top: 20px; /* Add space above the about section */
}

.about-content {
  display: flex;
  align-items: center; /* Adjust alignment as needed */
  justify-content: space-between;
  margin-top: 20px;
}

.about-text {
  flex: 1; /* Allows the text to fill the space */
  padding-right: 20px; /* Adds some space between the text and the image */
}

.about-image-container {
  flex: 1; /* Allows the image to fill the space */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center the image horizontally */
  align-items: center; /* Center the image vertically */
  transition: transform 0.5s ease;
}

.about-image {
  max-width: 100%; /* Ensures the image is not wider than the container */
  height: auto; /* Ensures the image scales with the width */
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer; /* Changes the cursor to a pointer to indicate interactiveness */
  transition: transform 0.5s ease;
}

.about-image:hover {
  transform: scale(1.3); /* Scale up the image on hover */
  z-index: 10; /* Ensure the scaled image is above others */
}


/* Gallery Section */
.gallery-section {
padding: 20px;
margin-top: 20px;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:4px;
}

/* Center the last image(s) when there are 1-2 remainders in a 3-column layout */
/* Only applies on screens wide enough for 3 columns */
@media (min-width: 769px) {
/* Center the last image if it's alone in the row */
.gallery-item:nth-last-child(1):nth-child(3n+1) {
grid-column: 2;
}

/* Center the last 2 images if they're the only ones in the row */
/* Position them symmetrically in columns 1 and 3 for visual balance */
.gallery-item:nth-last-child(2):nth-child(3n+1) {
grid-column: 1;
}
.gallery-item:nth-last-child(1):nth-child(3n+2) {
grid-column: 3;
}
}

.gallery-item{
position:relative;
overflow:hidden;      /* keeps the scale-up from spilling too far */
aspect-ratio:1/1;
background:#333;
display:flex;
justify-content:center;
align-items:center;
border-radius: 8px;   /* Rounded corners */
border: 2px solid #151F42;  /* Darker blue-gray for professional look */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);  /* Subtle shadow for depth */

/* 🔑 add a transition so the grow feels smooth */
transition:transform .45s ease, box-shadow .45s ease;
}

/* photograph fills the square normally */
.gallery-item img{
width:100%;
height:100%;
object-fit:cover;
cursor:pointer;
}

/* ✨ grow the entire tile on hover/focus */
@media (hover:hover){
.gallery-item:hover,
.gallery-item:focus-visible{
  transform:scale(1.04);   /* adjust factor to taste */
  z-index:3;               /* sit above neighbours during hover */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);  /* Enhanced shadow on hover */
}
}

/* Modal Styles */
.modal {
display: none; /* Hidden by default */
position: fixed;
z-index: 1000;
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
animation: fadeIn 0.5s ease;
}

.modal-content {
margin: auto;
display: block;
width: 80%; /* Adjust width to be responsive */
max-height: 80vh; /* Ensure the height does not exceed 80% of the viewport */
object-fit: contain; /* Ensure the content is scaled properly within constraints */
}

.close {
position: absolute;
top: 15px;
right: 35px;
color: #fff;
font-size: 40px;
font-weight: bold;
cursor: pointer;
}

/*BLOG*/
.blog-section {
  padding: 20px;
  text-align: center;
}

.blog-items {
  display: flex;
  overflow-x: auto;
  gap: 20px;
}

.blog-item {
  flex-basis: calc(33.333% - 20px); /* For 3 items in a row */
  border: 1px solid #ddd;
  padding: 10px;
  cursor: pointer;
  transition: transform 0.5s ease;
  overflow-x: hidden;
  flex: 0 0 150px;
}

/*.blog-item:hover {
  transform: scale(1.3);
}*/

.blog-image {
  height: 200px; /* Fixed height for all images */
  width: 100%; /* Full width of the container */
  object-fit: cover; /* Maintain the aspect ratio while filling the area */
}

.blog-title {
  font-size: 1.2em;
  margin-top: 10px;
}

.blog-date {
font-size: 0.85em; /* Smaller font size */
color: #151F42; /* Color that matches your design */
text-align: center; /* Center the text */
margin-bottom: 5px; /* Space between the date and the image */
font-weight: bold; /* Make the date stand out */
}

.blog-text {
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Limit to 3 lines */
  line-clamp: 3; /* Standard property */
  -webkit-box-orient: vertical;
}

.read-more {
  display: block;
  margin-top: 10px;
  text-decoration: none;
  color: #151F42;
}

.blog-navigation {
  margin-top: 20px;
}

.nav-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5em;
}

.left-nav {
  float: left;
}

.right-nav {
  float: right;
}

.text-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
  overflow-y: auto;
  animation: fadeIn 0.5s ease; /
}

@keyframes fadeIn {
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}

.full-text-content {
  margin: auto;
  padding: 20px;
  width: 80%;
  max-width: 700px;
  background-color: white;
  max-height: 80vh; /* Maximum height of the modal content */
  overflow-y: auto;
  padding-bottom: 20px; 
  animation: fadeIn 0.5s ease;
}

.full-text-content {
  text-align: center; /* Centers all content in the modal */
}


.close-text-modal {
  color: #000;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.full-text-content img {
  max-height: 50vh;
  max-width: 42em;
  width: 75vw;
  height: auto; /* Keeps the aspect ratio of the image */
  margin-bottom: 15px; /* Adds some space between the image and the text */
}

.full-text-content h3 {
  margin-top: 0; /* Removes top margin from the title */
  text-align: center; /* Centers the title */
  color: #151F42; /* Adjust the color as needed */
}


#previous-shows {
  margin-bottom: 0; /* So the tab bar can snugly attach below */
  position: relative;
  padding-bottom: 0.75em; /* Some spacing for the tab bar overlap */
}

/* This bar matches the background color of the heading (customize as needed). 
   Also extends full width under the heading. */
.tab-header-bar {
  background-color: #2E3B55; /* Adjust to match your heading's color scheme */
  /*border-radius: 1em 1em 0 0;*/
}

/* The row of buttons is displayed horizontally and each gets equal width */
.tab-buttons {
  display: flex;
  width: 100%;
  max-width: 500px; /* optional limit to prevent super wide buttons */
  margin: 0 auto;   /* center within the bar */
  justify-content: center;
}

.tab-button {
  flex: 1;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent; /* Start with no visible border */
  padding: 0.5em 1em;
  background-color: transparent;
  color: #fff; /* If your bar is dark, text should be light */
  font-size: 1em;
  transition: all 0.3s ease;
}

/* Hover effect: partially visible border (white, 50% opacity) */
.tab-button:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

/* Active tab: fully visible white border, slightly bolder look, or invert color if you wish */
.tab-button.active {
  border-color: #fff;
  font-weight: bold;
  background-color: rgba(255,255,255,0.1); /* subtle highlight background */
}

/* 
   Container that holds all tab panels. 
   We'll do the height transition on this container for smooth expansion/collapse.
*/
.tab-panels {
  position: relative;
  overflow: hidden;             /* hide panel overflow during fade out */
  transition: height 0.5s ease; /* animate the container's height */
}

/* Each panel is positioned absolutely so they can sit on top of each other. */
.tab-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: -1.25em;
  opacity: 0;
  pointer-events: none; /* disable click on hidden panels */
  transform: translateX(-10px); /* slight slide for a nicer effect */
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.tab-panel.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/*CONTACT*/
.contact-section {
padding: 20px;
color: #333; /* Adjust text color as needed */
text-align: center; /* Center-align all text within this section */
}

.contact-section .form-group {
margin-bottom: 15px;
}

.contact-section label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

.contact-section input[type="text"],
.contact-section input[type="email"] {
width: 20%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 1em;
}

.contact-section .submit-button {
background-color: #151F42; /* Adjust button color as needed */
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 1em;
cursor: pointer;
}

.contact-section .submit-button:hover {
background-color: #0a0f29; /* Darker shade for hover effect */
}

.contact-section textarea {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 1em;
height: 100px; /* Adjust as needed */
}

#full-width-image {
display: block; /* Removes any default margins or padding */
max-height: 150px; /* Maximum height */
width: auto; /* Auto width to maintain aspect ratio */
margin: 0 auto; /* Center the image */
}

.footer-bar {
  background-color: #151F42; /* Same color as nav menu */
  text-align: center; /* Center align content */
  padding: 10px 0; /* Same padding as nav menu */
}

.footer-image {
  height: auto; /* Maintain aspect ratio */
  max-height: 100px; /* Maximum height of the image */
  width: auto; /* Adjust width accordingly */
  cursor: pointer;
}

.email-link {
color: #151F42; /* Example color */
text-decoration: none; /* Removes underline */
font-size: 1.2em; /* Larger font size for visibility */
word-break: break-all;
}

.email-link:hover {
text-decoration: underline; /* Adds underline on hover for interactivity */
}

@media (hover: none), (max-width: 768px) {
.about-content {
  flex-direction: column;
}
.about-image-container {
  width: 100%; /* Adjust width as needed */
  margin-top: 20px; /* Adds some space above the image */
}

.about-text, .about-image-container {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.blog-item:hover {
    transform: none; /* Disables the grow effect on hover */
}
.blog-item {
    flex-basis: calc(50% - 20px); /* For 2 items in a row */
}
.gallery-item:hover {
    transform: none; /* Disables the grow effect on hover */
}
.about-image-container:hover {
    transform: none;
}
.about-image-container:hover .about-image {
    transform: none;
}
.gallery-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
}
}

@media (max-width: 480px) {
.gallery-grid {
    grid-template-columns: 1fr; /* 1 column on mobile */
}
}

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

.button-container {
display: flex;
gap: 10px;
flex-wrap: wrap; /* Buttons can wrap on smaller screens */
justify-content: center;
max-width: 12.8em;
padding: 0 10px;
transition: width 0.4s ease;
}

/* ====== Base styling for all buttons ====== */
.button-container button {
position: relative;
display: inline-flex;
align-items: center;
gap: 7px;

padding: 10px 12px;
color: #fff;
font: inherit;
text-align: center;
border: none;
border-radius: 6px;
height: 2.6em;
width: 12.8em;
cursor: pointer;

box-shadow: 0 4px 0px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);

/* No gradient or animation here; we move shimmer to ::after. */
transition: transform 0.1s ease, box-shadow 0.1s ease, border 0.3s ease;
}

/* Hover effect: pulse glow + swirling border */
.button-container button:hover {
transform: scale(1.0); /* Slightly grow on hover */
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* Glowing effect */
}

/* Click (Active) State: depress effect */
.button-container button:active {
transform: scale(0.975); /* Scale down more noticeably */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); /* Tactile feedback */
}

/* Swirling border on hover - using ::before */
.button-container button::before {
content: "";
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
border-radius: 8px;
border: 2px solid #fff;
transition: all 0.5s ease;
opacity: 0;
pointer-events: none; /* so clicks pass through */
z-index: 2; /* Ensure border is above the shimmer */
}

.button-container button:hover::before {
opacity: 1;
transform: rotate(0deg);
transition: all 1s ease;
}

/* === Shimmer overlay on ::after === */
.button-container button::after {
content: "";
position: absolute;
top: 0; 
left: 0; 
right: 0; 
bottom: 0;
border-radius: inherit;
pointer-events: none; /* clicks pass through */
z-index: 1; /* Under the swirling border, above the button background */

background-image: linear-gradient(
  135deg,
  rgba(255, 255, 255, 0.0) 0%, 
  rgba(255, 255, 255, 0.475) 50%,     
  rgba(255, 255, 255, 0.0) 100%
);
background-size: 200% 200%;
background-position: -200% 0; /* Start off to the left */
animation: shimmer 4.5s infinite;
}

/* Shimmer keyframes: single sweep, then fade out to hide the reset */
@keyframes shimmer {
0% {
  background-position: -200% 0;
  opacity: 0;
}
10% {
  opacity: 0.8; /* fade in so shimmer is visible */
}
22% {
  opacity: 0;
}
70% {
  background-position: 200% 0;
}
90% {
  /* shimmer completed its sweep, still visible */
  background-position: 200% 0;
}
100% {
  /* fade out before jumping back */
  background-position: 200% 0;
  opacity: 0;
}
}

/* Icon styling */
.button-container button img {
width: 20px;
height: auto;
display: inline-block;
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.6));
}

/* ====== Individual platform button colors ====== */
.button-insta {
background-color: #DD2A7B; /* Instagram */
}

.button-spotify {
background-color: #1DB954; /* Spotify */
}

.button-youtube {
background-color: #FF0000; /* YouTube */
}

/* Button text responsive visibility */
.button-text-short {
  display: none;
}

.button-text-full {
  display: inline;
}

/* ====== STICKY SPOTIFY PLAYER ====== */
.spotify-sticky-player {
  position: fixed;
  bottom: -200px; /* Hidden off-screen initially - adjust based on actual height */
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, rgba(21, 31, 66, 0.98) 0%, rgba(21, 31, 66, 1) 100%);
  padding: 10px 12px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  
  /* Smooth slide-in animation using bottom property instead of transform */
  transition: bottom 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Visible state when scrolled */
.spotify-sticky-player.visible {
  bottom: 0;
}

.player-content {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 600px; /* Reduced from 1200px */
  margin: 0 auto;
  padding-right: 40px; /* Space for close button */
}

.player-spotify-wrapper {
  flex: 0 0 auto;
  width: 280px; /* Fixed width for player */
  overflow: hidden; /* Prevent scrollbars */
}

.player-spotify-wrapper iframe {
  border-radius: 8px;
  overflow: hidden; /* Prevent scrollbars */
}

.player-buttons-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Sticky Player Buttons - Smaller versions */
.button-sticky {
  padding: 8px 12px !important;
  font-size: 13px;
  height: auto !important;
  min-width: auto;
  box-shadow: 0 3px 0px rgba(0, 0, 0, 0.6);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.button-sticky img {
  width: 16px !important;
  height: 16px !important;
}

.button-sticky:hover {
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.button-sticky:active {
  transform: scale(0.98);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Preserve shimmer effect on sticky buttons */
.button-sticky::after {
  content: "";
  position: absolute;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.0) 0%, 
    rgba(255, 255, 255, 0.475) 50%,     
    rgba(255, 255, 255, 0.0) 100%
  );
  background-size: 200% 200%;
  background-position: -200% 0;
  animation: shimmer 4.5s infinite;
}

/* Follow on Spotify Button - removed, replaced by sticky buttons */

/* Close button */
.player-close {
  /* position: absolute; DO NOT ADD*/
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 1001;
  flex: none;
}

.player-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}

/* Add padding to body to prevent content overlap */
body {
  padding-bottom: 175px; /* Player with buttons */
}

/* Progressive button shrinking as screen narrows */
@media (max-width: 1200px) {
  .button-sticky {
    padding: 7px 11px !important;
    font-size: 12px;
  }
  
  .button-sticky img {
    width: 15px !important;
    height: 15px !important;
  }
}

@media (max-width: 1000px) {
  .button-sticky {
    padding: 6px 10px !important;
    font-size: 11px;
  }
  
  .button-sticky img {
    width: 14px !important;
    height: 14px !important;
  }
}

@media (max-width: 850px) {
  .button-sticky {
    padding: 5px 8px !important;
    font-size: 10px;
  }
  
  .button-sticky img {
    width: 13px !important;
    height: 13px !important;
  }
  
  .player-spotify-wrapper {
    width: 220px;
  }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .spotify-sticky-player {
    padding: 8px;
  }
  
  .player-content {
    gap: 6px;
    padding-right: 0;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .player-spotify-wrapper {
    width: 200px;
  }
  
  .button-sticky {
    padding: 5px 8px !important;
    font-size: 10px;
  }
  
  .button-sticky img {
    width: 12px !important;
    height: 12px !important;
  }
  
  .player-close {
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    font-size: 16px;
  }
  
  body {
    padding-bottom: 160px;
  }
}

/* Small mobile - stack vertically */
@media (max-width: 480px) {
  .player-content {
    flex-direction: column;
    gap: 6px;
    padding-right: 0;
    align-items: center;
  }
  
  .player-spotify-wrapper {
    width: 100%;
    max-width: 280px;
  }
  
  .player-buttons-group {
    width: 100%;
    justify-content: center;
    gap: 6px;
  }
  
  .button-sticky {
    flex: 1;
    min-width: 85px;
    max-width: 110px;
    justify-content: center;
    padding: 6px 8px !important;
  }
  
  .player-close {
    top: 6px;
    right: 6px;
  }
  
  body {
    padding-bottom: 180px; /* More space for stacked layout */
  }
}

/* ====== Tour Promo Section ====== */
.tour-promo-section {
  margin: 2em 0;
  padding: 2em 1em;
  background: linear-gradient(135deg, #151F42 0%, #1e2d5f 100%);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.tour-promo-title {
  color: #fff;
  font-size: 2.5em;
  margin-bottom: 1em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  border-bottom: none;
}

.tour-posters-container {
  display: flex;
  gap: 1.5em;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.5em;
}

.tour-poster {
  flex: 1;
  min-width: 280px;
  max-width: 450px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tour-poster:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}

.tour-poster img {
  width: 100%;
  height: auto;
  display: block;
}

.tour-tickets-cta {
  margin-top: 1.5em;
}

.tour-tickets-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: linear-gradient(135deg, #FF6B35 0%, #ff8c42 100%);
  color: #fff;
  font-size: 1.4em;
  font-weight: 700;
  text-decoration: none;
  border-radius: 50px;
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
  transition: all 0.3s ease;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.tour-tickets-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.tour-tickets-button:hover::before {
  left: 100%;
}

.tour-tickets-button:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 28px rgba(255, 107, 53, 0.6);
  background: linear-gradient(135deg, #ff8c42 0%, #FF6B35 100%);
}

.tour-tickets-button:active {
  transform: scale(0.98);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.5);
}

.tickets-icon {
  font-size: 1.2em;
  animation: ticketPulse 2s ease-in-out infinite;
}

@keyframes ticketPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

.tour-dates-text {
  color: #E3E8FA;
  font-size: 1.1em;
  margin-top: 1em;
  font-weight: 400;
  letter-spacing: 2px;
}

/* Mobile responsiveness */
@media (max-width: 678px) {
  .tour-promo-title {
    font-size: 2em;
  }
  
  .tour-posters-container {
    flex-direction: column;
    gap: 1em;
  }
  
  .tour-poster {
    max-width: 100%;
  }
  
  .tour-tickets-button {
    font-size: 1.2em;
    padding: 14px 28px;
  }
  
  .tour-dates-text {
    font-size: 1em;
  }
  
  /* Show short button text on mobile */
  .button-text-full {
    display: none;
  }
  
  .button-text-short {
    display: inline;
    font-size: 72%;
  }
  
  /* Set button and container widths to 6em */
  .button-container {
    width: 6em;
  }
  
  .button-container button {
    width: 6em;
  }
}

/* ====== EMAIL MODAL ====== */
.email-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.email-modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Modal Content Box */
.email-modal-content {
  position: relative;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  background: transparent;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: transform 0.4s ease;
}

.email-modal-overlay.visible .email-modal-content {
  transform: scale(1);
}

.email-modal-form-container {
  position: relative;
}

/* Close Button */
.email-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 28px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  transition: all 0.3s ease;
  line-height: 1;
  padding: 0;
}

.email-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

/* Override Kit form styles to fit modal */
.email-modal-content .formkit-form {
  max-width: 100% !important;
  margin: 0;
}

.email-modal-content .formkit-form [data-style="full"] {
  min-height: auto !important;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .email-modal-content {
    width: 95%;
    max-width: 420px;
  }
  
  .email-modal-close {
    width: 32px;
    height: 32px;
    font-size: 24px;
    top: 8px;
    right: 8px;
  }
}