/* ==========================================================================
   FOOTER MAP + GOOGLE REVIEWS
   Owner: Assistant 5, Leverage Department. 2026-09-22.
   Every rule in this file is scoped under .ft-map. It touches nothing else on
   the page, so it can load after site.css without fighting it.

   WHY THIS FILE EXISTS AT ALL: the site sends style-src 'self' with no
   'unsafe-inline'. Tony's Maps snippet carries style="border:0;" and the
   browser refuses inline style under that policy. The border reset lives here
   instead. Adding 'unsafe-inline' would have "fixed" it by turning off the
   control, which is not a fix.
   ========================================================================== */

.ft-map {
  /* Prefer the site's own tokens when site.css defines them; the fallbacks are
     the client's documented palette so this block is correct on its own. */
  --ftm-surface:   var(--surface-dark,  #0E0E0E);
  --ftm-surface-2: var(--surface-dark-2,#171717);
  --ftm-ink:       var(--ink-on-dark,   #FAFAFA);
  --ftm-muted:     var(--ink-muted,     #A9A9A9);
  --ftm-rule:      var(--hairline,      rgba(250, 250, 250, 0.14));
  --ftm-accent:    var(--accent,        #FD6262);
  --ftm-radius: 2px;

  display: block;
  width: 100%;
  max-width: 100%;
  background: var(--ftm-surface);
  color: var(--ftm-ink);
  border-top: 1px solid var(--ftm-rule);
  padding: 2.5rem 1rem 2rem;
  font-size: 1rem;
  line-height: 1.55;
}

.ft-map,
.ft-map *,
.ft-map *::before,
.ft-map *::after { box-sizing: border-box; }

.ft-map-inner { max-width: 1200px; margin: 0 auto; }

.ft-map h2 {
  margin: 0 0 0.35rem;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ftm-ink);
}

/* Hairline accent under each heading. Decorative, so it is a pseudo-element
   and never reaches the accessibility tree. */
.ft-map h2::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin-top: 0.6rem;
  background: var(--ftm-accent);
}

.ft-map p { margin: 0 0 0.5rem; overflow-wrap: break-word; }

.ft-map a { color: var(--ftm-ink); text-decoration: underline; text-underline-offset: 3px; }
.ft-map a:hover,
.ft-map a:focus-visible { color: var(--ftm-accent); }
.ft-map a:focus-visible { outline: 2px solid var(--ftm-accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Layout: map beside the address on wide screens, stacked below 900px.
   minmax(0, ...) on every track: without it a grid item refuses to shrink
   below its content and pushes the page into horizontal scroll.
   -------------------------------------------------------------------------- */
.ft-map-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 1.25rem;
}
@media (min-width: 900px) {
  .ft-map-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   The embed. Responsive box, intrinsic ratio, no layout shift as it loads.
   -------------------------------------------------------------------------- */
.ft-map-embed {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: var(--ftm-radius);
  background: var(--ftm-surface-2);
}
@media (max-width: 768px) {
  .ft-map-embed { aspect-ratio: 4 / 3; }
}
/* Without aspect-ratio the absolutely positioned iframe would collapse the box
   to zero height, so keep the old padding trick as a floor. */
@supports not (aspect-ratio: 21 / 9) {
  .ft-map-embed { height: 0; padding-bottom: 42.857%; }
  @media (max-width: 768px) { .ft-map-embed { padding-bottom: 75%; } }
}

.ft-map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  border: 0;            /* this is Tony's style="border:0;", moved off the tag */
  display: block;
}

/* --------------------------------------------------------------------------
   NAP rail
   -------------------------------------------------------------------------- */
.ft-nap { margin: 0; font-style: normal; }
.ft-nap-name { font-weight: 700; letter-spacing: 0.01em; }
.ft-nap-addr { color: var(--ftm-muted); }
.ft-nap ul { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.ft-nap li { margin: 0; }

/* 44px minimum tap target on every interactive item in the footer. */
.ft-nap a,
.ft-rv-link,
.ft-reviews-all a,
.ft-credit a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.125rem;
}

/* --------------------------------------------------------------------------
   Google reviews
   -------------------------------------------------------------------------- */
.ft-reviews {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ftm-rule);
}
.ft-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 1rem;
}
.ft-rating-score { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.ft-stars { color: var(--ftm-accent); letter-spacing: 0.1em; font-size: 1.05rem; }
.ft-rating-count { color: var(--ftm-muted); }

.ft-rv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px)  { .ft-rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ft-rv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ft-rv {
  display: flex;
  flex-direction: column;
  background: var(--ftm-surface-2);
  border: 1px solid var(--ftm-rule);
  border-radius: var(--ftm-radius);
  padding: 1rem;
  min-width: 0;
}
.ft-rv-name { font-weight: 700; margin: 0; }
.ft-rv-meta { color: var(--ftm-muted); font-size: 0.875rem; margin: 0.15rem 0 0.6rem; }
.ft-rv-body { margin: 0 0 0.5rem; overflow-wrap: break-word; hyphens: auto; }
.ft-rv-foot { margin-top: auto; }
.ft-rv-link { font-size: 0.875rem; }

.ft-reviews-all { margin-top: 0.75rem; }

/* --------------------------------------------------------------------------
   AppWT credit. Quiet line, not a call to action.
   -------------------------------------------------------------------------- */
.ft-credit {
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ftm-rule);
  color: var(--ftm-muted);
  font-size: 0.875rem;
}
.ft-credit a { color: var(--ftm-muted); }
.ft-credit a:hover,
.ft-credit a:focus-visible { color: var(--ftm-accent); }

/* Screen-reader only. */
.ft-sr {
  position: absolute;
  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;
}

@media (prefers-reduced-motion: reduce) {
  .ft-map *, .ft-map *::before, .ft-map *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}