/* ===========================================================
   A Spirited History of Maryland — interactive map
   Preservation Maryland · built for Heather Jones / Jeff Griffith
   Everything is scoped under .shm- so it cannot collide with
   the WordPress theme.
   =========================================================== */

/* --- Brand fonts -------------------------------------------------------
   LaFarge (Typetanic) and Handle Oldstyle are commercial faces supplied
   in the artwork package. They need a WEBFONT licence before this goes
   live; desktop licences do not cover web embedding. If the licence is
   not obtained, delete the two @font-face blocks below and the stack
   falls back to the free alternatives already listed.
   --------------------------------------------------------------------- */
@font-face{
  font-family:'LaFarge';
  src:url('fonts/LaFarge-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'LaFarge';
  src:url('fonts/LaFarge-BoldItalic.woff2') format('woff2');
  font-weight:700; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'HandleOldstyle';
  src:url('fonts/HandleOldstyle.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

.shm-root{
  --shm-ink:#2b2118;
  --shm-parchment:#f3ecd4;
  --shm-wax:#8f2a24;
  --shm-gold:#9a7b33;
  --shm-rule:rgba(43,33,24,.18);
  --shm-shadow:0 18px 46px -14px rgba(32,24,16,.55);
  --shm-pin:clamp(26px, 2.5vw, 38px);

  --shm-serif:'LaFarge', 'Playfair Display', 'Hoefler Text', Georgia, serif;
  --shm-body:'HandleOldstyle', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  position:relative;
  width:100%;
  margin:0 auto;
  font-family:var(--shm-body);
  color:var(--shm-ink);
  -webkit-text-size-adjust:100%;
}
.shm-root *,.shm-root *::before,.shm-root *::after{box-sizing:border-box}

/* ---------- stage ---------- */
.shm-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#dfe6d6;
  border-radius:3px;
  box-shadow:var(--shm-shadow);
  touch-action:none;            /* we handle pinch/pan ourselves */
  cursor:grab;
}
.shm-stage.is-panning{cursor:grabbing}

/* The canvas always keeps the artwork's 16:9 shape. The stage is the window
   onto it — on a phone the stage is taller than 16:9, and the canvas is
   scaled up to fill that height so the map is big enough to use, with
   horizontal panning. */
.shm-canvas{
  position:absolute; top:0; left:0;
  width:100%; aspect-ratio:16/9;
  max-width:none;                 /* the zoomed canvas is wider than the stage */
  transform-origin:0 0;
  transition:transform .42s cubic-bezier(.22,.61,.36,1);
}
/* Only promote the canvas to its own GPU layer while it is actually moving.
   Left on permanently, the browser keeps one cached bitmap of the artwork at
   its unzoomed size and stretches it, which is what made the map look soft
   as soon as you pinched in. */
.shm-canvas.is-moving{will-change:transform}
.shm-canvas.no-anim{transition:none}

.shm-map{
  position:absolute; inset:0;
  width:100%; height:100%;
  user-select:none; -webkit-user-drag:none;
}
.shm-map.is-hidden{display:none}

/* ---------- inset trigger ---------- */
.shm-inset-hit{
  position:absolute;
  border:0; padding:0; margin:0;
  background:transparent;
  cursor:zoom-in;
  border-radius:2px;
  transition:background .2s, box-shadow .2s;
}
.shm-inset-hit:hover,
.shm-inset-hit:focus-visible{
  background:rgba(255,255,255,.16);
  box-shadow:0 0 0 2px rgba(255,255,255,.85) inset;
  outline:none;
}

/* ---------- pins ---------- */
.shm-pin{
  position:absolute;
  width:var(--shm-pin); height:var(--shm-pin);
  margin:calc(var(--shm-pin) / -2) 0 0 calc(var(--shm-pin) / -2);
  padding:0; border:0; background:none;
  cursor:pointer;
  border-radius:50%;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), filter .18s;
  filter:drop-shadow(0 2px 3px rgba(26,20,14,.42));
  -webkit-tap-highlight-color:transparent;
}
.shm-pin img{width:100%;height:100%;display:block;pointer-events:none}
/* Touch target. Deliberately NOT padded out to 44px at the default view:
   several sites sit within a few pixels of each other (St Michaels, Mt Airy,
   the Baltimore cluster) and oversized targets would overlap and steal each
   other's taps. Precision comes from pinch-zoom and from the list below the
   map; the target grows once the map is zoomed in and the pins separate. */
.shm-pin::after{
  content:'';
  position:absolute; left:50%; top:50%;
  width:118%; height:118%;
  transform:translate(-50%,-50%);
  border-radius:50%;
}
.shm-root.is-zoomed .shm-pin::after{width:150%; height:150%}
.shm-pin:hover,.shm-pin:focus-visible{
  transform:scale(1.22);
  filter:drop-shadow(0 4px 8px rgba(26,20,14,.5));
  outline:none; z-index:3;
}
.shm-pin:focus-visible{box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--shm-wax)}
.shm-pin.is-active{transform:scale(1.22); z-index:4}
.shm-pin.is-pending{opacity:.78}

/* ---------- bootlegger route ---------- */
.shm-route{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  opacity:0; transition:opacity .35s;
}
.shm-route.is-on{opacity:1}
.shm-route path{
  fill:none;
  stroke:var(--shm-wax);
  stroke-width:7;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:22 16;
  filter:drop-shadow(0 1px 2px rgba(60,18,14,.55));
}

/* ---------- controls ---------- */
.shm-controls{
  position:absolute; left:14px; top:14px;
  display:flex; flex-direction:column; gap:8px;
  z-index:9;                       /* always reachable, even over an open card */
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
/* slide clear of the card while one is open, so "Back to Maryland" is never
   buried — the card is anchored to the same corner */
@media (min-width:768px){
  .shm-root.has-popup .shm-controls{
    transform:translateX(calc(var(--shm-card-w, 300px) + 10px));
  }
}
.shm-btn{
  display:inline-flex; align-items:center; gap:7px;
  min-height:38px; padding:8px 14px;
  font-family:var(--shm-serif); font-weight:700;
  font-size:13px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--shm-parchment);
  background:linear-gradient(177deg,#3a2c1f,#241a12);
  border:1px solid rgba(243,236,212,.3);
  border-radius:2px; cursor:pointer;
  box-shadow:0 3px 10px rgba(24,18,12,.4);
  transition:background .18s, transform .18s, border-color .18s;
}
.shm-btn:hover{background:linear-gradient(177deg,#4a392a,#2f2217); border-color:rgba(243,236,212,.55)}
.shm-btn:active{transform:translateY(1px)}
.shm-btn:focus-visible{outline:2px solid var(--shm-parchment); outline-offset:2px}
.shm-btn[hidden]{display:none}
.shm-btn[aria-pressed="true"]{background:linear-gradient(177deg,#7d2a22,#5c1d17); border-color:rgba(243,236,212,.6)}
.shm-btn svg{width:13px;height:13px;fill:currentColor;flex:none}
.shm-btn .shm-short{display:none}
@media (max-width:767px){.shm-btn .shm-short{display:inline}}

/* right edge, vertically centred: clears the legend in the bottom-right of
   the state map and the one in the top-right of the Baltimore inset */
.shm-zoom{
  position:absolute; right:14px; top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; gap:1px; z-index:9;
}
.shm-zoom button{
  width:38px; height:38px;
  font:700 19px/1 var(--shm-body);
  color:var(--shm-parchment);
  background:linear-gradient(177deg,#3a2c1f,#241a12);
  border:1px solid rgba(243,236,212,.3);
  cursor:pointer;
}
.shm-zoom button:first-child{border-radius:2px 2px 0 0}
.shm-zoom button:last-child{border-radius:0 0 2px 2px}
.shm-zoom button:hover{background:linear-gradient(177deg,#4a392a,#2f2217)}
.shm-zoom button:focus-visible{outline:2px solid var(--shm-parchment); outline-offset:2px}

/* ---------- popup: desktop ----------
   Heather asked for bottom-left "where there's room". In the final artwork
   the logo now occupies that corner, so the card sits on the left but
   vertically centred — over the empty Virginia / West Virginia area, clear
   of both the logo and the legend. Easy to move back if Jeff prefers. */
.shm-popup{
  position:absolute; left:2.4%; top:4%;
  height:78%;
  z-index:8;
  opacity:0; visibility:hidden;
  transform:translateY(10px);
  transition:opacity .28s, transform .28s, visibility .28s;
}
.shm-popup.is-open{transform:none}
.shm-popup.is-open{opacity:1; visibility:visible}
/* sized by height so a portrait card always fits the map, whatever the
   viewport; the width follows from the card's own proportions */
.shm-popup-inner{
  position:relative;
  height:100%; max-width:100%;
  border-radius:3px;
  overflow:hidden;
  box-shadow:0 22px 50px -12px rgba(28,20,12,.72);
  background:var(--shm-parchment);
}
.shm-popup img{height:100%; width:auto; max-width:none; display:block}
.shm-popup .shm-card-fallback{height:100%; width:300px; overflow-y:auto}

/* fallback card for locations with no artwork yet */
.shm-card-fallback{
  padding:30px 26px 26px;
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,.5), transparent 60%),
    var(--shm-parchment);
  border:7px solid var(--shm-gold);
  text-align:center;
}
.shm-card-fallback .shm-era{
  font-family:var(--shm-serif); font-size:11px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--shm-gold);
  margin:0 0 14px;
}
.shm-card-fallback h3{
  font-family:var(--shm-serif); font-weight:700;
  font-size:21px; line-height:1.18; margin:0 0 8px; color:var(--shm-ink);
}
.shm-card-fallback .shm-addr{
  font-style:italic; font-size:13px; line-height:1.45;
  margin:0 0 12px; color:#5d4c38;
}
.shm-card-fallback p:last-child{font-size:14px; line-height:1.5; margin:0}

.shm-close{
  position:absolute; right:9px; top:9px;
  width:32px; height:32px;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:rgba(26,19,12,.62); color:#f3ecd4;
  font-size:17px; line-height:1; cursor:pointer;
  transition:background .18s, transform .18s;
  z-index:2;
}
.shm-close:hover{background:rgba(26,19,12,.85); transform:rotate(90deg)}
.shm-close:focus-visible{outline:2px solid #fff; outline-offset:2px}

.shm-sheet-grip{display:none}
/* On desktop the card sits on the map, as in Heather's layout — no dimming.
   On a phone it is a bottom sheet, where a scrim is the expected behaviour. */
.shm-scrim{
  position:absolute; inset:0;
  background:rgba(22,16,10,.28);
  opacity:0; visibility:hidden;
  transition:opacity .28s, visibility .28s;
  z-index:7;
}
.shm-scrim.is-open{opacity:1; visibility:visible}

/* ---------- location list (below the map) ---------- */
.shm-list{
  margin:22px 0 0; padding:0; list-style:none;
  display:grid; gap:9px;
  grid-template-columns:repeat(auto-fill, minmax(255px, 1fr));
  /* every row as tall as the tallest entry, so a two-line name like Wye
     Island doesn't leave the rest of the list sitting unevenly */
  grid-auto-rows:1fr;
}
.shm-list li{min-width:0; display:flex}
.shm-list button{
  display:flex; align-items:center; gap:11px;
  width:100%; min-width:0; max-width:100%; min-height:48px; height:100%;
  overflow:hidden;
  padding:9px 13px; text-align:left;
  background:var(--shm-parchment);
  border:1px solid var(--shm-rule);
  border-radius:2px; cursor:pointer;
  font-family:inherit; color:inherit;
  transition:background .16s, border-color .16s, transform .16s;
}
.shm-list button:hover{background:#fff; border-color:var(--shm-gold); transform:translateX(2px)}
.shm-list button:focus-visible{outline:2px solid var(--shm-wax); outline-offset:1px}
.shm-list img{width:26px; height:26px; flex:none}
.shm-list .shm-li-text{min-width:0; flex:1 1 auto; overflow:hidden}
.shm-list .shm-li-title{
  display:block; font-family:var(--shm-serif); font-weight:700;
  font-size:14px; line-height:1.25; overflow-wrap:anywhere;
}
.shm-list .shm-li-sub{
  display:block; font-size:12px; color:#6b5a44; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.shm-hint{
  margin:14px 0 0; font-size:13px; color:#6b5a44; text-align:center;
}

/* screen-reader-only text: carries every card's words for assistive tech
   and search engines, since the cards themselves are images */
.shm-sr{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- phone ---------- */
@media (max-width:767px){
  .shm-root{--shm-pin:30px}

  /* taller window onto the map so Maryland is big enough to read and tap;
     the map is scaled to fill this height and pans left/right */
  .shm-stage{aspect-ratio:auto; height:min(66vh, 480px)}

  .shm-scrim{position:fixed; background:rgba(22,16,10,.55); z-index:998}

  .shm-popup{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    height:auto; width:100%; max-width:100vw; max-height:88vh;
    transform:translateY(100%);
    transition:transform .34s cubic-bezier(.22,.61,.36,1), opacity .2s, visibility .2s;
    overflow:hidden; z-index:999;
  }
  .shm-popup.is-open{transform:translateY(0)}
  .shm-popup-inner{
    height:auto;
    border-radius:16px 16px 0 0;
    max-height:88vh; overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-top:22px;
  }
  .shm-popup img{width:100%; height:auto}
  .shm-popup .shm-card-fallback{width:auto; height:auto}
  /* keep the route control compact on a small screen */
  .shm-btn .shm-long{display:none}
  .shm-sheet-grip{
    display:block; position:absolute; left:50%; top:8px;
    width:42px; height:4px; margin-left:-21px;
    border-radius:99px; background:rgba(60,45,30,.3); z-index:3;
  }
  .shm-close{right:10px; top:14px}
  .shm-controls{left:10px; top:10px}
  .shm-btn{font-size:11px; padding:7px 11px; min-height:36px}
  .shm-zoom{right:10px}
  .shm-list{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .shm-root *{transition-duration:.01ms!important; animation-duration:.01ms!important}
}