/* First-paint only — full overrides remain in /site-fixes.css */
/* ── Layout shift guards (first paint) ─────────────────────────────────── */
.elementor-invisible {
  visibility: hidden !important;
}

.elementor-704 .elementor-element-b2d1afd div.wdt-logo-container img {
  width: 150px;
  max-width: 150px;
  height: auto;
  aspect-ratio: 942 / 222;
}

body:not(.home) #header-wrapper {
  min-height: clamp(96px, 14vw, 160px);
}

/* Inner routes: `html.bh-inner-page` is set in head before paint; body may still
   be page-id-457 until client body-class hooks run — kill theme 150px band. */
html.bh-inner-page #header-wrapper {
  position: relative !important;
  z-index: 20;
  min-height: auto !important;
  margin-bottom: 0 !important;
}

html.bh-inner-page #header,
html.bh-inner-page #header-wrapper.header-top-absolute #header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100%;
}

html.bh-inner-page .elementor-704 .elementor-element-50b9991 {
  position: relative !important;
}

/*
 * Inner routes ship with the root layout's home `page-id-457` body class until
 * client body-class hooks run. Without this, the main header row keeps the home
 * treatment (white logo + white links) on a white bar — logo/nav look missing.
 */
html.bh-inner-page .elementor-704 .elementor-element-1bd4d07 {
  background-color: #ffffff !important;
  position: relative;
  z-index: 5;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

html.bh-inner-page .elementor-704 .wdt-logo-container img {
  filter: brightness(0) saturate(100%) invert(21%) sepia(56%) saturate(430%)
    hue-rotate(130deg) brightness(92%) contrast(95%);
}

html.bh-inner-page .wdt-primary-nav > li > a {
  color: var(--bh-refer-teal, #135353) !important;
}

html.bh-inner-page .wdt-primary-nav > li > a:hover {
  color: var(--bh-refer-mint, #70c3b3) !important;
}

html.bh-inner-page #header-wrapper .bh-mobile-trigger-menu .menu-trigger,
html.bh-inner-page #header-wrapper .bh-mobile-trigger-menu .menu-trigger > i,
html.bh-inner-page #header-wrapper .mobile-nav-container .menu-trigger {
  color: #135454 !important;
}

html.bh-inner-page #header-wrapper .bh-mobile-trigger-menu .menu-trigger > i,
html.bh-inner-page #header-wrapper .bh-mobile-trigger-menu .menu-trigger > i:before,
html.bh-inner-page #header-wrapper .bh-mobile-trigger-menu .menu-trigger > i:after {
  background-color: #135454 !important;
}

html.bh-inner-page #header-wrapper .wdt-header-icons-list-item.search-item a.wdt-search-icon,
html.bh-inner-page #header-wrapper .wdt-header-icons-list-item.search-item a.wdt-search-icon > *,
html.bh-inner-page #header-wrapper .wdt-header-icons-list-item.search-item a.wdt-search-icon i,
html.bh-inner-page #header-wrapper .wdt-header-icons-list-item.search-item a.wdt-search-icon svg,
html.bh-inner-page #header-wrapper .wdt-header-icons-list-item.search-item a.wdt-search-icon svg path {
  color: #135454 !important;
  fill: #135454 !important;
}

html.bh-inner-page #header-wrapper .elementor-704 .elementor-invisible,
html.bh-inner-page #header-wrapper [data-scroll-animation].elementor-invisible {
  visibility: visible !important;
}

/* `html.bh-home-page` is set in <head> before paint; `body.home` is SSR'd in
   layout (and reinforced by HomeBodyClass). Both must match so the absolute
   header overlays the hero immediately — otherwise white logo/nav flash on a
   white in-flow bar until hydration. Do NOT key this off page-id-457 alone:
   the root layout ships that class on every route until client BodyClass hooks. */
html.bh-home-page #header-wrapper,
body.home #header-wrapper {
  min-height: 0;
}

/*
 * Home hero uses a large negative margin and paints after #header in the DOM.
 * Without an explicit stacking context the hero steals taps from the hamburger
 * while you are still on the first screen. Keep the absolute header above it.
 */
html.bh-home-page #header-wrapper.header-top-absolute,
body.home #header-wrapper.header-top-absolute {
  position: relative;
  z-index: 100;
}

html.bh-home-page #header-wrapper.header-top-absolute #header,
body.home #header-wrapper.header-top-absolute #header {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100 !important;
}

/* Re-assert after home absolute rules: layout SSR still has body.home on
   inner routes until BodyClass hooks run. html.bh-inner-page is set in head. */
html.bh-inner-page #header-wrapper.header-top-absolute,
html.bh-inner-page body.home #header-wrapper.header-top-absolute {
  z-index: 20;
}

html.bh-inner-page #header-wrapper.header-top-absolute #header,
html.bh-inner-page body.home #header-wrapper.header-top-absolute #header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100%;
  z-index: auto !important;
}

/* Mobile: ensure top contacts + search + hamburger stay tappable above hero */
@media (max-width: 1280px) {
  html.bh-home-page #header-wrapper.header-top-absolute,
  html.bh-home-page #header-wrapper.header-top-absolute #header,
  body.home #header-wrapper.header-top-absolute,
  body.home #header-wrapper.header-top-absolute #header,
  .elementor-704 .header-top-contacts,
  .elementor-704 .header-top-contacts a,
  .elementor-704 .header-icons-with-cta,
  .elementor-704 .wdt-search-icon,
  .elementor-704 .bh-mobile-trigger-menu,
  .elementor-704 .bh-mobile-trigger-menu .menu-trigger {
    pointer-events: auto !important;
    position: relative;
    z-index: 101;
  }
}

.bh-home-hero,
.elementor-457 .elementor-element.elementor-element-80131d9 {
  position: relative;
  z-index: 0;
}

@media (max-width: 767px) {
  body:not(.home) #header-wrapper {
    min-height: 88px;
  }

  .elementor-704 .elementor-element-b2d1afd div.wdt-logo-container img {
    width: 130px;
    max-width: 130px;
  }
}

/* Home hero – banner background */
.elementor-457 .elementor-element.elementor-element-80131d9:not(.elementor-motion-effects-element-type-background),
.elementor-457 .elementor-element.elementor-element-80131d9 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: var(
    --home-hero-bg,
    image-set(
      url("/images/Banner/Banner.webp") type("image/webp"),
      url("/images/Banner/Banner.jpg") type("image/jpeg")
    )
  ) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Hero title as H1 — keep theme typography on nested spans */
.elementor-457 .elementor-element.elementor-element-0bba8f4 .bh-home-hero-heading {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
}

.elementor-457 .elementor-element.elementor-element-0bba8f4 .bh-home-hero-heading > .wdt-text-title {
  display: inline-block;
  vertical-align: middle;
  margin: clamp(0.25rem, 0.2055rem + 0.2454vw, 0.5rem);
  font-size: clamp(1.875rem, 1.3177rem + 2.5478vw, 4.375rem);
  font-family: var(--wdt-elementor-typo-primary-font-family);
  font-weight: var(--wdt-elementor-typo-primary-font-weight);
  color: #ffffff !important;
  line-height: var(--wdtLineHeight_Alt);
}

.bh-home-hero .wdt-heading-content-wrapper {
  color: rgba(255, 255, 255, 0.9) !important;
}

.elementor-457 .elementor-element.elementor-element-0bba8f4 .bh-home-hero-title-line {
  display: inline-block !important;
  width: auto !important;
  white-space: nowrap;
}

@media (max-width: 575px) {
  .elementor-457 .elementor-element.elementor-element-0bba8f4 .bh-home-hero-title-line {
    white-space: normal;
  }
}

.bh-home-hero-loader {
  display: none !important;
}

/* Blank page loader (NOT inside hero) — white page + spinner until video is ready */
.bh-blank-page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  /* Failsafe: if JS never hydrates (static export), the overlay still clears
     itself instead of leaving the visitor on a blank white screen. */
  animation: bh-blank-page-loader-timeout 0.3s ease 4s forwards;
}

@keyframes bh-blank-page-loader-timeout {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.bh-blank-page-loader__spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2.5px solid rgba(19, 84, 84, 0.18);
  border-top-color: #135454;
  animation: bh-home-hero-spin 0.7s linear infinite;
}

@keyframes bh-home-hero-spin {
  to {
    transform: rotate(360deg);
  }
}

html.bh-home-loading,
html.bh-home-loading body {
  overflow: hidden !important;
  background: #fff !important;
}

.bh-home-hero__content {
  position: relative;
  z-index: 4 !important;
}

.bh-home-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 15, 23, 0.22) 0%, rgba(11, 15, 23, 0.42) 100%);
}

/* Video mode: never show bathroom Banner behind the video */
.bh-home-hero.bh-home-hero--video,
.elementor-457 .elementor-element.elementor-element-80131d9.bh-home-hero--video:not(.elementor-motion-effects-element-type-background),
.elementor-457 .elementor-element.elementor-element-80131d9.bh-home-hero--video > .elementor-motion-effects-container > .elementor-motion-effects-layer,
html.bh-home-loading .bh-home-hero,
html.bh-home-loading .elementor-457 .elementor-element.elementor-element-80131d9:not(.elementor-motion-effects-element-type-background) {
  background-image: none !important;
  --home-hero-bg: none !important;
}

.bh-home-hero .elementor-invisible,
.bh-home-hero [data-scroll-animation].elementor-invisible {
  visibility: visible !important;
}

/* Bathroom-types carousel is above the fold — never hide cards until scroll JS runs. */
.elementor-457 #services .elementor-element-1370daa.elementor-invisible,
.elementor-457 #services .elementor-element-1370daa [data-scroll-animation].elementor-invisible,
.elementor-457 #services .wdt-service-image img {
  visibility: visible !important;
}

/* Hero background video reveal: the thumbnail paints first, the video sits on
   top at opacity 0 until it can actually play, then crossfades in over the
   still-visible thumbnail — no hard image→video pop and never a gap between
   the two. Both layers stay unscaled so the crossfade lines up exactly; a
   drifting thumbnail would visibly jump against the video underneath it. */
.bh-home-hero-poster {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 100%;
  max-width: none !important;
  /* width/height attrs set aspect-ratio: auto 1280/720, which shrinks the
     poster to ~16:9 on mobile instead of filling the tall hero container. */
  aspect-ratio: unset !important;
  object-fit: cover;
  object-position: center center;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  /* Leaves only once the video above it is fully opaque. */
  transition: opacity 0.5s ease 0.5s;
  will-change: opacity;
}

.bh-home-hero-poster.is-hidden {
  opacity: 0;
}

.bh-home-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  /* Hidden until JS confirms a paintable frame, so the thumbnail below is what
     the visitor sees first instead of an empty video box. */
  opacity: 0;
  transition: opacity 0.7s ease;
  will-change: opacity;
}

.bh-home-hero-video.is-ready {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .bh-home-hero-poster {
    transition: opacity 0.2s linear 0.2s;
  }

  .bh-home-hero-video {
    transition: opacity 0.25s linear;
  }
}