/*
 * RR Custom — SMART HEADER (migrated 2026-07-09)
 *
 * Sources, verbatim except for these comments:
 *   - Elementor -> Site Settings -> Custom CSS (kit post 10), "SMART HEADER" block
 *   - WP Customizer -> Additional CSS (post 231), the header full-width rule
 *
 * Paired JS lives in assets/js/rr-custom.js (rrInitSmartHeader / rrSetHeaderOffset),
 * which toggles .is-scrolled / .is-hidden / .is-visible and publishes
 * --rr-header-offset.
 *
 * FRAGILITY: the shrink rules target specific Elementor element IDs
 * (.elementor-element-2a5351e3 etc). These change if the header is rebuilt in
 * Elementor -- re-verify heights at 1440/820/390 after any header edit.
 * Reference heights: 147->106 desktop, 126->85 tablet, 91 (no shrink) mobile.
 *
 * Enqueued EARLY (before the Houzez stylesheets) to reproduce the cascade
 * position this CSS had while it lived in the Elementor kit. See rr-custom.php.
 */

/* Fallback for the custom property the header JS overwrites at runtime. */
:root{
  --rr-header-offset: 0px; /* JS will overwrite */
}

/* From the Customizer: let the Elementor-built header span the full viewport. */
/* Make Elementor header full width */
header .container,
.header .container,
.header-main-wrap .container {
    max-width: 100% !important;
    width: 100% !important;
}

/* =========================================
   SMART HEADER
   Motion + structural shrink only
   NO logo targeting at all
   ========================================= */

.rr-site-header:not(.elementor-sticky__spacer){
  z-index: 9999;
  transition: transform 0.32s ease;
  will-change: transform;
}

/* Hide on scroll down */
.rr-site-header:not(.elementor-sticky__spacer).is-hidden{
  transform: translateY(-100%);
}

/* Show on scroll up */
.rr-site-header:not(.elementor-sticky__spacer).is-visible{
  transform: translateY(0);
}

/* =========================================
   DESKTOP
   Full header at top
   Compact header after scroll
   ========================================= */

.rr-site-header--desktop .elementor-element-2a5351e3,
.rr-site-header--desktop .elementor-element-29d5fe92,
.rr-site-header--desktop .elementor-element-2405ed08{
  transition:
    max-height 0.32s ease,
    min-height 0.32s ease,
    padding 0.32s ease,
    margin 0.32s ease,
    opacity 0.32s ease;
}

/* Top bar visible at top */
.rr-site-header--desktop .elementor-element-2a5351e3{
  max-height: 48px;
  opacity: 1;
  overflow: hidden;
}

/* Main row at top */
.rr-site-header--desktop .elementor-element-29d5fe92,
.rr-site-header--desktop .elementor-element-2405ed08{
  min-height: 84px;
}

/* After slight scroll: collapse top bar */
.rr-site-header--desktop.is-scrolled .elementor-element-2a5351e3{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
}

/* After slight scroll: make bottom row shorter */
.rr-site-header--desktop.is-scrolled .elementor-element-29d5fe92,
.rr-site-header--desktop.is-scrolled .elementor-element-2405ed08{
  min-height: 64px;
}

/* =========================================
   TABLET
   Same behavior as desktop
   ========================================= */

.rr-site-header--tablet .elementor-element-f9c016b,
.rr-site-header--tablet .elementor-element-5a259d76,
.rr-site-header--tablet .e-con-inner{
  transition:
    max-height 0.32s ease,
    min-height 0.32s ease,
    padding 0.32s ease,
    margin 0.32s ease,
    opacity 0.32s ease;
}

/* Top bar visible at top */
.rr-site-header--tablet .elementor-element-f9c016b{
  max-height: 44px;
  opacity: 1;
  overflow: hidden;
}

/* Main row at top */
.rr-site-header--tablet .elementor-element-5a259d76,
.rr-site-header--tablet .e-con-inner{
  min-height: 72px;
}

/* After slight scroll: collapse top bar */
.rr-site-header--tablet.is-scrolled .elementor-element-f9c016b{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}

/* After slight scroll: make bottom row shorter */
.rr-site-header--tablet.is-scrolled .elementor-element-5a259d76,
.rr-site-header--tablet.is-scrolled .e-con-inner{
  min-height: 58px;
}

/* =========================================
   MOBILE
   Full two-row header always
   Hide/show only
   No compact state
   ========================================= */

.rr-site-header--mobile .elementor-element-96b3d35,
.rr-site-header--mobile .elementor-element-9071905,
.rr-site-header--mobile .e-con-inner{
  transition:
    max-height 0.32s ease,
    min-height 0.32s ease,
    padding 0.32s ease,
    margin 0.32s ease,
    opacity 0.32s ease;
}

/* Ensure mobile top bar stays visible even when scrolled */
.rr-site-header--mobile .elementor-element-96b3d35,
.rr-site-header--mobile.is-scrolled .elementor-element-96b3d35{
  max-height: 44px;
  opacity: 1;
  overflow: hidden;
  min-height: auto !important;
}

/* Ensure mobile main row does not compact */
.rr-site-header--mobile .elementor-element-9071905,
.rr-site-header--mobile .e-con-inner,
.rr-site-header--mobile.is-scrolled .elementor-element-9071905,
.rr-site-header--mobile.is-scrolled .e-con-inner{
  min-height: auto !important;
  padding-top: inherit !important;
  padding-bottom: inherit !important;
}

/* =========================================================================
 * OFF-CANVAS MENU  —  tablet + mobile   (2026-07-20, Houzez-removal Step 1)
 *
 * Replaces the Houzez `houzez_site_menu` widget's Bootstrap offcanvas with the
 * Elementor Nav Menu widget (layout: dropdown + burger), reshaped into the SAME
 * off-canvas a visitor saw before: a cream panel that slides in, a "Menu" title +
 * "×" close, a dimmed backdrop and a body scroll-lock; closes on ×, backdrop tap
 * or Esc.
 *
 * ONE deliberate change from the old menu (Hale, 2026-07-20): it slides in from the
 * RIGHT — the edge the hamburger lives on. Everything else is a faithful copy.
 *
 * ⚠ WHY THE PANEL LIVES ON <body> (2026-07-21). Elementor renders the dropdown INSIDE
 * the header, and the smart header carries a transform + `will-change: transform`.
 * A transformed ancestor becomes the CONTAINING BLOCK for fixed-position descendants,
 * so a panel left in place resolved `height:100%` / `top` against the ~100px header
 * box instead of the viewport. Symptoms Hale hit: the panel opened header-height and
 * then grew to full length, and once the page was scrolled the "Menu"/× row sat above
 * the viewport. Neutralising the transform only while open did NOT fix it — the class
 * lands a frame late, after Elementor has already started animating. So rr-custom.js
 * MOVES the panel (and the backdrop) to <body>, exactly as Bootstrap's offcanvas did.
 * Geometry is then viewport-relative from the first frame, at any scroll position.
 * Because the panel is no longer a sibling of the toggle, `.is-open` drives the slide.
 *
 * Item colour + the gold-underline hover/focus come from the LINK PRIMITIVE
 * (rr-custom.css, end) — this file owns only GEOMETRY + MOTION.
 * ========================================================================= */

/* the panel (closed = off-screen right). Body-level, so `fixed` means the viewport. */
.rr-offcanvas-panel{
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  width: min(400px, 100vw) !important;
  height: 100vh !important;              /* viewport units: never depends on an ancestor */
  max-height: 100vh !important;          /* neutralise Elementor's --menu-height animation */
  margin: 0 !important;
  padding: 62px 0 24px !important;       /* clears the "Menu" + close row */
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #FAFAF7 !important;  /* soft-white (secondary) */
  box-shadow: -8px 0 40px rgba(0,0,0,0.12) !important;
  z-index: 100001 !important;            /* above the backdrop */
  overflow-y: auto !important;
  overscroll-behavior: contain;
  transform: translateX(100%) !important; /* off-screen right (beats Elementor's collapse) */
  transition: transform 0.3s ease-in-out !important;
}
.rr-offcanvas-panel.is-open{
  transform: translateX(0) !important;   /* slide in */
}

/* the "Menu" title (Cormorant, navy) — matches the old offcanvas header. Sits on the same
 * 24px gutter as the items (it was 4px out of alignment before). */
.rr-offcanvas-panel::before{
  content: "Menu";
  position: absolute;
  top: 18px;
  left: 24px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  line-height: 1;
  color: #0A1F3B;
}

/* the close button (injected by rr-custom.js) — a thin bordered square, as before.
 * !important throughout: this is a real <button>, so the site-wide BUTTON ROLE in
 * rr-custom.css (navy fill, gold hover) would otherwise claim it. */
.rr-offcanvas-close{
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #1F2428 !important;
  border: 1px solid rgba(31, 36, 40, 0.35) !important;
  border-radius: 2px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer;
}
.rr-offcanvas-close:hover,
.rr-offcanvas-close:focus{
  background: transparent !important;
  background-color: transparent !important;
  color: #C9A875 !important;             /* gold on hover, matching the site's accent tell */
  border-color: rgba(31, 36, 40, 0.35) !important;
}
.rr-offcanvas-close:focus-visible{
  outline: 2px solid #C9A875 !important;
  outline-offset: 2px !important;
}

/* menu items — left-aligned rows. Colour + the gold-underline hover come from the link
 * PRIMITIVE (rr-custom.css); size/rhythm live here.
 *
 * SIZE (Hale, 2026-07-21): takes the GLOBAL body size, `var(--rr-text-body)`
 * (clamp 16→17px), rather than a number of its own — so the menu tracks the design
 * system instead of drifting from it. (A 22px trial read far too large; reverted.)
 * Stays INTER: the design system reserves Cormorant for headings, Inter for UI/nav.
 * ~54px rows still clear the 44px WCAG 2.5.5 target comfortably. The 24px gutter is
 * shared with the "Menu" title, which sat 4px out of alignment before. */
.rr-offcanvas-panel .elementor-item{
  justify-content: flex-start !important;
  text-align: left !important;
  text-transform: uppercase !important;   /* matches the old offcanvas (BUY / SELL / …) */
  font-size: var(--rr-text-body) !important;
  letter-spacing: 0.05em !important;
  padding: 14px 24px !important;
  border: 0 !important;
}

/* Keep the hover/focus tell to the gold UNDERLINE only (from the link primitive in
 * rr-custom.css) — neutralise Elementor's default dark hover/focus/current background
 * band, which neither the old offcanvas nor the rest of the site use. */
.rr-offcanvas-panel a:hover,
.rr-offcanvas-panel a:focus,
.rr-offcanvas-panel a.elementor-item-active,
.rr-offcanvas-panel a.current,
.rr-offcanvas-panel a.highlighted{
  background-color: transparent !important;
}

/* the hamburger toggle in the header: borderless, as the old one was. It stays put —
 * the panel's own × is the close, so the toggle needs no repositioning. */
.rr-site-header--tablet .elementor-menu-toggle,
.rr-site-header--mobile .elementor-menu-toggle{
  border: 0 !important;
  padding: 0 !important;
}

/* body scroll-lock while open (replaces Bootstrap's offcanvas lock) */
body.rr-menu-open{ overflow: hidden !important; }

/* the dimmed backdrop (element inserted by rr-custom.js, also body-level) */
.rr-offcanvas-backdrop{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100000;                       /* under the panel, over the page + header */
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s linear, visibility 0.15s linear;
}
.rr-offcanvas-backdrop.is-open{
  opacity: 1;
  visibility: visible;
}