/* main.css - improved */
/* Typography */
:root {
  --muted: #616766;
  --bg: #000;
  --accent: #000;
  --max-width: 1200px;
}

body, h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway", sans-serif;
  color: var(--muted);
  line-height: 1.8;
}

body, html {
  height: 100%;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #ffffff;
}

/* Ensure modal hides by default */
#modal { display: none; }

/* Parallax images */
.bgimg-1, .bgimg-2, .bgimg-3 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* background images (keep the same paths) */
.bgimg-1 { background-image: url('/assets/images/image00.png'); min-height: 100%; }
.bgimg-2 { background-image: url('/assets/images/image01.png'); min-height: 400px; }
.bgimg-3 { background-image: url('/assets/images/image02.png'); min-height: 400px; }

.w3-wide { letter-spacing: 10px; }
.w3-hover-opacity { cursor: pointer; }

/* Make .wrapper gap resolved and responsive */
.wrapper { display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; }
.wrapper > div { flex: 1 1 0; }

/* Gallery rows: spacing */
.gallery-row { margin-bottom: 1rem; }

/* Modal content tweak */
#modal .w3-modal-content { max-width: 90%; padding: 1rem; box-sizing: border-box; }
#modalImg { max-height: 80vh; width: auto; max-width: 100%; display: block; margin: 0 auto; }

/* Small-screen fixes: turn off fixed background */
@media only screen and (max-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3 { background-attachment: scroll; }
  .bgimg-1 { min-height: 100%; }
  .bgimg-2, .bgimg-3 { min-height: 400px; }
}

/* Visually-hidden for accessible labels */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
  border: 0;
}

/* Small helper for error messages */
.error-message { font-size: 0.9rem; margin-top: 0.25rem; }

/* Make sure nav toggle looks clickable */
#navToggle { background: transparent; border: none; }

/* Minor responsive improvements */
@media (max-width: 600px) {
  .w3-xlarge { font-size: 1.6rem; }
}

/* Improved modal with transitions */
.w3-modal-content {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* full-screen modal layout */
#modal .w3-modal-content {
  max-width: 100%;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.95);
  box-sizing: border-box;
}

/* When modal is opened we add .open to animate-in */
#modal.open .w3-modal-content {
  opacity: 1;
  transform: none;
}

/* Image sizing */
#modalImg {
  max-height: 72vh;
  max-width: 90vw;
  width: auto;
  height: auto;
  object-fit: contain;
  display:block;
}

/* Caption */
#modalCaption {
  color: white;
  text-align: center;
  padding: 0.75rem 1rem;
  max-width: 90%;
  font-size: 1rem;
  line-height: 1.3;
}

/* Modal navigation buttons */
#modalPrev, #modalNext {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: white;
  padding: 0.8rem;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 1001;
  border-radius: 6px;
}

#modalPrev { left: 0.6rem; }
#modalNext { right: 0.6rem; }

#modalClose {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1001;
  background: rgba(0,0,0,0.6);
  border: none;
  color: white;
  padding: 0.6rem;
  border-radius: 6px;
}

/* Slide transition classes (used briefly for direction) */
.slide-next-enter, .slide-prev-enter { opacity: 0; transform: translateX(0); }
.slide-next-enter-active { transform: translateX(0); opacity: 1; transition: transform 0.35s ease, opacity 0.35s ease; }
.slide-prev-enter-active { transform: translateX(0); opacity: 1; transition: transform 0.35s ease, opacity 0.35s ease; }

/* Reduce heavy drop shadows and expensive CSS on mobile */
@media (max-width: 600px) {
  #modalCaption { font-size: 0.95rem; padding: 0.5rem; }
  #modalPrev, #modalNext { padding: 0.5rem; font-size: 1.2rem; }
}

/* subtle accessibility focus */
.gallery-image:focus {
  outline: 3px solid rgba(255,255,255,0.25);
  outline-offset: 2px;
}