/* ===== SilverTech Splash (TEMPLATE) – clean layout for full-height map ===== */

/* Base layout */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: system-ui, sans-serif;
}

/* Make the page fill the viewport and let the map area expand */
body { min-height: 100vh; display: flex; flex-direction: column; }

/* Optional header/footer (keep if your page uses them) */
.header { padding: 1.25rem; font-size: 1.75rem; font-weight: 700; }
.footer { padding: .75rem; font-size: .9rem; color: #666; text-align: center; }

/* The main area expands to fill remaining vertical space */
main { flex: 1; display: block; }

/* Map container fills main */
.map { height: 100%; min-height: 420px; border-top: 1px solid #ddd; }
#map { width: 100%; height: 100%; display: block; }

/* -------- Modal (optional; used elsewhere on site) -------- */
.modal {
  position: fixed; inset: 0; display: none; justify-content: center; align-items: center;
  background: rgba(0,0,0,0.5); z-index: 2000;
}
.modal.open { display: flex; }
.modal-content {
  background: #fff; padding: 1.25rem 1.5rem; border-radius: 12px; width: 320px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.modal-content h2 { margin-top: 0; }
.close { float: right; font-size: 1.5rem; cursor: pointer; }

/* -------- Leaflet control spacing (keeps boxes off the attribution) -------- */
.leaflet-bottom.leaflet-right .leaflet-control {
  margin-bottom: 26px;
  margin-right: 10px;
}

/* NOTE:
   - Do NOT position .info-box here. It is rendered as a Leaflet control by JS.
   - Legend styling is injected by JS when ENABLE_LEGEND is turned on.
   - No 80vh caps remain; the map now fills the browser window between header/footer.
*/