/* ============================================================
   M.H Group — maps.css
   Leaflet map sections (#map, #area-maps).
   Hand-written, no frameworks. Navy #0F2233 · gold #B08D57.
   No gradients. Logical properties for RTL (ur/ar).
   ============================================================ */

/* ---------- section headers reuse main.css .section-* ---------- */
.map-section .wrap,
.area-maps-section .wrap { max-width: var(--maxw); }

/* ---------- map frame ---------- */
.map-frame {
  position: relative;
  margin-block-start: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ivory);
  box-shadow: var(--shadow-soft);
}
.leaflet-container {
  height: 420px;
  width: 100%;
  font-family: var(--font-body);
  z-index: 1;
  background: var(--ivory);
}
.leaflet-container:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* ---------- legend ---------- */
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-block-start: 16px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
.map-legend .lg-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-end: 0;
}
.lg-dot {
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--navy);
  flex: none;
}
.lg-dot.lg-site { background: var(--navy); border-color: var(--gold); }
.lg-poly {
  inline-size: 22px;
  block-size: 12px;
  border: 2px solid var(--gold);
  background: rgba(176, 141, 87, 0.15);
  flex: none;
}
.lg-indicative {
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px dashed var(--gold);
  flex: none;
}

/* ---------- boundary / indicative popup note ---------- */
.leaflet-popup-content { line-height: 1.6; font-size: 14px; }
.leaflet-popup-content .pp-title { font-weight: 700; color: var(--navy); margin-block-end: 2px; }
.leaflet-popup-content .pp-indicative {
  display: block;
  margin-block-start: 6px;
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
}

/* ---------- marker pins (divIcon) ---------- */
.mhg-pin-wrap { background: transparent; border: none; }
.mhg-pin {
  display: block;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
}
.mhg-pin-hq {
  background: var(--gold);
  border: 3px solid var(--navy);
  box-shadow: 0 2px 8px rgba(15, 34, 51, 0.45);
}
.mhg-pin-site {
  background: var(--navy);
  border: 2px solid var(--gold);
}
.mhg-pin-indicative {
  background: #ffffff;
  border: 2px dashed var(--gold);
}

/* ---------- area-map note ---------- */
.map-note {
  margin-block-start: 18px;
  color: var(--muted);
  font-size: 14.5px;
  max-width: 800px;
}
/* ---------- graceful fallback / loading / error ---------- */
.map-fallback,
.map-loading,
.map-error {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  min-height: 220px;
  color: var(--muted);
  font-size: 15.5px;
}
.map-loading::before {
  content: "";
  inline-size: 26px;
  block-size: 26px;
  margin-inline-end: 12px;
  border: 3px solid var(--line);
  border-block-start-color: var(--gold);
  border-radius: 50%;
  animation: mhg-spin 0.9s linear infinite;
  flex: none;
}
@keyframes mhg-spin { to { transform: rotate(360deg); } }

.map-fallback[hidden] { display: none; }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .leaflet-container { height: 300px; }
  .map-section .leaflet-container,
  .area-maps-section .leaflet-container { height: 300px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .map-loading::before { animation: none; }
}