/*
  Basic full-viewport layout for the Leaflet map.
  Keep it simple now; we can expand styling later.
*/
html, body {
  height: 100%;
  margin: 0;
}

#map {
  height: 100%;
  width: 100%;
}

/* Optional: slightly darken the page background around the map */
body {
  background: #111;
}

/* Leaflet container background so empty areas are distinguishable */
.leaflet-container {
  background: #1a1a1a;
}


/* Scale bar styling */
.leaflet-control-scale {
  background: rgba(0, 180, 180, 0.85) !important;  /* Vibrant cyan/teal with high opacity */
  border: 2px solid #00ffff !important;             /* Bright cyan border */
}

.scale-text {
  font-family: monospace;
  font-size: 12px;
  font-weight: 600;
  color: #000;                                      /* Black text for better contrast on cyan background */
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.3);  /* Subtle glow for depth */
}

/* Parcel label styling */
.parcel-label {
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 14px;
  font-weight: bold;
  color: #0ca838;                                   /* Darker green that complements grid lines */
  text-shadow: 
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;                               /* Black outline for readability */
  white-space: nowrap;
  pointer-events: none;                             /* Don't block clicks on parcels */
}

/* CW&T logo marker wrapper - remove default Leaflet divIcon styles */
.cwandt-logo-marker {
  background: none !important;
  border: none !important;
}

/* CW&T logo icon with smooth opacity transition */
.cwandt-logo-icon {
  transition: opacity 0.25s ease-in-out;
  display: block;
  width: 100%;   /* Fill the divIcon container width */
  height: auto;  /* Maintain aspect ratio */
}

/* Parcel ID labels - thick blocky font, red with 70% transparency, centered */
.parcel-label-id {
  pointer-events: none;                             /* Don't block map interactions */
  /* Center the label on its anchor point */
  position: absolute;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.parcel-label-text {
  font-family: Impact, 'Arial Black', sans-serif;   /* Thick and blocky font */
  font-weight: 900;                                 /* Extra bold for thickness */
  color: rgba(255, 0, 0, 0.3);                      /* Red with 70% transparency */
  white-space: nowrap;
  pointer-events: none;                             /* Don't block map interactions */
  text-align: center;
  display: block;
  line-height: 1;
  /* Font size will be set dynamically by JavaScript based on zoom level */
}

/* Banner at top of screen */
#banner {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  text-align: center;
  pointer-events: none; /* Don't block map interactions */
  color: #ffffff; /* Pure white text */
  font-family: 'Space Mono', monospace;
  font-size: 12px; /* 0.75 of default 16px */
  font-weight: 400;
  line-height: 1.3;
  text-shadow: 
    0 0 4px rgba(0, 0, 0, 0.8),
    0 0 8px rgba(0, 0, 0, 0.5); /* Black glow for readability */
}

.banner-line {
  white-space: nowrap;
}

#banner a {
  color: #ffffff; /* White link text */
  text-decoration: underline;
  pointer-events: auto; /* Links should be clickable */
  display: inline; /* Ensure links only cover text */
}

#banner a:hover {
  color: #cccccc; /* Slightly dimmer on hover */
}

/* Copyright banner at bottom */
#copyright-banner {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  font-family: 'Space Mono', monospace;
  font-weight: 400;
  font-size: 10px;
  color: #555555; /* Dark gray, barely visible on black background */
  pointer-events: none; /* Don't block map interactions */
  text-shadow: none; /* No glow, keep it subtle */
  text-align: center;
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease-in-out; /* Smooth fade */
}

#copyright-banner a {
  color: #555555; /* Same dark gray */
  text-decoration: none;
  pointer-events: auto; /* Link should be clickable */
}

#copyright-banner a:hover {
  color: #777777; /* Slightly lighter on hover */
  text-decoration: underline;
}