/* distribution-map.css
 *
 * Frontend styles for the [distribution_map] shortcode. Scoped to
 * .dmap-container so the plugin can't bleed into the rest of the WP
 * theme. Every text color either falls back to a sensible neutral or is
 * overridden by an inline style set by the renderer (titleColor).
 */

.dmap-container {
  --dmap-tooltip-bg:    rgba(17, 24, 39, 0.92);
  --dmap-tooltip-text:  #ffffff;
  --dmap-legend-bg:     transparent;
  --dmap-default-text:  #111827;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  padding: 16px;
  border-radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--dmap-default-text);
}

.dmap-title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 12px;
}

.dmap-body {
  display: flex;
  gap: 16px;
  /* DESKTOP (row direction). Cross-axis = vertical, so `flex-start`
   * prevents the legend's natural height from stretching the map-wrap
   * vertically beyond its aspect-ratio. If we used `stretch` here, a
   * long distributor legend would pull the wrap taller and the SVG
   * (height: auto) would leave whitespace below itself.
   *
   * The mobile (column direction) override is in the bottom @media
   * block — it has to flip back to `stretch` because in column flex
   * the cross-axis is HORIZONTAL, and `flex-start` would leave the
   * map-wrap at its intrinsic content width instead of filling the
   * container. That regression in 1.0.10 was the cause of "map is
   * small and pinned to the left even after I widen the Nicepage
   * block on mobile."
   */
  align-items: flex-start;
}

.dmap-map-wrap {
  flex: 1;
  min-width: 0;
  position: relative; /* tooltip is positioned within this box */
  /* Fully proportional sizing at every viewport width. The CSS variable
   * --dmap-aspect is set inline by the shortcode (1000/600 normally,
   * 1150/600 when the UK row is active in the Command Center). The
   * browser computes height = width / aspect, so the wrap reserves the
   * exact space the SVG will occupy — no layout shift on paint, no
   * empty padding at any size from 270px up to 4K. The 5/3 fallback
   * matches the default 1000:600 viewBox in case the inline var is
   * missing for any reason.
   */
  aspect-ratio: var(--dmap-aspect, 5 / 3);
}

/* Last-resort fallback for browsers without aspect-ratio support
 * (Safari < 15 and a few older mobile browsers). Modern browsers ignore
 * this because aspect-ratio above wins the cascade. */
@supports not (aspect-ratio: 1) {
  .dmap-container {
    min-height: var(--dmap-min-height, 0);
  }
}

.dmap-map-wrap svg .dmap-paths path {
  outline: none;
}

/* Tooltip — positioned by the JS via top/left in pixels. Default
 * pointer-events:none so single-distributor tooltips never block a click
 * on the state underneath. For multi-distributor states the JS flips this
 * to `auto` inline (so the "pick one" links are clickable) and a hover
 * bridge keeps the tooltip open while the cursor travels onto it. */
.dmap-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--dmap-tooltip-bg);
  color: var(--dmap-tooltip-text);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.35;
  max-width: 260px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  z-index: 10;
}
.dmap-tooltip .dmap-tip-state { font-weight: 600; }
.dmap-tooltip .dmap-tip-dist  { opacity: 0.9; }
.dmap-tooltip .dmap-tip-hint  { opacity: 0.75; font-size: 11px; margin-top: 4px; }

/* Multi-distributor "pick one" list. Each row is a color swatch + the
 * distributor name; rows with a website become clickable links. */
.dmap-tooltip .dmap-tip-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.dmap-tooltip .dmap-tip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--dmap-tooltip-text);
  text-decoration: none;
  font-size: 13px;
}
.dmap-tooltip a.dmap-tip-row {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.dmap-tooltip a.dmap-tip-row:hover { opacity: 0.85; }
.dmap-tooltip .dmap-tip-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  flex: 0 0 auto;
}
.dmap-tooltip .dmap-tip-row-name { white-space: nowrap; }

/* Legend column */
.dmap-legend {
  width: 220px;
  flex: 0 0 220px;
  background: var(--dmap-legend-bg);
}
.dmap-legend-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}
.dmap-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  font-size: 13px;
}
.dmap-legend-row[href]:hover {
  background: rgba(0, 0, 0, 0.04);
}
.dmap-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  flex: 0 0 auto;
}
.dmap-legend-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dmap-legend-count {
  font-weight: 600;
  flex: 0 0 auto;
}

.dmap-error {
  padding: 12px 16px;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: 6px;
  font-size: 13px;
}

/* Mobile: legend stacks below the map and the tooltip narrows. The
 * map-wrap's aspect-ratio (set above) already produces a correctly-
 * sized container at every viewport width — no breakpoint needed for
 * the sizing itself. The block below only handles layout direction,
 * the cross-axis stretch flip (see comment on .dmap-body above), and
 * small typography tweaks for narrow screens. */
@media (max-width: 720px) {
  .dmap-container { padding: 8px; }
  .dmap-body {
    flex-direction: column;
    /* Cross-axis is now horizontal (column direction). `stretch` makes
     * the map-wrap and legend each fill 100% of the body's width, so
     * widening the Nicepage code block on mobile actually widens the
     * map. Without this override the map-wrap would sit at its
     * intrinsic content width and refuse to grow horizontally even
     * when its parent has more room. */
    align-items: stretch;
    gap: 12px;
  }
  /* Belt-and-suspenders: explicit width so even if a third-party stylesheet
   * (Nicepage / theme) sets a stricter `align-items` on a parent, the map
   * still fills the container. */
  .dmap-map-wrap { width: 100%; }
  .dmap-legend { width: 100%; flex: 0 0 auto; }
  .dmap-tooltip { max-width: 200px; font-size: 12px; }
}