/* ==========================================================================
   Freestyle Magician — GLOBAL FOOTER STYLESHEET
   Controls ONLY the global footer: logo, footer nav links, Check
   Availability CTA, legal row, responsive stacking. Scoped entirely under
   .fm-global-footer with its OWN copy of the colours/fonts it needs, so
   this footer renders identically regardless of which page template or
   page-specific stylesheet (freestyle-magician-home.css,
   uk-weddings-hub.css, freestyle-location-pages.css,
   freestyle-witnesses.css, freestyle-contact.css, etc.) or wrapper class
   happens to sit above it — or none at all. Does not assume .fm-wrap or
   .fm-btn exist; both are recreated here under footer-specific names.

   Values below are copied unchanged from the working footer CSS already
   live on the homepage (.fm-footer* under .freestyle-magician-home),
   simply renamed fm-footer* -> fm-global-footer* and re-scoped. Nothing
   has been redesigned.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

.fm-global-footer{
  --fm-ivory:#FFFDF8;
  --fm-red:#C5313A;
  --fm-ink:#111110;
  --fm-line: rgba(17,17,16,.16);

  display:block;
  background:var(--fm-ivory);
  color:var(--fm-ink);
  border-top:5px solid var(--fm-red);
  padding:2rem 0 1.4rem;
}
.fm-global-footer,
.fm-global-footer *,
.fm-global-footer *::before,
.fm-global-footer *::after{box-sizing:border-box;}
.fm-global-footer img{max-width:100%;display:block;background:transparent;}
.fm-global-footer a{color:inherit;text-decoration:none;}
.fm-global-footer :focus-visible{outline:3px solid var(--fm-ink);outline-offset:3px;}
.fm-global-footer .fm-global-footer__wrap{max-width:1400px;margin:0 auto;padding:0 1.5rem;}

/* ---------- top row: logo (left) / disclaimer (centre) / CTA (right) ---------- */
.fm-global-footer__top{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1.6rem;
  padding-bottom:1.4rem;margin-bottom:1.2rem;
}
.fm-global-footer__brand{display:inline-flex;justify-self:start;}
.fm-global-footer__logo{display:block;width:clamp(120px,9vw,150px);height:auto;}

/* ---------- nav row: its own centred row, below the top row ---------- */
.fm-global-footer__links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1.3rem;
  padding-bottom:1.4rem;margin-bottom:1.2rem;
}
.fm-global-footer__links a{
  font-family:'Space Mono',monospace;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  border-bottom:2px solid transparent;padding-bottom:3px;white-space:nowrap;
}
.fm-global-footer__links a:hover{color:var(--fm-red);border-bottom-color:var(--fm-red);}

/* Self-contained CTA button - does not depend on .fm-btn/.fm-btn--sm from
   any page-specific stylesheet, so the footer looks right even on a page
   whose own CSS hasn't loaded or doesn't define those classes at all. */
.fm-global-footer__cta{
  justify-self:end;
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Space Mono',monospace;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:.74rem;padding:.65rem 1rem;
  border:2px solid var(--fm-ink);background:var(--fm-red);color:var(--fm-ivory);
  cursor:pointer;box-shadow:3px 3px 0 var(--fm-ink);
  transition:transform .15s ease, box-shadow .15s ease;white-space:nowrap;
}
.fm-global-footer__cta:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--fm-ink);}
.fm-global-footer__cta:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--fm-ink);}

/* ---------- legal row ---------- */
.fm-global-footer__legal{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
}
.fm-global-footer__copyright{font-family:'Space Mono',monospace;font-size:.7rem;opacity:.65;margin:0;}
.fm-global-footer__legal-links{display:flex;gap:1.1rem;}
.fm-global-footer__legal-links a{
  font-family:'Space Mono',monospace;font-size:.68rem;opacity:.75;border-bottom:1px solid transparent;padding-bottom:2px;
}
.fm-global-footer__legal-links a:hover{color:var(--fm-red);border-bottom-color:var(--fm-red);opacity:1;}

/* ---------- disclaimer: centre column of the top row, sits between the
   logo and the CTA. Deliberately narrow (max-width) so it wraps into a
   handful of short lines rather than stretching into one long line; kept
   smaller than the nav link text (.74rem) and lower-opacity so it stays
   visually secondary to the logo/nav/CTA, while remaining legible. ---------- */
.fm-global-footer__disclaimer{
  justify-self:center;
  font-family:'Space Mono',monospace;font-size:.62rem;line-height:1.5;opacity:.55;
  text-align:center;margin:0;max-width:420px;
}

@media (max-width:760px){
  /* Grid collapses to one column; source order (logo, disclaimer, CTA)
     already matches the required mobile stacking order, so nothing
     needs reordering - just centre every item in its own row. */
  .fm-global-footer__top{
    grid-template-columns:1fr;justify-items:center;text-align:center;gap:1.2rem;
  }
  .fm-global-footer__brand,
  .fm-global-footer__cta{justify-self:center;}
  .fm-global-footer__disclaimer{max-width:100%;}
  .fm-global-footer__links{justify-content:center;gap:.9rem 1rem;}
  .fm-global-footer__legal{flex-direction:column;text-align:center;gap:.6rem;}
}