/* Mirror fixes — rules present on the live site but missing from the simply-static export.
   Source export captured 2026-05-01 (zip mtime). Live page is ~39% larger than export. */

/* Google Fonts — Bad Script + Dancing Script
   Live HTML references font-family:"Bad Script" in many places (e.g. .elementor-heading-title,
   .elementor-button), but the export did not capture a googleapis link. Elementor's runtime font
   loader is what populates these on live; on staging that runtime injection misses, so we load
   them statically. */
@import url('https://fonts.googleapis.com/css2?family=Bad+Script&family=Dancing+Script:wght@400;700&display=swap');

/* Banner full-width — Leonard requested 2026-05-02
   Source live and staging both render the .bannerPadding hero (Elementor section) inside
   Divi's outer .container max-width wrapper, so at wide viewports (>1080px) there are
   white margins on left and right. This CSS pulls the banner out of its constraining
   parents using viewport-width tricks. Applies to 7 inside pages that use bannerPadding
   (about, clinic-services, procedures-surgeries, cosmetic-treatments/medspa, etc.). */
.bannerPadding {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}

/* Divi-Child responsive utility classes — header show/hide rules.
   Source export captured a 2-line stub for Divi-Child/style.css. The real rules live in
   inline <style> blocks on the live page (Elementor critical CSS). Without these the
   .mob-call / .mob-location / .showonmobile blurbs render on desktop AND mobile,
   overlapping the desktop nav (Book Now / Location / phone). Reported by Leonard
   2026-05-05 as a sticky-on-scroll overlap on /cosmetic-treatments/medspa/. */
.showonmobile { display: none !important; }
@media (max-width: 980px) {
  .showonmobile { display: block !important; }
  .hideonmobo { display: none !important; }
  .et-db #et-boc .et-l .et_pb_row.scrollhs { display: none; }
  .et_pb_column.mobofirstc {
    display: flex !important;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100% !important;
    padding: 0 !important;
    height: 100%;
    float: none !important;
    margin: 0 !important;
    background: #6262B3;
  }
  .et_pb_column.mobofirstc .et_pb_module {
    width: 25% !important;
    border-right: 1px solid #fff;
    padding-top: 4px !important;
  }
  .et_pb_column.mobofirstc .et_pb_module:last-child {
    border-right: none;
  }

  /* Hamburger lines + "Menu" label must be WHITE on the purple bar.
     Source HTML hardcodes data-hamburger-color="#000" which the live site overrides
     in inline <style> blocks (not captured by Simply Static). Reported 2026-05-12
     on /womenshealthcares/ — hamburger + label rendered black on purple, unreadable. */
  body .tresio-nav.type-hamburger .tresio-nav__hamburger:before,
  body .tresio-nav.type-hamburger .tresio-nav__hamburger:after,
  body .tresio-nav.type-hamburger .tresio-nav__hamburger span {
    background: #fff !important;
  }
  body .menu_text {
    color: #fff !important;
    font-weight: bold;
    font-size: 15px;
    text-transform: capitalize;
  }

  /* Scroll-aware mobile header — match Allure / live WP pattern.
     Initial mobile load: only hamburger + logo visible.
     Past 100px scroll: <body> gets .scrolled-down (set by Header.astro JS),
     the 3 .scrollhs icons slide in and the inline logo hides, giving the
     4-column sticky bar (Menu / Call / Appointment / Location).
     Reported 2026-05-12 on /womenshealthcares/ — initial 5-up bar was cluttered. */
  .scrollhs.showonmobile { display: none !important; }

  /* Initial 2-up state: let Menu (auto) + Logo (flex) distribute naturally */
  body:not(.scrolled-down) .et_pb_column.mobofirstc .et_pb_module {
    width: auto !important;
    flex: 1 1 auto;
    border-right: none;
  }
  body:not(.scrolled-down) .et_pb_column.mobofirstc .menuText {
    flex: 0 0 auto;
    padding-left: 12px;
  }
  body:not(.scrolled-down) .et_pb_column.mobofirstc .moboLogo {
    text-align: center;
  }

  /* Scrolled 4-up state: 3 icons appear, logo hides, even 25% columns */
  body.scrolled-down .scrollhs.showonmobile { display: block !important; }
  body.scrolled-down .moboLogo { display: none !important; }
  body.scrolled-down .et_pb_column.mobofirstc .et_pb_module {
    width: 25% !important;
    flex: 0 0 25%;
    border-right: 1px solid #fff;
  }
  body.scrolled-down .et_pb_column.mobofirstc .et_pb_module:last-child {
    border-right: none;
  }

  /* Sticky-on-scroll: pin the header to top so the icon bar follows.
     Top offset (default 0) is bumped to 48px by BaseLayout JS when the staging
     admin bar is visible — the bar is position:fixed z-index:99999 so it would
     otherwise cover the icon row. CSS custom property keeps the fallback clean. */
  /* !important needed because the inline WP jQuery scroll handler sets
     style="top:0" directly on .header_tra, which would otherwise beat us. */
  body.scrolled-down .header_tra {
    position: fixed !important;
    top: var(--sticky-top-offset, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9998;
  }
}
