body { 
    background-color: black; 
    color: white; 
    margin: 0px; 
    padding: 0px;
    font-family: 'Courier New', Courier, monospace
} 
.main-page { 
    width: 100%; 
    min-height: 100vh; 
    background-color: black;
}

h1 { 
    color: white; 
    font-size: clamp(32px, 8vw, 60px); 
}
h2 {
    color: white; 
    font-size: clamp(20px, 5vw, 30px);
}

.tooltip {
    position: relative;
    display: inline-flex;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background-color: #1a1a1a;
    color: white;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: normal;
    white-space: nowrap;
    border-radius: 6px;
    border: solid 1px rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 3000;
}

.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.reset-btn {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 20px;
    position: fixed;
    bottom: 30px;
    right: 20px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.5s ease;
}
.reset-btn.is-visible {
  opacity: 1;
  visibility: visible;
}
#reset-btn-icon {
    color: white;
    font-size: 40px;
    padding: 5px;
}
/* Nav Bar*/ 
    .nav-bar { 
        display: flex; 
        flex-direction: row; 
        align-items: center; 
        background-image: url("Imgs/bg-img2.JPG"); 
        background-position: center 60%; 
        background-size: cover; 
        background-repeat: no-repeat; 
        position: fixed; 
        width: 100%; 
        height: auto; 
        margin-top: 0px; 
        top: 0; 
        left: 0; 
        padding-bottom: 0px; 
        box-sizing: border-box; 
        z-index: 1000; 
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.3); 
        border: solid black 10px; 
        border-bottom: solid white 4px; 
        transition: height 0.5s ease-in-out; 
    } 

    .logo { 
        display: flex;
        align-items: center;
        position: relative; 
        border: none; 
        padding: 0; 
        cursor: pointer; 
        user-select: none;
    } 

    .logo img { 
        width: 30vw;
        height: 20vh;
        display: block; 
        cursor: pointer; 
        padding-inline: 20px; 
        transition: height 0.5s ease-in-out;
    }
    .logo :hover {
        opacity: 0.85;
    }
    .hamburger-toggle { 
        background: none; 
        border: none; 
        border-radius: 5px; 
        width: 90px; 
        height: 80px; 
        padding: 0; 
        margin-left: 20px; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        cursor: pointer; 
        color: white; 
    } 

    .hamburger-toggle:hover { opacity: 0.7; } 
    #menu-icon { font-size: 50px; color: white; } 
    .nav-menu { display: flex; flex-direction: row; } 

    .nav-links { 
        position: fixed; 
        top: 0; 
        left: -100%; 
        width: 280px; 
        height: 100vh; 
        background-color: #1a1a1a; 
        box-shadow: 15px 0 15px rgba(0,0,0,0.5); 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        list-style: none; 
        gap: 30px; 
        z-index: 2000; 
        opacity: 1; 
        transition: left 0.3s ease-in, box-shadow 0.3s ease-in; 
    } 

    .nav-links.open { 
        left: 0px; 
        transition: left 0.3s ease-out, box-shadow 0.3s ease-out; 
    } 

    .nav-links hr { color: white; border-width: 3px; display: grid; width: 70%; } 
    .nav-links a { text-decoration: none; color: white; font-size: 28px; font-weight: bold; } 
    .nav-links a:hover { color: white; font-size: 32px; opacity: 0.7; } 

    .close-button { color: white; cursor: pointer; align-self: flex-end; margin-top: 20px; margin-right: 20px; width: 30px; height: 30px; } 
    .closed-style { color: gray; cursor: pointer; align-self: flex-end; margin-top: 20px; margin-right: 20px; width: 40px; height: 40px; } 

    .social-media-container { 
        display: flex; 
        align-items: center; 
        margin-left: auto; 
        margin-right: 50px; 
        gap: 30px; 
    } 

    .social-media-container a { font-size: 40px; text-decoration: none; } 
    .social-media-container a:hover { opacity: 0.7; } 
/* End Nav Bar */ 

/* Main Content */ 

    .main-content {
        position: relative;
        padding-top: 120px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        z-index: 5;
        background-color: black;
        gap: 40px;
    }

    /* Carousel css */ 
    .carousel { 
        position: relative; 
        width: 42vw;
        height: 352px;
        overflow: hidden; 
        border-radius: 12px; 
        border: none; 
        background-color: #333333; 
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); 
        z-index: 1; 
    } 
    .carousel-track {
        position: relative; 
        width: 100%;
        height: 100%; 
        list-style: none;
        margin: 0; 
        padding: 0; 
    }
    .carousel-track-container {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .carousel-slide { 
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        opacity: 0; 
        transition: opacity 1s ease-in-out; 
        z-index: 1;
    } 

    .carousel-slide.current-slide { 
        opacity: 1; 
        z-index: 2; 
    } 

    .carousel-slide img { 
        width: 100%; 
        height: 100%; 
        object-fit: cover;
        display: block; 
    } 

    .carousel-button { 
        position: absolute; 
        top: 50%; 
        transform: translateY(-50%); 
        background: rgba(0, 0, 0, 0.5); 
        color: white; 
        border: none; 
        font-size: 2rem; 
        padding: 16px 22px; 
        cursor: pointer; 
        z-index: 10; 
        border-radius: 50%; 
        transition: background 1s ease, transform 1s ease; 
    } 

    .carousel-button:hover { background: rgba(0, 0, 0, 0.6); transform: translateY(-50%) scale(1.1); cursor: pointer;} 
    .prev-btn { left: 25px; } 
    .next-btn { right: 25px; } 
/* Carousel css */ 

/* main-content */ 
    .main-section-1 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        width: 90%;
        margin: 15vh auto 0;
        gap: 30px;
    }

    .main-section-1 iframe {
        width: 42vw;
        height: 352px;
        border: none;
    }
    /* Main Parent Card Wrapper Element */
/* ==========================================================================
   Shows Widget & Handlebars Template Cards
   ========================================================================== */
.main-section-3 {
  width: 100%;
  display: flex;
  justify-content: center;
}

.shows-widget { 
  font-family: sans-serif; 
  width: 100%;
  max-width: 600px; 
  background: #333333; 
  color: black; 
  padding: 25px; 
  border-radius: 12px; 
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); 
  box-sizing: border-box;
}

.widget-title {
  margin-top: 0;
  margin-bottom: 20px;
  color: white; /* Ensures widget heading is visible against #333 background */
}

#shows-list { 
  margin: 0; 
  padding: 0;
  display: flex; 
  flex-direction: column; 
  gap: 20px; /* Even spacing between your gig cards */
}

/* Style for individual loaded cards */
.event-card {
  background-color: white; 
  border: 4px solid #1a1a1a; 
  border-radius: 8px; 
  padding: 20px; 
  color: black;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Inverts colors beautifully on hover */
.event-card:hover {
  background-color: #1a1a1a; 
  border-color: white; 
  color: white; 
}

.event-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.event-title {
  margin: 0;
  font-size: 1.4rem;
  color: inherit;
  font-weight: bold;
}

.event-date {
  font-weight: bold;
  font-family: monospace;
  background-color: #1a1a1a;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Make date tag stand out when the card itself is hovered */
.event-card:hover .event-date {
  background-color: white;
  color: #1a1a1a;
}

.event-body {
  font-size: 1rem;
  line-height: 1.4;
  color: inherit;
}

/* Keeps embedded WordPress body text links readable on dark background hover */
.event-card:hover .event-body a {
  color: #58a6ff;
}

.event-footer {
  margin-top: 5px;
}

/* View Details Action Link */
.btn-tickets {
  display: inline-block;
  background-color: #1a1a1a;
  color: white;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.9rem;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

/* Swaps button styles when the card container is active */
.event-card:hover .btn-tickets {
  background-color: white;
  color: #1a1a1a;
}

.btn-tickets:hover {
  transform: scale(1.05);
}

/* Fallback alerts style */
.no-events, .error-message {
  color: white;
  text-align: center;
  padding: 20px;
  font-family: monospace;
}

    .main-section-4 {
        width: 90%;
        margin: 0 auto;
    }
    .bio-container {
        width: 100%;
        height: fit-content;
        background-color: #333333;
        border-radius: 12px;
        display: flex; 
        flex-direction: column; 
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
    }
    .bio-subcontainer {
        width: 100%;
        max-width: 1200px;
        position: relative;
        background-color: #333333;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
        padding-bottom: 5vh;
    }
    #bio-img {
        display: block;
        width: 35vw;
        height: 25vw;
        border-radius: 8px;
        bottom: 4px solid transparent;
        transition: border-color 0.3s ease;
        overflow: hidden;
    }
    #bio-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    #bio-img:hover {
        border-color: white;
    }
    .carousel, 
    .main-section-1 iframe,
    .main-section-3,
    .bio-container {
        border: 4px solid transparent !important;
        border-radius: 12px;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .carousel:hover, 
    .main-section-1 iframe:hover,
    .main-section-3:hover,
    .bio-container:hover {
        border-color: white !important;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
    }

/* End main-content */
 
/* Footer */

.footer {
    height: 25vh;
    background-color: #333333;
}

/* End Footer */

/* Mobile Media Queries */

@media (max-width: 768px) {
    .nav-bar {
        padding: 5px 10px;
    }
    .social-media-container {
        margin-right: 0px;
        gap: 10px;
    }
    .hamburger-toggle {
        width: 45px;
        height: 45px;
        margin-left: 0;
    }
    .logo img {
        height: 10vh;
    }
    .carousel {
        width: 100vw;
        max-width: 600px;
    }
    .main-section-1 iframe {
        width: 100vw;
    }
    #reset-btn-icon {
        font-size: 30px;
    }
}
/* End */