/* ==========================================================================
   Union West Real Estate — header / primary navigation
   SITE WIDE. This is the only file in this set that loads on every page, so it
   is deliberately narrow: it touches #Top_bar and the primary menu only, and
   nothing in any page body.

   Why: the nav was Playfair Display at 19px with letter-spacing:normal. A
   display serif set as small caps in a nav reads mushy and cramped, and it
   fought the Compass wordmark, which is a geometric sans. The dropdown was
   also navy (#0d214d) against a black bar.

   SPECIFICITY DISCIPLINE — read before editing:
   Betheme prints its dynamic theme CSS inline in wp_head AFTER every enqueued
   sheet, so load order cannot be won here; these rules win on specificity.
   Betheme's own nav rule is `#Top_bar .menu > li > a` = (1,1,2). To beat it,
   every top-level nav rule below uses the two-ID form
   `#Top_bar #menu > ul > li ...` = (2,0,3) as its BASE.
   Do NOT mix the one-ID `.menu` form into these selector lists: a selector
   list takes the specificity of whichever selector matched, so a (2,0,3) base
   silently outranks any (1,2,2) hover / current / phone rule and those states
   die quietly. Keep every state at (2,1,3) by adding exactly one class,
   pseudo-class or attribute to the two-ID base.
   ========================================================================== */

:root {
  --uw-sans:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  Helvetica, Arial, sans-serif;
  --uw-accent:    #9a7b4f;
  --uw-accent-lt: #cbab77;
}

/* --------------------------------------------------------------------------
   Bar
   -------------------------------------------------------------------------- */

#Top_bar {
  border-bottom: 1px solid rgba(255,255,255,.09);
}

/* Content was hugging the viewport edge at full width */
#Top_bar .container {
  padding-left: clamp(24px, 3vw, 56px);
  padding-right: clamp(24px, 3vw, 56px);
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Primary menu — base (2,0,3)
   -------------------------------------------------------------------------- */

#Top_bar #menu > ul > li > a {
  font-family: var(--uw-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.84);
  transition: color .28s ease;
}

#Top_bar #menu > ul > li > a span {
  padding: 0 17px;
  position: relative;
  line-height: 27px;
  border-bottom-width: 0 !important;
}

/* States — (2,1,3) */
#Top_bar #menu > ul > li:hover > a,
#Top_bar #menu > ul > li.current-menu-item > a,
#Top_bar #menu > ul > li.current_page_item > a,
#Top_bar #menu > ul > li.current-menu-ancestor > a,
#Top_bar #menu > ul > li.current-page-ancestor > a {
  color: #fff;
}

/* Brass underline, drawn left to right; also marks the current page */
#Top_bar #menu > ul > li > a span::after {
  content: "";
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: -7px;
  height: 1px;
  background: var(--uw-accent-lt);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s cubic-bezier(.2,.6,.2,1);
}

#Top_bar #menu > ul > li:hover > a span::after,
#Top_bar #menu > ul > li.current-menu-item > a span::after,
#Top_bar #menu > ul > li.current_page_item > a span::after,
#Top_bar #menu > ul > li.current-menu-ancestor > a span::after,
#Top_bar #menu > ul > li.current-page-ancestor > a span::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Phone: a call to action, not a sixth nav link.
   Matched on href so it survives someone reordering the menu. (2,1,3)
   -------------------------------------------------------------------------- */

#Top_bar #menu > ul > li > a[href^="tel:"] {
  color: var(--uw-accent-lt);
}

#Top_bar #menu > ul > li > a[href^="tel:"] span {
  border: 1px solid rgba(203,171,119,.45);
  border-radius: 2px;
  padding: 9px 17px;
  line-height: 1;
  letter-spacing: .12em;
  transition: background-color .28s ease, color .28s ease, border-color .28s ease;
}

#Top_bar #menu > ul > li > a[href^="tel:"] span::after {
  display: none;
}

#Top_bar #menu > ul > li > a[href^="tel:"]:hover {
  color: #0b0c0e;
}

#Top_bar #menu > ul > li > a[href^="tel:"]:hover span {
  background: var(--uw-accent-lt);
  border-color: var(--uw-accent-lt);
  color: #0b0c0e;
}

/* Breathing room before the CTA. :last-child is the fallback for browsers
   without :has(); both resolve to the same item today. */
#Top_bar #menu > ul > li:last-child {
  margin-left: 16px;
}

/* --------------------------------------------------------------------------
   Dropdown
   -------------------------------------------------------------------------- */

#Top_bar #menu ul.sub-menu {
  background: rgba(11,12,14,.97) !important;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 2px;
  box-shadow: 0 20px 48px rgba(0,0,0,.45) !important;
  padding: 8px 0 !important;
  min-width: 240px;
}

#Top_bar #menu ul.sub-menu li {
  border: 0 !important;
  background: none !important;
}

#Top_bar #menu ul.sub-menu li > a {
  font-family: var(--uw-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  padding: 0 !important;
  line-height: 1.4;
  border: 0 !important;
  transition: color .24s ease, background-color .24s ease;
}

#Top_bar #menu ul.sub-menu li > a span {
  padding: 12px 22px !important;
  display: block;
  border: 0 !important;
  line-height: 1.4;
  position: static;
}

#Top_bar #menu ul.sub-menu li > a span::after {
  display: none;
}

#Top_bar #menu ul.sub-menu li:hover > a,
#Top_bar #menu ul.sub-menu li.current-menu-item > a {
  color: var(--uw-accent-lt);
  background: rgba(255,255,255,.045);
}

/* --------------------------------------------------------------------------
   Sticky state
   -------------------------------------------------------------------------- */

#Top_bar.is-sticky {
  background: rgba(6,7,8,.94) !important;
  border-bottom-color: rgba(255,255,255,.12);
}

#Top_bar.is-sticky #menu > ul > li > a {
  font-size: 11.5px;
}

/* --------------------------------------------------------------------------
   Narrower desktop. Mobile below 1240 hands over to the hamburger; the
   responsive menu itself is served by the wp-responsive-menu plugin and is
   deliberately left alone.
   -------------------------------------------------------------------------- */

@media (max-width: 1319px) {
  #Top_bar #menu > ul > li > a {
    font-size: 11.5px;
    letter-spacing: .12em;
  }

  #Top_bar #menu > ul > li > a span {
    padding: 0 12px;
  }

  #Top_bar #menu > ul > li > a span::after {
    left: 12px;
    right: 12px;
  }

  #Top_bar #menu > ul > li > a[href^="tel:"] span {
    padding: 8px 13px;
  }
}

@media (max-width: 767px) {
  #Top_bar .container {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* Dropdown links were inheriting an underline from the global link style. */
#Top_bar #menu ul.sub-menu li > a,
#Top_bar #menu ul.sub-menu li > a:hover,
#Top_bar #menu > ul > li > a,
#Top_bar #menu > ul > li > a:hover {
  text-decoration: none !important;
}

#Top_bar #menu ul.sub-menu {
  min-width: 252px;
}

/* --------------------------------------------------------------------------
   Transparent-header pages (the homepage sits the bar over the hero slider,
   where white nav and a brass CTA on pale sky were close to invisible).
   The scrim goes in background-image rather than a ::before, because #Top_bar
   is position:static with z-index:30 and promoting it to relative would
   activate that z-index and reshuffle stacking against the slider.
   On pages where the bar is already solid black this paints black on black
   and changes nothing.
   -------------------------------------------------------------------------- */

/* Transparent-header pages (the homepage sits the bar over the slider).
   The theme sets `.home #Header #Top_bar { background: transparent !important }`
   deliberately, and #Header's background is locked down the same way, so a
   scrim behind the bar is not available without overriding an intentional
   design choice. Legibility is therefore carried by the type itself, which
   also survives whichever slide happens to be showing. */

/* Sticky sets the `background` shorthand, which clears the gradient: solid. */

#Top_bar #menu > ul > li > a {
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}

#Top_bar #menu > ul > li > a[href^="tel:"] span {
  border-color: rgba(203,171,119,.72);
  background: rgba(0,0,0,.22);
}

#Top_bar #menu ul.sub-menu li > a {
  text-shadow: none;
}

/* Nav and CTA must read against ANY slide, light or dark */
#Top_bar #menu > ul > li > a {
  text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 20px rgba(0,0,0,.5);
}

#Top_bar #menu > ul > li > a[href^="tel:"] {
  color: #e7cd9c;
}

#Top_bar #menu > ul > li > a[href^="tel:"] span {
  background: rgba(10,11,13,.5);
  border-color: rgba(231,205,156,.8);
  text-shadow: none;
  backdrop-filter: blur(3px);
}

#Top_bar #menu > ul > li > a[href^="tel:"]:hover span {
  background: var(--uw-accent-lt);
  border-color: var(--uw-accent-lt);
}

/* --------------------------------------------------------------------------
   Mobile toggle
   Betheme renders it filled with the theme's secondary blue (#4968a6), which
   is the loudest thing on a black/brass header. Quiet outline instead.
   NOTE: the 42px white strip above the header on mobile is NOT this. It is
   `html { padding-top: 42px }` set inline by wp-responsive-menu's JS to
   reserve room for a bar it then renders display:none. Deliberately not
   patched here: the real fix is deciding whether that plugin is still needed
   at all, which is a plugin-level call, not a CSS override.
   -------------------------------------------------------------------------- */

#Header .responsive-menu-toggle,
#Top_bar .responsive-menu-toggle {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 2px;
  width: 40px;
  height: 40px;
  line-height: 38px;
  text-align: center;
  color: rgba(255,255,255,.9) !important;
  transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}

#Header .responsive-menu-toggle:hover,
#Top_bar .responsive-menu-toggle:hover {
  border-color: var(--uw-accent-lt);
  color: var(--uw-accent-lt) !important;
  background: rgba(203,171,119,.1) !important;
}

#Header .responsive-menu-toggle i,
#Top_bar .responsive-menu-toggle i {
  font-size: 19px;
  line-height: 38px;
  color: inherit;
}

/* ==========================================================================
   11. Round 4 fixes
   ========================================================================== */

/* (a) CTA bottom border.
   The `border-bottom-width: 0 !important` above (added to strip Betheme's own
   nav underline) was also eating the phone pill's bottom edge, so the CTA
   rendered as a three-sided box. Put it back for this one item. */
#Top_bar #menu > ul > li > a[href^="tel:"] span {
  border-bottom-width: 1px !important;
  border-style: solid !important;
  display: inline-block;
}

/* (b) Dropdown.
   Was a loose grey slab: long labels wrapped to two lines, items were widely
   spaced, and nothing tied it to the bar it hangs off. */
#Top_bar #menu ul.sub-menu {
  background: #0b0c0e !important;
  border: 1px solid rgba(255,255,255,.08);
  border-top: 2px solid var(--uw-accent-lt);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 24px 54px rgba(0,0,0,.55) !important;
  padding: 6px 0 !important;
  min-width: 0;
  width: auto;
}

#Top_bar #menu ul.sub-menu li > a {
  font-size: 11px;
  letter-spacing: .13em;
  color: rgba(255,255,255,.66);
}

#Top_bar #menu ul.sub-menu li > a span {
  padding: 11px 26px !important;
  white-space: nowrap;          /* "Building and Remodeling" was wrapping */
  border-left: 2px solid transparent !important;
  transition: border-color .22s ease, padding-left .22s ease;
}

#Top_bar #menu ul.sub-menu li:hover > a span,
#Top_bar #menu ul.sub-menu li.current-menu-item > a span {
  border-left-color: var(--uw-accent-lt) !important;
}

#Top_bar #menu ul.sub-menu li:hover > a,
#Top_bar #menu ul.sub-menu li.current-menu-item > a {
  color: var(--uw-accent-lt);
  background: rgba(255,255,255,.03);
}

/* (c) Sticky bar (Betheme's own sticky is now enabled in theme options; this
   only dresses the state it adds). */
#Top_bar.is-sticky {
  background: rgba(8,9,11,.96) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 30px rgba(0,0,0,.34);
}

#Top_bar.is-sticky #menu > ul > li > a {
  text-shadow: none;
}

/* Betheme dresses the sticky bar via `.sticky-tb-color #Top_bar.is-sticky`
   (1,2,0), which outranks a bare `#Top_bar.is-sticky` (1,1,0). Match it and
   add one more class to win cleanly. */
body.sticky-header #Top_bar.is-sticky,
body.sticky-tb-color #Top_bar.is-sticky {
  background: rgba(8,9,11,.96) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 30px rgba(0,0,0,.34);
}

body.sticky-header #Top_bar.is-sticky #menu > ul > li > a {
  text-shadow: none;
}

/* Betheme's inline rule is `#Header #Top_bar.is-sticky { background: navy !important }`
   = (2,1,0) + !important. Two IDs beat any number of classes, and being inline
   it also wins ties on order, so (1,2,1) + !important still lost. Go to (2,2,1). */
body.sticky-header #Header #Top_bar.is-sticky {
  background: rgba(8,9,11,.96) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.34);
}

/* Betheme sets an explicit width on the submenu <ul>, so nowrap made the
   longest label overflow the panel instead of widening it. Size to content. */
#Top_bar #menu ul.sub-menu {
  width: max-content !important;
  min-width: 210px !important;
  max-width: 340px !important;
}

#Top_bar #menu ul.sub-menu li {
  width: 100% !important;
}

#Top_bar #menu ul.sub-menu li > a {
  width: 100% !important;
  box-sizing: border-box;
}

/* ==========================================================================
   12. Round 5
   ========================================================================== */

/* (a) Homepage header gets a real background, per Jim 2026-09-03.
   Supersedes the earlier decision to leave the theme's deliberate
   `.home #Header #Top_bar { background: transparent !important }` (2,1,0)
   alone. Beating it needs a third simple selector, not more classes. */
body.home #Header #Top_bar {
  background: #000 !important;
}

body.home #Header #Top_bar.is-sticky {
  background: rgba(8,9,11,.96) !important;
}

/* (b) Phone CTA was hanging below the sticky bar.
   Its span inherited a 27px line-height, so the pill boxed out at 47px and
   overflowed the 61px sticky bar by 3px. Pin the pill to its own compact box
   and centre it on the line rather than letting it inherit the nav's leading. */
#Top_bar #menu > ul > li > a[href^="tel:"] span {
  display: inline-block;
  line-height: 1 !important;
  padding: 10px 17px !important;
  vertical-align: middle;
}

/* vertical-align:middle centres on the baseline plus half an x-height, not on
   the line box, so the pill still sat low in both the tall and sticky bars.
   Make the anchor a flex line and centre the pill in it instead. */
#Top_bar #menu > ul > li > a[href^="tel:"] {
  display: flex !important;
  align-items: center;
}

/* Flex-centring the pill in its own anchor still left it 3px below the nav
   text's optical line, and by the same 3px in BOTH the tall and sticky bars,
   so a single constant nudge is correct rather than a per-state fudge.
   Align to the nav row, which is what the eye compares it against. */
#Top_bar #menu > ul > li > a[href^="tel:"] span {
  position: relative;
  top: -3px;
}

/* ==========================================================================
   13. Dropdown, take two
   Measured: 11px text was inheriting a 26.6px line-height (the 1.4 never won),
   so every row boxed out at 49px. Combined with tracked uppercase that forced
   the panel to its 340px ceiling, it read bloated and shouty.
   These are page names, not labels: sentence case at a real reading size.
   ========================================================================== */

#Top_bar #menu ul.sub-menu {
  width: max-content !important;
  min-width: 196px !important;
  max-width: 300px !important;
  padding: 10px 0 !important;
}

#Top_bar #menu ul.sub-menu li > a {
  font-family: var(--uw-sans) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  letter-spacing: .005em !important;
  text-transform: none !important;
  line-height: 1.35 !important;
  color: rgba(255,255,255,.76) !important;
}

#Top_bar #menu ul.sub-menu li > a span {
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
  line-height: 1.35 !important;
  padding: 9px 24px !important;
}

#Top_bar #menu ul.sub-menu li:hover > a,
#Top_bar #menu ul.sub-menu li.current-menu-item > a {
  color: var(--uw-accent-lt) !important;
}

/* Section 14 (a legibility scrim for the transparent header on the ~39 property
   listing pages) was written and then PULLED at Jim's instruction 2026-09-03:
   "maybe we leave the listing pages alone for now". Those pages are untouched
   by this file beyond the site-wide nav typography that shipped earlier.
   The finding stands if it is ever wanted: they set
   `#Header #Top_bar { background: transparent !important }` per page, which is
   deliberate for a photo-led sales page, but white nav over a sunlit photo is
   close to unreadable. Beating that rule needs (2,1,1), e.g. a body prefix. */

/* ==========================================================================
   15. Hero treatment extended to content pages
   Property listing pages render no #Subheader at all, so they are untouched
   by everything below. This reaches About, Contact, Financial, Recent Sales,
   Featured Listings, the three guides and the legal pages.
   ========================================================================== */

body.page #Subheader {
  padding: 0 !important;
  min-height: clamp(340px, 34vw, 460px);
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

body.page #Subheader::after {
  content: "";
  position: absolute;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  border: 0 !important;
  background:
    linear-gradient(90deg, rgba(9,10,12,.80) 0%, rgba(9,10,12,.62) 26%, rgba(9,10,12,.32) 55%, rgba(9,10,12,.06) 84%, rgba(9,10,12,0) 100%),
    linear-gradient(180deg, rgba(9,10,12,.22) 0%, rgba(9,10,12,.18) 30%, rgba(9,10,12,.46) 72%, rgba(9,10,12,.74) 100%);
  pointer-events: none;
  z-index: 1;
}

body.page #Subheader .container {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 128px;
  padding-bottom: 54px;
}

body.page #Subheader .column.one {
  text-align: left !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

body.page #Subheader .column.one::before {
  display: block;
  font-family: var(--uw-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #dcbe8e;
  margin: 0 0 20px;
  padding-top: 22px;
  border-top: 1px solid rgba(220,190,142,.7);
  width: fit-content;
  min-width: 46px;
  text-shadow: 0 1px 14px rgba(0,0,0,.6);
}

body.page #Subheader .title {
  font-family: "Playfair Display", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(30px, 3.1vw, 46px);
  line-height: 1.08;
  color: #fff;
  text-align: left;
  margin: 0;
  float: none !important;
  width: auto;
  max-width: 20ch;
  text-shadow: 0 2px 30px rgba(0,0,0,.42);
}

@media (max-width: 959px) {
  body.page #Subheader {
    min-height: 300px;
  }
  body.page #Subheader .container {
    padding-top: 92px;
    padding-bottom: 38px;
  }
  body.page #Subheader .title {
    font-size: 27px;
  }
}