/* Reset defaults for consistency */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

body {
  /* font-family: 'Arial', Helvetica, sans-serif; /* Consistent font across elements */
  background-color: #181a1b; /* Dark background */
  color: #fff; /* White text */
}

/* Header Styling */
header {
  background: linear-gradient(90deg, #ff5722, #d81b60); /* Wildfire-themed gradient */
  padding: 10px; /* Short height */
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Shadow for depth */
  display: flex; /* Flexbox to align title and stats */
  flex-direction: column; /* Stack vertically */
  align-items: center; /* Center horizontally */
  gap: 5px; /* Small gap between title and stats */
}

h1 {
  color: white;
  font-size: 2.5em;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0; /* Remove default margin */
}

/* Stats Styling */
#stats {
  color: #fff; /* White text for contrast on gradient */
  font-size: 1em; /* Slightly smaller than title */
  opacity: 0.9; /* Slightly faded to distinguish from title */
}

#stats span {
  font-weight: bold; /* Make counts stand out */
}

/* Subheader Styling */
.subheader {
  color: #fff;
  background-color: #181a1b;
  padding-left: 15px;
}

/* Main Content */
main {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Map Styling */
#map {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Shadow for contrast */
}

/* Legend Styling */
.legend {
  padding: 6px 8px; /* Compact padding */
  font: 14px Arial, Helvetica, sans-serif;
  background-color: #181a1b; /* Dark background matching body */
  color: #aaa; /* Light gray text */
  display: flex;
  flex-wrap: wrap; /* Allows wrapping on small screens */
  gap: 20px; /* Spacing between items */
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Shadow for elevation */
  line-height: 24px; /* Consistent line spacing */
}

.legend h4 {
  text-align: center;
  font-size: 16px;
  margin: 2px 12px 8px;
  color: #888; /* Medium gray text */
  width: 100%; /* Spans full width if present */
}

.legend span {
  position: relative;
  bottom: 3px; /* Adjusts vertical alignment */
}

.legend li {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0 0 15px; /* Spacing between list items */
  font-size: 1em;
}

.legend i {
  width: 22px;
  height: 22px;
  margin: 0 8px 0 0;
  opacity: 0.7;
  border-radius: 50%;
  display: inline-block;
}

.legend .incident-icon {
  width: 22px;
  height: 22px;
  margin: 0 8px 0 0;
  opacity: 0.7;
  background-image: url('../images/flame-icon.png');
  background-size: 22px;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}

.legend i.icon {
  background-color: rgba(255, 255, 255, 1);
}

/* Footer Links */
.footer-link {
  color: white;
}

.footer-link:hover {
  color: #e0e0e0;
}

.leaflet-popup-content-wrapper {
  background-color: #181a1b; /* Dark text for popups */
  color: #fff; /* White text */
  border: 1px solid #333; /* Subtle border */
}

/* LeafletJS Control Styling for Dark Theme */
.leaflet-control-container .leaflet-control {
  background-color: #181a1b; /* Matches body background */
  color: #fff; /* White text */
  border: 1px solid #333; /* Subtle border */
}

.leaflet-control-container .leaflet-control a {
  color: #fff; /* White icons/text */
  background-color: #181a1b;
}

.leaflet-control-container .leaflet-control a:hover {
  background-color: #333; /* Slightly lighter on hover */
}

.leaflet-bar a, .leaflet-bar a:hover {
  background-color: #181a1b;
  color: #fff;
}

.leaflet-control-zoom-in, .leaflet-control-zoom-out {
  background-color: #181a1b;
  color: #fff;
}

.leaflet-control-zoom-in:hover, .leaflet-control-zoom-out:hover {
  background-color: #333;
}

/* Responsive Design */
@media (max-width: 1280px) { 
  #map {
    height: 90vh; /* Height for smaller screens */
  }
  #popup-info {
    font-size: 22px; /* Larger font for popups */
  }
  .legend {
    flex-direction: column; /* Stacks items vertically */
    gap: 10px;
  }
  h1 {
    font-size: 1.8em; /* Smaller title on mobile */
  }
}

@media (min-width: 1280px) {
  #map {
    height: 93vh; /* Height for larger screens */
  }
  #popup-info {
    font-size: 14px; /* Standard font for popups */
  }
}