/* ---- Theme tokens ---- */
:root{
  /* Stats */
  --stat-neutral:#E2E8F0;    /* cool gray for 0 */
  --stat-good:#34C759;       /* if you ever use "good" */
  --stat-warn:#FFB020;       /* amber (e.g., prescribed fires) */
  --stat-bad:#F0524D;        /* red (wildfires/exceedances) */
}

.stat{
  display:inline-block;
  font-weight:700;
  padding:.05rem .35rem;
  border-radius:.4rem;
  background: rgba(255,255,255,.08);
}

.stat--neutral{ color:var(--stat-neutral); }
.stat--warn{ color:var(--stat-warn); }
.stat--bad{ color:var(--stat-bad); }

.unit{ opacity:.9; }
.muted{ opacity:.92; }

/* ---- Map container ---- */
#californiaMap {
  height: 75vh;              /* relative to viewport */
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

@media screen and (max-width: 600px) {
  #californiaMap { height: 300px; }
}


.banner-title {
  font-size: 1.35rem;
  font-weight: 550;
  opacity: 0.9;
  margin-bottom: 0.25rem;
  text-align: center;
  text-transform: uppercase;
}

/* ---- Minor hover effect ---- */
#mapInfoIcon i:hover {
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.5);
}

/* =========================================================
   Leaflet layer-control “legend” icons (ICON FIRST)
   Works with your CURRENT JS labels:
   icon-rx-small / icon-rx-large
   icon-pm25-low / icon-pm25-high
   icon-ozone-low / icon-ozone-high
   icon-wildfire
   icon-hms-smoke / icon-hms-fire
   icon-rx-day1 / icon-rx-day2 / icon-rx-day3
   ========================================================= */

.layer-name[class*="icon-"]{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.layer-name[class*="icon-"]::before{
  content:"";
  width:10px;
  height:10px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  flex:0 0 10px;
}

/* ---- Rx (selected day size icons) ---- */
.layer-name.icon-rx-small::before{
 background-image:url("/static/img/logo/Rx-1-green.png");
 width:16px;
 height:16px; 
 flex:0 0 16px;
}
.layer-name.icon-rx-large::before{ background-image:url("/static/img/logo/Rx-2-dark-green.png"); 
 width:16px;
 height:16px;
 flex:0 0 16px;
}

/* ---- Rx future day icons (+1/+2/+3) ---- */
.layer-name.icon-rx-day1::before{ background-image:url("/static/img/logo/Rx-3-oneday.png");
 width:16px;
 height:16px;
 flex:0 0 16px;
}
.layer-name.icon-rx-day2::before{ background-image:url("/static/img/logo/Rx-4-twoday.png");
 width:16px;
 height:16px;
 flex:0 0 16px;
}
.layer-name.icon-rx-day3::before{ background-image:url("/static/img/logo/Rx-5-threeday.png"); 
 width:16px;
 height:16px;
 flex:0 0 16px;
}

/* ---- Wildfires icon ---- */
.layer-name.icon-wildfire::before{ background-image:url("/static/img/logo/Rx-3-wildfire.png"); }

/* ---- PM2.5: circles ---- */
.layer-name.icon-pm25-low::before{
  background-image:none;
  background-color:#00FF00;
  border:1px solid #000;
  border-radius:50%;
}

.layer-name.icon-pm25-high::before{
  background-image:none;
  background-color:red;
  border:1px solid #000;
  border-radius:50%;
}

.layer-name.icon-ozone-low::before{ 
  background-image:none; 
  background-color:#1E90FF; 
  border:1px solid #000; 
  transform:rotate(45deg); 
} 
  
.layer-name.icon-ozone-high::before{ 
  background-image:none; 
  background-color:red; 
  border:1px solid #000; 
  transform:rotate(45deg); 
}

/* ---- HMS Smoke: line ---- */
.layer-name.icon-hms-smoke::before{
  width:20px;
  height:2px;
  background-image:none;
  background-color:gray;
  border:none;
  border-radius:0;
}

/* ---- HMS Fire: point ---- */
.layer-name.icon-hms-fire::before{
  background-image:none;
  background-color:#DD571C;
  border:2px solid orange;
  border-radius:50%;
}