/* ============================================================
   VE HOMEPAGE REDESIGN — Header / nav overrides
   File: wp-content/themes/wprentals-child/css/ve-homepage-redesign.css
   Loaded AFTER elementor-frontend so these rules win on tie.

   Scope: body.home only (page_on_front = post 1745 on staging).
   Header template: 210450 (Elementor library, location=header)
   Hotline widget:  data-id="00060ae" (heading widget)
   Hotline parent:  data-id="12e208b" (container, classic bg)
   Logo+nav row:    data-id="f41486a" (container, classic bg, fadeIn)

   Design target: ranchosestates.com — full-bleed video hero,
   transparent nav with white text + copper hover, single CTA.
   ============================================================ */

/* ───────────────────────────────────────────────────────────
   1. HIDE BOOKING HOTLINE BAR ON HOMEPAGE
   Hide the widget AND its container (which has a navy bg of
   its own — leaving it would render as an empty navy strip).
   ─────────────────────────────────────────────────────────── */
body.home header.elementor-location-header .elementor-element.elementor-element-00060ae,
body.home header.elementor-location-header [data-id="00060ae"],
body.home header.elementor-location-header .elementor-element.elementor-element-12e208b,
body.home header.elementor-location-header [data-id="12e208b"] {
  display: none !important;
}

/* ───────────────────────────────────────────────────────────
   2. HEADER TRANSPARENT + ABSOLUTE OVER HERO
   Position the entire header template absolutely so the video
   hero sits flush at the top of the viewport. Strip every
   container background that the Elementor per-post CSS sets.
   ─────────────────────────────────────────────────────────── */
body.home header.elementor-location-header,
body.home .elementor-210450 {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 100 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Strip backgrounds from every container inside the header
   (Elementor sets per-element background colors). */
body.home header.elementor-location-header .e-con,
body.home header.elementor-location-header .e-con-inner,
body.home header.elementor-location-header .elementor-element.elementor-element-f41486a,
body.home header.elementor-location-header [data-id="f41486a"],
body.home header.elementor-location-header .elementor-element.elementor-element-4fe6b05,
body.home header.elementor-location-header .elementor-element.elementor-element-4156535,
body.home header.elementor-location-header .elementor-element.elementor-element-2810429 {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* The wprentals theme wraps the header in #all_wrapper / .container
   .main_wrapper — make sure those don't clip or push the header down. */
body.home #all_wrapper.website-wrapper {
  background: transparent !important;
}
body.home .container.main_wrapper {
  background: transparent !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* WpRentals also injects an empty .header_media element below the
   header — collapse it on the homepage so nothing renders above the hero. */
body.home .header_media {
  display: none !important;
}

/* Keep the header fade-in animation, but force it visible
   immediately so the navy "invisible" placeholder doesn't render
   during page load. */
body.home header.elementor-location-header .elementor-invisible {
  visibility: visible !important;
  opacity: 1 !important;
}

/* ───────────────────────────────────────────────────────────
   3. NAV LINKS WHITE
   Target both the desktop menu (wprentals-studio-menu) and any
   Elementor link inside the header.
   ─────────────────────────────────────────────────────────── */
body.home header.elementor-location-header a,
body.home header.elementor-location-header .menu-item-link,
body.home header.elementor-location-header .wprentals-studio-menu a,
body.home header.elementor-location-header #access a,
body.home header.elementor-location-header .menu > li > a {
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important;
  transition: color 200ms ease !important;
}

body.home header.elementor-location-header a:hover,
body.home header.elementor-location-header .menu-item-link:hover,
body.home header.elementor-location-header .wprentals-studio-menu a:hover,
body.home header.elementor-location-header .menu > li > a:hover,
body.home header.elementor-location-header a:focus-visible {
  color: #CFA190 !important;
  text-shadow: none !important;
  outline: none !important;
}

/* Mobile menu hamburger SVG strokes — invert to white */
body.home header.elementor-location-header .wpestate_mobile_menu_trigger svg path,
body.home header.elementor-location-header .wpestate_mobile_menu_trigger_close svg path {
  stroke: #ffffff !important;
}

/* Mobile menu drawer — keep white text inside the open drawer */
body.home .mobilex-menu a {
  color: #1A2142 !important; /* drawer background is light, keep readable */
  text-shadow: none !important;
}

/* ───────────────────────────────────────────────────────────
   4. LOGO WHITE
   Invert the dark transparent PNG to white. Targets the Elementor
   Site_Logo widget (data-id="a2fc383") and the .image-logo class.
   ─────────────────────────────────────────────────────────── */
body.home header.elementor-location-header .image-logo,
body.home header.elementor-location-header .wprentals-site-logo img,
body.home header.elementor-location-header [data-id="a2fc383"] img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.95 !important;
  transition: opacity 200ms ease !important;
}

body.home header.elementor-location-header .wprentals-site-logo:hover img,
body.home header.elementor-location-header [data-id="a2fc383"]:hover img {
  opacity: 1 !important;
}

/* ───────────────────────────────────────────────────────────
   5. HERO SECTION — start at top of viewport
   The video hero is post 1745's first Elementor section
   (data-id="5a754a0") with background_background:video.
   Make sure it has no top margin so the transparent header
   overlays the very top of the video.
   ─────────────────────────────────────────────────────────── */
body.home .elementor-1745 > .elementor-element:first-child,
body.home .elementor-element-5a754a0 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure the .content_wrapper doesn't add a top gap on homepage */
body.home .content_wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ───────────────────────────────────────────────────────────
   6. NOTHING NAVY ABOVE THE VIDEO
   Belt-and-braces: zero out any direct child of the website
   wrapper that comes before the page content and has a dark
   background. (Targets WpRentals' optional top bars / promo
   strips in case any are still output server-side.)
   ─────────────────────────────────────────────────────────── */
body.home #all_wrapper > .top_bar_wrapper,
body.home #all_wrapper > .topbar_wrapper,
body.home #all_wrapper > .header-promo-bar,
body.home .top_bar_wrapper,
body.home .topbar_wrapper {
  display: none !important;
}

/* ───────────────────────────────────────────────────────────
   7. SCROLLED STATE (optional polish, kept conservative)
   When the user scrolls past the hero the transparent nav
   becomes hard to read on cream backgrounds. Add a subtle
   background once a `is-scrolled` class is set on <body>.
   (No JS shipped here — opt-in if/when added later.)
   ─────────────────────────────────────────────────────────── */
body.home.is-scrolled header.elementor-location-header {
  background: rgba(26, 33, 66, 0.92) !important;
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  transition: background 200ms ease;
}

/* ───────────────────────────────────────────────────────────
   8. MOBILE — keep header readable on small screens
   ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  body.home header.elementor-location-header {
    padding: 12px 16px !important;
  }
}

/* ───────────────────────────────────────────────────────────
   9. ADMIN BAR OFFSET
   When an admin is logged in, the WP admin bar pushes content
   down 32px (or 46px on mobile). Keep the absolute header
   below it so it doesn't get hidden.
   ─────────────────────────────────────────────────────────── */
body.home.admin-bar header.elementor-location-header {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  body.home.admin-bar header.elementor-location-header {
    top: 46px !important;
  }
}

/* ───────────────────────────────────────────────────────────
   10. HERO H2 SUBHEAD — restore white italic Cormorant
   The H2 lives inside heading widget 516db4c (sibling to H1).
   Theme/Elementor CSS sets H2 to navy ~55px by default; this
   uses higher specificity + !important to win.
   Selector breakdown:
     body.home (0,1,1) +
     .elementor-element-1dce50d (0,1,0) +    ← parent text container
     h2.ve-hero-h2-sub (0,1,1)
   = 0,3,2 — beats Elementor's per-page 0,3,1 selectors.
   ─────────────────────────────────────────────────────────── */
body.home .elementor-element-1dce50d h2.ve-hero-h2-sub,
body.home .elementor-element-516db4c h2.ve-hero-h2-sub,
body.home .elementor-widget-container h2.ve-hero-h2-sub {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(18px, 1.9vw, 26px) !important;
  line-height: 1.5 !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.95) !important;
  text-align: center !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
  text-transform: none !important;
  margin: 18px auto 0 !important;
  padding: 0 24px !important;
  max-width: 880px !important;
  display: block !important;
  position: relative !important;
  z-index: 20 !important;
}

@media (max-width: 767px) {
  body.home .elementor-element-1dce50d h2.ve-hero-h2-sub,
  body.home .elementor-element-516db4c h2.ve-hero-h2-sub,
  body.home .elementor-widget-container h2.ve-hero-h2-sub {
    font-size: clamp(16px, 4.4vw, 20px) !important;
    padding: 0 18px !important;
    margin-top: 14px !important;
  }
}

/* Tighten H1 letter-spacing for the editorial cover feel */
body.home .elementor-element-516db4c .elementor-heading-title {
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

/* ════════════════════════════════════════════════════════════
   MANDATORY GLOBAL FIXES — added 2026-05-10 (overnight build)
   These were spec'd to go into style.css. Placed here instead
   so they actually win the cascade against Elementor.
   ════════════════════════════════════════════════════════════ */

/* Force video hero full height + edge-to-edge + zero radius */
body.home .elementor-widget-video,
body.home .elementor-widget-video iframe,
body.home .elementor-widget-video video,
body.home .elementor-widget-video .elementor-wrapper,
body.home .elementor-element-2e2ee02,
body.home .elementor-element-5a754a0 {
  border-radius: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

body.home .elementor-element-2e2ee02 {
  min-height: 100vh !important;
}

/* Veh-page sections break out to viewport width regardless of
   WPRentals/Elementor parent column width. Applies on every page
   that uses the .veh-page wrapper (V1, V2, V3 redesigns). */
.veh-page > section,
.veh-page > div[class] {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}

/* Image rendering crispness on inverted logo (anti-blur) */
body.home header.elementor-location-header img {
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
}

/* Primary CTA button — theme terracotta #cfa190 across all redesign pages */
.veh-page .btn-primary,
div.veh-page a.btn-primary,
.veh-page a.btn.btn-primary {
  background-color: #cfa190 !important;
  background: #cfa190 !important;
  border-color: #cfa190 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.veh-page .btn-primary:hover,
div.veh-page a.btn-primary:hover {
  background-color: #a87d6a !important;
  background: #a87d6a !important;
  border-color: #a87d6a !important;
  color: #ffffff !important;
}

/* Hide hotline + transparent header on the redesign preview pages too
   (V1=211449, plus future V2/V3 page IDs — added by deployment script). */
body.page-id-211449 header.elementor-location-header [data-id="00060ae"],
body.page-id-211449 header.elementor-location-header [data-id="12e208b"],
body.page-id-211465 header.elementor-location-header [data-id="00060ae"],
body.page-id-211465 header.elementor-location-header [data-id="12e208b"],
body.page-id-211466 header.elementor-location-header [data-id="00060ae"],
body.page-id-211466 header.elementor-location-header [data-id="12e208b"] {
  display: none !important;
}

/* Hide the wprentals colored social-share side bar on all redesign preview pages.
   Doesn't match luxury brand voice — colored icon squares look OTA. */
body.page-id-211449 .social_share_wrapper,
body.page-id-211465 .social_share_wrapper,
body.page-id-211466 .social_share_wrapper,
body.page-id-211467 .social_share_wrapper,
body.page-id-211468 .social_share_wrapper,
body.page-id-211469 .social_share_wrapper,
body.page-id-211470 .social_share_wrapper,
body.page-id-211471 .social_share_wrapper,
body.page-id-211472 .social_share_wrapper,
body.page-id-211473 .social_share_wrapper,
body.page-id-211474 .social_share_wrapper,
body.page-id-211475 .social_share_wrapper,
body.page-id-211476 .social_share_wrapper,
body.page-id-211477 .social_share_wrapper,
body.page-id-211478 .social_share_wrapper,
body.page-id-211479 .social_share_wrapper,
body.page-id-211480 .social_share_wrapper,
body.page-id-211481 .social_share_wrapper,
body.page-id-211482 .social_share_wrapper,
body.page-id-211483 .social_share_wrapper,
body.page-id-211484 .social_share_wrapper,
body.page-id-211485 .social_share_wrapper,
body.page-id-211486 .social_share_wrapper,
body.page-id-211487 .social_share_wrapper,
body.page-id-211488 .social_share_wrapper,
body.page-id-211489 .social_share_wrapper,
body.page-id-211490 .social_share_wrapper,
body.page-id-211491 .social_share_wrapper {
  display: none !important;
}

/* Hide Tidio (or any) live-chat widget overlay on all redesign preview pages.
   Pop-up chat with avatar isn't luxury brand voice for these previews. */
body[class*="page-id-21148"] iframe#tidio-chat-iframe,
body[class*="page-id-21148"] div#tidio-chat,
body[class*="page-id-21148"] [class*="tidio-chat"],
body[class*="page-id-21148"] iframe[src*="tidio"],
body[class*="page-id-21149"] iframe#tidio-chat-iframe,
body[class*="page-id-21149"] div#tidio-chat,
body[class*="page-id-21149"] [class*="tidio-chat"],
body[class*="page-id-21149"] iframe[src*="tidio"],
body[class*="page-id-21146"] iframe#tidio-chat-iframe,
body[class*="page-id-21146"] iframe[src*="tidio"],
body[class*="page-id-21147"] iframe#tidio-chat-iframe,
body[class*="page-id-21147"] iframe[src*="tidio"],
body[class*="page-id-211449"] iframe#tidio-chat-iframe,
body[class*="page-id-211449"] iframe[src*="tidio"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hide Bitrix24 + any open-chat / call-back widgets on all redesign preview
   pages. They sit on top of the mobile hamburger and CTAs.
   Range covers homepage 211449 + destination pages 211503-211508. */
body[class*="page-id-211449"] [id*="bx-livechat"],
body[class*="page-id-211449"] [id^="bx-"],
body[class*="page-id-211449"] [class*="b24-widget"],
body[class*="page-id-211449"] [class*="bitrix"],
body[class*="page-id-211449"] iframe[src*="bitrix"],
body[class*="page-id-21150"] [id*="bx-livechat"],
body[class*="page-id-21150"] [id^="bx-"],
body[class*="page-id-21150"] [class*="b24-widget"],
body[class*="page-id-21150"] [class*="bitrix"],
body[class*="page-id-21150"] iframe[src*="bitrix"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}