/* ==========================================================================
   Centered header
   Replaces the Divi header: logo centred over a centred nav, no burger.
   Ported from the shadcn NavigationMenu + RandomLetterSwap components to
   plain CSS so it runs in these static pages with no build step.
   ========================================================================== */

:root {
  --st-header-pad: 30px;
  --st-header-pad-scrolled: 14px;

  /* Fluid scale. The header is ONE ROW at every viewport - it never wraps and
     never becomes a burger - so the sizes do the adapting. Each value
     interpolates continuously with the viewport instead of stepping at
     breakpoints, which means there is no width where the row is one pixel away
     from breaking. Endpoints are tuned so the row still fits with the widest
     item set it carries at that width. */
  --st-nav-fs: clamp(11px, 1.19vw + 1.86px, 15px);
  --st-nav-track: clamp(0.06em, 0.13vw + 0.017em, 0.15em);
  --st-nav-px: clamp(6px, 0.74vw + 0.35px, 11px);
  --st-logo-h: clamp(34px, 5.45vw + 13.5px, 92px);
  --st-lang-fs: clamp(8px, 0.3vw + 5.7px, 10px);
  --st-lang-px: clamp(6px, 0.6vw + 1.4px, 10px);
  /* White at rest, because the bar is transparent and the ground behind it is
     the hero photograph. It flips to ink on scroll, further down. */
  --st-nav-fg: rgb(var(--yp-white-rgb) / 0.9);
  --st-nav-fg-hover: var(--yp-white);
  --st-pop-bg: var(--yp-ink);
  --st-pop-border: rgb(var(--yp-white-rgb) / 0.12);
  --st-ink: rgb(var(--yp-ink-rgb) / 0.86);
  --st-ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ---- kill Divi's own header colour --------------------------------------
   Divi paints #main-header #282728 from id-scoped rules and swaps in its own
   .et-fixed-header class on scroll. Whichever of those wins for a single frame
   is the black flash between the transparent bar and the milky one. Zeroing
   the colour in every state leaves only the two gradients below in charge.
   background-color specifically, so the gradients in background-image survive. */
body #main-header,
body #main-header.et-fixed-header,
body header#main-header.st-header {
  background-color: transparent !important;
  background-image: none !important;
}

/* And the scrolled bar is declared HERE, at the same weight, rather than lower
   down where Divi's rules kept reaching it. Two states, both stated once, in
   one place: transparent over the hero, milky once the page moves. Nothing
   else is allowed an opinion about the header's ground. */
body header#main-header.st-header.st-scrolled,
body #main-header.st-header.et-fixed-header {
  background-color: transparent !important;
  background-image: linear-gradient(to bottom,
              rgb(var(--yp-shell-rgb) / 0.94) 0%,
              rgb(var(--yp-sand-rgb) / 0.88) 100%) !important;
}

/* ---- shell -------------------------------------------------------------- */

/* The selector is this long on purpose. Divi's inline block carries
   `.home header#main-header { background: transparent }`, which has the same
   id and class count as a plain `#main-header.st-header` but one extra element
   selector, so it outranks it and blanked the bar on the home page only.
   Matching its shape is the fix. */
body header#main-header.st-header,
#main-header.st-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99999;
  padding: var(--st-header-pad) 0;
  /* At rest: nothing at all. The bar blends into the hero rather than sitting
     on it, so the photograph runs unbroken to the top of the page. Both a dark
     scrim and a white wash read as a band; transparency reads as no bar.

     The type carries its own legibility instead, via the shadow below, and
     flips to ink once the milky ground arrives on scroll. */
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid transparent;
  transition: padding 0.45s var(--st-ease), background 0.5s var(--st-ease),
    border-color 0.45s var(--st-ease), backdrop-filter 0.5s var(--st-ease);
}

/* Scrolled: milky frosted glass in the brand's warm off-white, not a black
   bar. The page shows through softly instead of being cut off. Because the
   ground goes light, the mark and nav flip to near-black - see below. */
/* Divi adds its own .et-fixed-header on scroll and paints it #282728 from an
   id-scoped rule, which outranked a plain class selector and put the dark bar
   back the moment the page moved. Matching its shape, and naming Divi's class
   too, is what holds the milky ground. */
body header#main-header.st-header.st-scrolled,
#main-header.st-header.et-fixed-header,
#main-header.st-header.st-scrolled {
  padding: var(--st-header-pad-scrolled) 0;
  background: linear-gradient(to bottom,
              rgb(var(--yp-shell-rgb) / 0.90) 0%,
              rgb(var(--yp-sand-rgb) / 0.82) 100%);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-bottom-color: rgb(var(--yp-ink-rgb) / 0.10);
  box-shadow: 0 1px 24px -8px rgb(var(--yp-ink-rgb) / 0.18);
}

/* Type and mark invert on the milky ground. The logo file is pure white on
   transparent, so invert(1) yields true black with the alpha untouched -
   no second asset needed. */
#main-header.st-scrolled .st-nav-link { color: var(--st-ink); }
#main-header.st-scrolled .st-nav-link:hover,
#main-header.st-scrolled .st-nav-link:focus-visible,
#main-header.st-scrolled .st-nav-item[data-open="true"] > .st-nav-link {
  color: var(--yp-ink);
  background: rgb(var(--yp-white-rgb) / 0.1);
}
#main-header.st-scrolled .st-nav-item.st-current > .st-nav-link { color: var(--yp-ink); }
#main-header.st-scrolled .st-logo img { filter: invert(1); }
/* The mark ships white on transparent, which is right at rest over the hero.
   It inverts only once the milky ground arrives, handled above. */
#main-header.st-scrolled .st-nav-link:focus-visible {
  outline-color: rgb(var(--yp-ink-rgb) / 0.55);
}

/* Dropdown follows the light ground so it does not read as a stray dark box. */
#main-header.st-scrolled .st-dropdown {
  background: rgb(var(--yp-shell-rgb) / 0.97);
  border-color: rgb(var(--yp-ink-rgb) / 0.12);
  box-shadow: 0 18px 40px -14px rgb(var(--yp-ink-rgb) / 0.28);
}
#main-header.st-scrolled .st-dropdown a { color: rgb(var(--yp-ink-rgb) / 0.72); }
#main-header.st-scrolled .st-dropdown a:hover,
#main-header.st-scrolled .st-dropdown a:focus-visible {
  color: var(--yp-ink);
  background: rgb(var(--yp-white-rgb) / 0.1);
}

/* Logo and nav share ONE row, vertically centred on each other.
   The container is wider than the page grid (1400 vs 1240) because at the
   requested sizes - logo ~203px wide, nav ~980px - the pair needs about
   1183px of run, which a 1180px content width cannot give. */
.st-header-inner {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 30px;
}

.st-logo-corner {
  flex: 0 0 auto;   /* never let the nav squeeze the logo */
}

/* ---- logo --------------------------------------------------------------- */

.st-logo {
  display: block;
  line-height: 0;
  transition: transform 0.45s var(--st-ease), opacity 0.3s ease;
}

.st-logo img {
  display: block;
  width: auto;
  height: var(--st-logo-h);
  transition: height 0.45s var(--st-ease);
}

#main-header.st-scrolled .st-logo img { height: calc(var(--st-logo-h) * 0.66); }
.st-logo:hover { opacity: 0.82; }

/* ---- nav ---------------------------------------------------------------- */

/* Nav flush left, sharing the logo's left edge.
   The links carry 14px of horizontal padding, so the list box starts 14px to
   the LEFT of the first letterform. Pulling the list back by that amount makes
   the "H" of HOME sit on the same vertical as the logo's left edge - optical
   alignment, not box alignment. --st-nav-pad must track the padding in
   .st-nav-link below. */
:root { --st-nav-pad: var(--st-nav-px); }

.st-nav { display: flex; justify-content: flex-end; flex: 1 1 auto; min-width: 0; }

.st-nav-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin: 0 calc(-1 * var(--st-nav-pad)) 0 0;
  padding: 0;
  list-style: none;
}

.st-nav-item { position: relative; }

/* One shared look for links and dropdown triggers so they sit on a single
   optical baseline regardless of which element type they are. */
.st-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px var(--st-nav-px);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--st-nav-fg);
  font-family: "Montserrat", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--st-nav-fs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--st-nav-track);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease, text-shadow 0.25s ease;
  /* No scrim behind the bar any more, so the type carries its own separation
     from whatever frame of the hero video happens to be underneath it. */
  text-shadow: 0 1px 12px rgb(var(--yp-ink-rgb) / 0.55);
}

/* Once the milky ground is there, the shadow is not only unnecessary, it is
   visible as a smudge. */
#main-header.st-scrolled .st-nav-link,
body.st-solid-header #main-header .st-nav-link { text-shadow: none; }

.st-nav-link:hover,
.st-nav-link:focus-visible,
.st-nav-item[data-open="true"] > .st-nav-link {
  color: var(--st-nav-fg-hover);
  background: rgb(var(--yp-white-rgb) / 0.1);
}

.st-nav-link:focus-visible {
  outline: 1px solid rgb(var(--yp-ink-rgb) / 0.55);
  outline-offset: 2px;
}

.st-nav-item.st-current > .st-nav-link { color: var(--st-nav-fg-hover); }

.st-nav-phone { letter-spacing: 1.5px; }

.st-chevron {
  width: 11px;
  height: 11px;
  opacity: 0.6;
  transition: transform 0.3s var(--st-ease);
}

.st-nav-item[data-open="true"] .st-chevron { transform: rotate(180deg); }

/* ---- dropdown ----------------------------------------------------------- */

.st-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 50;
  min-width: 232px;
  padding: 6px;
  border: 1px solid var(--st-pop-border);
  border-radius: 10px;
  background: var(--st-pop-bg);
  box-shadow: 0 18px 40px -12px rgb(var(--yp-ink-rgb) / 0.65);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px) scale(0.96);
  transform-origin: top center;
  transition: opacity 0.2s ease, transform 0.2s var(--st-ease), visibility 0.2s;
}

.st-nav-item[data-open="true"] > .st-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Hover bridge: without it the gap between trigger and panel closes the
   dropdown as the pointer travels down to it. */
.st-dropdown::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  width: 100%;
  height: 12px;
}

.st-dropdown ul { margin: 0; padding: 0; list-style: none; }

.st-dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  color: rgb(var(--yp-white-rgb) / 0.7);
  font-family: "Montserrat", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.st-dropdown a:hover,
.st-dropdown a:focus-visible {
  color: var(--yp-white);
  background: rgb(var(--yp-white-rgb) / 0.09);
}

/* ---- random letter swap ------------------------------------------------- */
/* Each character is a 2-deep stack of the same glyph in an overflow-hidden
   box. On hover the stack slides up exactly one glyph, so the letter appears
   to flip to itself. Per-letter delays are randomised in JS, which is what
   turns a uniform slide into the scattered ripple. */

.rls { display: inline-flex; }

.rls-char {
  display: inline-block;
  height: 1.15em;
  overflow: hidden;
  line-height: 1.15em;
}

.rls-stack {
  display: flex;
  flex-direction: column;
  transition: transform 0.6s var(--st-ease);
  transition-delay: var(--rls-out, 0s);
}

.rls-stack > span { display: block; height: 1.15em; line-height: 1.15em; }

.st-nav-link:hover .rls-stack,
.st-nav-link:focus-visible .rls-stack {
  transform: translateY(-50%);
  transition-delay: var(--rls-in, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .rls-stack,
  .st-dropdown,
  #main-header.st-header,
  .st-logo img { transition-duration: 0.01ms !important; }
}

/* ---- responsive: one row, always -----------------------------------------
   The header never wraps and never becomes a burger, so at every width the row
   has to genuinely fit. The fluid tokens carry the full six-item set from 1920
   down to about 1200. Below that the least load-bearing items leave, rather
   than the row breaking: the phone first (it repeats in the footer and on the
   contact page), then the deepest dropdown sections on phones.

   :has() is doing the selecting so the shedding schedule lives entirely in CSS
   and the 24 pages of markup stay untouched. */

@media (max-width: 1000px) {
  /* The number repeats in the footer and in the contact section; the row does not. */
  .st-nav-item:has(> .st-nav-phone) { display: none; }
}

@media (max-width: 820px) {
  :root { --st-header-pad: 20px; --st-header-pad-scrolled: 12px; }
  /* By far the widest item: 164px against Home's 52. It buys back more room
     than anything else on the row, so it goes first. */
  .st-nav-item:has([data-rls="Our Neighborhoods"]) { display: none; }
}

@media (max-width: 620px) {
  .st-nav-item:has([data-rls="Our Listings"]) { display: none; }
}

@media (max-width: 580px) {
  .st-header-inner { padding: 0 16px; gap: 12px; }
  .st-dropdown { min-width: 200px; }
}

/* Buying and Selling shed one at a time rather than together. They are the two
   halves of the business and the shortest items on the row (63px and 67px), so
   dropping both at once threw away 130px of a 200px budget and left a phone
   showing nothing but "Home". Selling goes first only because Buying is the
   wider audience. */
@media (max-width: 460px) {
  .st-nav-item:has([data-rls="Selling"]) { display: none; }
}

@media (max-width: 390px) {
  .st-nav-item:has([data-rls="Buying"]) { display: none; }
}

}

/* On hero pages the bar floats over the artwork, so the hero must start at
   the very top. Divi's script reserves a header-height gap on every page,
   which on these pages shows as a white band behind the logo. Zero it out and
   let the hero run full-bleed; .st-solid-header pages keep their reservation
   and have it re-measured in header.js. */

body:not(.st-solid-header) #page-container { padding-top: 0 !important; }

/* ---- solid variant ------------------------------------------------------
   Pages whose first section is plain content, not a hero, have nothing dark
   behind the header - white nav on a white page is invisible. Those pages
   carry .st-solid-header on <body> and get an opaque bar from the start. */

/* Inner pages have no hero behind the bar, so they wear the milky treatment
   from the start rather than a black slab. */
body.st-solid-header #main-header.st-header {
  background: linear-gradient(to bottom,
              rgb(var(--yp-shell-rgb) / 0.94) 0%,
              rgb(var(--yp-sand-rgb) / 0.88) 100%);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-bottom-color: rgb(var(--yp-ink-rgb) / 0.10);
}

body.st-solid-header #main-header .st-nav-link { color: var(--st-ink); }
body.st-solid-header #main-header .st-nav-link:hover,
body.st-solid-header #main-header .st-nav-link:focus-visible,
body.st-solid-header #main-header .st-nav-item[data-open="true"] > .st-nav-link {
  color: var(--yp-ink);
  background: rgb(var(--yp-white-rgb) / 0.1);
}
body.st-solid-header #main-header .st-nav-item.st-current > .st-nav-link { color: var(--yp-ink); }
body.st-solid-header #main-header .st-logo img { filter: invert(1); }
body.st-solid-header #main-header .st-dropdown {
  background: rgb(var(--yp-shell-rgb) / 0.97);
  border-color: rgb(var(--yp-ink-rgb) / 0.12);
  box-shadow: 0 18px 40px -14px rgb(var(--yp-ink-rgb) / 0.28);
}
body.st-solid-header #main-header .st-dropdown a { color: rgb(var(--yp-ink-rgb) / 0.72); }
body.st-solid-header #main-header .st-dropdown a:hover { color: var(--yp-ink); background: rgb(var(--yp-white-rgb) / 0.1); }

/* ---- suppress the Divi header we replaced -------------------------------- */


#main-header .mobile-side-menu1,
#main-header #et_mobile_nav_menu,
#main-header .mobile-social-box,
#main-header #mySidenav,
#main-header .et_search_outer,
#main-header #et-top-navigation,
#main-header .logo_container { display: none !important; }

/* ---- language toggle -----------------------------------------------------
   Sits at the far right of the header row, past the nav.

   Colours run off four variables rather than three repeated rule blocks. The
   bar has three grounds - dark scrim over the hero, milky once scrolled, and
   milky from the start on .st-solid-header pages - and every element above
   that ignored this ended up with its states restated three times. Each light
   ground here only re-points the variables.

   ES is present but inert until the Spanish pages exist. Dimmed and marked
   aria-disabled rather than hidden, so the switch is discoverable now and
   becomes live by dropping one attribute later. */

:root {
  --st-lang-fg: rgb(var(--yp-white-rgb) / 0.62);
  --st-lang-fg-active: var(--yp-ink);
  --st-lang-bg-active: rgb(var(--yp-white-rgb) / 0.92);
  --st-lang-border: rgb(var(--yp-white-rgb) / 0.3);
}

#main-header.st-scrolled,
body.st-solid-header #main-header {
  --st-lang-fg: rgb(var(--yp-ink-rgb) / 0.55);
  --st-lang-fg-active: var(--yp-shell);
  --st-lang-bg-active: rgb(var(--yp-ink-rgb) / 0.88);
  --st-lang-border: rgb(var(--yp-ink-rgb) / 0.20);
}

.st-lang {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  padding: 3px;
  border: 1px solid var(--st-lang-border);
  border-radius: 999px;
  transition: border-color 0.45s var(--st-ease);
}

.st-lang-btn {
  display: inline-block;
  padding: 5px var(--st-lang-px);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--st-lang-fg);
  font-family: "Montserrat", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--st-lang-fs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.st-lang-btn[aria-pressed="true"] {
  background: var(--st-lang-bg-active);
  color: var(--st-lang-fg-active);
}

.st-lang-btn:hover:not([aria-disabled="true"]),
.st-lang-btn:focus-visible { color: var(--st-lang-fg-active); }

/* Not translated yet: legible enough to show the option exists, plainly not a
   live control. Pointer events stay on so the tooltip still fires on hover. */
.st-lang-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.st-lang-btn[aria-disabled="true"]:hover { color: var(--st-lang-fg); }

.st-lang-btn:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }