/* =========================================================
   Campus pedway map — loaded only by /campus-pedways/ via the
   `extra_css` front-matter hook in _layouts/default.html.
   Reuses the design tokens declared in style.css.
   ========================================================= */

.pedway-page { padding: 34px 24px 72px; }
.pedway-page .section-heading { margin-bottom: 16px; }
.pedway-check,
.pedway-map-section,
.pedway-networks { margin-top: 40px; }

/* ---- Safety notice ---- */
.pedway-warning {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 26px;
  padding: 20px 22px;
  border: 2px solid #b3261e;
  border-radius: var(--radius);
  background: #fdf6f5;
}
.pedway-warning__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #b3261e;
  color: #fff;
}
.pedway-warning__icon .icon { width: 22px; height: 22px; }
.pedway-warning h2 { font-size: 19px; font-weight: 900; }
.pedway-warning p {
  margin-top: 6px;
  color: #4a3a38;
  font-size: 14.5px;
  line-height: 1.55;
}
.pedway-warning__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.pedway-warning__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid #e6c9c6;
  border-radius: 999px;
  background: #fff;
  color: #8c1d16;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.pedway-warning__links a:hover { background: #fdf0ee; }
.pedway-warning__links .icon { width: 13px; height: 13px; }

/* ---- Connection checker ---- */
.pedway-check {
  padding: 22px 24px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--footer-bg);
  box-shadow: var(--shadow-card);
}
.pedway-check__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pedway-check__row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Grid items default to min-width:auto, so the column refuses to shrink below
     the widest <option> ("Centennial Centre for Interdisciplinary Science").
     That pushed the second select outside the panel. */
  min-width: 0;
}
.pedway-check__row span {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pedway-check__row select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-overflow: ellipsis;
}
.pedway-check__result {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border-left: 5px solid var(--line);
  background: #fff;
  color: #3a4038;
  font-size: 14.5px;
  line-height: 1.55;
}
.pedway-check.is-yes .pedway-check__result {
  border-left-color: var(--green);
  background: #f1f7f3;
}
.pedway-check.is-no .pedway-check__result {
  border-left-color: #b3261e;
  background: #fdf6f5;
}

.pedway-check__hint {
  margin: -8px 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ---- Turn-by-turn directions ---- */
.pedway-directions {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1.5px solid var(--green);
  border-radius: var(--radius);
  background: #fff;
}
.pedway-directions h3 {
  font-size: 15.5px;
  font-weight: 900;
  color: var(--green-dark);
  margin-bottom: 10px;
}
.pedway-directions ol {
  counter-reset: pedway-step;
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pedway-directions li {
  counter-increment: pedway-step;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 30px;
  font-size: 14px;
  line-height: 1.45;
}
.pedway-directions li::before {
  content: counter(pedway-step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 11.5px;
  font-weight: 900;
}
.pedway-directions li > span { font-weight: 700; }
.pedway-directions__warn {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--cream);
  color: #4a3a38;
  font-size: 13.5px;
  line-height: 1.5;
}
.pedway-directions__warn.is-closed {
  background: #fdf6f5;
  color: #8c1d16;
  font-weight: 700;
}

.pedway-entrance-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

/* ---- Map ---- */
.pedway-map-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.pedway-map-head .section-heading { margin: 6px 0 0; }
.pedway-map-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pedway-map {
  height: 540px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--cream);
  overflow: hidden;
}
.pedway-map__fallback {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  padding: 24px;
  color: var(--muted);
  text-align: center;
  font-size: 14.5px;
}
/* Leaflet ships its own font stack for the map container, popups, zoom controls
   and the attribution bar. Without these overrides the map is the one part of
   the site not set in Inter. */
.pedway-map .leaflet-container,
.pedway-map .leaflet-container .leaflet-popup-content,
.pedway-map .leaflet-container .leaflet-control,
.pedway-map .leaflet-container .leaflet-control-attribution {
  font-family: var(--font);
}
.pedway-map .leaflet-container { font-size: 14px; }

.pedway-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
}
.pedway-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.pedway-swatch {
  width: 20px;
  height: 5px;
  border-radius: 3px;
  background: var(--muted);
}
.pedway-swatch--n1 { background: #1b6b3a; }
.pedway-swatch--n2 { background: #1d4ed8; }
.pedway-swatch--n3 { background: #b45309; }
.pedway-swatch--n4 { background: #7c3aed; }
.pedway-swatch--n5 { background: #0f766e; }
.pedway-swatch--n6 { background: #be185d; }
.pedway-swatch--n7 { background: #475569; }
.pedway-swatch--route {
  height: 7px;
  background: var(--gold);
  box-shadow: 0 0 0 2px var(--ink);
}
.pedway-swatch--entrance {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--gold);
}
.pedway-swatch--dashed {
  height: 0;
  border-top: 4px dashed var(--muted);
  border-radius: 0;
  background: none;
}

/* ---- Popups ---- */
.pedway-pop h3 { font-size: 15px; font-weight: 800; line-height: 1.3; }
.pedway-pop__meta {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.pedway-pop p { margin-top: 6px; font-size: 13px; line-height: 1.5; }
.pedway-pop__route { color: var(--muted); font-style: italic; }
.pedway-pop__badge {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pedway-pop__badge.is-open { background: #e2f3ec; color: #0f6b4a; }
.pedway-pop__badge.is-closed { background: #fdeef0; color: #b3261e; }
.pedway-pop__badge.is-unknown { background: var(--cream); color: #6b5b00; }

/* ---- Network list (also the no-JavaScript fallback) ---- */
.pedway-networks__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 20px;
}
.pedway-network {
  padding: 18px;
  border: 1.5px solid var(--line);
  border-top-width: 5px;
  border-radius: var(--radius);
  background: #fff;
}
.pedway-network--n1 { border-top-color: #1b6b3a; }
.pedway-network--n2 { border-top-color: #1d4ed8; }
.pedway-network--n3 { border-top-color: #b45309; }
.pedway-network--n4 { border-top-color: #7c3aed; }
.pedway-network__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.pedway-network__top h3 { font-size: 16px; font-weight: 900; }
.pedway-network__top span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.pedway-network ul {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pedway-network li {
  position: relative;
  padding-left: 15px;
  font-size: 13.5px;
  line-height: 1.45;
}
.pedway-network li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.pedway-orphans {
  margin-top: 18px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .pedway-networks__grid { grid-template-columns: repeat(2, 1fr); }
  .pedway-map-head { align-items: start; flex-direction: column; gap: 10px; }
  .pedway-map { height: 460px; }
}

@media (max-width: 640px) {
  .pedway-page { padding: 22px 18px 56px; }
  .pedway-check { padding: 18px; }
  .pedway-check__row { grid-template-columns: 1fr; }
  .pedway-networks__grid { grid-template-columns: 1fr; }
  .pedway-map { height: 380px; }
  .pedway-warning { flex-direction: column; padding: 18px; }
}