/* TPA footer map. Loads after the theme's last stylesheet, so these win
   without !important. Every layout rule is scoped with :has(.tpa-fmap-col),
   so if the map is ever not injected the footer keeps its original grid. */

/* the grid: four columns on desktop, map at the far right */
.site-footer .cols:has(.tpa-fmap-col){grid-template-columns:1.55fr 1fr 1fr 1.2fr}

/* tablet: two by two, map beside the address */
@media (max-width:1100px){
  .site-footer .cols:has(.tpa-fmap-col){grid-template-columns:1fr 1fr}
  .site-footer .cols:has(.tpa-fmap-col)>.tpa-fmap-col{order:1}
  .site-footer .cols:has(.tpa-fmap-col)>div:not(:first-child):not(.tpa-fmap-col){order:2}
}
/* phone: one column, map right under the address */
@media (max-width:600px){
  .site-footer .cols:has(.tpa-fmap-col){grid-template-columns:1fr}
}

/* the card: the whole thing is one link to Google Maps directions */
.site-footer a.tpa-fmap{display:block;color:var(--ground);text-decoration:none}
.site-footer a.tpa-fmap:hover{text-decoration:none}
.tpa-fmap__map{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--radius);border:1px solid rgba(250,243,233,.16);background:#322A25}
.tpa-fmap__map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:filter var(--m-quick) var(--e-out)}
.tpa-fmap:hover .tpa-fmap__map img{filter:brightness(1.18)}
@media (max-width:600px){ .tpa-fmap__map{aspect-ratio:16/9} }

/* the pin: its tip sits on the office, which is the centre of the picture */
.tpa-fmap__pin{position:absolute;left:50%;top:50%;width:30px;height:auto;
  transform:translate(-50%,-100%);filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));
  transition:transform var(--m-quick) var(--e-out)}
.tpa-fmap__pin path{fill:var(--green-300)}
.tpa-fmap__pin circle{fill:var(--bark)}
.tpa-fmap:hover .tpa-fmap__pin{transform:translate(-50%,-100%) translateY(-3px)}
/* a soft ring where the pin meets the ground */
.tpa-fmap__map::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;
  margin:-7px 0 0 -7px;border-radius:50%;border:2px solid var(--green-300);opacity:0;
  animation:tpa-fmap-ring 2.6s var(--e-out) infinite}
@keyframes tpa-fmap-ring{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.6);opacity:0}}

.tpa-fmap__osm{position:absolute;right:6px;bottom:4px;font-family:var(--sans);font-size:11px;
  line-height:1.2;color:rgba(250,243,233,.55);pointer-events:none}

/* the label under it, styled like the footer's own links */
.tpa-fmap__cta{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s-3);
  font-family:var(--sans);font-size:var(--t-c);font-weight:500;min-height:var(--touch-min)}
.tpa-fmap__cta svg{transition:transform var(--m-quick) var(--e-out)}
.tpa-fmap:hover .tpa-fmap__cta{text-decoration:underline;text-underline-offset:3px}
.tpa-fmap:hover .tpa-fmap__cta svg{transform:translateX(3px)}
.site-footer a.tpa-fmap:focus-visible{outline:2px solid var(--green-300);outline-offset:4px;border-radius:var(--radius)}

@media (prefers-reduced-motion:reduce){
  .tpa-fmap__map::after{animation:none;opacity:.5;transform:scale(1.6)}
  .tpa-fmap__pin,.tpa-fmap__cta svg,.tpa-fmap__map img{transition:none}
  .tpa-fmap:hover .tpa-fmap__pin{transform:translate(-50%,-100%)}
}