/*
 * tngosm.css - keep Leaflet underneath TNG's chrome.
 *
 * Leaflet assigns high z-index values to its own layers: panes run 200-700 and
 * the control corners sit at 800-1000. Those numbers are absolute, so on a TNG
 * page they compete directly with the header menus (the template menus use
 * z-index 10, Bootstrap dropdowns use 1000). The map markup appears later in
 * the document, so it won every comparison and painted over the open dropdown.
 *
 * Giving .leaflet-container a position and an explicit z-index makes it a
 * stacking context. Every Leaflet z-index is then resolved INSIDE the map
 * rather than against the page, and the whole map participates in the page as
 * a single element at z-index 0 - underneath any positioned chrome.
 *
 * This is the fix rather than lowering Leaflet's individual values, which
 * would have to be redone for every pane and control and would break again on
 * a Leaflet upgrade.
 */
.leaflet-container {
	position: relative;
	z-index: 0;
}

/*
 * Expand / fullscreen control.
 *
 * TNG writes the map size as an INLINE style ("width: 100%; height: 400px").
 * Inline styles beat the browser's built-in :fullscreen rule, so without the
 * !important overrides below a fullscreened map renders 400px tall on a black
 * screen. This is the whole reason these rules exist.
 */
.leaflet-container:fullscreen,
.leaflet-container:-webkit-full-screen,
.leaflet-container:-ms-fullscreen,
.leaflet-container.tngosm-expanded {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	border-radius: 0 !important;
}

/*
 * Fallback overlay for browsers without element fullscreen (notably iOS
 * Safari). z-index has to clear TNG's own chrome, which goes up to 100000.
 * This deliberately overrides the z-index: 0 containment rule above, and only
 * while expanded.
 */
.leaflet-container.tngosm-expanded {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100002 !important;
}

.tngosm-fs-btn {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 18px 18px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 4H4v5M15 4h5v5M15 20h5v-5M9 20H4v-5'/%3E%3C/svg%3E");
}

.tngosm-expanded .tngosm-fs-btn {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 9h5V4M20 9h-5V4M20 15h-5v5M4 15h5v5'/%3E%3C/svg%3E");
}