/* Footer — Figma 843:404. Deep purple, logo + socials + legal, 3 venue blocks, mic illustration. */
/* Footer — Figma 843:404. socials/contact 18.094px, logo 79px, hours title
   20.463px / rows 14.861px (card border 1.867 r65), mic illustration. */
.ft {
  position: relative;
  background: #2f255b;
  padding-block: calc(46 * var(--px)) calc(70 * var(--px));
  overflow: hidden;
}
.ft__mic {
  position: absolute;
  left: calc(50% - 745 * var(--px)); /* left zone under the logo, reaching toward the edge */
  bottom: calc(-52 * var(--px));     /* sits lower so the base is cut off — reads as "more below" */
  height: calc(600 * var(--px));     /* a touch taller so the top stays near the logo */
  width: auto;
  transform: rotate(18deg);
  pointer-events: none;
}
.ft__inner { position: relative; z-index: 1; }

/* Desktop and mobile now carry the SAME footer content (nav links, all five
   socials, the four legal links, phone/email/WhatsApp, address, hours and the
   copyright). Only the venue heading differs: desktop shows the full name
   ("Soho, Karaoke Box"), mobile the city strap ("SOHO · LONDON"). */
.ft__contact-city { display: none; }
.ft__legal-m { display: none; }   /* duplicate of .ft__legal (which has all four links) */

/* footer nav links (Book / Contact / Jobs · What's on / News) */
.ft__nav { display: flex; gap: calc(46 * var(--px)); }
.ft__nav-col { display: flex; flex-direction: column; gap: calc(8 * var(--px)); }
.ft__nav a { font-family: var(--font-sans); font-weight: 700; font-size: calc(18.094 * var(--px)); }

/* copyright row — same left inset as .ft__venues so it clears the mic artwork */
.ft__bottom { display: block; margin-top: calc(40 * var(--px)); padding-left: calc(455 * var(--px)); }
.ft__copyright { font-family: var(--font-sans); font-size: calc(15 * var(--px)); color: #9a9cb5; }

.ft__top {
  display: flex;
  align-items: flex-start;
  gap: calc(46 * var(--px));
  flex-wrap: wrap;
}
.ft__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--px));
}
.ft__logo img { width: calc(79 * var(--px)); height: auto; }
.ft__logo span { font-family: var(--font-sans); font-weight: 700; font-size: calc(15.131 * var(--px)); letter-spacing: 0.11em; }

.ft__socials { display: flex; align-items: center; gap: calc(30 * var(--px)); flex-wrap: wrap; }
.ft__social {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--px));
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: calc(18.094 * var(--px));
}
.ft__social img { width: calc(40 * var(--px)); height: calc(40 * var(--px)); }

.ft__legal { margin-left: auto; display: flex; flex-direction: column; gap: calc(6 * var(--px)); text-align: right; }
.ft__legal a { font-family: var(--font-sans); font-weight: 700; font-size: calc(18.094 * var(--px)); }

.ft__venues {
  display: grid;
  grid-template-columns: repeat(2, max-content); /* two venues, content-sized */
  gap: calc(96 * var(--px));                     /* same breathing room between Soho and Mayfair */
  margin-top: calc(50 * var(--px));
  padding-left: calc(455 * var(--px)); /* clear the mic + leave breathing room before Soho/Mayfair */
}
.ft__contact {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(18.094 * var(--px));
  line-height: 1.5;
}
.ft__contact strong { font-weight: 700; }
.ft__wa { display: inline-block; vertical-align: middle; width: calc(26 * var(--px)); height: auto; }
.ft__phone { color: inherit; text-decoration: underline; }
.ft__wa-link { display: inline-block; vertical-align: middle; margin-left: calc(8 * var(--px)); line-height: 0; }

.ft__hours {
  margin-top: calc(22 * var(--px));
  border: calc(1.867 * var(--px)) solid #fff;
  border-radius: calc(65 * var(--px));
  padding: calc(28 * var(--px)) calc(40 * var(--px));
  max-width: calc(340 * var(--px));
}
.ft__hours-title { font-family: var(--font-sans); font-weight: 700; font-size: calc(20.463 * var(--px)); margin-bottom: calc(14 * var(--px)); }
.ft__hours-row { font-family: var(--font-sans); font-size: calc(14.861 * var(--px)); line-height: 1.55; }

/* "Jump to Opening hours" landed here (#hours-soho / #hours-mayfair): flash the
   jumped-to venue's hours box yellow so the eye finds the right one. */
.ft__hours { scroll-margin-top: 110px; }   /* keep clear of the sticky nav */
.ft__hours:target { animation: ft-hours-flash 2.4s ease-out; }
@keyframes ft-hours-flash {
  0%, 55% { border-color: #fcd276; box-shadow: 0 0 0 calc(4 * var(--px)) rgba(252, 210, 118, .35); }
  100%    { border-color: #fff; box-shadow: 0 0 0 0 rgba(252, 210, 118, 0); }
}

@media (max-width: 1000px) {
  .ft__venues { padding-left: 0; grid-template-columns: 1fr 1fr; }
  .ft__mic { opacity: .25; }
}
@media (max-width: 620px) {
  .ft__venues { grid-template-columns: 1fr; }
  .ft__legal { margin-left: 0; text-align: left; }
}

@media (max-width: 600px) {
  /* ---------- Footer (Figma 862:16): nav links, icon-only socials (3), city
     headers + address + hours, legal + copyright at the bottom ---------- */
  .ft__top { flex-direction: column; align-items: flex-start; gap: 22px; }
  /* two equal columns, so the second one ("What's on" / "News") starts at the
     horizontal centre of the footer instead of hanging off the first column */
  .ft__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 100%; }
  .ft__nav-col { display: flex; flex-direction: column; gap: 12px; }
  .ft__nav a { font-family: var(--font-sans); font-size: 16px; color: #d4d6e8; }
  .ft__socials { gap: 22px; flex-wrap: wrap; }
  .ft__social-label { display: none; }            /* icons only (all five icons show) */
  .ft__social img { width: 26px; height: 26px; }
  /* natural source order (Instagram, Threads, X, Facebook, TikTok) — same as
     desktop now that all five show; the old re-ordering left Threads/TikTok first */
  .ft__socials { display: flex; }
  /* legal links: same four as desktop, just left-aligned and re-sized */
  .ft__legal { margin-left: 0; text-align: left; gap: 10px; }
  .ft__legal a { font-size: 14px; }
  .ft__venues { grid-template-columns: 1fr; padding-left: 0; gap: 26px; border-top: 1px solid rgba(255,255,255,.16); padding-top: 26px; }
  .ft__contact { font-size: 14px; }
  .ft__contact-name { display: none; }
  .ft__contact-city { display: block; color: #fcd276; font-weight: 700; font-size: 13px; letter-spacing: .04em; margin-bottom: 2px; }
  /* phone / email / WhatsApp now shown on mobile too (tap-to-call) */
  .ft__contact-tel { display: inline; }
  .ft__phone { text-decoration: underline; text-underline-offset: 2px; }
  .ft__wa { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-left: 8px; }
  /* Box hugs its content instead of spanning the column, and the text is re-sized
     in real px — the --px sizes are relative to the desktop frame and collapse to
     ~5px on a phone. */
  .ft__hours {
    max-width: none;
    width: fit-content;
    margin-top: 16px;
    border-width: 1px;
    border-radius: 18px;
    padding: 14px 20px;
  }
  .ft__hours-title { font-size: 13px; margin-bottom: 8px; }
  .ft__hours-row { font-size: 12px; }
  .ft__mic { height: 280px; opacity: .35; left: auto; right: -30px; }
  .ft__bottom { margin-top: 30px; padding-left: 0; }   /* no mic inset on mobile */
  .ft__copyright { font-size: 12px; margin-top: 14px; }
}

/* WhatsApp hidden for now - not in use. The footer is on EVERY page, so this is
   what removes the icon site-wide. Markup stays in shared/partials/footer.php. */
.ft__wa-link { display: none !important; }

/* Any WhatsApp mention wrapped in .wa-off is hidden while WhatsApp is not in use.
   In shared CSS so it applies on every page. Copy stays in the partials.
   Delete this rule (and .ft__wa-link above) to bring WhatsApp back. */
.wa-off { display: none !important; }