/* ===================================================================
   Assemblies Unlimited plant locations map
   Development namespace: .map / #map-container-new
 
   Map only. The region lists below it are unchanged and still come from
   assets/includes/map-links.php.
 
   What is gone from the old stylesheet: every .atlanta / .columbus /
   .decatur { top:..; left:.. } rule. Placement is computed from latitude
   and longitude in PHP. Region colours arrive as --region-* custom
   properties set inline by map.php, sourced from map-regions.php.
   =================================================================== */
 
.map { background-color: #2E3268; }
 
/* ---- container -------------------------------------------------- */
/* Fills whatever the theme gives it. Set --map-max to cap: */
#map-container { --map-max: 1150px; } 
#map-container { position: relative; margin: 0 auto; width: 100%; max-width: var(--map-max, 100%); overflow-x: clip; }
 
/* Pins position against this box, never against #map-container-new, so the
   legend joining the flow on small screens cannot shift them. */
#map-container .map-canvas { position: relative; container-type: inline-size; }
#map-container .map-svg { display: block; width: 100%; height: auto; }
 
/* ---- states ----------------------------------------------------- */
#map-container .map-state {
  fill: #7B80B4;                     /* any state in no region */
  stroke: #2E3268;
  stroke-width: 1.5;
  stroke-linejoin: round;
  /*transition: fill .15s ease;*/
  transition: fill-opacity .15s ease;
}
#map-container .map-state[data-region="west"]    { fill: var(--region-west); }
#map-container .map-state[data-region="central"] { fill: var(--region-central); }
#map-container .map-state[data-region="south"]   { fill: var(--region-south); }
#map-container .map-state[data-region="east"]    { fill: var(--region-east); }
/*#map-container .map-state:hover                  { fill: #F2E94E; }*/
#map-container .map-state:hover                  { fill-opacity: .9; }
 
 
/* ---- legend ----------------------------------------------------- */
#map-container .map-legend {
  position: absolute; bottom: 10%; left: 8%; z-index: 100; margin: 0;
  text-transform: uppercase; font-weight: bold; font-size: 1rem; color: #fff;
}
#map-container .map-legend li { line-height: 1.6; }
#map-container .map-legend .fas { vertical-align: middle; font-size: 1.2rem; }
#map-container .map-legend .fa-star { color: #F2E94E; }
 
/* ---- markers ---------------------------------------------------- */
/* The teardrop's point is 93.43% down its icon box, not at the bottom, so the
   anchor is 93.43% rather than 100%. Measured from the artwork. The star has
   no point and hangs from the middle of its ink. Change these only if the
   marker paths change. */
#map-container .marker-wrap {
  position: absolute; z-index: 100; cursor: pointer; line-height: 0;
  --pin: clamp(11px, 2.5cqw, 24px);
  transform: translate(-50%, -93.43%);
}
#map-container .marker-wrap.regional { transform: translate(-50%, -51.81%); }
 
#map-container .pin-icon {
  display: block; height: var(--pin); width: calc(var(--pin) * 0.75);
  fill: #fff; transform-origin: 50% 93.43%; transition: transform .12s ease;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
#map-container .marker-wrap.regional .pin-icon {
  width: calc(var(--pin) * 1.125); fill: #F2E94E; transform-origin: 50% 51.81%;
}
#map-container .marker-wrap:hover .pin-icon,
#map-container .marker-wrap:focus-visible .pin-icon,
#map-container .marker-wrap.is-open .pin-icon { transform: scale(1.2); }
#map-container .marker-wrap.regional { z-index: 101; }
#map-container .marker-wrap:hover,
#map-container .marker-wrap:focus-within,
#map-container .marker-wrap.is-open { z-index: 1000; }
 
#map-container .marker-wrap:focus { outline: none; }
#map-container .marker-wrap:focus-visible { outline: 2px solid #F2E94E; outline-offset: 3px; }
 
/* ---- popover ---------------------------------------------------- */
#map-container .marker-popover {
  display: block; position: absolute; left: 50%; width: 230px; bottom: 100%;
  padding-bottom: 17px; opacity: 0; visibility: hidden;
  transform: translateX(-50%); transition: opacity .25s ease-in-out;
  z-index: 1001; text-align: left; line-height: 1.4;
}
#map-container .marker-wrap:hover .marker-popover,
#map-container .marker-wrap:focus-visible .marker-popover,
#map-container .marker-wrap.is-open .marker-popover { opacity: 1; visibility: visible; }
 
#map-container .popover-inner {
  display: block; background: #fff; padding: 10px 13px; font-size: 12px;
  line-height: 1.4; position: relative; color: #222;
  box-shadow: 0 1px 2px 1px rgba(0,0,0,.25);
}
#map-container .popover-inner:before {
  position: absolute; left: 50%; display: block; content: "";
  border-style: solid; width: 0; height: 0; border-color: transparent;
  border-width: 11px 11px 0 11px; border-top-color: #fff;
  bottom: -11px; margin-left: -11px; z-index: 5;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
#map-container .marker-popover.popoverLeft  { transform: translateX(-15%); }
#map-container .marker-popover.popoverRight { transform: translateX(-85%); }
#map-container .marker-popover.popoverLeft  .popover-inner:before { left: 15%; }
#map-container .marker-popover.popoverRight .popover-inner:before { left: 85%; }
 
#map-container .marker-title { margin: 0 0 5px; font-size: 1.2rem; font-weight: 700; color: #111; }
#map-container .marker-popover ul { margin: 0 0 7px; }
#map-container .marker-popover li { font-size: 12px; font-variant-numeric: tabular-nums; }
#map-container .marker-popover li a { color: #0d6efd; text-decoration: none; }
#map-container .marker-popover p { margin-bottom: 10px; color: #666; line-height: 1.5; font-size: 12px; }
#map-container .marker-popover .fas.tiny { font-size: 12px; color: #666; }
 
/* ---- responsive ------------------------------------------------- */
@media screen and (max-width: 991px) {
  #map-container .marker-popover { width: 210px; }
  #map-container .marker-title { font-size: 1rem; }
  #map-container .marker-popover p { line-height: 1.35; font-size: 11px; }
  #map-container .map-legend { position: static; margin-top: 12px; font-size: .85rem; }
  #map-container .marker-popover { width: min(210px, 62vw); }  
}
@media (prefers-reduced-motion: reduce) {
  #map-container * { transition: none !important; }
}

/* Regions */
#map-regions {margin-top:0;}
#map-regions .map-menu-links a {color:white;}
#map-regions .map-menu-links a:hover {color:#ddd;}
#map-regions {text-align: center;margin-top:40px;}
#map-regions .region-title {font-weight:300px;font-weight:bold;font-size:1.8rem;border-top:7px solid white;padding-top:15px;}
#map-regions .region-title.western {border-color: var(--region-west);} 
#map-regions .region-title.central {border-color: var(--region-central);} 
#map-regions .region-title.eastern {border-color: var(--region-east);}
#map-regions .region-title.southern {border-color: var(--region-south);}
#map-regions ul {margin-top: 25px;}
#map-regions li {margin-bottom:8px;font-size:16px;}
#map-regions .region-phone > a {color:inherit;text-decoration: none;}