/* ==========================================================================
   Service Header / Hero Blending
   ========================================================================== */

body.msvc-header-blend {
  --msvc-header-overlay-height: 72px;
  --msvc-header-solid-dark: var(--medspa-navy, var(--ink));
  --msvc-header-solid-light: var(--medspa-bg, #fff);
  --msvc-header-dark-text: var(--medspa-text, var(--ink));
  --msvc-header-light-text: #fff;
}

/* Without JavaScript the overlay remains absolute and scrolls away with the Hero.
   JavaScript upgrades it to fixed, so a script failure never leaves a transparent
   bar floating over unrelated page content. */
body.msvc-header-blend .site-header.site-header--blend {
  position: absolute !important;
  inset: 0 0 auto 0;
  width: 100%;
  z-index: 5000;
  background: transparent !important;
  box-shadow: none !important;
  isolation: isolate;
  transition:
    background-color .28s ease,
    box-shadow .28s ease,
    backdrop-filter .28s ease,
    transform .25s ease;
}

body.msvc-header-blend .site-header.site-header--blend.is-blend-ready {
  position: fixed !important;
}

body.admin-bar.msvc-header-blend .site-header.site-header--blend {
  top: 32px;
}

body.msvc-header-blend .site-header.site-header--blend::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 1;
  transition: opacity .28s ease, background .28s ease, backdrop-filter .28s ease;
}

body.msvc-header-blend .site-header.site-header--blend[data-blend-foreground="light"]::before {
  background: linear-gradient(180deg, rgba(12,12,13,.62) 0%, rgba(12,12,13,.24) 72%, rgba(12,12,13,0) 100%);
}

body.msvc-header-blend .site-header.site-header--blend[data-blend-foreground="dark"]::before {
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.58) 72%, rgba(255,255,255,0) 100%);
}

/* Transparent state foreground. The specificity intentionally beats the
   theme's normal inline header-colour output without modifying global headers. */
body.msvc-header-blend .site-header.site-header--blend:not(.is-blend-solid)[data-blend-foreground="light"] .nav-menu > li > a,
body.msvc-header-blend .site-header.site-header--blend:not(.is-blend-solid)[data-blend-foreground="light"] .header-phone,
body.msvc-header-blend .site-header.site-header--blend:not(.is-blend-solid)[data-blend-foreground="light"] .site-title,
body.msvc-header-blend .site-header.site-header--blend:not(.is-blend-solid)[data-blend-foreground="light"] .arrow {
  color: var(--msvc-header-light-text) !important;
}

body.msvc-header-blend .site-header.site-header--blend:not(.is-blend-solid)[data-blend-foreground="dark"] .nav-menu > li > a,
body.msvc-header-blend .site-header.site-header--blend:not(.is-blend-solid)[data-blend-foreground="dark"] .header-phone,
body.msvc-header-blend .site-header.site-header--blend:not(.is-blend-solid)[data-blend-foreground="dark"] .site-title,
body.msvc-header-blend .site-header.site-header--blend:not(.is-blend-solid)[data-blend-foreground="dark"] .arrow {
  color: var(--msvc-header-dark-text) !important;
}

body.msvc-header-blend .site-header.site-header--blend:not(.is-blend-solid)[data-blend-foreground="light"] .mobile-toggle span {
  background: var(--msvc-header-light-text) !important;
}

body.msvc-header-blend .site-header.site-header--blend:not(.is-blend-solid)[data-blend-foreground="dark"] .mobile-toggle span {
  background: var(--msvc-header-dark-text) !important;
}

/* Solid state. */
body.msvc-header-blend .site-header.site-header--blend.is-blend-solid::before {
  opacity: 0;
}

body.msvc-header-blend .site-header.site-header--blend.is-blend-solid[data-solid-style="dark"] {
  background: var(--msvc-header-solid-dark) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.2) !important;
}

body.msvc-header-blend .site-header.site-header--blend.is-blend-solid[data-solid-style="light"] {
  background: var(--msvc-header-solid-light) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.1) !important;
}

body.msvc-header-blend .site-header.site-header--blend.is-blend-solid[data-solid-style="dark"] .nav-menu > li > a,
body.msvc-header-blend .site-header.site-header--blend.is-blend-solid[data-solid-style="dark"] .header-phone,
body.msvc-header-blend .site-header.site-header--blend.is-blend-solid[data-solid-style="dark"] .site-title,
body.msvc-header-blend .site-header.site-header--blend.is-blend-solid[data-solid-style="dark"] .arrow {
  color: var(--msvc-header-light-text) !important;
}

body.msvc-header-blend .site-header.site-header--blend.is-blend-solid[data-solid-style="light"] .nav-menu > li > a,
body.msvc-header-blend .site-header.site-header--blend.is-blend-solid[data-solid-style="light"] .header-phone,
body.msvc-header-blend .site-header.site-header--blend.is-blend-solid[data-solid-style="light"] .site-title,
body.msvc-header-blend .site-header.site-header--blend.is-blend-solid[data-solid-style="light"] .arrow {
  color: var(--msvc-header-dark-text) !important;
}

body.msvc-header-blend .site-header.site-header--blend.is-blend-solid[data-solid-style="dark"] .mobile-toggle span {
  background: var(--msvc-header-light-text) !important;
}

body.msvc-header-blend .site-header.site-header--blend.is-blend-solid[data-solid-style="light"] .mobile-toggle span {
  background: var(--msvc-header-dark-text) !important;
}

/* The Hero owns the space beneath the overlay. Add safe room only to the text
   bearing part of each of the 23 layouts, preserving image/video bleed. */
body.msvc-header-blend .msvc-hero .hl1-txt,
body.msvc-header-blend .msvc-hero .hl2-in,
body.msvc-header-blend .msvc-hero .hl3-g,
body.msvc-header-blend .msvc-hero .hl4-in,
body.msvc-header-blend .msvc-hero .hl5-g,
body.msvc-header-blend .msvc-hero .hl6-in,
body.msvc-header-blend .msvc-hero .hl7-in,
body.msvc-header-blend .msvc-hero .hl8-in,
body.msvc-header-blend .msvc-hero .hl9-txt,
body.msvc-header-blend .msvc-hero .hl10-in,
body.msvc-header-blend .msvc-hero .hl11-in,
body.msvc-header-blend .msvc-hero .hl12-in,
body.msvc-header-blend .msvc-hero .hl13-g,
body.msvc-header-blend .msvc-hero .hl14-g,
body.msvc-header-blend .msvc-hero .hl15-in,
body.msvc-header-blend .msvc-hero .hl16-txt,
body.msvc-header-blend .msvc-hero .hl17-g,
body.msvc-header-blend .msvc-hero .hl18-in,
body.msvc-header-blend .msvc-hero .hl19-in,
body.msvc-header-blend .msvc-hero .hl20-in,
body.msvc-header-blend .msvc-hero .hl21-in,
body.msvc-header-blend .msvc-hero .hl22-g,
body.msvc-header-blend .msvc-hero .hl23-g {
  border-top: var(--msvc-header-overlay-height) solid transparent;
  box-sizing: border-box;
}


/* Layout 11 has an independent top fact capsule. Keep it below the transparent
   site header while the Hero background continues behind both elements. */
body.msvc-header-blend .msvc-hero .hl11-top {
  top: calc(var(--msvc-header-overlay-height) + 18px);
}

/* Dropdown surfaces remain conventional and readable even while the top row is transparent. */
body.msvc-header-blend .site-header.site-header--blend .sub-menu,
body.msvc-header-blend .site-header.site-header--blend .mega-menu {
  color: var(--msvc-header-dark-text);
}

body.msvc-header-blend .site-header.site-header--blend .sub-menu a,
body.msvc-header-blend .site-header.site-header--blend .mega-menu a {
  color: var(--msvc-header-dark-text) !important;
}


@media (max-width: 900px) {
  body.msvc-header-blend .msvc-hero .hl11-top {
    top: auto;
  }
}

@media (max-width: 782px) {
  body.admin-bar.msvc-header-blend .site-header.site-header--blend { top: 46px; }
}

@media (max-width: 767px) {
  body.msvc-header-blend { --msvc-header-overlay-height: 64px; }

  body.msvc-header-blend--desktop-only .site-header.site-header--blend {
    position: sticky !important;
    top: 0;
  }

  body.admin-bar.msvc-header-blend--desktop-only .site-header.site-header--blend {
    top: 0;
  }

  body.msvc-header-blend--desktop-only .site-header.site-header--blend::before {
    display: none;
  }


  body.msvc-header-blend--desktop-only .msvc-hero .hl11-top {
    top: auto;
  }

  body.msvc-header-blend--desktop-only .msvc-hero .hl1-txt,
  body.msvc-header-blend--desktop-only .msvc-hero .hl2-in,
  body.msvc-header-blend--desktop-only .msvc-hero .hl3-g,
  body.msvc-header-blend--desktop-only .msvc-hero .hl4-in,
  body.msvc-header-blend--desktop-only .msvc-hero .hl5-g,
  body.msvc-header-blend--desktop-only .msvc-hero .hl6-in,
  body.msvc-header-blend--desktop-only .msvc-hero .hl7-in,
  body.msvc-header-blend--desktop-only .msvc-hero .hl8-in,
  body.msvc-header-blend--desktop-only .msvc-hero .hl9-txt,
  body.msvc-header-blend--desktop-only .msvc-hero .hl10-in,
  body.msvc-header-blend--desktop-only .msvc-hero .hl11-in,
  body.msvc-header-blend--desktop-only .msvc-hero .hl12-in,
  body.msvc-header-blend--desktop-only .msvc-hero .hl13-g,
  body.msvc-header-blend--desktop-only .msvc-hero .hl14-g,
  body.msvc-header-blend--desktop-only .msvc-hero .hl15-in,
  body.msvc-header-blend--desktop-only .msvc-hero .hl16-txt,
  body.msvc-header-blend--desktop-only .msvc-hero .hl17-g,
  body.msvc-header-blend--desktop-only .msvc-hero .hl18-in,
  body.msvc-header-blend--desktop-only .msvc-hero .hl19-in,
  body.msvc-header-blend--desktop-only .msvc-hero .hl20-in,
  body.msvc-header-blend--desktop-only .msvc-hero .hl21-in,
  body.msvc-header-blend--desktop-only .msvc-hero .hl22-g,
  body.msvc-header-blend--desktop-only .msvc-hero .hl23-g {
    border-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.msvc-header-blend .site-header.site-header--blend,
  body.msvc-header-blend .site-header.site-header--blend::before {
    transition: none !important;
  }
}