/*!
 * Gymbo — light surface pass for the Vive theme.
 *
 * The brand deck requires 65–75% of surfaces to stay white, warm white or a very
 * light neutral, and the logo's preferred surface is white/warm white (there is no
 * approved reverse logo). Vive ships several full-bleed black bands, so those are
 * repainted here and their copy is flipped to Charcoal.
 *
 * Loaded last, and scoped to the specific sections that shipped dark — the theme's
 * own stylesheets are left untouched so this stays reversible.
 */

:root {
  --gymbo-red: #f23b25; /* primary CTA, active nav, fitness emphasis */
  --gymbo-warm: #faf9f6; /* main background and calm surfaces        */
  --gymbo-ink: #464646; /* headings, body text, high-contrast UI     */
  --gymbo-ink-soft: #747578; /* metadata and secondary text              */
  --gymbo-line: #b6b7bb; /* neutral dividers                         */
}

/* ── Sections that shipped on black ───────────────────────────────────────── */
[data-id="211ce9f"],
[data-id="ed4447c"],
[data-id="ac41a8d"],
[data-id="dbd2a34"],
[data-id="2e3a7e6"],
[data-id="da0706c"] {
  background-color: var(--gymbo-warm) !important;
}

/*
 * Flip their copy to Charcoal. Excluded: anything inside an element that carries
 * its own background image or dark panel — that text is over photography and must
 * stay light. `.gymbo-on-dark` is added by the JS pass for exactly those cases.
 */
[data-id="211ce9f"] :is(h1, h2, h3, h4, h5, h6, p, li, td, .elementor-heading-title),
[data-id="ed4447c"] :is(h1, h2, h3, h4, h5, h6, p, li, td, .elementor-heading-title),
[data-id="ac41a8d"] :is(h1, h2, h3, h4, h5, h6, p, li, td, .elementor-heading-title),
[data-id="dbd2a34"] :is(h1, h2, h3, h4, h5, h6, p, li, td, .elementor-heading-title),
[data-id="2e3a7e6"] :is(h1, h2, h3, h4, h5, h6, p, li, td, .elementor-heading-title),
[data-id="da0706c"] :is(h1, h2, h3, h4, h5, h6, p, li, td, .elementor-heading-title) {
  color: var(--gymbo-ink) !important;
}

/* Body copy and footer links read as secondary. The visible label lives in a
   child span (.elementor-icon-list-text), so colouring the <a> alone left the
   text white on a now-light surface. */
[data-id="2e3a7e6"] a:not(.button):not(.elementor-button),
[data-id="da0706c"] a:not(.button):not(.elementor-button),
[data-id="2e3a7e6"] .elementor-icon-list-text,
[data-id="da0706c"] .elementor-icon-list-text,
[data-id="2e3a7e6"] .elementor-icon-list-item span,
[data-id="da0706c"] .elementor-icon-list-item span {
  color: var(--gymbo-ink) !important;
}
[data-id="2e3a7e6"] a:not(.button):hover,
[data-id="2e3a7e6"] a:hover .elementor-icon-list-text,
[data-id="da0706c"] a:not(.button):hover {
  color: var(--gymbo-red) !important;
}

/* Anything the JS marks as sitting on photography keeps light text. */
/* Buttons are excluded: they carry their own fill, so forcing white text made a
   white button's label vanish. */
.gymbo-on-dark,
.gymbo-on-dark :is(h1, h2, h3, h4, h5, h6, p, li,
  .elementor-heading-title, .elementor-icon-list-text) {
  color: #fff !important;
}
.gymbo-on-dark :is(.button, .elementor-button, .elementor-button-text, a.button),
.gymbo-on-dark :is(.button, .elementor-button) span {
  color: var(--gymbo-ink) !important;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
/* The sticky bar was a black scrim; make it warm white so the logo sits on its
   preferred surface and the nav reads as Charcoal. */
[data-id="fce11c1"],
.header_wrapper.is-sticky,
.is-sticky .header_wrapper,
#header.sticky_header,
.sticky_header_wrapper {
  background-color: rgba(250, 249, 246, 0.95) !important;
  border-bottom: 1px solid rgba(182, 183, 187, 0.4);
}
[data-id="fce11c1"] a,
[data-id="fce11c1"] .elementor-heading-title {
  color: var(--gymbo-ink) !important;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
[data-id="2e3a7e6"],
[data-id="da0706c"] {
  border-top: 1px solid rgba(182, 183, 187, 0.4);
}
/* Column headings (Pages / Other Links / Subscribe) stay brand red. */
[data-id="2e3a7e6"] .elementor-heading-title:is(h4, h5, h6) {
  color: var(--gymbo-red) !important;
}

/* ── Controls to brand spec ───────────────────────────────────────────────── */
/* Solid Gymbo Red, white text, 48–56px, 8–12px radius. Vive uses full pills
   everywhere; the deck asks not to overuse pill shapes. */
.button,
.elementor-button,
.service-carousel-button {
  border-radius: 10px !important;
}

/* Cards: white/warm-white surface, restrained border, 12–16px radius. */
.item-content,
.elementor-widget-wrap > .elementor-widget:has(.elementor-icon-list-items) {
  border-radius: 14px;
}

/* ── Brand typography (deck p.10) ─────────────────────────────────────────────
   Montserrat 600/700/800 for headings, Inter 400/500/600 for body and UI —
   self-hosted, so no CDN request and no unused weights. Replaces the theme's
   Roboto / Roboto Slab / Kanit / Work Sans set. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat/Montserrat-600-latin-ext.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat/Montserrat-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat/Montserrat-700-latin-ext.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat/Montserrat-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat/Montserrat-800-latin-ext.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat/Montserrat-800-latin.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-500-latin-ext.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-600-latin-ext.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Elementor writes a font-family onto each element's own generated class, which
   outranks anything we can add by selector — hence !important here.
   Deliberately NOT targeting span/a/i: icon fonts (themify, Font Awesome, eicon)
   live on those, and overriding them replaced every icon with an empty box. */
body,
input, select, textarea,
p, li, td, .elementor-icon-list-text, .elementor-widget-text-editor {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif !important;
}

/* Headings only. The deck files navigation, buttons and forms under Inter, so
   controls stay on the body face — which also keeps the header on one line. */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.service-carousel-title, .team-carousel-title {
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
}
.button, .elementor-button, .elementor-button-text,
.main_menu, .main_menu a, nav a {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif !important;
}

/* Prices and schedules use tabular figures so columns line up. */
.elementor-heading-title, .elementor-icon-list-text {
  font-variant-numeric: tabular-nums;
}

/* ── No online shop ───────────────────────────────────────────────────────────
   Hidden in CSS as well as removed in JS, so commerce furniture never flashes
   on screen while the page boots. */
.elementor-widget-vive-cart-icon,
.vive-cart-wrapper,
.woocommerce-cart-form,
.menu-item a[href*="shop3columns"],
.menu-item a[href*="singleproduct"] {
  display: none !important;
}

/* ── Readability over photography ─────────────────────────────────────────────
   Real Gymbo photos are brighter and busier than the theme's stock shots, so
   Charcoal copy needs a surface. A translucent white panel keeps the page light
   (per the deck) instead of darkening the image. Added by the JS pass only where
   the copy is dark; white-on-dark-photo text is left alone. */
/*
 * Elementor paints these section photos in a layer that sits above the content
 * wrap, so a frosted panel behind the text is simply never visible — several
 * attempts with z-index and stacking contexts all painted underneath the image.
 *
 * Text shading is immune to paint order: light copy with a soft dark halo stays
 * legible over bright gym floors and dark studio shots alike. Used only on the
 * three blocks that sit directly on photography.
 */
.gymbo-panel :is(h1, h2, h3, h4, h5, h6, p, .elementor-heading-title),
.gymbo-panel :is(h1, h2, h3, h4, h5, h6, p, .elementor-heading-title) * {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 14px rgba(0, 0, 0, 0.45);
}
/* Buttons keep their own fill and need no halo. */
.gymbo-panel :is(.button, .elementor-button, .elementor-button-text),
.gymbo-panel :is(.button, .elementor-button) * {
  text-shadow: none;
}
.gymbo-panel--unused {
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(70, 70, 70, 0.1);
  padding: 26px 30px;
}
@media (max-width: 767px) {
  .gymbo-panel { padding: 20px 18px; }
}

/* ── Block A: "Everything you need" feature grid ─────────────────────────────
   Vive has no icon-card grid, so this is built with the theme's widget classes
   and styled to the v1 card: white surface, red icon badge top area, 14px radius. */
.gymbo-values-section { padding: 40px 0 70px; }
.gymbo-values-title {
  text-align: center;
  font-size: clamp(30px, 4vw, 46px);
  margin: 0 auto 8px;
  max-width: 900px;
}
.gymbo-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 991px) { .gymbo-values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .gymbo-values-grid { grid-template-columns: 1fr; } }
.gymbo-value-card {
  background: #fff;
  border: 1px solid rgba(182, 183, 187, 0.4);
  border-radius: 14px;
  padding: 90px 26px 34px;
  position: relative;
  min-height: 300px;
}
.gymbo-value-icon {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--gymbo-red);
  color: #fff;
  font-size: 26px;
}
.gymbo-value-name {
  font-size: 24px;
  margin: 0 0 12px;
  color: var(--gymbo-ink) !important;
}
.gymbo-value-desc {
  color: var(--gymbo-ink-soft) !important;
  line-height: 1.6;
  margin: 0;
}

/* ── Block B: "Explore Gymbo" icon-list + image ──────────────────────────────
   The theme's "Gym Benefits" shape: text with a checkmark list beside an image. */
.gymbo-explore-section { padding: 50px 0 70px; }
.gymbo-explore-section .elementor-container {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  gap: 48px;
  align-items: center;
  padding: 0 20px;
}
.gymbo-explore-text, .gymbo-explore-media { flex: 1; }
.gymbo-explore-title {
  font-size: clamp(30px, 4vw, 46px);
  margin: 0 0 28px;
}
.gymbo-explore-list { list-style: none; margin: 0; padding: 0; }
.gymbo-explore-li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(182, 183, 187, 0.35);
}
.gymbo-explore-li:last-child { border-bottom: 0; }
.gymbo-explore-li .elementor-icon-list-icon {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gymbo-red);
  color: #fff;
  font-size: 12px;
}
.gymbo-explore-li .elementor-icon-list-text { line-height: 1.55; }
.gymbo-explore-li .gymbo-lead { color: var(--gymbo-ink) !important; font-weight: 700; }
.gymbo-explore-li .gymbo-rest { color: var(--gymbo-ink-soft) !important; }
.gymbo-explore-image {
  width: 100%;
  border-radius: 14px;
  display: block;
  box-shadow: 0 14px 40px rgba(70, 70, 70, 0.14);
}
@media (max-width: 767px) {
  .gymbo-explore-section .elementor-container { flex-direction: column-reverse; }
}

/* ── Hero banner: match the rest of the site ─────────────────────────────────
   The theme's hero was 95px italic uppercase — striking but hard to read and out
   of step with the deck's sentence-case rule. Bring it in line with the other
   section headings: upright, sentence case, and a size that fits the frame. */
[data-id="211ce9f"] .elementor-heading-title {
  font-style: normal !important;
  text-transform: none !important;
  font-size: clamp(38px, 5vw, 58px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.5px;
  /* Sits on the hero photo, so white with a soft halo — same as the other
     photo banners — not the charcoal used on the light sections. */
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 16px rgba(0, 0, 0, 0.45);
}
/* The rotating accent word ("Fitness / Recovery / Wellness") was 95px italic red
   and dominated the hero. Bring it down to a kicker-sized accent that matches. */
[data-id="211ce9f"] .ah-words-wrapper b,
[data-id="211ce9f"] .ah-words-wrapper {
  font-style: normal !important;
  text-transform: none !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ── Explore Gymbo: give it room to breathe (match v1) ───────────────────────
   v2 crammed the service name, lead and description onto one inline run. v1 keeps
   three levels: name on its own line, then a bold lead sentence, then the rest. */
.gymbo-explore-li {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(182, 183, 187, 0.35);
}
.gymbo-explore-li .elementor-icon-list-icon {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  margin-top: 2px;
}
.gymbo-explore-name {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--gymbo-ink) !important;
  margin: 0 0 6px;
}
.gymbo-explore-copy {
  display: block;
  line-height: 1.62;
  color: var(--gymbo-ink-soft) !important;
}
.gymbo-explore-copy .gymbo-lead {
  color: var(--gymbo-ink) !important;
  font-weight: 600;
}
.gymbo-explore-title { margin-bottom: 34px; }

/* Mobile submenu: reveal children when their parent is tapped open. */
.mobile-main-nav .menu-item-has-children > .sub-menu { display: none; }
.mobile-main-nav .menu-item-has-children.gymbo-open > .sub-menu { display: block; }

/*======================================================
 Fixes — Explore spacing/alignment + class-card titles
========================================================*/
/* The theme sets padding:0 on .elementor-icon-list-item with high specificity, so
   force the roomier spacing and vertically centre the checkmark against the whole
   text block (name + lead + copy), not just the first line. */
.gymbo-explore-list .gymbo-explore-li {
  align-items: center !important;
  gap: 18px !important;
  padding: 26px 0 !important;
}
.gymbo-explore-list .gymbo-explore-li .elementor-icon-list-icon {
  align-self: center !important;
  margin-top: 0 !important;
}
.gymbo-explore-name { margin-bottom: 8px; }

/* Class-card titles were 28px with a 42px line-height, so a two-word class name
   wrapped to two lines and the second line was clipped by the card's 350px height.
   A tighter line-height (and slightly smaller size) keeps them inside the card. */
.service-carousel-title {
  font-size: 22px !important;
  line-height: 1.2 !important;
}