/* ==========================================================================
   Ag Scoop - producer map
   A self-contained SVG map of Australia with producer dots and an info card.
   No external tiles or scripts; fully CSP-safe.
   ========================================================================== */

.producer-map-section { padding: 64px 0; }

.map-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: start;
}

/* --- The map itself --- */
.map-frame {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.map-canvas {
  position: relative;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
}
.map-canvas svg { display: block; width: 100%; height: auto; border-radius: 10px; }

/* Zoom controls: one grouped panel */
.map-zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  z-index: 5;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(34, 30, 21, 0.08);
}
.map-zoom button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: #fff;
  color: var(--ink-2);
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.map-zoom button + button { border-top: 1px solid var(--line); }
.map-zoom button:hover:not(:disabled) { background: var(--panel); color: var(--green); }
.map-zoom button:disabled { opacity: 0.35; cursor: default; }

/* Ocean, graticule, coastal halo */
.map-ocean { fill: #ddeaf0; }

/* Graticule only shows on land (the group is clipped to the coastline) */
.map-grat line {
  stroke: #c6d2c9;
  stroke-width: 0.8;
  opacity: 0.35;
}

.map-halo-outer {
  fill: none;
  stroke: rgba(96, 140, 165, 0.10);
  stroke-width: 16;
  stroke-linejoin: round;
}
.map-halo {
  fill: none;
  stroke: rgba(96, 140, 165, 0.18);
  stroke-width: 7;
  stroke-linejoin: round;
}

.map-land {
  fill: url(#aus-land-fill);
  stroke: var(--green);
  stroke-width: 1.3;
  stroke-linejoin: round;
}

/* State borders (approximate, decorative) */
.map-borders polyline {
  fill: none;
  stroke: var(--green);
  stroke-width: 1;
  stroke-dasharray: 5 3;
  opacity: 0.35;
}

/* State labels, watermark style.
   Sizes divide by --map-zoom so labels keep their screen size while
   the map zooms underneath them (map.js sets the property). */
.map-states text {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: calc(21px / var(--map-zoom, 1));
  letter-spacing: 0.2em;
  text-anchor: middle;
  fill: var(--green);
  opacity: 0.45;
}

/* Capital city markers */
.map-cities circle {
  fill: #fff;
  stroke: var(--ink-2);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  r: calc(3.2px / var(--map-zoom, 1));
}
.map-cities text {
  font-family: 'Source Sans 3', sans-serif;
  font-size: calc(12.5px / var(--map-zoom, 1));
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  fill: var(--ink);
  paint-order: stroke;
  stroke: rgba(252, 251, 247, 0.85);
  stroke-width: calc(3px / var(--map-zoom, 1));
  stroke-linejoin: round;
}

@media (max-width: 600px) {
  .map-cities text { font-size: calc(17px / var(--map-zoom, 1)); }
  .map-cities circle { r: calc(4.5px / var(--map-zoom, 1)); }
  .map-states text { font-size: calc(28px / var(--map-zoom, 1)); }
  .map-zoom button { width: 40px; height: 40px; font-size: 19px; }
}

/* Dots are HTML buttons positioned over the SVG by percentage,
   so they stay put as the map scales and are keyboard-accessible. */
.map-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 99px;
  border: 2.5px solid var(--paper);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 4px rgba(34, 30, 21, 0.35);
  transition: transform 0.12s ease, opacity 0.25s ease;
}
button.map-dot.is-filtered {
  opacity: 0.12;
  pointer-events: none;
}
.map-dot:hover { transform: translate(-50%, -50%) scale(1.35); }
.map-dot[aria-pressed="true"] {
  transform: translate(-50%, -50%) scale(1.45);
  box-shadow: 0 0 0 4px rgba(52, 80, 58, 0.25);
}

/* Category colours (match the crate palette) */
.map-dot.cat-food      { background: var(--wheat); }
.map-dot.cat-alcohol   { background: var(--clay); }
.map-dot.cat-tourism   { background: #6b6f3f; }
.map-dot.cat-clothing  { background: #5a4632; }
.map-dot.cat-equipment { background: #4c5a5e; }
.map-dot.cat-machinery { background: var(--green); }
.map-dot.cat-accessories      { background: #c8b272; }
.map-dot.cat-other     { background: #3a3128; }

/* --- Legend: category filter pills --- */
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.map-legend-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 5px 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}
.map-legend-btn:hover { border-color: var(--green); color: var(--green); }
.map-legend-btn[aria-pressed="false"] {
  opacity: 0.45;
  background: var(--panel);
}
.map-legend-btn .map-dot {
  position: static;
  transform: none;
  border: none;
  box-shadow: none;
  width: 10px;
  height: 10px;
  cursor: inherit;
}

/* --- Info card --- */
.map-info {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  position: sticky;
  top: 104px;
}

.map-info-media {
  aspect-ratio: 16 / 9;
  position: relative;
}
.map-info-media .crate { width: 100%; height: 100%; }
.map-info-media .crate-word { font-size: clamp(20px, 2vw, 26px); }
.map-info-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.map-info-body { padding: 20px 22px 22px; }

.map-info-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.map-info-tag {
  font-family: 'Archivo', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
}
.map-info-tag.cat { background: var(--green-tint); color: var(--green); }
.map-info-tag.loc { background: var(--panel); color: var(--ink-2); border: 1px solid var(--line); }
.map-info-tag.sample { background: var(--wheat-soft); color: #6b5410; }

.map-info h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 8px;
}

.map-info p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 16px;
}

.map-info .btn { width: 100%; }

/* Empty state before any dot is clicked */
.map-info-empty {
  padding: 36px 24px;
  text-align: center;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
}
.map-info-empty strong { display: block; font-size: 16.5px; color: var(--ink); margin-bottom: 6px; }

@media (max-width: 920px) {
  .map-layout { grid-template-columns: 1fr; gap: 24px; }
  .map-info { position: static; }
  .producer-map-section { padding: 48px 0; }
  .map-frame { padding: 14px; }
}