/* responsive-fix.css
   Overrides to improve responsiveness for index_leaflet.php without changing HTML.
   Place this file in /assets/css/ and load it from your header to make changes permanent,
   or test with the provided bookmarklet to inject dynamically in the browser.
*/

@media (max-width:1200px){
  .page-grid { max-width: 100% !important; margin: 0 12px !important; padding: 12px !important; }
}

/* Make columns stack cleanly and input widths fluid */
.col-left, .col-right, .card {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
}

/* Ensure form controls and buttons shrink correctly */
input[type="text"], input[type="time"], input[type="date"], select, .btn, button {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Map: use responsive aspect and allow height to shrink on small screens */
#map {
  width: 100% !important;
  min-height: 36vh !important;
  height: auto !important;
  aspect-ratio: 16/9;
}

/* Calendar embed responsive */
.calendar-embed, .calendar-embed iframe {
  width:100% !important;
  height: auto !important;
  min-height:36vh !important;
}

/* Make images scale */
img { max-width:100%; height:auto; }

/* Ensure toolbar/summary elements wrap instead of overflowing */
.summary, .route-summary, .controls-row {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px;
}

/* Reduce padding/margins on small screens */
@media (max-width:900px){
  .page-grid { gap:12px; padding:10px; }
  .card { padding:12px; }
  .col-left, .col-right { width:100% !important; }
  #map, .calendar-embed { min-height:40vh !important; }
}

/* Tighter on very small screens */
@media (max-width:480px){
  .page-grid { padding:8px; gap:8px; }
  .logo img { height:44px; }
  .social-links img { width:20px !important; height:20px !important; }
}

/* Prevent very long text from breaking layout */
* { word-break: break-word; }

/* Accessibility: make hamburger/menu available if any top nav overflows */
header .nav, .site-header { max-width:100%; box-sizing:border-box; }