/* Map-page overrides of the site chrome (bundle.css). Loaded LAST (after
   bundle.css and the other map CSS) so these overrides win. Lays the map page
   out as a flex column (header + map-filling <main>) so the map region fits the
   viewport without the old JS-measured --map-top offset. */

/* The old Django shell zeroed .main-container's top padding. Preserve that,
   and drop the site <main>'s vertical padding on the map page so the map
   fills the space between the site header and footer. */
.main-container {
	padding-top: 0;
}

.site-main {
	padding-block: 0;
}

/* The site's global reset (bundle.css) applies
   `img,svg,video { block-size:auto; max-inline-size:100% }` to EVERY such
   element. That clamps Leaflet's vector SVG panes — how the Geography Outlines
   (Region/Basin/Project) are drawn — so they render invisibly. Leaflet only
   self-protects `.leaflet-overlay-pane svg`, but the outlines use per-locale
   custom panes, so nothing shields them. The standalone live map has no such
   reset. Scope this narrowly to Leaflet's OWN layer elements (vector panes +
   image overlays) — NOT `.leaflet-container img` broadly, which also matched
   tooltip/popup CONTENT images and reset their CSS height (e.g.
   `.toolImg img { height:20vh }`), mis-positioning the hover tooltip on first
   open (top-aligned until the image loaded, centered thereafter). */
.leaflet-container svg,
.leaflet-image-layer {
	block-size: revert !important;
	max-inline-size: none !important;
	max-width: none !important;
}

/* --- Fit the full-viewport map inside the site chrome --- */

/* The map is a full-screen app view. Lay the page out as a flex column so the
   site header takes its natural height and <main> fills the rest of the
   viewport. #main (the map region wrapping #map + the sidebars) then fills what
   remains below the map's own nav bar. This replaces the old --map-top stopgap,
   which measured header+nav height in JS (on load/resize/fonts-ready) and
   offset three position:fixed panes by it — brittle across breakpoints. There
   is no site footer on this page (map.njk uses the no_footer option), so
   the column is just header + main. See issue #12 §C. */
body.atlasbody {
	display: flex;
	flex-direction: column;
	min-block-size: 100dvh;
}

body.atlasbody .site-main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-block-size: 0;
}

body.atlasbody .navbar-map {
	flex: 0 0 auto;
}

body.atlasbody #main {
	flex: 1 1 auto;
	min-block-size: 0;
	position: relative;
}

/* #map/.lside/.rside were position:fixed and offset by --map-top; now they fill
   #main. #map keeps its own stacking context (isolation) so Leaflet's layering
   behaves exactly as it did when #map was fixed — `position: fixed` made one
   implicitly, `position: absolute` does not. This is load-bearing: without it
   .leaflet-map-pane's z-index of 400 escapes into the page, where it beats the
   year slider and hides it behind the opaque tiles. It also means nothing inside
   the map can be stacked above the page chrome, which is why the detail popups
   are kept clear of the slider and drawers geometrically (popup-panel.js).
   The sidebars are overlay drawers (width toggled in JS), so they stay
   absolutely positioned, pinned to the top of the map region. */
body.atlasbody #map {
	block-size: auto;
	inline-size: auto;
	inset: 0;
	isolation: isolate;
	max-block-size: none;
	max-inline-size: none;
	position: absolute;
}

body.atlasbody .lside,
body.atlasbody .rside {
	block-size: 100%;
	max-block-size: 100%;
	position: absolute;
	top: 0;
}

/* Tutorial / help modals must sit above the map nav bar, which has an inline
   z-index:200000. */
body.atlasbody .modal {
	z-index: 200010 !important;
}