/* Shared campus map and modal treatment. PCLG carries the full map skin in its
 * theme; these fallback tokens make the same canonical markup legible on the
 * Growing FootPrints sibling site and own all dialog interaction states. */

.campus-map-dialog {
  width: min(96vw, 76rem);
  max-width: none;
  max-height: 94dvh;
  margin: auto;
  padding: 0;
  color: var(--ink, #182f3a);
  background: var(--white, #fff);
  border: 1px solid var(--rule-strong, #a8bdc6);
  border-radius: 4px;
  box-shadow: 0 24px 80px rgb(4 31 43 / 0.28);
}

.campus-map-dialog::backdrop { background: rgb(4 31 43 / 0.72); }
.campus-map-dialog-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: 94dvh;
  overflow: hidden;
}
.campus-map-dialog-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: start;
  padding: 1rem clamp(1rem, 3vw, 2rem);
  background: var(--white, #fff);
  border-block-end: 1px solid var(--rule, #d8e2e6);
}
.campus-map-dialog-head h2 { margin: 0; font-size: clamp(1.35rem, 2.2vw, 2rem); }
.campus-map-dialog-kicker {
  margin: 0 0 0.2rem;
  color: var(--brand-blue, var(--green-deep, #075275));
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.campus-map-dialog-status { margin: 0.25rem 0 0; color: var(--muted, var(--ink-soft, #536b75)); font-size: 0.92rem; }
.campus-map-dialog-close {
  display: grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  color: var(--ink, #182f3a);
  background: var(--white, #fff);
  border: 1px solid var(--rule-strong, #a8bdc6);
  border-radius: 2px;
  font: inherit;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.campus-map-dialog-close:hover { color: #fff; background: var(--brand-blue, var(--green-deep, #075275)); }
.campus-map-dialog-close:focus-visible { outline: 3px solid var(--accent, var(--red, #c54236)); outline-offset: 2px; }
.campus-map-dialog-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 clamp(1rem, 3vw, 2rem);
  overflow: hidden;
}
.campus-map-dialog .campus-map {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-block: 0.75rem 0;
  transform: none;
}
.campus-map-dialog .campus-map > h2,
.campus-map-dialog .campus-map > p:first-of-type,
.campus-map-dialog .campus-index,
.campus-map-dialog .campus-source { display: none; }
.campus-map-dialog .campus-plan-figure {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin: 0;
}
.campus-map-dialog .campus-plan-scroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--rule, #d8e2e6);
}
.campus-map-path {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.campus-map-path-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-block: 0.7rem solid transparent;
  border-inline-start: 1.2rem solid var(--accent, var(--red, #dc3c41));
  transform: translate(-50%, -50%) rotate(var(--rot, 0rad));
}
.campus-map-dialog .campus-plan {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
.campus-map-dialog .campus-map--dialog-fit .campus-plan { min-width: 0; }
.campus-map-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  padding: 0 clamp(1rem, 3vw, 2rem) 0.85rem;
}
.campus-map-dialog-actions[hidden] { display: none; }
.campus-map-dialog-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.45rem 1rem;
  color: #fff;
  background: var(--accent, var(--red, #c54236));
  border-radius: 2px;
  font-weight: 700;
  text-decoration: none;
}
.campus-map-dialog-cta:hover { filter: brightness(0.94); }
.campus-map-dialog-cta:focus-visible { outline: 3px solid var(--ink, #182f3a); outline-offset: 2px; }
.campus-map-dialog-fallback { margin: 0; padding: 0.8rem clamp(1rem, 3vw, 2rem) 1.15rem; font-size: 0.9rem; }

/* Cross-site fallback map palette. PCLG's more detailed map rules win where
 * present; these ensure the fetched plan remains meaningful on GFP pages. */
.campus-map-dialog .cm-pavement { fill: #fff; }
.campus-map-dialog .cm-lawn { fill: #e4eff1; }
.campus-map-dialog .cm-paving { fill: #f2f6f7; }
.campus-map-dialog .cm-enclosure,
.campus-map-dialog .cm-arcade { fill: #d5e5e8; }
.campus-map-dialog .cm-courtyard { fill: #fff; }
.campus-map-dialog .cm-canopy { fill: #32a5a6; fill-opacity: 0.25; }
.campus-map-dialog .cm-building { fill: var(--brand-blue, var(--green, #075275)); }
.campus-map-dialog .cm-detail { fill: #a8bdc6; }
.campus-map-dialog .cm-pictogram { fill: #fff; }
.campus-map-dialog [class^="cm-stroke-"],
.campus-map-dialog [class*=" cm-stroke-"] { fill: none; stroke: #a8bdc6; stroke-width: 1; }
.campus-map-dialog .cm-label { font-family: Arial, sans-serif; font-weight: 600; fill: #182f3a; }
.campus-map-dialog .cm-label--building { fill: #fff; }
.campus-map-dialog .cm-label--street,
.campus-map-dialog .cm-label--static { fill: #536b75; }
.campus-map-dialog .cm-hit { fill: transparent; pointer-events: all; transition: fill 120ms ease-out; }
.campus-map-dialog .cm-region { cursor: pointer; }
.campus-map-dialog .cm-region:hover .cm-hit,
.campus-map-dialog .cm-region:focus-visible .cm-hit,
.campus-map-dialog .cm-region--marked .cm-hit { fill: var(--accent, var(--red, #dc3c41)); fill-opacity: 0.94; }
.campus-map-dialog .cm-region:focus-visible .cm-hit { stroke: #182f3a; stroke-width: 3; }

@media (max-width: 700px) {
  .campus-map-dialog { width: 100vw; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .campus-map-dialog-shell { height: 100dvh; max-height: 100dvh; }
  .campus-map-dialog-head { padding: 0.8rem 1rem; }
  .campus-map-dialog-body { padding-inline: 0; }
  .campus-map-dialog .campus-map { padding-block: 0.75rem 0; }
  .campus-map-dialog .campus-plan { width: 100%; height: 100%; min-width: 0; }
  .campus-map-dialog .campus-plan-scroll { border-inline: 0; }
  .campus-map-dialog-fallback { padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .campus-map-dialog .cm-hit { transition: none; }
}