/* =========================
   BACKGROUND
   ========================= */
#bg{
  position: fixed;
  inset: 0;
  background: #000 center / cover no-repeat;
  transition: opacity 350ms ease;
  opacity: 1;
  z-index: 0;
}
#bg.is-fading{ opacity: 0; }

/* =========================
   NAV PANEL
   ========================= */
.panel{
  position: fixed;
  top: 18px;
  left: 18px;
  width: 300px;
  max-width: calc(100vw - 36px);

  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  padding: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);

  z-index: 10;
}

.title{
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px 0;
}

/* from map.html */
.links{ display: flex; gap: 10px; }
.link{
  color: rgba(255,255,255,0.80);
  text-decoration: none;
  font-size: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}
.link:hover{ background: rgba(255,255,255,0.10); }

.nav{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
  color: #fff;
}
.nav-item:hover{ background: rgba(255,255,255,0.18); }

.nav-divider{
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: 6px 0;
}
	
/* =========================================
   Slideshow override: TITLE ABOVE IMAGE
   (matches slideshow.html structure:
    slideTitle is in .slide-stage,
    slideImg + slideMetaWrap are in .slide-frame)
   ========================================= */

/* keep overlay on top */
#overlay{
  z-index:99999 !important;
  position:fixed !important;
  inset:0 !important;
}

/* stack title row + frame row */
#overlay .slide-stage{
  display:grid !important;
  grid-template-rows:auto 1fr !important;
  justify-items:center !important;
  align-items:start !important;
  row-gap:10px !important;
}

/* title bar (child of .slide-stage) */
#overlay #slideTitle{
  grid-row:1 !important;
  width:min(1100px, 92vw) !important;
  padding:6px 10px !important;
  box-sizing:border-box !important;
  background:rgba(0,0,0,0.55) !important;
  border-radius:6px !important;
}

/* frame (holds image + meta) goes under title */
#overlay .slide-frame{
  grid-row:2 !important;
  justify-self:center !important;
}

/* image sizing */
#overlay #slideImg{
  display:block !important;
  max-width:92vw !important;
  max-height:85vh !important;
  width:auto !important;
  height:auto !important;
}
/* =========================================
   "more info..." button on top-left of image
   ========================================= */

/* anchor more info... button to the image frame */
#overlay .slide-frame{
  position:relative !important;
  overflow:visible !important;
}

/* ensure the image is below UI */
#overlay #slideImg{
  position:relative !important;
  z-index:1 !important;
}

/* place the toggle over the image */
#overlay #slideMetaToggle{
  position:absolute !important;
  top:-20px !important;
  left:10px !important;
  z-index:99999 !important;

  display:inline-block !important;
  visibility:visible !important;
  opacity:.75 !important;
  pointer-events:auto !important;

  background:rgba(0,0,0,0.60) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.18) !important;
  border-radius:10px !important;
  padding:6px 10px !important;
}

/* Make the image frame the positioning context */
#overlay .slide-frame{
  position: relative !important;
}

/* Keep the image below the UI */
#overlay #slideImg{
  position: relative !important;
  z-index: 1 !important;
}

/* more info... / hide info... */
#overlay #slideMetaWrap{
  position: absolute !important;
  top:30px !important;
  left: 20px !important;

  display: block !important;
  width: 600px;

  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;

  z-index: 10 !important;
}

/* Hide/show Description Card */
#overlay #slideMetaWrap.is-hidden{
  display: none !important;
}

/* DESCRIPTION CARD */
#overlay #slideMeta{
  /* sizing: hug content, but wrap at ~600px */
  display: inline-block;                 /* shrink-wrap without breaking toggle */
  max-width: min(600px, 92vw) !important;
  width: auto !important;

  /* grow vertically with text */
  height: auto !important;
  max-height: 55vh !important;
  overflow: auto !important;
  
  margin-top: 8px !important;
  padding: 18px 22px !important;

  background: rgba(0,0,0,0.85) !important;
  border-radius: 12px !important;

  font-size: 14px !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

/* If any inner element was positioned, force it back into flow */
#overlay #slideMeta > *{
  position: static !important;
}