/*!
Theme Name: Ohio-Child
Theme URI: http://ohio.colabr.io/
Author: Colabrio
Author URI: http://colabr.io/
Description: Ohio is a WordPress theme bundled with premium plugins to build a modern and functional website.
Version: 1.0.37
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: ohio
Text Domain: ohio-child
Tags: ajax, customizer, ecommerce, portfolio, minimal, page builder, responsive, multipurpose, shop, store, woocommerce, wpml

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

/* ============================================================================
   ZEUS GYM — Custom CSS
   Relocated here from Customizer > Additional CSS (kept out of the DB).
   Section A = existing rules (pre-existing).
   Section B = changes added by Claude (each block tagged [CLAUDE]).
   ============================================================================ */


/* ============================================================================
   SECTION A — EXISTING RULES (unchanged, moved from Additional CSS)
   ============================================================================ */

/* Hide the entire cart and price container in the header */
.li-icon-button-holder,
.cart-button,
.cart-button-total {
    display: none !important;
}

/* portfolio - hide show project */
.portfolio-item .show-project-link {
    display: none !important;
}

/* Force the category container to always be visible - home portfolio */
.portfolio-item .overlay-details .category-holder,
.portfolio-item .category-holder {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    transform: none !important;
}

/* Ensure the category parent wrap doesn't clip or hide it - home portfolio */
.portfolio-item .show-project {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Remove standard text underlines and custom theme border underlines on hover - home portfolio */
.portfolio-item a:hover,
.portfolio-item .overlay-details a:hover,
.portfolio-item .overlay-details *:hover {
    text-decoration: none !important;
    border-bottom: none !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Disable click interactions and links on the portfolio items - home */
.portfolio-item a.-unlink,
.portfolio-item .image-holder a,
.portfolio-item .overlay-details a {
    pointer-events: none !important;
    cursor: default !important;
}

/* Remove the cursor link indicator - facility page */
.blog-item [data-cursor-class="cursor-link"] {
    pointer-events: none !important;
    cursor: default !important;
}

/* Disable click on heading title link inside blog post cards - facility page */
.blog-item .heading.title a.-undash,
.blog-item .card-details-left h4.heading.title a {
    pointer-events: none !important;
    cursor: default !important;
}

/* Hide fixed search icon button */
button.icon-button.search-global.fixed {
    display: none !important;
}

/* Checkbox tick color */
.elementor-256253 input[type="checkbox"]:checked {
    background-color: #000000 !important;
    border-color: #000000 !important;
}

/* Tighter spacing across all desktop/laptop sizes */
@media (min-width: 769px) {
    #masthead.header #menu-primary .mega-menu-item > a,
    #masthead.header #menu-primary .menu-link {
        font-size: 15px !important;
        padding: 0 12px !important;
    }
}

/*  Facilities page (page id 253925): blog-grid card titles -> brand gold (#F6CD13). */
body.page-id-253925 .card-details .heading.title,
body.page-id-253925 .card-details .heading.title a {
    color: #F6CD13 !important;
}

/*  Free Consultation popup (CF7 form id 19648, Elementor popup 256253):
   crisp WHITE field text, placeholders and <option>s; keep fields dark (#1B1A13) on
   browser autofill (Chrome / Edge / Firefox) instead of turning white. */
#elementor-popup-modal-256253 input:not([type="submit"]),
#elementor-popup-modal-256253 textarea,
#elementor-popup-modal-256253 select,
[id^="wpcf7-f19648"] input:not([type="submit"]),
[id^="wpcf7-f19648"] textarea,
[id^="wpcf7-f19648"] select {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    -webkit-font-smoothing: antialiased;
}
#elementor-popup-modal-256253 input::placeholder,
#elementor-popup-modal-256253 textarea::placeholder,
[id^="wpcf7-f19648"] input::placeholder,
[id^="wpcf7-f19648"] textarea::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #ffffff !important;
}
#elementor-popup-modal-256253 input::-webkit-input-placeholder,
[id^="wpcf7-f19648"] input::-webkit-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
#elementor-popup-modal-256253 input::-moz-placeholder,
[id^="wpcf7-f19648"] input::-moz-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}
#elementor-popup-modal-256253 input:-ms-input-placeholder,
[id^="wpcf7-f19648"] input:-ms-input-placeholder {
    color: #ffffff !important;
}
#elementor-popup-modal-256253 select option,
[id^="wpcf7-f19648"] select option {
    background-color: #1B1A13 !important;
    color: #ffffff !important;
}
#elementor-popup-modal-256253 input:-webkit-autofill,
#elementor-popup-modal-256253 input:-webkit-autofill:hover,
#elementor-popup-modal-256253 input:-webkit-autofill:focus,
[id^="wpcf7-f19648"] input:-webkit-autofill,
[id^="wpcf7-f19648"] input:-webkit-autofill:hover,
[id^="wpcf7-f19648"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px #1B1A13 inset !important;
    box-shadow: 0 0 0 1000px #1B1A13 inset !important;
    caret-color: #ffffff !important;
    transition: background-color 99999s ease-in-out 0s !important;
}
#elementor-popup-modal-256253 input:autofill,
[id^="wpcf7-f19648"] input:autofill {
    box-shadow: 0 0 0 1000px #1B1A13 inset !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}


/*  Align the page-header banner (title + breadcrumb) with the page content.
   The banner content sits in Ohio's .page-container (capped ~1290px + side padding), while the
   Elementor content is a 1344px boxed/centered container -> their left edges didn't match.
   Match the banner's container(s) to the same 1344px centered box. Scoped so the MAIN content
   .page-container (#primary) is untouched (only the title container and the breadcrumb container).
   Responsive: 16px side padding below the boxed width, matching the content. */
.page-headline .page-container,
.page-container:has(> .breadcrumb-holder) {
    max-width: 1344px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 22px !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}
@media (max-width: 1376px) {
    .page-headline .page-container,
    .page-container:has(> .breadcrumb-holder) {
        padding-left: 22px !important;
        padding-right: 16px !important;
    }
}


/* [CLAUDE] Footer watermark heading above the copyright (Ohio theme footer), per UI ref. */
.site-footer-copyright { position: relative; overflow: hidden; }
.site-footer-copyright::before {
    content: "Strength Worthy of Zeus";
    display: block; width: 100%; text-align: center;
    font-family: "Big Shoulders Text", sans-serif; font-weight: 700; font-style: normal;
    text-transform: uppercase; letter-spacing: -0.01em; line-height: 1;
    color: #1B1A13; font-size: clamp(2rem, 8vw, 9.2rem); white-space: nowrap;
    padding: 3rem 1rem 0; margin-bottom: 1.5rem;
    pointer-events: none; -webkit-user-select: none; user-select: none;
}
@media (max-width: 767px) { .site-footer-copyright::before { padding-top: 1.5rem; letter-spacing: 0; } }

/* [CLAUDE] Footer column-1 logo sizing */
.site-footer .zg-footer-logo, .footer-widget .zg-footer-logo { margin: 0 0 1.25rem; }
.site-footer .zg-footer-logo img, .footer-widget .zg-footer-logo img { max-width: 180px; width: auto; height: auto; }

/* [CLAUDE] Footer: align the second row of headings (Important/Follow Us/Open hours) by giving
   each column's first section a consistent min-height (tallest = the 5-item Links list). */
.site-footer .widgets-column .zg-sec1 { min-height: 13rem !important; margin-bottom: 0 !important; }
@media (max-width: 991px) { .site-footer .widgets-column .zg-sec1 { min-height: 0; } }


/* [CLAUDE] Footer: responsive side spacing on ALL screens (laptops < 1640px included).
   Proportional padding (not a wide max-width) so the inset shows on MacBook widths too. */
.site-footer .page-container {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: calc(clamp(24px, 8vw, 260px) + 50px) !important;
    padding-right: clamp(24px, 8vw, 260px) !important;
    box-sizing: border-box !important;
}

/* [CLAUDE] Footer: drop the rightward shift on small screens (stacked columns) for responsiveness */
@media (max-width: 768px) {
    .site-footer .page-container { padding-left: clamp(20px, 8vw, 260px) !important; }
}

/* [CLAUDE] v1.0.19 — Hide "View Project" button in Ohio portfolio/service
   lightbox popups (Personal Training, Sports Performance, Rehabilitation &
   Recovery, etc.) per dev request. Keeps the popup, removes only the link. */
.project-lightbox-details .project-content a.button.-text.-unlink,
.project-lightbox .project-content a.button.-text.-unlink {
  display: none !important;
}

/* [CLAUDE] v1.0.20 — Portfolio lightbox video fills its box; poster placeholder
   shown until playback (paired with zg-lightbox-video.js). */
.portfolio-lightbox-video { position: relative; width: 100%; height: 100%; }
.portfolio-lightbox-video video[data-lightbox-video-target] {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  background: #0c0c0c;
}

/* [CLAUDE] v1.0.21 — Inline portfolio CARD video: autoplay (muted/loop) fills the
   card box, sitting above the static image but below the date/expand overlays.
   pointer-events:none keeps the card link + lightbox button clickable. */
.portfolio-item .image-holder { position: relative; overflow: hidden; }
.portfolio-item .image-holder .zg-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  background: #0c0c0c;
}
/* keep Ohio's hover overlay + the date/expand/show-project UI above the video */
.portfolio-item .image-holder .overlay { z-index: 2 !important; }
.portfolio-item .image-holder .overlay-details { z-index: 3 !important; }

/* [CLAUDE] v1.0.22 — zg-card-video FORCE on top of the static card image. */
.portfolio-item .image-holder { position: relative !important; overflow: hidden; }
.portfolio-item .image-holder .zg-card-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 5 !important;
  pointer-events: none;
}
.portfolio-item .image-holder .overlay { z-index: 6 !important; }
.portfolio-item .image-holder .overlay-details { z-index: 7 !important; }

/* [CLAUDE] v1.0.23 — RESPONSIVE: no horizontal scroll on mobile/tablet.
   The off-canvas menu overlay, marquee strips, sliders and a couple of Elementor
   sections poke a few px past the viewport at <= ~1024px, causing a sideways scroll.
   overflow-x:clip removes it site-wide WITHOUT creating a scroll container, so the
   fixed header, scroll-to-top and position:sticky are all unaffected, and opened
   off-canvas menus (position:fixed) are not clipped. */
html, body { overflow-x: clip; }


/* [CLAUDE] v1.0.28 — MOBILE NAVBAR (consolidated; replaces earlier v1.0.24–1.0.27 nav blocks).
   Pill: logo far-left, hamburger far-right, wider pill. Free Consultation: white button in the
   desktop bar, and ONLY inside the mobile slide-in menu on phones. Drawer slides in from the LEFT
   and is flush-left (dev's Customizer margin-left:30px centering hack neutralised). The overlay is
   left in place (NOT relocated) so Ohio's hamburger open/close keeps working. */

/* Pill bar layout (mobile only) */
.header.-mobile { padding-left: 8px !important; padding-right: 8px !important; }
.header.-mobile .header-wrap-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.header.-mobile .header-wrap-inner > .mobile-hamburger { margin: 0 !important; }

/* Free Consultation placement */
.header:not(.-mobile) .menu-optional .button-group { display: flex !important; }   /* desktop/tablet: in bar */
.header.-mobile .menu-optional .button-group { display: none !important; }         /* mobile: not in bar */
body:not(.is-mobile-menu) .zg-menu-cta { display: none !important; }               /* desktop: hide clone */
.is-mobile-menu .menu-slide-in-overlay .zg-menu-cta { display: block !important; margin: 1.75rem 0 0.5rem; }
.is-mobile-menu .menu-slide-in-overlay .zg-menu-cta .button {
  display: inline-flex !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
  --clb-color-button: #ffffff;
  --clb-color-white: #000000;
}

/* [CLAUDE] v1.0.29 — MOBILE DRAWER geometry: true top-left, full-height slide-in.
   ROOT CAUSE of the old "floating box below the pill": .header-wrap-inner (the frosted
   navbar pill) has backdrop-filter:blur — which makes it the CONTAINING BLOCK for the
   position:fixed slide-in overlay, trapping the drawer at the pill's corner (~8px,32px)
   and beneath it. While the mobile menu is OPEN we drop that backdrop-filter so the
   overlay anchors to the VIEWPORT, then pin it top-left and give the panel full height. */
body.is-mobile-menu #masthead.header .header-wrap-inner,
body.is-mobile-menu #masthead .header-wrap-inner {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Overlay = full-viewport track, anchored top-left. */
body.is-mobile-menu .slide-in-overlay.menu-slide-in-overlay {
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
}

/* Dim scrim over the exposed page (right of the drawer) so it reads as an intentional drawer. */
body.is-mobile-menu .slide-in-overlay.menu-slide-in-overlay.visible {
  background: rgba(0, 0, 0, 0.5) !important;
}

/* The visible dark panel (.holder): top-left, full height, standard drawer width. */
body.is-mobile-menu .slide-in-overlay.menu-slide-in-overlay .holder {
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  height: 100vh !important;
  height: 100dvh !important;
  width: min(86vw, 360px) !important;
  max-width: 360px !important;
  padding: 84px 28px 32px !important;   /* top room for the close X + comfortable gutters */
  box-sizing: border-box !important;
  overflow-y: auto !important;
}

/* Smooth slide-from-left (open & close). */
.is-mobile-menu.with-left-mobile-hamburger .slide-in-overlay .holder,
.slide-in.with-left-mobile-hamburger .slide-in-overlay .holder {
  transform: translateX(-100%) !important;
  opacity: 1 !important;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.is-mobile-menu.with-left-mobile-hamburger .slide-in-overlay.visible .holder,
.slide-in.with-left-mobile-hamburger .slide-in-overlay.visible .holder {
  transform: translateX(0) !important;
  opacity: 1 !important;
}

/* Close (X) pinned to the panel's top-left, vertically centred in its bar. */
body.is-mobile-menu .slide-in-overlay.menu-slide-in-overlay .close-bar {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 72px !important;
  padding-left: 28px !important;
  display: flex !important;
  align-items: center !important;
}

/* Nav links: clean vertical rhythm, flush-left, slightly larger tap targets. */
body.is-mobile-menu .menu-slide-in-overlay .nav-container { padding: 0 !important; width: 100% !important; }
body.is-mobile-menu .menu-slide-in-overlay .nav-container > ul > li { margin: 0 !important; }
body.is-mobile-menu .menu-slide-in-overlay .nav-container > ul > li > a.menu-link {
  display: block !important;
  padding: 13px 0 !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
}

/* Kill the stray fixed vertical social rail ("Follow Us …") that bled into the page
   to the right of the drawer on small screens. */
@media (max-width: 1024px) {
  .social-bar-holder { display: none !important; }
}


/* [CLAUDE] v1.0.33 — FOOTER polish (desktop 4-col footer). All columns stay
   LEFT-aligned (reverted the earlier centering). What remains:
   - Contact + Open hours (4th column) text a touch larger.
   - Even, comfortable vertical spacing between headings, list items and the two
     stacked groups — checked while left-aligned. */

/* Contact + Open hours text a bit larger, with comfortable line-height. */
.site-footer .widgets > .widgets-column:nth-of-type(4) p,
.site-footer .widgets > .widgets-column:nth-of-type(4) p a {
  font-size: 17px !important;
  line-height: 1.95 !important;
}

/* Even vertical rhythm for footer heading groups + lists (left-aligned). */
.site-footer .widgets-column h4.wp-block-heading { margin-bottom: 0.9rem !important; }
.site-footer .widgets-column .wp-block-list { margin-bottom: 1.5rem !important; }
.site-footer .widgets-column .wp-block-list li { margin-bottom: 0.4rem !important; }
.site-footer .widgets > .widgets-column:nth-of-type(4) p:first-of-type { margin-bottom: 1.6rem !important; }


/* [CLAUDE] v1.0.36 — FOOTER columns evenly balanced across the width: column 1 (logo/intro)
   stays at the far LEFT, column 4 (Contact / Open hours) at the far RIGHT, and the two middle
   blocks (Links/Important and Address/Follow Us) sit at evenly-spaced positions between them
   — which moves Address/Follow Us to the right so the gaps read evenly. Desktop only (>=992px);
   tablet/mobile keep WPBakery's stacked grid. */
@media (min-width: 992px) {
  .site-footer .widgets {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    column-gap: 24px !important;
  }
  /* WPBakery's .vc_row clearfix ::before/::after become phantom flex items and steal a
     slot from space-between (pushing the last column off the right edge). Remove them. */
  .site-footer .widgets::before,
  .site-footer .widgets::after { display: none !important; }
  .site-footer .widgets > .widgets-column {
    width: auto !important;
    min-width: 0 !important;
    max-width: 280px !important;
    flex: 0 1 auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}