/* Network map (homepage "National reach" and Our Network hero). Sits on the off-white
   .reach__map panel, so text and focus rings are charcoal even inside dark bands.
   The --map-* colors are for this map only. */

/* Map width: at most 1140px, and short enough that the whole card (header, map, buttons, note)
   fits in the window under the site header. The map is 1.6 times as wide as tall; --map-reserve
   is room for everything else (Our Network adds the tabs). From 1025px the buttons take a
   --controls-w column on the right, so the card gets that much wider; extra width becomes side
   padding. */
.netmap {
  --map-w: min(1140px, max(320px, calc((100svh - var(--map-reserve, 320px)) * 1.6)));
  --controls-w: 200px; /* fits the widest button, "S&S Activewear", on one line */
  display: flex;
  flex-direction: column;
  gap: var(--space-2); /* even gaps; they skip the parts hidden in the current view */
  width: min(100%, var(--map-w));
  margin-inline: auto;
  color: var(--charcoal);
}

/* Homepage: day buttons only, so a narrower button column. */
.netmap--light {
  --controls-w: 124px;
}

/* The map card is a size container: the button column (below) needs a 1025px+ window and a card
   at least 560px wide inside, so the homepage's half-width card keeps the row under the map until
   there's room for both. */
.reach__map {
  container: netmap-card / inline-size;
}

@media (width >= 1025px) {
  @container netmap-card (width >= 560px) {
    .netmap {
      width: min(100%, calc(var(--map-w) + var(--controls-w) + var(--space-3)));
    }
  }
}

.netmap-tabs-wrap {
  --map-reserve: 380px;
}

.netmap :focus-visible {
  outline-color: var(--charcoal);
}

.netmap :is(h2, h3, .h2, .h4) {
  color: var(--charcoal);
}

.netmap .btn--secondary {
  border-color: var(--charcoal);
  color: var(--charcoal);
}

.netmap .btn--secondary:hover {
  background-color: var(--charcoal);
  color: var(--white);
}

/* Parts that only work with JavaScript (tabs, pin buttons, supplier buttons) stay out of the way
   without it; the plain dots stand in for the pins. */
:root:not(.js) :is(.netmap [data-needs-js], .netmap-tabs) {
  display: none;
}

.js .netmap__dot {
  display: none;
}

/* Views: data-view on .netmap ("speed" or "suppliers"); data-view-only parts show in one view. */
.netmap[data-view="speed"] [data-view-only="suppliers"],
.netmap[data-view="suppliers"] [data-view-only="speed"] {
  display: none;
}

/* ---------- View tabs (Our Network), on the charcoal band above the card ---------- */
.netmap-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
}

/* Unselected: white outline; selected: orange with charcoal text. Both have a 1px border (transparent
   when selected), so switching tabs doesn't change their size. Focus: the dark-band orange ring. */
.netmap-tabs__tab {
  min-height: 44px;
  padding: 11px 23px;
  border: 1px solid var(--white);
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--size-button);
  font-weight: 600;
  line-height: var(--leading-button);
  cursor: pointer;
}

.netmap-tabs__tab[aria-selected="false"]:hover {
  border-color: var(--orange);
}

.netmap-tabs__tab[aria-selected="true"] {
  border-color: transparent;
  background-color: var(--orange);
  color: var(--charcoal);
}

@media (width < 640px) {
  .netmap-tabs__tab {
    padding-inline: 15px;
  }
}

/* ---------- Header above the map: share (stat-number style) over a gray sentence ---------- */
.netmap__header {
  text-align: center;
}

.netmap__header > * {
  max-width: none;
  margin: 0;
}

.netmap__stat-text {
  color: var(--gray);
}

/* ---------- Map and buttons: buttons in a right-hand column from 1025px (when the card is wide
   enough), a centered row below the map otherwise ---------- */
.netmap__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.netmap__controls,
.netmap__supplier-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1) var(--space-2);
}

.netmap__controls > [data-view-only] {
  flex-basis: 100%;
}

.netmap__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
}

@media (width >= 1025px) {
  @container netmap-card (width >= 560px) {
    .netmap__body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) var(--controls-w);
      align-items: center;
      gap: var(--space-3);
    }

    .netmap__controls,
    .netmap__supplier-controls,
    .netmap__buttons {
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
    }

    .netmap__supplier-controls .label {
      text-align: center;
    }
  }
}

.netmap__option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  padding: 10px 18px;
  border: 2px solid var(--charcoal);
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--size-button);
  font-weight: 600;
  line-height: var(--leading-button);
  white-space: nowrap;
  cursor: pointer;
}

.netmap__option:hover {
  background-color: var(--stone);
}

.netmap__option[aria-pressed="true"] {
  background-color: var(--charcoal);
  color: var(--white);
}

/* Unselected (day buttons and suppliers turned off): a 1px gray border. The extra 1px of padding
   makes up for the thinner border, so selected and unselected buttons are the same size. */
.netmap__option[aria-pressed="false"] {
  padding: 11px 19px;
  border-width: 1px;
  border-color: var(--gray);
}

.netmap__option[aria-pressed="false"]:hover {
  border-color: var(--charcoal);
}

/* A supplier that's turned off also grays its text (swatch kept). */
.netmap__option--supplier[aria-pressed="false"] {
  color: var(--gray);
}

/* Swatches always show their color; the gray edge keeps cream visible on off-white. */
.netmap__swatch {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--gray);
  border-radius: 3px;
}

.netmap__swatch[data-band="1"] { background-color: var(--map-day-1); }
.netmap__swatch[data-band="2"] { background-color: var(--map-day-2); }
.netmap__swatch[data-band="3"] { background-color: var(--map-day-3); }
.netmap__option--supplier .netmap__swatch { background-color: var(--pin-color); }

/* Phone: slimmer buttons so the three day buttons fit on one line. */
@media (width < 640px) {
  .netmap__option {
    padding-inline: 12px;
  }

  .netmap__option[aria-pressed="false"] {
    padding-inline: 13px;
  }
}

/* ---------- The map ---------- */
.netmap__stage {
  position: relative;
}

.netmap__canvas {
  position: relative;
}

.netmap__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Band colors go through custom properties, so the day buttons and the supplier view only change
   --band-color and --band-edge. */
.netmap__band {
  --band-color: var(--map-outside);
  --band-edge: var(--white);
  fill: var(--band-color);
  stroke: var(--band-edge);
  stroke-width: 1.5px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.netmap__band[data-band="1"] { --band-color: var(--map-day-1); }
.netmap__band[data-band="2"] { --band-color: var(--map-day-2); }
.netmap__band[data-band="3"] { --band-color: var(--map-day-3); }

/* Bands slower than the selected time take the outside color (their edges too, so no lines show inside). */
.netmap[data-selected="1"] .netmap__band:is([data-band="2"], [data-band="3"]),
.netmap[data-selected="2"] .netmap__band[data-band="3"] {
  --band-color: var(--map-outside);
  --band-edge: var(--map-outside);
}

/* Supplier network view: every area stone; state lines stay. */
.netmap[data-view="suppliers"] .netmap__band[data-band] {
  --band-color: var(--stone);
  --band-edge: var(--stone);
}

.netmap__states {
  fill: none;
  stroke: var(--white);
  stroke-width: 1px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

@media (prefers-reduced-motion: no-preference) {
  .netmap__band {
    transition: fill 0.2s ease, stroke 0.2s ease;
  }
}

/* ---------- Member labels (Shipping speed view): one pill, plus circle inside, then the short name ---------- */
/* Pill: no visible border (a 1px transparent one), 4px around the 24px circle, 8px to the name, 14px on the far end:
   34px tall. The circle's center (17px from the pill's edge) sits on the city (--x, --y). It
   points right, or left with data-dir="left"; data-compact shows the circle only (js/network-map.js
   sets both so labels don't overlap). ::after stretches the tap area to at least 44px. */
.netmap__label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 4px;
  border: 1px solid transparent; /* no visible border; keeps the pill 34px and the circle 17px in */
  border-radius: var(--radius-pill);
  background-color: var(--white);
  color: var(--charcoal);
  font-family: var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transform: translate(-17px, -50%);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.netmap__label::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: var(--radius-pill);
}

.netmap__label[data-dir="left"] {
  flex-direction: row-reverse;
  padding: 4px 4px 4px 14px;
  transform: translate(calc(-100% + 17px), -50%);
}

.netmap__label[data-compact] {
  padding: 4px;
  transform: translate(-17px, -50%);
}

.netmap__label[data-compact] .netmap__label-name {
  display: none;
}

.netmap__label:focus-visible {
  outline-offset: 2px;
}

.netmap__label-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--orange);
  color: var(--charcoal);
}

.netmap__label-icon .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

/* Open: charcoal pill with white text, white circle, the plus turned into an ×. */
.netmap__label[aria-expanded="true"] {
  background-color: var(--charcoal);
  color: var(--white);
}

.netmap__label[aria-expanded="true"] .netmap__label-icon {
  background-color: var(--white);
  color: var(--charcoal);
}

.netmap__label[aria-expanded="true"] .netmap__label-icon .icon {
  transform: rotate(45deg);
}

/* Below 768px: only the circle (with a white ring) in a 44px button; the name stays in
   the button's accessible name. */
@media (width < 768px) {
  .netmap__label,
  .netmap__label[data-dir="left"],
  .netmap__label[data-compact],
  .netmap__label[aria-expanded="true"] {
    padding: 10px;
    border: 0;
    background: none;
    transform: translate(-22px, -50%);
  }

  .netmap__label::after {
    content: none;
  }

  .netmap__label-name {
    display: none;
  }

  .netmap__label-icon {
    box-shadow: 0 0 0 2px var(--white);
  }
}

/* ---------- Pins: at least a 44px tap area around the markers ---------- */
.netmap__pin,
.netmap__dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
}

.netmap__pin {
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 4px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  cursor: pointer;
}

.netmap__pin[hidden] {
  display: none;
}

/* Member pins (and groups with a member) sit on top where tap areas overlap. */
.netmap__pin:has(.netmap__marker--member) {
  z-index: 2;
}

.netmap__pin:focus-visible {
  outline-offset: -4px;
}

/* A group's pins side by side, member first. */
.netmap__markers {
  display: flex;
  align-items: center;
  gap: 2px;
}

.netmap__marker {
  display: block;
  flex: none;
}

.netmap__marker[hidden] {
  display: none;
}

/* Member: charcoal circle with a white ring. */
.netmap__marker--member,
.netmap__dot {
  display: block;
  width: 18px;
  height: 18px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background-color: var(--charcoal);
}

/* Supplier: a square in the supplier's color, white ring and a thin charcoal edge (so orange
   shows on stone). */
.netmap__marker--supplier {
  width: 16px;
  height: 16px;
  border: 2px solid var(--white);
  background-color: var(--pin-color);
  box-shadow: 0 0 0 1px var(--charcoal);
}

.netmap__pin:hover .netmap__markers,
.netmap__pin[aria-expanded="true"] .netmap__markers,
.netmap__pin:hover > .netmap__marker,
.netmap__pin[aria-expanded="true"] > .netmap__marker {
  transform: scale(1.2);
}

/* Phones: smaller markers so neighbors don't touch (tap areas stay 44px). */
@media (width < 640px) {
  .netmap__marker--member,
  .netmap__dot {
    width: 14px;
    height: 14px;
    border-width: 2px;
  }

  .netmap__marker--supplier {
    width: 12px;
    height: 12px;
  }
}

/* ---------- Card: opens below (or above) the label on wider screens, under the map on phones ---------- */
/* Fades and scales in (96% → 100%); js/network-map.js removes .is-open and hides it after the
   reverse transition. With reduced motion it just appears and disappears. */
.netmap__panel {
  z-index: 3;
  width: min(300px, 100%);
  padding: var(--space-2);
  border: 1px solid var(--stone);
  border-radius: var(--radius-card);
  background-color: var(--white);
  opacity: 0;
  transform: scale(0.96);
  transform-origin: var(--origin, top left);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.netmap__panel.is-open {
  opacity: 1;
  transform: none;
}

.netmap__panel[hidden] {
  display: none;
}

.netmap__panel-body h2:focus,
.netmap__panel-body h3:focus {
  outline: none;
}

.netmap__panel-body [hidden] {
  display: none;
}

.netmap__panel-list {
  padding-left: 1.2em;
  list-style: disc;
}

.netmap__close {
  margin-top: var(--space-2);
}

@media (width >= 768px) {
  .netmap__panel {
    position: absolute;
    top: var(--card-top, 0);
    left: var(--card-left, 0);
  }

  .netmap__close {
    display: none;
  }
}

@media (width < 768px) {
  .netmap__panel {
    width: 100%;
    margin-top: var(--space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .netmap__panel,
  .netmap__panel.is-open {
    transform: none;
    transition: none;
  }

  .netmap__label-icon .icon,
  .netmap__label[aria-expanded="true"] .netmap__label-icon .icon {
    transition: none;
  }
}

/* ---------- Note (Small role, gray) ---------- */
/* Keeps the note's year range ("2024–2026") on one line. */
.netmap__nowrap {
  white-space: nowrap;
}

/* Centered on the card like the header (keeps the usual 70ch max width); balanced lines when it wraps. */
.netmap__note {
  align-self: center;
  color: var(--gray);
  text-align: center;
  text-wrap: balance;
}