/* Base map styling */

html, body,#map {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: visible;
}

/* Styling for attribution */

.leaflet-control-attribution {
    bottom: 14px; /* default is 0 */
}

/* Styling for the layer control tree */

.leaflet-layerstree-header-pointer {
	display: flex;
	gap: 3px;
	align-items: center;
	font-weight: bold;
	font-size: 1.2em;
	margin-top: 0px;
	padding-top: 8px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	/* border: solid red 1px; */
}

.leaflet-layerstree-node .leaflet-layerstree-header-pointer {
    font-size: 1.1em;
	padding-top: 6px;
	margin-top: 0px; /* Adjust as needed */
}

.leaflet-layerstree-node + .leaflet-layerstree-node .leaflet-layerstree-header-pointer {
    padding-top: 6px;
	margin-top: 0px; /* Adjust as needed */
}

.leaflet-layerstree-opened, .leaflet-layerstree-closed {
	font-weight: bold;
	font-size: 1.2em;
}

.leaflet-layerstree-header-label {
	display: flex;
	gap: 6px;
	align-items: center;	
	padding-top: 2px;
	padding-bottom: 2px;
}

.leaflet-layerstree-header-name {
	display: flex;
	gap: 6px;
	align-items: center;
}

.leaflet-layerstree-header-name span {
	display: flex;
	gap: 6px;
	align-items: center;
}

.leaflet-layerstree-children {
    padding-left: 10px;
	/* border: solid green 1px;	 */
}

.leaflet-control-layers-selector[type="radio"],
.leaflet-control-layers-selector[type="checkbox"] {
  margin: 0; Remove default margin
  align-self: center; Force alignment inside flex  
}

/* Styling for the opacity slider */

#opacitySliderContainer {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: rgba(255, 255, 255, 1.0);
  padding: 4px 8px;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 6px 6px rgba(0,0,0,0.3);
  z-index: 1000;
  font-family: sans-serif;
  display: none;
}

#opacitySliderContainer svg {
  width: 24px !important;
  height: 24px !important;
  stroke: #000000 !important;
  opacity: 0.7;
  vertical-align: middle;
}

#opacitySlider {
  width: 500px;
  height: 4px;
  vertical-align: middle;
  margin: 0;
}

/* Styling for the scale bar */

.leaflet-control-better-scale {
	height: 30px;
}
.leaflet-control-better-scale-ruler-block {
    background-color: #000000;
}
.leaflet-control-better-scale-ruler {
    box-shadow: 0 6px 6px rgba(0,0,0,0.3);
}
.leaflet-control-better-scale-label {
    font-size: 15px;
    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 6px 6px #000;
}

/* Styling for north arrow */

.leaflet-control.north-arrow-control {
  display: inline-block;
  width: 50px;
  height: 100px;
  border-radius: 5px;
  overflow: hidden;
  padding: 0;
  margin: 0;
  position: absolute;
  bottom: 55px; /* Adjust so it sits above the scale */
  left: 10px;    
  box-shadow: 0 6px 6px rgba(0,0,0,0.3);
  z-index: 1000;
}

.north-arrow-control svg {
	width: 100%;
	height: 100%;
	display: block;	
}


/* Styling for zoom control */

.leaflet-control-zoom.leaflet-bar.leaflet-control {
  box-shadow: 0 6px 6px rgba(0,0,0,0.3);  
}

/* Styling for layer control */

.leaflet-control-layers.leaflet-control-layers-expanded.leaflet-control {
  box-shadow: 0 6px 6px rgba(0,0,0,0.3);  
}


/* Styling for popups */

.leaflet-popup-content a {
  display: block; /* Make all links inside Leaflet popups block-level so they stack vertically */
  margin-top: 6px; /* Add small gap from surrounding content */
}

.leaflet-popup-content figure + a {
  margin-top: 12px; /* Add space above a link that immediately follows a figure in the popups */
}