/* Unified, directly labelled memorial markers with leader arrows. */
.map-marker {
  --marker-color: #687983;
  --label-left: 28px;
  --label-top: -17px;
  --leader-length: 20px;
  --leader-angle: 0deg;
  position: absolute;
  z-index: 6;
  width: 0;
  height: 0;
}

.map-marker__pin {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--marker-color);
  color: #fff;
  font: 800 .5rem/1 Arial, sans-serif;
  font-style: normal;
  box-shadow: 0 4px 11px rgba(7,22,34,.22);
  transform: translate(-50%,-50%);
}

.map-marker__leader {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: var(--leader-length);
  height: 0;
  border-top: 1.5px solid var(--marker-color);
  transform: rotate(var(--leader-angle)) translateX(8px);
  transform-origin: 0 50%;
}

.map-marker__leader:before {
  content: "";
  position: absolute;
  top: -4px;
  left: -1px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-right: 6px solid var(--marker-color);
  border-bottom: 4px solid transparent;
}

.map-marker__label {
  position: absolute;
  z-index: 3;
  top: var(--label-top);
  left: var(--label-left);
  display: block;
  width: max-content;
  max-width: 142px;
  padding: 5px 7px;
  border: 1px solid rgba(16,41,61,.16);
  background: rgba(245,241,231,.96);
  box-shadow: 0 3px 10px rgba(7,22,34,.11);
  color: #40515b;
  line-height: 1.15;
}

.map-marker__label b {
  display: block;
  font: 800 .56rem/1.24 Arial, sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.map-marker__label small {
  display: block;
  margin-top: 3px;
  color: #766646;
  font: 700 .48rem/1.28 Arial, sans-serif;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.map-marker.is-future .map-marker__pin {
  border: 1px dashed #665b4d;
  background: #f5f1e7;
  color: #665b4d;
  box-shadow: 0 0 0 1px rgba(102,91,77,.55);
}

.map-marker.is-primary .map-marker__pin {
  width: 28px;
  height: 28px;
  border-width: 3px;
  font-size: .72rem;
}

.map-marker.is-primary .map-marker__label {
  max-width: 158px;
  border-color: color-mix(in srgb,var(--marker-color) 38%,transparent);
  box-shadow: 0 4px 13px rgba(7,22,34,.13);
}

.map-marker.is-primary .map-marker__label b { font-size: .59rem; }
.map-marker--vietnam { top: 51%; left: 12%; --label-top: 38px; --leader-length: 39px; --leader-angle: 54deg; }
.map-marker--korean { top: 72%; left: 12%; --label-top: 6px; --leader-length: 21px; --leader-angle: 12deg; }
.map-marker--korean .map-marker__label { max-width: 115px; }
.map-marker--desert { top: 42%; left: 5%; --label-top: -72px; --leader-length: 20px; --leader-angle: -8deg; }
.map-marker--desert .map-marker__label { max-width: 132px; }
.map-marker--gwot { top: 44%; left: 18%; --label-top: -21px; --leader-length: 20px; --leader-angle: 0deg; }
.map-marker--gwot .map-marker__label { max-width: 150px; }
.map-marker--dc { top: 76%; left: 23%; --marker-color: var(--gold); --label-left: 38px; --label-top: -21px; --leader-length: 30px; --leader-angle: 0deg; }
.map-marker--national { top: 29%; left: 48%; --marker-color: #8f2e2e; --label-left: 38px; --label-top: -21px; --leader-length: 30px; --leader-angle: 0deg; }
.memorial-locator__figure figcaption { max-width: 930px; }

@media (max-width: 780px) {
  .memorial-locator__map { height: 445px; }
  .map-marker__label { max-width: 118px; }
  .map-marker--desert { left: 4%; }
  .map-marker--gwot { left: 17%; }
}

@media (max-width: 620px) {
  .memorial-locator__map { height: 540px; }
  .map-marker { --label-left: 22px; }
  .map-marker__pin {
    width: 17px;
    height: 17px;
    border-width: 1px;
    font-size: .42rem;
  }
  .map-marker__leader { transform: rotate(var(--leader-angle)) translateX(7px); }
  .map-marker__label { max-width: 108px; padding: 5px 6px; }
  .map-marker__label b { font-size: .58rem; line-height: 1.23; }
  .map-marker__label small { font-size: .5rem; line-height: 1.32; }
  .map-marker.is-primary .map-marker__pin { width: 23px; height: 23px; border-width: 2px; font-size: .6rem; }
  .map-marker.is-primary .map-marker__label { max-width: 120px; }
  .map-marker.is-primary .map-marker__label b { font-size: .6rem; }
  .map-marker--desert { top: 42%; left: 3%; --label-top: -92px; --leader-length: 21px; --leader-angle: -38deg; }
  .map-marker--desert .map-marker__label { max-width: 116px; }
  .map-marker--gwot { top: 45%; left: 7%; --label-top: -28px; --leader-length: 15px; --leader-angle: 0deg; }
  .map-marker--gwot .map-marker__label { max-width: 122px; }
  .map-marker--vietnam { top: 53%; left: 7%; --label-top: 34px; --leader-length: 34px; --leader-angle: 57deg; }
  .map-marker--korean { top: 72%; left: 7%; --label-top: -22px; --leader-length: 18px; --leader-angle: -18deg; }
  .map-marker--korean .map-marker__label { max-width: 92px; }
  .map-marker--dc { top: 77%; left: 22%; --label-left: 82px; --label-top: -18px; --leader-length: 73px; }
  .map-marker--national { top: 29%; left: 48%; --label-left: 31px; --label-top: -18px; --leader-length: 23px; }
}