/* ==========================================================================
   header.css, site nav

   "Storefront" layout: the wordmark is centred and the navigation splits
   around it, over a slim ink utility strip carrying the address and phone.

   Why centred: the old header put a 7-item nav and a bordered button against a
   1.62rem wordmark, so the navigation outweighed the brand on every page. The
   centre column hands the middle of the bar back to the logotype.

   The split only balances while each side holds three items. "Home" was
   dropped to get there (the wordmark is already the home link), which leaves
   Buyers / Sellers / Neighborhoods | WORDMARK | Your Next Move / Our Story /
   Contact. Adding a seventh item breaks the symmetry -- put it in the
   Neighborhoods dropdown or the footer instead.
   ========================================================================== */
.vr-header{
  /* Stuck at MINUS the utility strip's height, which is the whole condense
     mechanism: the header scrolls normally until the strip has slid out of
     view, then the main bar pins at y=0. No class, no JS, no height change.

     It used to collapse the strip and shrink the bar from a scroll handler,
     which deadlocked the page. The header is in normal flow, so shrinking it
     shortened the document; the browser's scroll anchoring then pulled the
     scroll position down by the same amount to keep content still; that took
     scrollY back under the threshold; the class came off; the header grew;
     scrollY went back up. Roughly 8px of scroll put the page into an infinite
     grow/shrink oscillation. Anything that changes this header's flow height
     in response to scroll position will bring that back. Don't. */
  --vr-util-h:38px;
  --vr-bar-h:var(--vr-header-pinned);  /* declared in base.css */
  position:sticky; top:calc(-1 * var(--vr-util-h)); z-index:1000; width:100%;
  background:rgba(243,237,226,.97); backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--vr-line); font-family:var(--vr-ui);
}

/* ==========================================================================
   Utility strip. The address and phone were footer-only, which buried the two
   strongest trust cues a neighbourhood firm has. Collapses on scroll.
   ========================================================================== */
/* Fixed height, not padding-derived: the sticky offset above is calculated
   from it, so it has to be exact rather than whatever the type happens to
   measure. Single line only -- if this ever wraps it gets clipped. */
.vr-util{
  background:var(--vr-ink); color:rgba(248,244,236,.78);
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  height:var(--vr-util-h); display:flex; align-items:center; overflow:hidden;
}
.vr-util__in{
  max-width:1280px; margin:0 auto; padding:0 40px; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.vr-util p{margin:0;}
.vr-util a{color:var(--vr-ivory); text-decoration:none; transition:color .2s;}
.vr-util a:hover{color:#fff;}
.vr-util__sep{opacity:.4; margin-inline:.55rem;}

/* ==========================================================================
   Main bar. Three columns: nav / wordmark / nav.
   The logo is FIRST in the DOM so the brand link leads the tab order and the
   accessibility tree; grid-column puts it back in the middle visually.
   ========================================================================== */
/* Constant height. The wordmark inside it still steps down when pinned, which
   is safe precisely because it cannot change this box. */
.vr-header__bar{
  max-width:1280px; margin:0 auto; height:var(--vr-bar-h); padding:0 40px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.5rem;
}

/* Logo, primary logotype (Cormorant small caps: Village=ink, Realty=peacock) */
.vr-logo{
  grid-column:2; grid-row:1;
  display:inline-flex; flex-direction:column; align-items:center; gap:.16em;
  line-height:1; text-decoration:none;
}
.vr-logo__mark{
  font-family:var(--vr-serif); font-weight:600; font-size:2.15rem; line-height:.9;
  font-variant-caps:small-caps; letter-spacing:.04em; white-space:nowrap;
  transition:font-size .28s ease;
}
.vr-logo__village{color:var(--vr-ink);}
.vr-logo__realty{color:var(--vr-peacock); margin-left:.28em;}
.vr-logo__region{
  font-family:var(--vr-ui); font-weight:500; font-size:.55rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--vr-stone); white-space:nowrap;
  transition:font-size .28s ease, opacity .2s ease;
}

/* ==========================================================================
   Nav.

   `.vr-nav` is the mobile drawer. On desktop it is display:contents so its two
   <nav> children become grid items of .vr-header__bar directly; each is then
   placed by grid-column, which is what lets the DOM lead with the logo while
   the layout still reads left-nav / logo / right-nav.

   Sentence case, not the old uppercase: the brand guide assigns Montserrat
   caps at ~.2em tracking to LABELS (eyebrows, buttons, footer headings). A
   menu is a set of destinations, not labels, and wide-tracked 11px caps is the
   house style of every realtor template this header is trying not to resemble.
   ========================================================================== */
.vr-nav{display:contents;}
.vr-nav__side{display:flex; align-items:center; gap:clamp(1rem,2.2vw,1.7rem);}
.vr-nav__side--l{grid-column:1; grid-row:1; justify-content:flex-end;}
.vr-nav__side--r{grid-column:3; grid-row:1; justify-content:flex-start;}

.vr-nav__side a, .vr-drop__toggle{
  font-family:var(--vr-ui); font-weight:400; font-size:.86rem; letter-spacing:.035em;
  color:var(--vr-charcoal); text-decoration:none;
  background:none; border:0; cursor:pointer; padding:.4rem 0;
  position:relative; white-space:nowrap; transition:color .2s;
}
.vr-nav__side a:hover, .vr-drop__toggle:hover{color:var(--vr-blush);}
.vr-nav__side a::after{
  content:''; position:absolute; left:0; bottom:-1px; width:0; height:1px;
  background:var(--vr-blush); transition:width .25s;
}
.vr-nav__side a:hover::after{width:100%;}

/* Contact carries NO emphasis of its own. It arrived with the storefront build
   as a bordered box, then a peacock hairline, then peacock text, and each one
   read as a stray state rather than as a call to action, because every other
   signal in this bar is behavioural (hover) or positional (current page). It
   is a destination like its neighbours and is styled like them. The header's
   standing action is the phone number in the utility strip.
   The .vr-nav__contact class stays in the markup as a hook. */

/* Current page: ink, with the hairline already drawn. */
.vr-nav__side a[aria-current="page"]{color:var(--vr-ink);}
.vr-nav__side a[aria-current="page"]::after{width:100%; background:var(--vr-ink);}
/* ...and the toggle picks it up when you are on one of the six neighborhoods */
.vr-drop--current .vr-drop__toggle{color:var(--vr-ink);}

/* Dropdown */
.vr-drop{position:relative; display:flex; align-items:center;}
.vr-drop__caret{font-size:.62em; display:inline-block; transition:transform .25s;}
.vr-drop__menu{
  position:absolute; top:calc(100% + .9rem); left:50%; transform:translateX(-50%) translateY(6px);
  background:#fff; border:1px solid var(--vr-line); border-radius:6px; padding:.5rem 0;
  min-width:210px; box-shadow:0 12px 30px rgba(31,42,46,.12);
  opacity:0; visibility:hidden; transition:all .2s ease; z-index:50;
}
.vr-drop:hover .vr-drop__menu, .vr-drop.is-open .vr-drop__menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.vr-drop:hover .vr-drop__caret, .vr-drop.is-open .vr-drop__caret{transform:rotate(180deg);}
.vr-drop__menu a{
  display:block; padding:.6rem 1.3rem; font-size:.82rem; letter-spacing:.02em;
  color:var(--vr-charcoal); text-decoration:none; transition:background .15s,color .15s; white-space:nowrap;
}
.vr-drop__menu a:hover{background:var(--vr-cream); color:var(--vr-blush);}
/* Current neighborhood: the same fill the hover uses, held on. */
.vr-drop__menu a[aria-current="page"]{background:var(--vr-cream); color:var(--vr-ink);}

/* No hairline inside the menu. `.vr-nav__side a` matches these links as
   descendants, so the bar's hover and current-page underlines were being drawn
   under every row of the dropdown -- where a full-width fill already says the
   same thing and the rule just reads as clutter. Both selectors are needed:
   the plain one out-weights `.vr-nav__side a::after` (0,2,1) and the
   attribute one out-weights the current-page rule (0,3,1). */
.vr-nav__side .vr-drop__menu a::after,
.vr-nav__side .vr-drop__menu a[aria-current="page"]::after{content:none;}

/* ==========================================================================
   Pinned state, set by header.js once the strip has scrolled away.
   STRICTLY COSMETIC -- type size inside a fixed-height box, and a shadow.
   Nothing here may affect the header's own height; see the note at the top.
   ========================================================================== */
.vr-header.is-scrolled{box-shadow:0 6px 18px rgba(31,42,46,.07);}
.vr-header.is-scrolled .vr-logo__mark{font-size:1.62rem;}
.vr-header.is-scrolled .vr-logo__region{opacity:0;}

/* Burger */
.vr-burger{
  display:none; grid-column:3; grid-row:1; justify-self:end;
  flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px;
}
.vr-burger span{width:26px; height:2px; background:var(--vr-teal); transition:.3s;}
.vr-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.vr-burger.is-open span:nth-child(2){opacity:0;}
.vr-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ==========================================================================
   Mobile. The split bar collapses to wordmark-left / burger-right, and
   .vr-nav stops being display:contents so it can be the sliding drawer that
   holds both halves of the nav in reading order.
   ========================================================================== */
@media (max-width:980px){
  .vr-header{--vr-util-h:32px;}  /* --vr-bar-h follows :root at this breakpoint */
  .vr-util__in{padding-inline:24px; justify-content:center;}
  /* The strip is one fixed-height line, and the full address plus phone wraps
     to two below ~600px, so the phone -- the only part worth a tap from the top
     of a phone screen -- is all that stays. Socials are a footer job. */
  .vr-util__social, .vr-util__where a:first-child, .vr-util__sep{display:none;}

  .vr-header__bar{
    grid-template-columns:1fr auto; padding:0 24px;
    justify-content:space-between;
  }
  .vr-logo{grid-column:1; align-items:flex-start;}
  .vr-logo__mark{font-size:1.6rem;}
  /* position+z-index, not just display: the drawer below is fixed at z-index:20
     over an opaque ground, and it covers the bar's right end -- which is where
     the burger sits. Static, the burger painted UNDER it, so once the menu was
     open its X was both invisible and untappable and picking a link was the
     only way out. The drawer's 5.5rem top padding is already holding the space
     for it to sit in. */
  .vr-burger{display:flex; grid-column:2; position:relative; z-index:21;}

  .vr-nav{
    display:flex; position:fixed; inset:0 0 0 auto; width:min(82vw,340px); height:100dvh;
    background:var(--vr-cream); flex-direction:column; align-items:flex-start;
    justify-content:flex-start; gap:.3rem; padding:5.5rem 2rem 2rem;
    transform:translateX(100%); transition:transform .3s ease;
    overflow-y:auto; box-shadow:-12px 0 40px rgba(31,42,46,.14); z-index:20;
  }
  .vr-nav.is-open{transform:translateX(0);}
  .vr-nav__side{
    display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; width:100%;
  }
  .vr-nav__side a, .vr-drop__toggle{font-size:1rem; padding:.7rem 0; width:100%;}
  .vr-nav__side a::after{display:none;}
  /* Divide the drawer where the two <nav> groups actually meet, rather than
     above the last link. Also lets the !important the old rule needed go. */
  .vr-nav__side--r{
    margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--vr-line);
  }
  .vr-drop{width:100%; display:block;}
  .vr-drop__toggle{text-align:left;}
  .vr-drop__menu{
    position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:0;
    background:transparent; min-width:0; padding:0 0 .4rem; display:none;
  }
  .vr-drop.is-open .vr-drop__menu{display:block;}
  .vr-drop__menu a{padding:.5rem 0 .5rem 1rem; font-size:.92rem;}

  /* shrinking type under a thumb buys nothing on a 62px bar */
  .vr-header.is-scrolled .vr-logo__mark{font-size:1.6rem;}
  .vr-header.is-scrolled .vr-logo__region{opacity:1;}
}

@media (max-width:420px){
  .vr-util{font-size:.58rem;}
  .vr-logo__mark{font-size:1.42rem;}
  .vr-header.is-scrolled .vr-logo__mark{font-size:1.42rem;}
}

@media (prefers-reduced-motion:reduce){
  .vr-logo__mark, .vr-logo__region, .vr-nav{transition:none;}
}