/* ------------------------------------------------------------
   PIH Member Tribes map
   Inline SVG base map + <button popovertarget> pins laid over it at
   projected % positions. Each pin opens a native popover card.
   Colors: WA Sockeye, OR Fir, ID River; map Coastal on Ivory (design).
   ------------------------------------------------------------ */

.pih-tribes {
  --map-land: var(--coastal, #acc9c9);
  --map-border: #fff;
  --map-label: #fff;
  --pin-wa: var(--sockeye, #b22e0c);
  --pin-or: var(--fir, #007142);
  --pin-id: var(--river, #064f83);
  --ink: var(--contrast, #222222);
  --legacy: var(--accent, #007777);
  --pnw-dark: var(--pnw, #003f3f);
  --focus: #ffbf47;

  font-family: Lato, sans-serif;
  color: var(--ink);
}

/* ---------- Map ---------- */
.pih-map {
  position: relative;
  max-inline-size: 60rem;
  margin-inline: auto;
}

.pih-map-svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.pih-map-state {
  fill: var(--map-land);
  stroke: var(--map-border);
  stroke-width: 3;
  stroke-linejoin: round;
}

.pih-map-labels text {
  fill: var(--map-label);
  font: 700 22px/1 Lato, sans-serif;
  letter-spacing: 0.2em;
  text-anchor: middle;
}

/* ---------- Pins ---------- */
.pih-pin {
  --pin: var(--legacy);
  position: absolute;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  /* Pin tip sits on the coordinate */
  translate: -50% -100%;
  inline-size: 26px;
  block-size: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 1;

  /* Teardrop */
  &::before {
    content: "";
    position: absolute;
    inset: 0 0 8px;
    background: var(--pin);
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 0;
    rotate: -45deg;
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.3);
  }

  span {
    position: absolute;
    inset: 0 0 8px;
    display: grid;
    place-items: center;
    color: #fff;
    font: 700 11px/1 Lato, sans-serif;
  }

  &[data-state="wa"] { --pin: var(--pin-wa); }
  &[data-state="or"] { --pin: var(--pin-or); }
  &[data-state="id"] { --pin: var(--pin-id); }

  /* GeneratePress paints button:focus/:hover backgrounds; keep the pin clean */
  &:is(:hover, :focus, :active) { background: transparent; color: inherit; }
  &:hover, &:focus-visible { z-index: 2; scale: 1.15; }
  &:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 50%; }

  /* 44px hit area (SC 2.5.8) without growing the visual pin */
  &::after {
    content: "";
    position: absolute;
    inset: -5px -9px -2px;
  }
}

/* ---------- Popover card ---------- */
.pih-pin-card {
  /* Reset UA popover styles: inset 0 + margin auto would stretch or center it */
  position: fixed;
  inset: auto;
  margin: 0;
  border: 0;
  inline-size: min(20rem, calc(100vw - 2rem));
  block-size: auto;
  max-block-size: min(70vh, 30rem);
  overflow: auto;
  padding: 20px 44px 20px 20px;
  background: #fff;
  color: var(--ink);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.22);
  border-block-start: 4px solid var(--legacy);

  &:popover-open { display: grid; gap: 6px; }

  /* Anchored callout: bottom-left corner sits just above and to the right of
     the pin. Explicit anchor() insets (not position-area) so the card keeps
     its content size; WebKit stretches boxes placed with position-area.
     Fallbacks: to the left of the pin, then below on either side. */
  @supports (inset-block-end: anchor(top)) {
    position: absolute;
    inset-block-end: calc(anchor(top) + 4px);
    inset-inline-start: calc(anchor(right) + 4px);
    position-try-fallbacks: --top-left, --bottom-right, --bottom-left, --above-center, --below-center;
  }

  /* Browsers without anchor positioning: pih-tribes.js sets --card-x/--card-y */
  @supports not (inset-block-end: anchor(top)) {
    inset-inline-start: var(--card-x, 50%);
    inset-block-start: var(--card-y, 50%);
  }
}

@position-try --top-left     { inset: auto; inset-block-end: calc(anchor(top) + 4px);    inset-inline-end: calc(anchor(left) + 4px); }
@position-try --bottom-right { inset: auto; inset-block-start: calc(anchor(bottom) + 4px); inset-inline-start: calc(anchor(right) + 4px); }
/* Phones: nothing fits beside the pin, so center on it and let the browser shift it inward */
@position-try --above-center { inset: auto; inset-block-end: calc(anchor(top) + 4px);    justify-self: anchor-center; }
@position-try --below-center { inset: auto; inset-block-start: calc(anchor(bottom) + 4px); justify-self: anchor-center; }
@position-try --bottom-left  { inset: auto; inset-block-start: calc(anchor(bottom) + 4px); inset-inline-end: calc(anchor(left) + 4px); }

.pih-pin-logo {
  inline-size: auto;
  max-inline-size: 100%;
  max-block-size: 72px;
  object-fit: contain;
  margin-block-end: 4px;
}

.pih-pin-title {
  margin: 0;
  font: 700 18px/1.3 Lato, sans-serif;
}

.pih-pin-state {
  margin: 0;
  font-size: 14px;
  color: #575760;
}

.pih-pin-link {
  color: var(--legacy);
  font-weight: 600;
  text-decoration: underline;
  overflow-wrap: anywhere;
  &:hover { color: var(--pnw-dark); }
}

.pih-pin-close {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font: 400 22px/1 Lato, sans-serif;
  cursor: pointer;
  &:is(:hover, :focus, :active) { background: #f0f0f0; color: var(--ink); padding: 0; }
  &:focus-visible { outline-offset: 0; }
}

.pih-tribes :is(a, button):focus-visible {
  outline: 3px solid var(--legacy);
  outline-offset: 2px;
}
.pih-pin-card :focus-visible { outline-color: var(--legacy); }

/* ---------- Lists by state ---------- */
.pih-tribe-list {
  max-inline-size: 60rem;
  margin: 32px auto 0;

  h3 {
    margin: 0 0 12px;
    font: 600 24px/1.2 Lato, sans-serif;
    color: var(--pnw-dark);
  }

  ol {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 3;
    column-gap: 32px;
  }

  li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    break-inside: avoid;
    font-size: 16px;
    line-height: 1.4;
  }

  a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
  a:hover { color: var(--legacy); }

  &[data-state="wa"] .pih-badge { background: var(--pin-wa); }
  &[data-state="or"] .pih-badge { background: var(--pin-or); }
  &[data-state="id"] .pih-badge { background: var(--pin-id); }
}

.pih-badge {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 2px;
  border-radius: 50%;
  background: var(--legacy);
  color: #fff;
  font: 700 11px/1 Lato, sans-serif;
}

@media (width <= 900px) { .pih-tribe-list ol { columns: 2; } }
@media (width <= 560px) { .pih-tribe-list ol { columns: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .pih-pin { transition: scale 0.15s ease; }
}

@media (forced-colors: active) {
  .pih-map-state { fill: Canvas; stroke: CanvasText; }
  .pih-pin::before { border-color: CanvasText; }
}