/* The route map: Leaflet frame, the strip under it, and the legend.
   Split out of parade.css so the participant portal can show the same map
   without the rest of the parade page. Loaded by pcc_parade_enqueue_map_assets().

   Colours are read from the parade page's variables where they exist, with the
   same values as fallbacks: outside .pcc-parade nothing defines them, and a
   var() with no fallback and no definition silently becomes nothing -- no
   outline, no active colour.

   Every selector here is specific to the map, and no rule left in parade.css
   targets these elements, so the order of the two files does not change what
   the parade page shows. */
.pcc-parade-route-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  margin-top: 26px;
}
.pcc-parade-route-map {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #e6e2f5;
  box-shadow: 0 14px 34px rgba(43, 13, 56, .12);
}
/* The frame clips; the map inside it is what gets turned. */
.pcc-parade-map-frame {
  position: relative;
  height: 520px;
  overflow: hidden;
  background: #ece6f2;   /* while the tiles load, and if they never do */
}
#pcc-parade-map {
  height: 100%;
  width: 100%;
  background: #ece6f2;
}
/* A turned map can be dragged now -- the delta is corrected for the angle --
   so it should look draggable. */
.pcc-parade-map-frame.is-rotated { cursor: grab; touch-action: none; }
.pcc-parade-map-frame.is-rotated.is-grabbing { cursor: grabbing; }
/* Seams between tiles.
   Leaflet lays each tile out with its own transform, so a rotated parent
   leaves the browser compositing 256px images at fractional device positions
   and hairlines appear along the joins. Promoting the rotated container to its
   own layer makes the browser rasterise the whole map once, at one scale,
   instead of tile by tile. */
.pcc-parade-map-frame.is-rotated #pcc-parade-map {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* And a hair of overlap on the tiles themselves, to close any join the
   rounding still leaves. Applied to the image, whose transform is Leaflet's
   own inline positioning -- so scale must not be set here, only size. */
.pcc-parade-map-frame.is-rotated .leaflet-tile {
  width: 256.5px !important;
  height: 256.5px !important;
}
/* The strip under the map. It was carrying only the imagery credit, which is
   the least useful thing a reader could be told there; the address and a route
   to it now share the space, with the credit kept small on the right. */
.pcc-parade-map-credit {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 7px 12px;
  font-size: 11.5px;
  background: #fff;
}
.pcc-parade-map-place {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;                /* so a long address can shrink, not overflow */
  color: var(--pcc-ink, #1e293b);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
a.pcc-parade-map-place:hover .pcc-parade-map-dirs,
a.pcc-parade-map-place:focus-visible .pcc-parade-map-dirs { background: var(--pcc-purple, #732982); color: #fff; }
a.pcc-parade-map-place:focus-visible { outline: 2px solid var(--pcc-purple, #732982); outline-offset: 3px; border-radius: 6px; }
/* A map pin, drawn rather than fetched: one more icon file for 11px of glyph
   is not worth a request. */
.pcc-parade-map-pinicon {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--pcc-purple, #732982);
}
.pcc-parade-map-dirs {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(115, 41, 130, .1);
  color: var(--pcc-purple, #732982);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.pcc-parade-map-esri {
  margin-left: auto;
  opacity: .55;
  white-space: nowrap;
}
@media (max-width: 560px) {
  /* The credit is the first thing to go when there is no room for both. */
  .pcc-parade-map-esri { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pcc-parade-map-dirs { transition: none; }
}
/* ── Tile seams ──
   The pale grid across the imagery was not in the imagery and not a gap in the
   layout -- adjacent tiles measure exactly 0px apart at every zoom. It is a
   rasterisation artifact: each tile composites as its own layer, and under the
   fractional scale the rotation needs, the antialiased edge blends with the
   backdrop instead of with the neighbouring tile. Painting the ground red made
   the lines turn red, which is what proved it.

   One extra pixel of tile makes neighbours genuinely overlap, so the soft edge
   lands on another tile. The 0.4% stretch that costs is invisible on an aerial
   photo; two pixels was visibly worse. The dark ground covers the outer edge,
   where there is no neighbour to overlap. */
.pcc-parade-map-frame .leaflet-container { background: #1e2a24; }
/* Rasterise the whole tile grid as ONE layer before the rotation resamples it.
   Stopping the per-tile translate3d (see map.js) was half of it; without this
   the tiles can still be painted separately into the rotated layer, and each
   one's antialiased edge shows as a hairline where it meets its neighbour. */
.pcc-parade-map-frame .leaflet-tile-container {
  will-change: transform;
  transform: translateZ(0);
}

/* Leaflet's panes carry their own z-indexes in the hundreds; containing them
   here keeps the map from painting over the site header on scroll. */
.pcc-parade-route-map { position: relative; isolation: isolate; z-index: 0; }

.pcc-parade-route-key {
  background: #f8f7fc;
  border: 1px solid #e6e2f5;
  border-radius: 16px;
  padding: 24px 26px;
}
.pcc-parade-route-h3 { margin: 0 0 14px; font-size: 17px; }
.pcc-parade-route-legend {
  list-style: none !important;
  display: grid !important;
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
}
.pcc-parade-route-legend li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 15.5px;
  line-height: 1.4;
}
.pcc-parade-route-swatch {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(43, 13, 56, .18);
}
.pcc-parade-route-swatch--line {
  width: 22px;
  height: 6px;
  border-radius: 3px;
  background: #facc15;
  border: none;
  box-shadow: 0 0 0 1px rgba(31, 10, 41, .5);
}
.pcc-parade-route-swatch--zone {
  border-radius: 4px;
  background: rgba(37, 99, 235, .45);
  border: 1px solid #2563eb;
  box-shadow: none;
}
/* The legend swatch for an accessibility kind carries the same badge as the
   map, at legend size, so the two read as the same thing. */
.pcc-parade-route-swatch--access {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 5px;
  border: 2px solid #1d4ed8;
  background: #fff;
  color: #1d4ed8;
  box-sizing: border-box;
  box-shadow: none;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
}
.pcc-parade-route-swatch--access u {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 6px 9px;
  border-color: transparent transparent #1d4ed8 transparent;
}
/* The accessibility panel: closed by default, because six ramps and two
   restrooms is a lot of ink over a satellite photo for a reader who came to
   see where the parade goes. Sits under the main key, so it carries a rule
   above it rather than relying on a first heading's top margin. */
.pcc-parade-access {
  margin-top: 20px;
  padding-top: 4px;
  border-top: 1px solid rgba(43, 13, 56, .12);
}
.pcc-parade-access-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 0 4px;
  cursor: pointer;
  list-style: none;          /* the default triangle, replaced below */
}
.pcc-parade-access-summary::-webkit-details-marker { display: none; }
.pcc-parade-access-summary .pcc-parade-route-h3 { margin: 0; }
/* Says what is behind the panel before it is opened. Sits where a count would
   have gone, because the kind of information matters and the quantity does not. */
.pcc-parade-access-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 4px 10px 4px 5px;
  border-radius: 999px;
  background: rgba(29, 78, 216, .09);
  color: #1d4ed8;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.pcc-parade-access-tag .pcc-parade-route-swatch--access {
  width: 17px;
  height: 17px;
  font-size: 9px;
}
.pcc-parade-access:hover .pcc-parade-access-tag,
.pcc-parade-access-summary:focus-visible .pcc-parade-access-tag {
  background: rgba(29, 78, 216, .16);
}
/* A chevron that turns, so the control says which way it goes. */
.pcc-parade-access-summary::after {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
  opacity: .55;
}
.pcc-parade-access[open] .pcc-parade-access-summary::after {
  transform: translateY(1px) rotate(-135deg);
}
.pcc-parade-access-summary:focus-visible {
  outline: 2px solid var(--pcc-purple, #732982);
  outline-offset: 3px;
  border-radius: 6px;
}
/* The body slides. <details> itself cannot be transitioned, so the height is
   animated on this wrapper by the script; without the script it is simply a
   plain block and the panel opens instantly, which is still correct. */
.pcc-parade-access-body { overflow: hidden; }
.pcc-parade-access-body.is-sliding {
  transition: height .34s cubic-bezier(.22, .8, .3, 1), opacity .26s ease;
}

/* Each badge arrives with a small pop, staggered along the route, so opening
   the panel reads as the markers being ADDED rather than as the map suddenly
   being busier than it was. Delays are set per marker by the script. */
@keyframes pcc-access-pop {
  from { transform: scale(.3); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}
.pcc-map-access {
  animation: pcc-access-pop .38s cubic-bezier(.2, .9, .3, 1.2) both;
}

@media (prefers-reduced-motion: reduce) {
  .pcc-parade-access-summary::after { transition: none; }
  .pcc-parade-access-body.is-sliding { transition: none; }
  .pcc-map-access { animation: none; }
}
/* A legend row is a flex line, so a note left to itself sits BESIDE the entry
   and squeezes both. It belongs underneath, on a line of its own. */
.pcc-parade-access li { flex-wrap: wrap; }
.pcc-parade-route-access-note {
  flex: 0 0 100%;
  margin: -2px 0 10px 27px;   /* aligned under the label, past the swatch */
  font-size: 13.5px;
  line-height: 1.45;
  opacity: .72;
}
.pcc-parade-route-note {
  margin: 18px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  opacity: .78;
}

@media (max-width: 980px) {
  .pcc-parade-route-grid { grid-template-columns: 1fr; gap: 22px; }
  .pcc-parade-map-frame { height: 380px; }
}

/* Direction-of-march arrows on the route. Leaflet positions the wrapper with
   its own transform, so the rotation goes on the span inside it -- setting
   both on one element means the second overwrites the first. */
.pcc-map-arrow { background: none; border: 0; }
.pcc-map-arrow span {
  display: block;
  width: 22px;
  height: 22px;
  transform-origin: center center;
  filter: drop-shadow(0 1px 2px rgba(8, 2, 12, .45));
}

/* Marked places on the route map.
   Leaflet positions .pcc-map-pin-wrap with its own transform, so the
   counter-rotation that keeps the label upright goes on the span inside --
   two transforms on one element means the second wins. */
.pcc-map-pin-wrap { background: none; border: 0; }
.pcc-map-pin {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  transform-origin: center center;
}
.pcc-map-pin i {
  display: block;
  width: 18px;
  height: 18px;
  margin: 1px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(8, 2, 12, .5);
}
/* ── Accessibility markers ──
   A white square badge with a glyph, deliberately a different shape from the
   round route markers: they are a different KIND of information, and there can
   be several of each, which a colour cannot say. White ground with dark ink so
   the glyph stays readable over pale concrete and dark water alike. */
.pcc-map-pin--access { width: 22px; height: 22px; }
.pcc-map-access {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #1d4ed8;
  background: #fff;
  color: #1d4ed8;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(8, 2, 12, .5);
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  letter-spacing: -.02em;
}
/* The ramp: a slope, drawn rather than typed. No character reliably means
   "ramp", and a missing glyph would leave an empty badge. */
.pcc-map-access u {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 7px 11px;
  border-color: transparent transparent #1d4ed8 transparent;
}

.pcc-map-pin b {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(12, 4, 17, .92);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  /* Wraps rather than running off. A label is centred on its pin, so a long one
     -- "Accessible restroom — women's — Pavilion, north end" -- is wider than a
     phone frame and would be clipped at BOTH ends with nowhere for the map to
     pan to. Short labels are unaffected: the width only bites when it has to. */
  max-width: min(230px, calc(var(--pcc-map-w, 100vw) - 26px));
  width: max-content;
  text-align: center;
  opacity: 0;
  pointer-events: none;   /* never let the label block the pin under it */
  transition: opacity .16s ease;
}
.pcc-map-pin:hover b,
.pcc-map-pin:focus-visible b,
/* Held open when its legend entry is chosen: one dot among nine is hard to
   pick out by colour alone, so the chosen one says which it is. */
.pcc-map-pin.is-shown b { opacity: 1; }
.pcc-map-pin.is-shown b {
  background: var(--pcc-purple, #732982);
  box-shadow: 0 2px 10px rgba(115, 41, 130, .5);
}

@media (prefers-reduced-motion: reduce) {
  .pcc-map-pin b { transition: none; }
}

/* Staging area in the legend, and the small note beside each place. */
.pcc-parade-route-swatch--staging {
  border-radius: 4px;
  background: rgba(245, 158, 11, .4);
  border: 1.5px dashed #f59e0b;
  box-shadow: none;
}
.pcc-parade-route-when {
  display: inline;
  opacity: .62;
  font-weight: 600;
}
.pcc-parade-route-when::before { content: " — "; }

/* Zoom buttons for a rotated map.
   Attached to the frame, not the map, so they stay upright and inside the
   clip -- Leaflet's own control is anchored to the map's top-left corner,
   which a rotation pushes out of view. */
.pcc-map-zoom {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 500;          /* above Leaflet's panes, which run into the 400s */
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(8, 2, 12, .35);
}
.pcc-map-zoom button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #d9d3e0;
  background: #fff;
  color: var(--pcc-ink, #1e293b);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}
.pcc-map-zoom button:last-child { border-bottom: 0; }
.pcc-map-zoom button:hover:not(:disabled) { background: #f4f1f8; }
.pcc-map-zoom button:disabled { opacity: .45; cursor: default; }

/* The legend doubles as navigation: each entry frames that thing on the map. */
.pcc-parade-route-jump {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 5px 8px;
  margin: -5px -8px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.pcc-parade-route-jump:hover { background: #efeaf6; }
.pcc-parade-route-jump.is-active { background: #e7dff2; font-weight: 700; }
.pcc-parade-route-jump:focus-visible { outline: 2px solid var(--pcc-purple, #732982); outline-offset: 1px; }

/* The dismiss cross. Only on the active entry -- showing it on all of them
   would suggest every entry is already doing something. */
.pcc-parade-route-x {
  margin-left: auto;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(115, 41, 130, .12);
  color: var(--pcc-purple, #732982);
  font-size: 15px;
  line-height: 1;
}
.pcc-parade-route-jump.is-active .pcc-parade-route-x { display: flex; }
.pcc-parade-route-jump.is-active:hover .pcc-parade-route-x {
  background: var(--pcc-purple, #732982);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .pcc-parade-route-jump { transition: none; }
}

/* ── In the participant portal ──
   A card is narrower than the parade page and sits among other cards, so the
   legend goes under the map in one column and the frame is shorter. */
.pcc-parade-route-grid.is-portal {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 14px;
}
.pcc-parade-route-grid.is-portal .pcc-parade-map-frame { height: 420px; }
.pcc-parade-route-grid.is-portal .pcc-parade-route-legend { grid-template-columns: minmax(0, 1fr) !important; }
.pcc-parade-route-grid.is-portal .pcc-parade-route-key { padding: 18px 20px; }
@media (max-width: 560px) {
  .pcc-parade-route-grid.is-portal .pcc-parade-map-frame { height: 340px; }
}

/* Printed without its legend: the map takes the width the key would have had. */
.pcc-parade-route-grid.is-no-legend { grid-template-columns: minmax(0, 1fr); }