/* ========== Base page ========== */
body { background:#fefefe; }
.container { max-width:48em; margin:20px auto; }
.header { text-align:left; padding:0; margin-bottom:2em; }
.header h1 { font-size:2.5em; font-weight:normal; color:#111; }

/* ========== Overview map ========== */
#overview-map {
  height:400px; width:100%;
  margin-bottom:2em; border-radius:4px; border:1px solid #ccc;
}

/* ========== Category picker ========== */
.picker-container { margin-bottom:2em; }
#category-picker g { cursor:pointer; }
#category-picker rect {
  fill:#f0f0f0; stroke:#ccc; stroke-width:1px;
  transition:all .2s ease-in-out;
}
#category-picker text {
  font:10px Verdana, serif;
  text-anchor:middle; fill:#555; pointer-events:none;
}
#category-picker g:hover rect { fill:#e9e9e9; }
#category-picker g.selected rect { fill:#d4ebf2; stroke:#4682b4; stroke-width:2px; }
#category-picker g.selected text { fill:#000; font-weight:700; }

/* ========== Stats table ========== */
.stats-table { width:auto; border:none; margin-bottom:2em; white-space: pre-line; }
.stats-table td { border:none; padding:.1em .5em; line-height:1.6; }
.stats-table .stat-label { font-weight:700; text-align:right; }

/* ========== Map + Elevation containers (hidden until data loads) ========== */
.map-container, .elevation-container { display:none; }
.elevation-container { height:240px; margin-bottom:2em; }

.info-panel { padding:0; }
.loading, .error { text-align:center; padding:40px; color:#666; }
.error { color:#dc3545; background:#f8d7da; border-radius:6px; }

.map-container {
  width: 100%;
  height: 400px;
}

#map {
  width: 100%;
  height: 100%;
  border:1px solid #ccc;
}

/* ========== Fullscreen support (Safari/iOS + standard) ========== */
.leaflet-pseudo-fullscreen {
  position:fixed !important; inset:0 !important;
  width:100vw !important; height:100vh !important; height:100dvh !important;
  z-index:99999 !important;
}
.leaflet-container:fullscreen,
.leaflet-container:-webkit-full-screen {
  width:100vw !important; height:100vh !important; height:100dvh !important;
}

/* ========== Fullscreen control (match Leaflet zoom buttons) ========== */
/* Support BOTH variants: integrated with zoom bar and separate control */
.leaflet-bar a.leaflet-control-zoom-fullscreen,
.leaflet-bar a.leaflet-control-zoom-fullscreen.fullscreen-icon,
.leaflet-control-fullscreen a,
a.leaflet-control-fullscreen-button {
  display:block;
  box-sizing:content-box;
  width:30px; height:30px; line-height:28px;
  padding:0; text-align:center;

  /* same visuals as zoom buttons */
  background:#fff; background-image:none; color:#000;
}

/* Enter fullscreen icon */
.leaflet-bar a.leaflet-control-zoom-fullscreen::before,
.leaflet-bar a.leaflet-control-zoom-fullscreen.fullscreen-icon::before,
.leaflet-control-fullscreen a::before,
a.leaflet-control-fullscreen-button::before {
  font-size: 24px;
  content: "⛶";        /* or "⤢" */
}

/* Hover effect to match Leaflet zoom buttons */
.leaflet-control-fullscreen a,
a.leaflet-control-fullscreen-button,
.leaflet-bar a.leaflet-control-zoom-fullscreen {
  transition: background-color .15s ease-in-out;
  cursor: pointer;
}

.leaflet-control-fullscreen a:hover,
a.leaflet-control-fullscreen-button:hover,
.leaflet-bar a.leaflet-control-zoom-fullscreen:hover {
  background-color: #f4f4f4; /* same as .leaflet-bar a:hover */
}

/* (optional) pressed + keyboard focus states for parity */
.leaflet-control-fullscreen a:active { background-color: #eee; }
.leaflet-control-fullscreen a:focus { outline: 2px solid #666; outline-offset: -2px; }

/* ========== Photos ========== */

.photos-container {
  display: flex;
  justify-content: space-between; /* Aligns children (the <a> tags) in a row */
  gap: 10px; /* Adds a small space between the photos */
  margin-top: 0.5em; /* Reduced space above the photos */
  margin-bottom: 1em; /* Defines the space below the photos */
}

/* Style for the link wrapping each image */
.photos-container a {
  flex-basis: calc(33.333% - 10px); /* Sets the width for each of the 3 items, accounting for the gap */
  display: block;
  aspect-ratio: 1 / 1; /* Enforces a square shape */
}

/* Style for the image itself */
.photos-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* Ensures the image fills the square without being distorted */
  border-radius: 6px;     /* Defines rounded corners */
  border: 1px solid #ddd; /* Adds a light border */
}