/* ==========================================================================
   Site footer

   The previous footer was a half-width Google map beside a tabbed panel whose
   three tabs ("San Pancho / Sayulita / Hideaways") looked like navigation but
   actually swapped the map and hid two thirds of the footer's own content
   behind clicks. This is a plain footer instead: where you are, where to go
   next, and who runs the site.

   Deep teal to close the sand-toned pages, using the brand colour the hero
   curtain already uses (#3a7b74 / #427c78).
   ========================================================================== */

.sp-footer {
  --ft-deep:  #24413f;
  --ft-mid:   #2f5f5c;
  --ft-teal:  #6fada8;
  --ft-sand:  #faf8f4;
  --ft-muted: rgba(250, 248, 244, .72);
  --ft-line:  rgba(250, 248, 244, .16);

  background: var(--ft-deep);
  color: var(--ft-sand);
  font-family: "Heebo", sans-serif;
}

.sp-footer h2,
.sp-footer h3 { margin: 0; color: inherit; text-shadow: none; }

/* style.css styles bare `nav` for the header bar — a translucent black ground
   and a 10vh floor. The footer's link columns are <nav> too, so they inherit
   both and draw a dark box behind each column. */
.sp-footer nav {
  min-height: 0;
  background: transparent;
  width: auto;
}

.sp-footer-wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ------------------------------------------------------------------ map -- */

.sp-footer-map {
  padding: 40px 0 8px;
}

.sp-footer-map figure {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  /* The old embed pinned .mapouter and .gmap_canvas to width:1200px in an
     inline <style>, which forced every page 15px wider than a phone screen
     and put a horizontal scrollbar on the whole site. */
  background: var(--ft-mid);
  line-height: 0;
}

.sp-footer-map iframe {
  display: block;
  width: 100%;
  height: 240px;
  border: 0;
  filter: saturate(.9);
}

.sp-footer-map figcaption {
  padding-top: 12px;
  color: var(--ft-muted);
  font-size: .8125rem;
  line-height: 1.5;
  text-align: center;
}

/* -------------------------------------------------------------- columns -- */

/* Two brand blocks bookending the nav columns: San Pancho on the left,
   Sayulita mirrored on the right. */
.sp-footer-main {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.35fr;
  gap: 40px 32px;
  padding: 48px 0 44px;
}

.sp-footer-brand img {
  width: 190px;
  max-width: 100%;
  height: auto;
}

.sp-footer-brand p {
  max-width: 340px;
  margin: 16px 0 0;
  color: var(--ft-muted);
  font-size: .9375rem;
  line-height: 1.7;
}

.sp-footer h3 {
  margin-bottom: 16px;
  font-family: "Amatic SC", cursive;
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ft-teal);
}

.sp-footer-links { list-style: none; margin: 0; padding: 0; }
.sp-footer-links li + li { margin-top: 10px; }

.sp-footer-links a {
  color: var(--ft-sand);
  font-size: .9375rem;
  text-decoration: none;
  transition: color .16s ease;
}
.sp-footer-links a:hover { color: var(--ft-teal); text-decoration: none; }

.sp-footer-links .sp-footer-note {
  display: block;
  color: var(--ft-muted);
  font-size: .75rem;
  line-height: 1.4;
}

/* --------------------------------------------------------------- social -- */

.sp-social {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
}

.sp-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ft-line);
  border-radius: 50%;
  color: var(--ft-sand);
  font-size: .9375rem;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.sp-social a:hover {
  background: var(--ft-teal);
  border-color: var(--ft-teal);
  color: var(--ft-deep);
  text-decoration: none;
}

/* ------------------------------------------------------------ bottom bar -- */

.sp-footer-bottom {
  border-top: 1px solid var(--ft-line);
}

.sp-footer-bottom .sp-footer-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 22px;
  padding-bottom: 26px;
}

.sp-footer-bottom p {
  margin: 0;
  color: var(--ft-muted);
  font-size: .8125rem;
}

/* ----------------------------------------------------------- responsive -- */

/* The Sayulita block matches the San Pancho one; only its link list differs. */
.sp-footer-brand--alt .sp-footer-links { margin-top: 18px; }

@media (max-width: 1040px) {
  .sp-footer-main { grid-template-columns: 1fr 1fr; }
  .sp-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .sp-footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
    padding: 40px 0 36px;
  }
  .sp-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .sp-footer-map { padding-top: 28px; }
  .sp-footer-map iframe { height: 200px; }
  .sp-footer-main { grid-template-columns: 1fr; }
  .sp-footer-bottom .sp-footer-wrap { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-footer-links a,
  .sp-social a { transition: none; }
}