/* Shared mobile & tablet refinements, loaded LAST on every page (on top of each
   page's own stylesheet). Rules are additive and gated to small screens / touch
   input, so desktop layouts are unchanged. */

/* never let a stray wide element cause horizontal scrolling on a phone.
   Use `clip`, not `hidden`: `overflow-x: hidden` on <body> turns the body into a
   scroll container, which breaks window.scrollTo / window.scrollY (e.g. the
   pagination "scroll to top"). `clip` prevents horizontal overflow without
   establishing a scroll container, so vertical page scrolling stays on the window. */
html, body { max-width: 100%; overflow-x: clip; }
img, video, iframe { max-width: 100%; height: auto; }
/* NB: do not constrain <canvas> globally — it breaks Leaflet's heatmap canvas
   sizing. Leave Leaflet's own images/canvases to Leaflet. */
.leaflet-container img,
.leaflet-container canvas { max-width: none; }

/* iOS zooms the viewport when a focused control's text is < 16px; bump form
   controls to 16px on phones so focusing a field doesn't jump the layout. */
@media (max-width: 767px) {
  input, select, textarea { font-size: 16px; }
}

/* touch devices: hover "lifts" stick after a tap, so remove them, and keep tap
   targets a comfortable height. */
@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .card:hover,
  .poi-card:hover,
  .pager-btn:hover,
  .view-switch button:hover,
  .site-nav-link:hover,
  .audience-options label:hover span { transform: none; }

  .btn, .pager-btn, .view-switch button { min-height: 42px; }
  input, select, textarea { min-height: 42px; }
}

/* tablets and below: a touch more breathing room, smaller display headings */
@media (max-width: 760px) {
  .masthead h1 { font-size: clamp(1.7rem, 7vw, 2.6rem); }
  .masthead .sub { font-size: 0.95rem; }
}

/* phones: tighten side padding and stack the busy header links */
@media (max-width: 560px) {
  .masthead-inner { padding: 1.5rem 1.05rem 1.7rem; }
  .site-nav-inner { padding: 0.5rem 1rem; }
  .back-link, .masthead-link { display: inline-block; margin-top: 0.7rem; }
  .btn { padding-inline: 1rem; }
}