@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap');

/* ============================================================
   MetaPilates site-wide overrides (linked on every page).
   Colors live in the recolored originals; this handles brand
   marks, typography and hero visuals CSS recolor can't touch.
   ============================================================ */

/* ---- Typography: match the frontend (Fraunces display + DM Sans body) ---- */
body, .body, p, a, span, div, li, button, input, textarea, select, blockquote,
[class*="nav__"], [class*="foo__"], [class*="utl__"], [class*="__copy"], .utl__lead {
  font-family: "DM Sans", system-ui, sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
[class*="heading"], [class*="heading"] *,
.fcs__span1, .fcs__span2, .fcs__span3, .fcs__span4, .fcs__span5, .fcs__span6 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif !important;
  font-weight: 600;
}

/* ---- Logo: MetaPilates MP monogram + wordmark ---- */
.nav__logo__embed svg { display: none !important; }
.nav__logo__embed { display: inline-flex !important; align-items: center; gap: 9px; }
.nav__logo__embed::before {
  content: ""; width: 26px; height: 26px; flex: 0 0 auto;
  background: url("metapilates/logo-mp.png") center / contain no-repeat;
}
.nav__logo__embed::after {
  content: "MetaPilates";
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 600; font-size: 21px; letter-spacing: -0.02em;
  line-height: 1; color: inherit; white-space: nowrap;
}

/* ---- hide leandra hero key-visual photos + canvas image-sequence ---- */
img[class*="hh__bg-img"], [class*="hh__bg-img"] img, .hh__bg__wrapper img:not(.mp-hero-photo),
.hh__bg__dummy img:not(.mp-hero-photo), .seo-image__img { opacity: 0 !important; }
.nav-dd-img { opacity: 0 !important; }
.hh__section canvas, .hh canvas, [class*="hh__bg"] canvas, .hh__bg-img canvas { opacity: 0 !important; }

/* home hero heading colour */
.home-page .hh__heading, .home-page [class*="hh__heading"],
.home-page .hh .utl__lead, .home-page .hh .utl__lead * { color:#000000 !important; }

/* footer: plain green band instead of the background photo */
.foo__bg__img, [class*="foo__bg"] img { opacity: 0 !important; }
.foo, .foo__bg, .foo__bg__wrapper, [class*="foo__bg"] { background-color: #a0b5a9 !important; }
.foo, .foo * { color: #000000 !important; }

/* hero scroll photo (the "girl in the middle") — parallaxes via cb-parallax-target,
   arch-framed to match the frontend motif, sits behind the heading */
img.mp-hero-photo {
  position: absolute !important; opacity: 1 !important; z-index: 2 !important;
  top: 13%; left: 24vw; width: 52vw; height: 64vh;
  object-fit: cover; object-position: center 30%;
  border-radius: 26vw 26vw 16px 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
}


/* Center the "spaced" display headings. The template scatters each word via
   per-span offsets (span-1: width:100%+padding-left:12%; span-3: margin-left:auto;
   etc.) — reset those so the words sit centred in the middle instead. */
.lay__spaced-heading {
  justify-content: center !important; place-content: center !important;
  align-items: center !important; text-align: center !important;
}
.lay__spaced-heading [class*="lay__spaced-heading__span"] {
  width: 100% !important;   /* each phrase on its own centred line (flex would collapse the spaces between inline spans) */
  padding-left: 0 !important; padding-right: 0 !important;
  margin-left: 0 !important; margin-right: 0 !important;
  text-align: center !important;
}
/* hide the now-empty language span so it doesn't add a blank line */
.lay__spaced-heading [class*="lay__spaced-heading__span"]:empty { display: none !important; }

/* Blog hero heading centered (user request) */
.blg__heading{text-align:center;}

/* ============================================================
   No horizontal scroll / sideways drag — clamp on every page.
   The template scatters heading words to the viewport edges and
   uses a lenis transform-scroll wrapper; clip the x-overflow at
   the root and the main wrappers so the page can't move sideways.
   ============================================================ */
html, body { overflow-x: hidden !important; max-width: 100%; }
/* NB: do NOT put overflow-x on .crs/.crs__wrapper/scroller — they contain the
   fixed "Classes" mega-dropdown (and .crs is transformed for the cursor effect),
   so clipping them hides the dropdown. The html/body clamp is enough now that the
   real overflow sources (scattered headings, 14vw footer gap) are fixed. */

/* ============================================================
   Footer — dark, compact band on EVERY page (match the home).
   The template's footer slides under a CTA via padding-top:200px
   + a bg wrapper insetting -280px UP; pin it flush and compact so
   it reads as one clean dark band everywhere. (Overrides the
   light sage footer set higher up.)
   ============================================================ */
.foo { padding-top: 0 !important; margin-top: 0 !important; background-color: #37453b !important; }
.foo__content { background-color: #37453b !important; padding-top: 40px !important; padding-bottom: 32px !important; }
.foo__container { padding-top: 0 !important; padding-bottom: 0 !important; }
.foo__bg, .foo__bg__wrapper, [class*="foo__bg"] {
  inset: 0 !important; top: 0 !important; bottom: 0 !important; height: 100% !important;
  background-color: #37453b !important;
}
.foo, .foo * { color: #efeae0 !important; }
.foo a:hover, .foo a:focus { color: #ffffff !important; }
/* the column "+" toggle icons are drawn in near-black (stroke #1e211e) — recolour
   so they're visible on the dark band instead of disappearing beside the headings */
.foo [stroke="#1e211e"], .foo__row__icon svg line { stroke: #efeae0 !important; }
.foo__rows { row-gap: 1.5rem !important; }

/* ============================================================
   Footer columns fit within the row. The template spaces the
   Pages / Opening hours / Contact columns with a 12–14vw gap,
   which on wide screens pushed the last (Contact) column past
   the right edge — where the overflow-x clamp then clipped it
   (only a sliver showed). Cap the gap so all three columns fit.
   ============================================================ */
.foo__rows {
  grid-column-gap: clamp(28px, 5vw, 72px) !important;
  column-gap: clamp(28px, 5vw, 72px) !important;
}

/* ============================================================
   Class (service) page hero = a landscape photo BANNER with the
   title sitting ON it (white, over a scrim) — the "text on the
   picture" look. Copy then sits on the page's cream bg below so
   it stays readable. (The template's tall portrait crop + copy
   overlapping the image doesn't work with opaque landscape
   photos, so we bound the banner and stop the copy overlapping.)
   ============================================================ */
.cms-ang__hero {
  position: relative !important;
  margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;
}
.cms-ang__bg__container {
  aspect-ratio: auto !important;
  height: clamp(340px, 48vw, 560px) !important;
  margin-top: 0 !important; margin-bottom: 0 !important;
}
.cms-ang__bg-img { object-position: center 42% !important; }
.cms-ang__bg__wrapper.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(20,26,22,.28), rgba(20,26,22,.46));
}
.cms-ang__heading {
  position: absolute !important; z-index: 30 !important;
  left: 0 !important; right: 0 !important; top: 50% !important;
  transform: translateY(-50%) !important; margin: 0 auto !important;
  padding: 0 5vw !important; color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(20,26,22,.4), 0 12px 44px rgba(20,26,22,.5) !important;
}
.cms-ang__heading * { color: #ffffff !important; }
/* copy sits below the banner on the page bg (dark text, legible) */
.cms-ang__hero + .lay__section { background-color: transparent !important; margin-top: 0 !important; }