@font-face {
  font-family: "Sohne-HalbfettKursiv";
  src: url(fonts/TestSöhne-HalbfettKursiv.otf) format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Sohne-Buch";
  src: url(fonts/TestSöhneMono-Buch.otf) format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Sohne-Leicht";
  src: url(fonts/TestSöhneMono-Leicht.otf) format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "ExtraLeicht";
  src: url(fonts/TestSöhneMono-Extraleicht.otf) format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Kraftig";
  src: url(fonts/TestSöhneMono-Kräftig.otf) format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "fett";
  src: url(fonts/TestSöhneMono-Fett.otf) format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Halbfett";
  src: url(fonts/TestSöhneMono-Halbfett.otf) format("truetype");
  font-weight: normal;
  font-style: normal;
}
#mainContent.hidden {
  opacity: 0;
  pointer-events: none;
  
}
#mainContent {
  transition: opacity 0.5s ease-in-out;

}




body {
  margin: 0;
  font-family: 'fett', serif;
  background-color: #FAF9F6;
  color: #1A1A1A;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.41;
  letter-spacing: .05em;
  
 
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 2rem;
  background-color: #FAF9F6;
  position: sticky;
  top: 0;
  z-index: 100;
}
.logo-container {
  position: fixed; /* Stay in place */
  top: 1rem;
  left: 1rem;
  z-index: 102;
}

.logo {
  cursor: pointer;
}

.logo-image {
  height: 100px; /* Adjust size as needed */
  width: auto;
  transition: filter 0.3s ease;
}

/* Hover effect to make the image orange using a filter */
.logo-image:hover {
  filter: sepia(100%) hue-rotate(5deg) saturate(6) brightness(105%);
}
* Make sure the logo clone appears correctly */
.logo-clone {
  cursor: pointer;
  transition: filter 0.3s ease;
  z-index: 1002;
}

/* Apply the same hover effect to the cloned logo */
/* Also apply to the cloned logo */
.logo-clone .logo-image:hover {
  filter: sepia(100%) hue-rotate(5deg) saturate(6) brightness(105%);
}
/* Overlay teaser video */
#teaserOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #FAF9F6;
  
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.5s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}
#teaserOverlay.active {
  opacity: 1;
  pointer-events: auto;
}
#teaserOverlay video {
  width: 90vmin;
  height: 90vmin;
  object-fit: cover;
  max-width: 100%;
  max-height: 100%;
  border: 2px solid #5A2E2E;
}

/* Navigation - ensure it's aligned to the right */
.bottom-menu {
  position: fixed;
  bottom: 1rem;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 100;
  font-weight: bold;
  font-size: 0.6rem;
  font-family: 'fett', bold, sans-serif;
}

.bottom-menu .menu-left {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-left: 1rem; /* Use margin instead of padding */
}

.bottom-menu .menu-right {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-right: 2rem; /* Use margin instead of padding */
}


.bottom-menu a {
  text-decoration: none;
  color: #5A2E2E;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.bottom-menu a:hover {
  color: #D38F0A;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6rem 8rem 10rem 8rem;/* top right bottom left - increased padding to avoid overlapping menu and logo */
}

.hero h1 {
  font-size: 0.8rem;
  font-family: 'Sohne-kraftig', serif;
  color: #5A2E2E;
  margin-bottom: 0;
}

.hero p {
  max-width: 600px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #333;
}
.hero-map {
  padding-top: 0.1rem; /* override only this hero */
  padding-bottom: 0.5rem;
}

/*videos.html*/
.youtube-video {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.youtube-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
/* New video grid container for side-by-side layout */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
  margin: 2rem auto 0 auto;
  align-items: stretch;
}

.video-wrapper {
  position: relative;
  width: 100%;
  border: 1px solid #5A2E2E;
  background-color: #FAF9F6; /* Changed from #000 to match description background */
  display: flex;
  flex-direction: column;
  min-height: 300px; /* Change from fixed height to min-height */
  overflow: visible; /* Change from hidden to visible */
  box-sizing: border-box;
  
}

.local-video {
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: contain;
  background-color: #000;
}

.video-meta {
  width: 100%;
  background-color: #FAF9F6;
  border-bottom: 1px solid #5A2E2E;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: #1A1A1A;
  font-family: 'ExtraLeicht', serif;
  letter-spacing: 0.05em;
  box-sizing: border-box;
}

.video-number {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: bold;
  font-size: 2rem;
}

.play-icon {
  font-size: 2rem;
  color: #5A2E2E;
  line-height: 1;
}

.video-description {
  background-color: #FAF9F6;
  color: #1A1A1A;
  font-family: 'ExtraLeicht', serif;
  padding: 1rem;
  border-top: 1px solid #5A2E2E;
  text-align: left;
  box-sizing: border-box;
 
}

.video-description h3 {
  font-size: 0.8rem;
  font-family: 'Sohne-kraftig', sans-serif;
  margin: 0 0 0.5rem 0;
  color: #5A2E2E;
  letter-spacing: -0.02em;
}

.video-description p {
  font-size: 0.70rem;
  line-height: 1.4;
  margin: 0;
  letter-spacing: -0.05em; /* or -1px for tighter spacing */
}

/*MyMixes.html*/

.mix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 1rem;
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.mix-container {
  border: 1px solid #5A2E2E;
  background-color: #000;
  display: flex;
  flex-direction: column;
  min-height: 480px; /* Change from fixed height to min-height */
  overflow: visible; /* Change from hidden to visible */
  box-sizing: border-box;
  justify-content: space-between;
}

.mix-meta {
  width: 100%;
  background-color: #FAF9F6;
  border-bottom: 1px solid #5A2E2E;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: #1A1A1A;
  font-family: 'Sohne-Leicht', serif;
  letter-spacing: 0.05em;
  box-sizing: border-box;

  display: flex;
  justify-content: space-between;
  align-items: center;
}


.mix-description {
  background-color: #FAF9F6;
  color: #1A1A1A;
  font-family: 'Sohne-Leicht', serif;
  padding: 1rem;
  border-top: 1px solid #5A2E2E;
  text-align: left;
  box-sizing: border-box;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 140px;
}

.mix-description h3 {
  font-size: 1rem;
  font-family: 'Sohne-kraftig', sans-serif;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.02em;
}

.mix-description p {
  font-size: 0.70rem;
  line-height: 1.4;
  margin: 0;
  flex-grow: 1;
  display: flex;
  align-items: flex-start;
  white-space: pre-wrap;
  letter-spacing: -0.05em;
}

.custom-audio-player {
      position: relative;
      width: 100%;
      height: 300px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .audio-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(90, 46, 46, 0.8), rgba(0, 0, 0, 0.6));
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .play-button {
    position: absolute;
      top: 15px;
      left: 10px;
      width: 45px;
      height: 45px;
      z-index: 10;
    background-color: #5A2E2E; /* dark maroon color */
    border-radius: 50%;
    border: 0.5px solid #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
  #playIcon {
    width: 20px;
    height: 30px;
    background-color: #FAF9F6;
    clip-path:  polygon(20% 15%, 90% 50%, 20% 85%, 30% 50%);
    display: inline-block;
    border: #000;
  }
  /* Pause icon style 
  .pause-icon {
    clip-path: polygon(30% 15%, 45% 15%, 45% 85%, 30% 85%, 55% 15%, 70% 15%, 70% 85%, 55% 85%) !important;
  }*/


    .play-button:hover {
      background: #D38F0A;
      transform: scale(1.1);
      color: #5A2E2E;
    }

    .play-button.playing {
      background: rgba(211, 143, 10, 0.9);
      color: white;
    }

    .title-box {
      position: absolute;
      top: 40px;
      left: 60px;
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 8px 8px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 15px;
      z-index: 10;
      height: 14px;
      display: flex;
      align-items: center;
      min-width: 100px;
    }
    .Subtitle-box {
      position: absolute;
      top: 15px;
      left: 60px;
      background: rgba(0, 0, 0, 0.8);
      color: #cccccc;
      padding: 6px 6px;
      font-family: Arial, Helvetica, serif;
      font-size: 12px;
      z-index: 10;
      height: 10px;
      display: flex;
      align-items: center;
      text-decoration: underline;

    }

    .waveform-container {
      position: absolute;
      bottom: 30px;
      height: 40px;
      width: 100%;
      margin: 1px 0;
      background: rgba(255,255,255,0.1);
      border-radius: 2px;
      overflow: hidden;
      cursor: pointer;
    }

    .waveform {
      display: flex;
      align-items: end;
      height: 100%;
      padding: 2px;
      gap: 1px;
    }

    .wave-bar {
      flex: 1;
      background: rgba(255,255,255,0.3);
      border-radius: 1px;
      transition: background-color 0.1s ease;
      min-height: 2px;
    }

    .wave-bar.played {
      background: #5A2E2E;
    }

    .wave-bar:hover {
      background: #D38F0A;
    }

    .audio-info {
      position: absolute;
      bottom: 30px;
      right: 10px;
      color: white;
      font-size: 7px;
      background: rgba(0, 0, 0, 0.5);
      padding: 5px 5px;
      
    }

    .hidden-audio {
      display: none;
    }

    /* Animated wave bars for visual effect */
    @keyframes wave-pulse {
      0%, 100% { transform: scaleY(0.3); }
      50% { transform: scaleY(1); }
    }

    .wave-bar.animated {
      animation: wave-pulse 0.8s ease-in-out infinite;
    }

    .wave-bar:nth-child(odd) {
      animation-delay: 0.1s;
    }

    .wave-bar:nth-child(even) {
      animation-delay: 0.3s;
    }
/* events.html*/
.upcoming-shows {
  display: none;
}

/*contact.html*/
 
    .contact-hero {
      min-height: 80vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 1rem;
      background: linear-gradient(135deg, #5A2E2E 0%, #2C1810 100%);
      color: white;
      position: relative;
    }

    .contact-hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('images/dj-yabi-radio.jpg') center/cover;
      opacity: 0.1;
      z-index: 1;
    }

    .contact-hero > * {
      position: relative;
      z-index: 2;
    }

    .contact-hero h1 {
      font-family: 'fett', serif;
      font-size: 2rem;
      font-weight: 300;
      letter-spacing: 0.3em;
      margin-bottom: 1rem;
      text-align: center;
    }

    .contact-hero p {
      font-family: 'fett', serif;;
      font-size: 0.8rem;
      max-width: 600px;
      text-align: center;
      line-height: 1.6;
      opacity: 0.9;
    }

    .contact-main {
      display: flex;
      min-height: 100vh;
      background: #f8f5f2;
    }

    .contact-form-section {
      flex: 1;
      padding: 4rem 6rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-width: 600px;
    }

    .contact-form-section h2 {
      font-family: 'fett', serif;;
      font-size: 1.5rem;
      font-weight: 300;
      letter-spacing: 0.1em;
      margin-bottom: 2rem;
      color: #5A2E2E;
    }

    .sample-notice {
      background: rgba(90, 46, 46, 0.1);
      padding: 1rem 1.5rem;
      border-left: 4px solid #5A2E2E;
      margin-bottom: 2rem;
      font-family: 'fett', serif;
      font-size: 0.8rem;
      color: #5A2E2E;
    }

    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .form-group {
      position: relative;
    }

    .contact-form input,
    .contact-form textarea {
      width: 100%;
      padding: 1rem 0;
      background: transparent;
      border: none;
      border-bottom: 1px solid #ccc;
      font-size: 0.7rem;
      font-family: 'Montserrat', sans-serif;
      color: #333;
      transition: all 0.3s ease;
    }

    .contact-form input:focus,
    .contact-form textarea:focus {
      outline: none;
      border-bottom-color: #5A2E2E;
    }

    .contact-form input::placeholder,
    .contact-form textarea::placeholder {
      color: #999;
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .contact-form textarea {
      resize: vertical;
      min-height: 120px;
    }

    .submit-btn {
      background: transparent;
      border: 2px solid #5A2E2E;
      color: #5A2E2E;
      padding: 1rem 2rem;
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.3s ease;
      font-family: 'fett', serif;
      font-weight: 500;
      align-self: flex-start;
    }

    .submit-btn:hover {
      background: #5A2E2E;
      color: white;
      transform: translateY(-2px);
    }

    .contact-info-section {
      flex: 1;
      background: #2C1810;
      color: white;
      padding: 4rem 6rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .contact-info-section h2 {
      font-size: 1.1rem;
      font-weight: 300;
      font-family: 'fett', serif;
      letter-spacing: 0.1em;
      margin-bottom: 2rem;
      color: #D38F0A;
    }

    .contact-detail {
      margin-bottom: 2rem;
    }

    .contact-detail h3 {
      font-family: 'fett', serif;
      font-size: 0.9rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      margin-bottom: 1rem;
      color: #D38F0A;
    }

    .contact-detail p {
      line-height: 1.6;
      opacity: 0.9;
      font-size: 0.7rem;
    }

    .contact-detail a {
      color: white;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border-color 0.3s ease;
    }

    .contact-detail a:hover {
      border-bottom-color: #D38F0A;
    }

    .social-links {
      display: flex;
      gap: 1.5rem;
      margin-top: 2rem;
    }

    .social-icon {
      font-size: 24px;
      color: white;
      transition: all 0.3s ease;
      text-decoration: none;
    }

    .social-icon:hover {
      color: #D38F0A;
      transform: translateY(-3px);
    }

    .music-player-section {
      background: rgba(211, 143, 10, 0.1);
      padding: 2rem;
      border-radius: 8px;
      margin-top: 3rem;
      text-align: center;
    }

    .music-player-section h3 {
      color: #D38F0A;
      margin-bottom: 1rem;
      font-weight: 500;
      font-family: 'fett', serif;
      letter-spacing: 0.1em;
    }

    .music-player-section p {
      font-size: 0.7rem;
      font-family: 'fett', serif;
      opacity: 0.8;
      margin-bottom: 1.5rem;
    }

    .listen-btn {
      background: #D38F0A;
      color: white;
      border: none;
      padding: 0.8rem 2rem;
      border-radius: 25px;
      font-size: 0.7rem;
      font-family: 'fett', serif;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.3s ease;
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
    }

    .listen-btn:hover {
      background: #B8770A;
      transform: translateY(-2px);
    }

  
/* photos.html*/
.photo-carousel-section {
  padding: 6rem 2rem;
  text-align: center;
  background-color: #FAF9F6;
}

.photo-carousel-section h1{
  color: #5A2E2E;
  font-size: 1rem;
  font-family: 'Sohne-kraftig', serif;
  margin-bottom: 1rem;
}
.carousel-wrapper {
  position: relative;
  max-width: 800px;
  margin: auto;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
  gap: 1rem;
  padding: 1rem 0;
}

.carousel-track img {
  flex: 0 0 300px;
  width: 300px;
  height: 300px;
  object-fit: cover;
  display: block;

}

.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #5A2E2E;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 2;
}

.carousel-button:hover {
  color: #FAF9F6;
 
}

.carousel-button.prev {
  left: 10px;
}

.carousel-button.next {
  right: 10px;
}

.about-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 6rem 5rem 6rem 6rem;
  gap: 4rem;
  max-width: 1200px;
  margin: auto;
  flex-wrap: wrap;
  position: relative;
  z-index:1;
}

.about-image {
  flex: 1;
  display: flex;
  justify-content: center; /* center the image more */
  margin-top: 2rem;
}

.about-image img {
  width: 70%;
  height: auto;
  object-fit: cover;
  border: 1px solid #5A2E2E;

}

.about-text {
  flex: 1;
  font-family: 'fett', bold, serif;
  font-size: 0.65rem;
  line-height: 1.6;
  color: #1A1A1A;
  max-width: 600px;
  text-align: justify; /* This makes the text justified */
}

.about-text h2 {
  font-family: 'fett', serif;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: #5A2E2E;
}
.map-container {
  position: relative;
  width: 80%;
  aspect-ratio: 3/2;
  margin: 0 auto;
  overflow: hidden;
  background-color: #FFFDFA;
  max-height: calc(100vh - 120px);
  /* Add minimum constraints */
  min-width: 300px;
  max-width: 1200px;
}


.map-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: -10px 0 20px -5px #FAF9F6, 10px 0 20px -5px #FAF9F6;
  pointer-events: none;
  z-index: 2;
}

.map-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0.95;
}

.map-pin {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -100%);
  cursor: pointer;
  text-decoration: none;
  z-index: 10;
}

.pin-dot {
  width: 8px;
  height: 8px;
  background-color: #5A2E2E;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}

.map-pin:hover .pin-dot {
  transform: scale(1.4);
  background-color: #D38F0A;
}

.city-label {
 position: absolute;
  bottom: 100%; /* Push it above the pin-dot */
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  color: #5A2E2E;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 8px;
  padding: 4px 8px;
  border-radius: 2px;
  border: 2px solid #5A2E2E;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  white-space: nowrap;
  text-align: center;
  margin-bottom: 6px;
  z-index: 11;
}

/* Special positioning for Paris label (to the right) */
.city-label.label-right {
  bottom: auto;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-bottom: 0;
  margin-left: 8px;
}

.city-label.label-left {
  bottom: auto;
  left: auto;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-bottom: 0;
  margin-right: 8px;
}

.city-label:hover{
  color: #D38F0A;
}

/* City page styles - consolidated */
.header-city {
  text-align: center;
  padding: 20px;
  background-color: #FAF9F6;
  font-family: "fett";
  font-size: 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.city-title {
  color: #5A2E2E;
  font-size: 1.5em;
  margin: 20px 0;
}

.map-container-city {
  border: 1.5px solid #5A2E2E;
  width: 70%;
  position: relative;
  margin: 0 auto 3rem auto; 
  overflow: visible;
  background: #FFFDFA;
  min-width: 300px;
  max-width: 1200px;
  height: auto;
}

.city-map {
  width: 100%;
  height: auto;
  display: block;
}

/* Style for bold text in event info */
.event-info strong {
  font-weight: bold;
  font-family: "fett", sans-serif;
}

.event-pin {
  position: absolute;
  cursor: pointer;
  z-index: 10;
  transform: translate(-50%, -100%);
}

.event-pin .pin-dot {
  width: 10px;
  height: 10px;
  background: #D38F0A; /* Orange */
  border-radius: 50%;
  border: 1.5px solid #5A2E2E; /* Brown border */
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.event-pin .event-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #D38F0A; /* Orange background */
  color: #FAF9F6; /* Light text */
  padding: 4px 8px;
  border-radius: 2px;
  font-size: 10px;
  white-space: nowrap;
  margin-bottom: 5px;
  opacity: 0;
  transition: opacity 0.3s;
}

.event-pin:hover .event-label {
  opacity: 1;
}

.event-info {
  position: absolute;
  background: rgba(255, 253, 250, 0.95);
  border: 2px solid #5A2E2E;
  border-radius: 8px;
  padding: 10px;
  width: 220px;   
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 20;
  display: none;
}

.event-info h3 {
  color: #D38F0A;
  font-size: 14px;
  margin-left: 10px;
}

.event-info p {
  color: #5A2E2E;
  font-size: 12px;
  font-family: "Sohne-Leicht";
  margin-left: 10px;
  text-align: center;
}

.event-info .date-list {
  color: #5A2E2E;
  font-family: "Sohne-Leicht";
  font-size: 10px;
  margin-left: 10px;
}

.close-info {
  position: absolute;
  top: 5px;
  right: 8px;
  background: none;
  border: none;
  font-size: 15px;
  cursor: pointer;
  color: #5A2E2E;
}


/* Constrain video container height on mobile */
@media screen and (max-width: 900px) {

  /*videos.html*/
  .video-wrapper {
    min-height: 300px; /* Flexible minimum height for tablets */
    margin: 0 auto 2rem auto;
    overflow: visible; /* Ensure content isn't cut off */
    max-height: 600px;
  }
  
  .video-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 2rem auto;
    max-width: 100vw;
  }
  
  .youtube-video {
    padding-bottom: 45%; /* Make videos shorter on mobile */
  }

  /*mymixes.html*/
  #mainContent, .hero {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    
  }
  .mix-grid {
    grid-template-columns: 1fr; /* one column */
    gap: 2rem; /* reduce gap between containers */
    max-width: 70%; /* allow full width */
    padding: 0 1rem; /* smaller side padding */
    margin-top: 3rem; /* less space below logo/header */
  }

  .mix-container {
    min-height: 400px;
    width: 100%; /* stretch wider */
  }

  .mix-description {
    padding: 0.75rem;
    min-height: 120px;
  }

  .mix-description h3 {
    font-size: 0.9rem;
  }

  .mix-description p {
    font-size: 0.65rem;
    line-height: 1.3;
  }

  .mix-meta {
    font-size: 0.65rem;
    padding: 0.4rem 0.75rem;
  }

  iframe {
    height: 220px;
  }

  /*contact.html*/
.contact-main {
    flex-direction: column !important;
    min-height: auto !important;
   
  }

   /* Contact form section - proper padding */
  .contact-main .contact-form-section {
    padding: 1rem 6rem  !important; /* Your desired padding */
    width: 72% !important;
    max-width: 72% !important;
  }
  
  /* Contact info section - matching padding */
  .contact-main .contact-info-section {
    padding: 1rem 6rem !important; /* Same padding as form section */
    width: 72% !important;
    max-width: 72% !important;
  }

  /* Hero section adjustments */
  .contact-hero {
    padding: 0 5rem 0 5rem ;
    min-height: 60vh; /* Shorter on mobile */
  }
  
  .contact-hero h1 { 
    font-size: 1.2rem; 
  }
  
  .contact-hero p { 
    font-size: 0.65rem; 
    max-width: 100%; 
    margin: 0 auto; 
  }
  
  /* Fix input and placeholder font sizes */
  .contact-form input,
  .contact-form textarea {
    font-size: 0.65rem; /* Input text size */
  }
  
  .contact-form input::placeholder,
  .contact-form textarea::placeholder {
    font-size: 0.5rem; /* Smaller placeholder text */
  }
  
  /* Button styling */
  .submit-btn {
    font-size: 0.6rem;
    padding: 0.8rem 1.5rem;
  }
  
  /* Contact info section headings and text */
  .contact-info-section h2 {
    font-size: 1rem;
  }
  
  .contact-detail h3 {
    font-size: 0.8rem;
  }
  
  .contact-detail p {
    font-size: 0.6rem;
  }
  
  /* Music player section */
  .music-player-section {
    padding: 1.5rem;
    margin-top: 2rem;
    
  }
  
  .listen-btn {
    font-size: 0.6rem;
    padding: 0.7rem 1.5rem;
  }

  /* Slightly reduce logo size visually so it doesn't take too much space on tablets */
  .logo-image {
    height: 80px;
    max-height: 80px;
  }

  /*event.html */
  .hero.hero-map {
    padding: 4rem 2rem 6rem 2rem;
  }
  
  .map-container {
    width: 90%;
    max-height: calc(100vh - 160px);
    min-height: 300px;
  }
  .header-city {
    padding: 4rem 2rem 1rem 2rem; /* More top padding to account for logo */
    
  }
  
  .map-container-city {
    width: 90%;
    max-height: none; /* Remove height constraint */
    min-height: auto; /* Remove min-height constraint */
    margin: 0 auto 1rem auto; /* Add bottom margin */
  }
  
  .event-info {
    width: 200px; /* Slightly smaller popup on tablets */
  }
  
  .event-info h3 {
    font-size: 13px;
  }
  
  .event-info p,
  .event-info .date-list {
    font-size: 11px;
  }
  .city-label {
    font-size: 9px;
    padding: 5px 10px;
  }
  .city-title {
    font-size: 1.2em;
    margin: 10px 0 15px 0; /* More bottom margin before map */
  }
}

@media screen and (max-width: 480px) {
  /*logo*/
  .logo-container {
    top: 0.4rem;
    left: 0.4rem;
  }

  /*bottom menu*/
  .bottom-menu {
    bottom: 0.5rem;
    padding: 0 1rem;
    z-index: 100;
  }

  .bottom-menu .menu-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-left: 0.4rem; /* Use margin instead of padding */
  }

  .bottom-menu .menu-right {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-right: 1.5rem; /* Use margin instead of padding */
  }
  /*video.html*/
  /* Video grid - properly centered (same as mix-grid) */
.video-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    width: 78%;
    max-width: 78%;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* Video wrappers (same as mix-container) */
.video-wrapper {
    width: 100%;
    max-width: 100%;
    min-height: 400px;
    margin: 0;
    box-sizing: border-box;
}

/* Ensure YouTube iframes don't overflow (same as mix-container iframe) */
/* YouTube iframes - responsive sizing */
.youtube-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* YouTube video container */
.youtube-video {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio for YouTube */
    height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* Video descriptions (same as mix-description) */
.video-description {
    padding: 0.75rem;
    min-height: auto;
    box-sizing: border-box;
}

.video-description h3 {
    font-size: 0.9rem;
    margin: 0 0 0.5rem 0;
}

.video-description p {
    font-size: 0.65rem;
    line-height: 1.3;
    margin: 0;
}

/* Video meta (same as mix-meta) */
.video-meta {
    font-size: 0.65rem;
    padding: 0.4rem 0.75rem;
    box-sizing: border-box;
}
  /*mymixes.html*/
  /* Ensure body and html don't overflow */
  html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  
  /* Main content and hero adjustments */
  #mainContent, .hero {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  
  /* Hero specific adjustments for mobile */
  .hero {
    padding: 4rem 1rem 2rem 1rem; /* Space for logo and menu */
  }
  
  /* Mix grid - properly centered */
  .mix-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    width: 78%;
    max-width: 78%;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
  }
  
  /* Mix containers */
  .mix-container {
    width: 100%;
    max-width: 100%;
    min-height: 400px;
    margin: 0;
    box-sizing: border-box;
  }
  
  /* Ensure iframes don't overflow */
  .mix-container iframe {
    width: 100%;
    height: 220px;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Mix descriptions */
  .mix-description {
    padding: 0.75rem;
    min-height: 120px;
    box-sizing: border-box;
  }
  
  .mix-description h3 {
    font-size: 0.9rem;
    margin: 0 0 0.5rem 0;
  }
  
  .mix-description p {
    font-size: 0.65rem;
    line-height: 1.3;
    margin: 0;
  }
  
  /* Mix meta */
  .mix-meta {
    font-size: 0.65rem;
    padding: 0.4rem 0.75rem;
    box-sizing: border-box;
  }

  /*contact.html*/
  /* Use body prefix to increase specificity */
  .contact-main {
    flex-direction: column !important;
    min-height: auto !important;
    padding: 1rem 0 1rem 0 !important;
  }

   /* Contact form section - proper padding */
  .contact-main .contact-form-section {
    padding: 1rem 4.5rem 1rem 4.5rem !important; /* Your desired padding */
    max-width: 72% !important;
  }
  
  /* Contact info section - matching padding */
  .contact-main .contact-info-section {
    padding: 1rem 4.5rem 1rem 4.5rem !important; /* Same padding as form section */
    width: 72% !important;
    max-width: 72% !important;
  }

  /* Hero section adjustments */
  .contact-hero {
    padding: 0 4rem;
    min-height: 60vh; /* Shorter on mobile */
  }
  
  .contact-hero h1 { 
    font-size: 1.2rem; 
  }
  
  .contact-hero p { 
    font-size: 0.65rem; 
    max-width: 95%; 
    margin: 0 auto; 
  }
  
  /* Fix input and placeholder font sizes */
  .contact-form input,
  .contact-form textarea {
    font-size: 0.65rem; /* Input text size */
  }
  
  .contact-form input::placeholder,
  .contact-form textarea::placeholder {
    font-size: 0.5rem; /* Smaller placeholder text */
  }
  
  /* Button styling */
  .submit-btn {
    font-size: 0.6rem;
    padding: 0.8rem 1.5rem;
  }
  
  /* Contact info section headings and text */
  .contact-info-section h2 {
    font-size: 1rem;
  }
  
  .contact-detail h3 {
    font-size: 0.8rem;
  }
  
  .contact-detail p {
    font-size: 0.6rem;
  }
  
  /* Music player section */
  .music-player-section {
    padding: 1.5rem;
    margin-top: 2rem;
    
  }
  
  .listen-btn {
    font-size: 0.6rem;
    padding: 0.7rem 1.5rem;
  }
  
  /*event.html*/
  .header-city {
    padding: 6rem 1rem 5rem 1rem; /* Even more spacing on small screens */
 
  }
  
  .map-container-city {
    width: 95%;
    max-height:100vh; /* Remove height constraint */
    min-height: auto; /* Remove min-height constraint */
    margin: 0 auto 1rem auto; 
  }
  
  .event-info {
    width: 180px; /* Even smaller popup on mobile */
  }
  
  .event-info h3 {
    font-size: 12px;
  }
  
  .event-info p,
  .event-info .date-list {
    font-size: 10px;
  }
  
  .event-label {
    font-size: 9px !important;
    padding: 3px 6px !important;
  }

  .hero.hero-map {
    padding: 6rem 1rem 8rem 1rem;
  }
  
  .map-container {
    width: 95%;
    max-height: calc(100vh - 180px);
    min-height: 300px;
  }
  
  .city-label {
    font-size: 10px;
    padding: 6px 12px;
    border-width: 1px;
  }
  .city-title {
    font-size: 1.1em;
    margin: 5px 0 10px 0; /* More space before map */
  }
  
  .city-label.label-right {
    margin-left: 12px;
  }
  
  .city-label.label-left {
    margin-right: 12px;
  }
}