body {
  font-family: 'Times New Roman', serif;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.header {
  overflow: hidden;
  /* background-color: #f1f1f1; */
  padding: 20px 10px;
}

/* header keeps original flow; slideshow will be widened to align with header */

.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  /* line-height: 25px; */
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  /* font-weight: bold; */
}

.header a:hover {
  /* background-color: #ddd; */
  color: black;
}

.header a.active {
  background-color: dodgerblue;
  color: white;
}

.header-right {
  float: right;
}

/* Mobile menu/hamburger hidden by default on large screens */
.hamburger,
.mobile-menu {
  display: none;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .header-right {
    display: none;
  }

  /* no header-inner on small screens */
}

 /* Navbar container */
.navbar {
  overflow: hidden;
  /* background-color: #333; */
  /* font-family: Arial; */
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  /* color: white; */
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  /* color: white; */
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  /* background-color: red; */
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

.slideshow-container {
  /* Make the slideshow container span the page width minus the header horizontal padding
     so its edges line up with the header content. Header uses 10px left/right padding. */
  width: calc(100% - 20px);
  max-width: none;
  margin: 0 10px;
  height: var(--slide-height, 500px);
  position: relative;
  overflow: hidden;
}

.slides-track {
  display: flex;
  align-items: center;
  height: 100%;
  transition: transform 0.5s ease;
  will-change: transform;
}

.mySlides {
  flex: 0 0 auto; /* size to content (image width) */
  height: 100%;
  display: flex;
  flex-direction: column; /* stack image above caption */
  align-items: center; /* center horizontally */
  justify-content: flex-start; /* start from top so caption sits below image */
  position: relative;
  padding: 0 16px; /* small gap between slides */
}

.mySlides img {
  display: block;
  width: auto;   /* scale width to preserve aspect ratio */
  height: auto;
  /* reserve space for caption under the image so caption doesn't overlap
     subtract an estimated caption height (48px) from available image space */
  max-height: calc(100% - 60px);
  max-width: none; /* allow image to be wider than container so it can be clipped */
  margin: 0 auto;
}

/* Hide any per-slide long description in the slide itself; show only in modal */
.mySlides .longdesc,
.mySlides .longdescriptiontext {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.titletext {
  position: static;
  color: #222;
  font-size: 16px;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  margin-top: 6px;
  background: transparent;
}

.descriptiontext {
  color: #696969;
  font-size: 14px;
  position: static;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  background: transparent;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* Modal for full-screen image view */
.image-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 16000;
  align-items: flex-start; /* start at top so longdesc doesn't reduce image space */
  justify-content: center;
  padding: 40px 20px; /* allow room to scroll */
  overflow: auto; /* allow scrolling the whole modal when content exceeds viewport */
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.image-modal .modal-content {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* center image vertically */
  gap: 12px;
  transform: translateY(8px) scale(0.99);
  opacity: 0;
  transition: transform 240ms cubic-bezier(.2,.9,.2,1), opacity 240ms ease;
}

.image-modal .modal-image {
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  display: block;
  margin: 0 auto;
}

/* Orientation-specific sizing applied by JS */
.image-modal .modal-image.landscape {
  max-width: calc(100% - 40px);
  max-height: calc(100% - 120px);
}

.image-modal .modal-image.portrait {
  max-height: calc(100% - 120px);
  max-width: calc(100% - 40px);
}

.image-modal .modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.image-modal .modal-caption {
  color: #fff;
  text-align: center;
  max-width: 90%;
}

.image-modal .modal-longdesc {
  width: 100%;
  /* do not limit height or create an inner scroll; user scrolls the modal */
  overflow: visible;
  text-align: left;
  color: #eee;
  padding: 8px 12px;
  box-sizing: border-box;
  background: rgba(0,0,0,0.15);
  border-radius: 6px;
  margin-top: 18px;
}

.image-modal .modal-longdesc:focus {
  outline: 2px solid rgba(255,255,255,0.12);
}

/* Open state: make modal visible and animate content */
.image-modal.open {
  display: flex; /* ensure layout when visible */
  opacity: 1;
  pointer-events: auto;
}

.image-modal.open .modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

:root.modal-open, .modal-open {
  overflow: hidden;
}

/* Responsive: stack slides vertically on small screens */
@media screen and (max-width: 500px) {
  .slideshow-container {
    max-width: 100%;
    width: 100%;
    height: auto; /* let images determine height */
    margin: 0 auto;
    overflow: visible; /* allow vertical stacking to show fully */
    padding: 0 8px;
  }

  .slides-track {
    flex-direction: column;
    transform: none !important;
    transition: none !important;
    align-items: stretch;
    height: auto;
  }

  .mySlides {
    width: 100%;
    height: auto;
    padding: 26px 0;
    display: block;
    flex: none;
  }

  .mySlides img {
    width: 100%;
    height: auto;
    max-height: none;
    display: block;
    margin: 0 auto;
  }

  /* hide carousel arrows on small screens */
  .prev, .next {
    display: none !important;
  }

  /* keep captions under images (they're already static) */
  .titletext, .descriptiontext {
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
  }

  /* Mobile hamburger button */
  .hamburger {
    display: block;
    position: fixed;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    padding: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 1001;
  }

  .hamburger-icon {
    display: block;
    width: 100%;
    height: 2px;
    background: #333;
    position: relative;
  }

  .hamburger-icon::before,
  .hamburger-icon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #333;
  }

  .hamburger-icon::before {
    top: -8px;
  }

  .hamburger-icon::after {
    top: 8px;
  }

  /* Mobile menu panel */
  .mobile-menu {
    display: none;
    position: fixed;
    top: 56px;
    right: 12px;
    width: 220px;
    background: white;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    border-radius: 6px;
    padding: 8px 0;
    z-index: 1000;
  }

  .mobile-menu a {
    display: block;
    padding: 10px 16px;
    color: #111;
    text-decoration: none;
  }

  .mobile-menu a:hover {
    background: #f2f2f2;
  }

  /* when mobile menu active (toggled by JS) */
  .mobile-open .mobile-menu {
    display: block;
  }
}