/* SafeWalkr front page: the contact block, "the walk, arrived".
   landing.contact.js clones the hero's street network and walk into the
   empty tile, fits the whole walk inside it and pins the email to the school
   dot, then adds .is-live. Without that class the block is a plain card:
   title, names, email. Light only, like the rest of the landing. */

/* ------------------------------------------------ fallback: a plain card */

.mapc {
  container: mapc / inline-size;
  position: relative;
  max-width: 34rem;
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3.4vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.mapc__tile {
  display: none;
}

.mapc__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.mapc__title svg {
  width: 24px;
  height: 24px;
  flex: none;
}
.mapc__title .w {
  color: var(--accent);
}
.mapc__people {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}
.mapc__people .aka {
  font-weight: 600;
  color: var(--ink-quiet);
}

.mapc__mail {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--accent);
  text-decoration: none;
  border-radius: 6px;
}
.mapc__addr {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--accent-wash-line);
  transition: color 0.2s, text-decoration-color 0.2s;
}
.mapc__mail:hover .mapc__addr {
  color: var(--accent-strong);
  text-decoration-color: currentColor;
}
.mapc__mail:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
.mapc__pin {
  display: none;
}

/* ------------------------------------------------ live: the map tile */

.mapc.is-live {
  max-width: none;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.mapc.is-live .mapc__tile {
  display: block;
  position: relative;
  height: clamp(21rem, 32cqi, 25rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #edf0eb;
  box-shadow: var(--shadow-1);
}
.mapc__svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* streets: white roads on a grey-green ground, cased so they read */
.mapc__case,
.mapc__road,
.mapc__walkCase,
.mapc__walk {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.mapc__case { stroke: #d2d8d0; }
.mapc__road { stroke: #ffffff; }
.mapc__case--l { stroke-width: 5.5px; }
.mapc__road--l { stroke-width: 3.2px; }
.mapc__case--c { stroke-width: 8px; }
.mapc__road--c { stroke-width: 5.6px; }
.mapc__case--a { stroke-width: 11px; stroke: #c9d0c7; }
.mapc__road--a { stroke-width: 8px; }

/* the walk: one calm accent line, cased in white */
.mapc__walkCase { stroke: var(--route-casing, #fff); stroke-width: 9px; }
.mapc__walk { stroke: var(--accent-fill); stroke-width: 5px; }
.mapc__start {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
}

/* the key: title and makers */
.mapc.is-live .mapc__key {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1;
  width: 18.5rem;
  padding: 1.15rem 1.35rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

/* the email, pinned to the school dot (left/top set by landing.contact.js) */
.mapc.is-live .mapc__mail {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  margin: 0;
  gap: 0.6rem;
  font-size: clamp(1.15rem, 2.1cqi, 1.6rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.mapc.is-live .mapc__mail--right {
  flex-direction: row-reverse;
}
.mapc.is-live .mapc__addr {
  padding: 0.12em 0.3em 0.16em;
  border-radius: 6px;
  background: rgb(237 240 235 / 0.88);
  text-decoration-color: rgb(0 103 127 / 0.35);
}
.mapc.is-live .mapc__mail:hover .mapc__addr {
  color: var(--accent-strong);
  text-decoration-color: currentColor;
}
.mapc.is-live .mapc__mail:focus-visible {
  outline-offset: 3px;
}
.mapc.is-live .mapc__pin {
  position: relative;
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 3px #fff;
}
/* the school's soft halo, a touch wider on hover and focus */
.mapc.is-live .mapc__pin::before {
  content: "";
  position: absolute;
  inset: -13px;
  z-index: -1;
  border-radius: 50%;
  background: rgb(255 181 0 / 0.26);
  transition: transform 0.35s var(--ease-out), background-color 0.35s var(--ease-out);
}
.mapc.is-live .mapc__mail:hover .mapc__pin::before,
.mapc.is-live .mapc__mail:focus-visible .mapc__pin::before {
  transform: scale(1.3);
  background: rgb(255 181 0 / 0.34);
}

@media (prefers-reduced-motion: reduce) {
  .mapc__addr,
  .mapc.is-live .mapc__pin::before {
    transition: none;
  }
}

/* narrow: the tile on top, the key below it, nothing over the walk */
@container mapc (max-width: 700px) {
  .mapc.is-live .mapc__tile {
    height: 17rem;
  }
  .mapc.is-live .mapc__key {
    position: static;
    width: auto;
    margin-top: 0.75rem;
    border-radius: var(--radius-lg);
  }
  .mapc.is-live .mapc__mail {
    font-size: 1.1rem;
  }
}