/* Shared Menu Styles */
/* 
Z-index hierarchy for sliders:
- story sliders (200): Story slider backgrounds
- story slider text (201): Text overlays on story sliders  
- story click-blocker (210): Covers story content when sliders are open

Z-index hierarchy for menu:
- menu-icon (1000): Clickable to open menu, covered by story click-blockers when needed
- menu-slider (1020): Menu background 
- menu links (1030): Navigation links for functionality
*/

/* Fixed menu container that mimics canvas centering */
.menu-container {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vh * 16 / 9); /* Match section aspect ratio 16:9 */
  height: 100vh;
  pointer-events: none; /* Allow clicks through to content below */
  z-index: 999; /* Below menu elements but above everything else */
}

/* When viewport is narrower than 16:9, expand to full width */
@media (max-aspect-ratio: 16/9) and (orientation: landscape) {
  .menu-container {
    width: 100vw;
    left: 0;
    transform: none;
  }
}

@media (orientation: portrait) {
  .menu-container {
    width: 100vw;
    height: auto;
    transform: none;
    left: 0;
  }
}

.sticky {
  position: absolute; /* Relative to the menu-container */
  cursor: pointer;
  pointer-events: auto; /* Re-enable clicks for menu elements */
}

#audio-control {
  top: 0; /* Align with menu icon */
  right: 13.0556vh;
  width: auto;
  height: 9.3519vh; /* Same height as menu icon */
  aspect-ratio: 44 / 101;
  background: var(--icon_audio_svg_url) no-repeat;
  background-size: contain;
  z-index: 1000;
}
@media (orientation: portrait) {
  #audio-control {
    right: 7.3438vw;
    width: 3.2292vw;
    height: auto;
  }
}

#menu-icon {
  top: 0;
  right: 0;
  width: auto; /* 141px */
  height: 9.3519vh; /* 101px */
  aspect-ratio: 141 / 101;
  background: var(--menu_icon_svg_url) no-repeat;
  background-size: contain;
  z-index: 1000;
}
@media (orientation: portrait) {
  #menu-icon {
    width: 7.3438vw;
    height: auto;
  }
}

#menu-slider {
  top: 0;
  right: 2.3148vh;
  width: auto; /* 200px */
  height: 45.5556vh; /* 492px */
  aspect-ratio: 200 / 492;
  background: url(assets/menu-slider.png) no-repeat;
  background-size: contain;
  z-index: 1020;
  pointer-events: auto;
}
@media (orientation: portrait) {
  #menu-slider {
    top: 0vw;
    right: 1.3021vw;
    width: 10.4167vw;
    height: auto;
  }
}

/* Menu Link Elements */
#link-home-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 5.7407vh;
  width: auto; /* 64px */
  height: 2.7778vh; /* 30px */
  aspect-ratio: 64 / 30;
  background: var(--link_home_text_svg_url) no-repeat;
  background-size: contain;
  cursor: pointer;
  z-index: 1030;
}
@media (orientation: portrait) {
  #link-home-text {
    left: 50%;
    transform: translateX(-50%);
    top: 3.2292vw;
    width: 3.3333vw;
    height: auto;
  }
}

#link-bio-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10.7407vh;
  width: auto; /* 110px */
  height: 4.9074vh; /* 53px */
  aspect-ratio: 110 / 53;
  background: var(--link_bio_text_svg_url) no-repeat;
  background-size: contain;
  cursor: pointer;
  z-index: 1030;
}
@media (orientation: portrait) {
  #link-bio-text {
    left: 50%;
    transform: translateX(-50%);
    top: 6.0417vw;
    width: 5.7292vw;
    height: auto;
  }
}

/* Footer Bar */
#footer-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: rgba(216, 185, 163, 0.3);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 1000;
  cursor: default; /* Remove pointer cursor on hover */
}

#social-icons {
  display: flex;
  gap: 5px;
  align-items: center;
  transform: translateY(-3px);
}

.social-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  pointer-events: auto; /* Re-enable clicks for social icons */
}

.social-icon:hover {
  opacity: 1;
}

#email-text {
  color: #1e100a;
  font-size: 14px;
  font-family: "Georgia", serif;
  text-shadow: none;
}

#icon-email {
  background: var(--icon_email_svg_url) no-repeat center;
  background-size: contain;
}

#icon-facebook {
  background: var(--icon_facebook_svg_url) no-repeat center;
  background-size: contain;
  display: none;
}

#icon-instagram {
  background: var(--icon_instagram_svg_url) no-repeat center;
  background-size: contain;
  display: none;
}

#copyright {
  color: #1e100a;
  font-size: 14px;
  font-family: "Georgia", serif;
  text-shadow: none;
}

@media (orientation: portrait) {
  /* Stack footer elements vertically in portrait mode */
  #footer-bar {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 10px 15px;
  }

  #social-icons {
    gap: 5px;
    transform: translateY(-2px);
  }

  .social-icon {
    width: 28px;
    height: 28px;
  }

  #copyright {
    font-size: 12px;
    margin-top: 5px;
    margin-left: 15px;
  }

  #email-text {
    font-size: 12px;
  }
}