/*
 * site.css — the last stylesheet in <head> on every page (header.php).
 *
 * Site-wide rules that used to be missing or repeated per page: one font
 * set, focus rings, touch and small-screen fixes, page-to-page motion and
 * the operating-system preferences (high contrast, reduced transparency,
 * classic scrollbars). Rules that must also beat page styles printed later
 * in <body> start with :root.
 *
 * Browser support, and what older browsers get instead, is noted on each
 * block; everything here is additive, so a browser that ignores a rule
 * keeps the page as it was.
 */

/* ══ FONTS — one set for every page (R-41, R-25) ═══════════════════════
   Headlines everywhere: the static ABC Arizona Light cut (56 KB, italic
   72 KB). Long reading text (articles, the Insights panel) needs weight
   350, which only the ABC Arizona Plus variable font has — and that file is
   1.1 MB, so it is used there only (--serif-text) and never preloaded on
   other pages. (It used to be first in --serif, so every first visit waited
   for 1.1 MB before headlines showed in the brand font.)
   The four first-screen faces — Neue Montreal 400/500, Arizona Light and
   Light Italic, ≈220 KB, all preloaded in header.php — use
   font-display:block: on a first visit the browser waits for them (briefly;
   at most 3s) instead of drawing a stand-in font and swapping it a moment
   later. The big reading font keeps swap, so an article is readable at once.
   The two "Fallback" faces are Georgia and Arial resized to the brand fonts'
   width and line metrics (measured from the font files), used only if a
   font takes longer than that. */
@font-face{font-family:'Neue Montreal';src:url('https://baldorealtygroup.com/wp-content/uploads/fonts/ppneuemontreal-book.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Neue Montreal';src:url('https://baldorealtygroup.com/wp-content/uploads/fonts/ppneuemontreal-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'ABC Arizona';src:url('https://baldorealtygroup.com/wp-content/uploads/fonts/ABCArizonaSerif-Light-Trial.woff2') format('woff2');font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'ABC Arizona';src:url('https://baldorealtygroup.com/wp-content/uploads/fonts/ABCArizonaSerif-LightItalic-Trial.woff2') format('woff2');font-weight:300;font-style:italic;font-display:block}
@font-face{font-family:'ABC Arizona Plus';src:url('https://baldorealtygroup.com/wp-content/uploads/fonts/ABCArizonaPlusVariable-Trial.woff2') format('woff2');font-weight:200 700;font-stretch:65% 100%;font-style:normal;font-display:swap}
@font-face{font-family:'ABC Arizona Plus';src:url('https://baldorealtygroup.com/wp-content/uploads/fonts/ABCArizonaSerif-LightItalic-Trial.woff2') format('woff2');font-weight:200 700;font-style:italic;font-display:swap}
@font-face{font-family:'Arizona Fallback';src:local('Georgia');size-adjust:98.2%;ascent-override:98.2%;descent-override:27.4%;line-gap-override:0%}
@font-face{font-family:'Montreal Fallback';src:local('Arial'),local('Helvetica Neue'),local('Helvetica');size-adjust:93.5%;ascent-override:102.5%;descent-override:25.9%;line-gap-override:0%}
:root{
  --serif:'ABC Arizona','Arizona Fallback',Georgia,serif;
  --serif-text:'ABC Arizona Plus','ABC Arizona','Arizona Fallback',Georgia,serif;
  --sans:'Neue Montreal','Montreal Fallback',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  /* One motion vocabulary (R-24) for new work; page files keep their own timings */
  --dur-fast:.25s;--dur:.45s;--dur-slow:.8s;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
/* Serif axis for the variable reading font (inert for every other font) */
body{font-variation-settings:'SRFF' 70}

/* Visually hidden, still read by screen readers (WordPress's own class name) */
.screen-reader-text,.brg-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ══ BROWSER CHROME ═════════════════════════════════════════════════════ */
/* Classic scrollbars (Windows, Linux, macOS with "always show"): opening the
   menu or a panel locks scrolling, which removed the scrollbar and shifted the
   page sideways. Overlay scrollbars (iOS, Android, default macOS) ignore it.
   Chrome/Edge 94+, Firefox 97+, Safari 18.2+; older: unchanged. (R-53) */
html{scrollbar-gutter:stable}
/* Tap flash off; each control has its own pressed state */
a,button{-webkit-tap-highlight-color:transparent}
/* iOS: no font inflation in landscape */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ══ IMAGES (R-62) ══════════════════════════════════════════════════════
   width / height on <img> reserve the photo's proportions before it loads
   (no jump). CSS decides the actual size: zero specificity, so every
   component rule that sets a height still wins. */
:where(img[width][height]){height:auto}

/* ══ KEYBOARD FOCUS (R-05) ══════════════════════════════════════════════
   Several stylesheets remove outlines (a:focus{outline:none}, .lang-current:
   focus …). :focus-visible only matches keyboard (and assistive tech)
   focus, so mouse and touch stay clean. The ring takes the text colour, so
   it reads on white bars, dark glass and photos alike.
   Every current browser; Safari < 15.4 keeps its own default. */
:root :is(a,button,summary,select,[tabindex]:not([tabindex="-1"]),input[type=checkbox],input[type=radio],input[type=range]):focus-visible{
  outline:1px solid currentColor;outline-offset:3px
}
:root .m-link:focus-visible{outline-offset:6px}
:root .brg-mob-close:focus-visible,:root .nav-hamburger:focus-visible{outline-offset:2px}

/* ══ MENU BUTTON ════════════════════════════════════════════════════════
   44px hit area, same look (R-31). On small phones the word "MENU" goes —
   the two bars stay and the button keeps its "Menu" label for screen
   readers. Below ~380px the word ran into the centred logo. */
:root .nav-hamburger{min-height:44px;min-width:44px}
@media (max-width:420px){
  :root .nav-hamburger .hb-word{display:none}
}

/* ══ MOBILE MENU ON SHORT SCREENS (R-04, R-33) ═════════════════════════
   The overlay locks page scrolling; it now scrolls itself when its content
   is taller than the screen, without dragging the page behind it. */
:root .brg-mob-wrap{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* Phone landscape and other short screens: links left, theme and languages
   right, compact head — everything visible without scrolling. */
@media (max-height:500px) and (orientation:landscape){
  :root .brg-mob-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);align-items:center}
  :root .brg-mob-head{grid-column:1 / -1;height:56px;padding:0 max(28px,env(safe-area-inset-left))}
  :root .brg-mob-nav{padding:0 24px 20px max(40px,env(safe-area-inset-left));gap:0;justify-content:center}
  :root .m-link{font-size:clamp(1.5rem,7.5vh,2.2rem);padding:4px 0;line-height:1.15}
  :root .brg-mob-footer{padding:0 max(40px,env(safe-area-inset-right)) 24px 24px;align-self:end}
  /* Fixed bar: 120px was a third of a 390px-tall screen */
  :root .nav-inner{height:64px}
  :root .nav.brg-scrolled .nav-inner{height:56px}
  :root .nav-logo svg,:root .nav .nav-logo-svg{height:30px}
  :root .nav.brg-scrolled .nav-logo svg,:root .nav.brg-scrolled .nav-logo-svg{height:22px}
}

/* ══ TAP TARGETS (R-31) ═════════════════════════════════════════════════
   The visuals stay; an invisible ::before widens the touch area. */
:root .footer-nav a{position:relative}
:root .footer-nav a::before{content:"";position:absolute;inset:-8px -4px}
:root .footer-social{position:relative}
:root .footer-social::before{content:"";position:absolute;inset:-13px}
:root .footer-copy a,:root .footer-tracking{position:relative}
:root .footer-copy a::before,:root .footer-tracking::before{content:"";position:absolute;inset:-10px -4px}
:root .lnk{position:relative}
:root .lnk::before{content:"";position:absolute;inset:-14px -6px}
:root .brg-gal-dot{position:relative}
:root .brg-gal-dot::before{content:"";position:absolute;inset:-10px -3px}

/* ══ TOUCH SCREENS (R-32) ═══════════════════════════════════════════════
   On touch, :hover sticks after a tap, leaving buttons enlarged. Touch
   gets a short press instead. (hover:none = phones and tablets.) */
@media (hover:none){
  :root :is(.b-btn,.btn-od,.btn-gf,.btn-wt,.btn-primary,.btn-secondary,.sp-btn,.brg-pdf-btn,.brg-share-btn,#single-house-contact .hs-button,.hs-form .hs-button):hover{transform:none !important}
  :root :is(.b-btn,.btn-od,.btn-gf,.btn-wt,.btn-primary,.btn-secondary,.sp-btn,.brg-pdf-btn,.brg-share-btn,#single-house-contact .hs-button,.hs-form .hs-button):active{transform:scale(.98) !important;transition-duration:.12s !important}
}

/* ══ FORM FIELDS ON PHONES (R-09) ═══════════════════════════════════════
   iOS Safari zooms into any field under 16px when it is tapped and stays
   zoomed. HubSpot fields set their size with !important, hence this one. */
@media (max-width:767px){
  :root :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]):not([type=hidden]),select,textarea){font-size:16px !important}
}

/* ══ TYPE (R-30, R-34) ══════════════════════════════════════════════════
   Headlines balance their lines; paragraphs avoid a lone last word.
   Chrome/Edge 114+/117+, Safari 17.4+, Firefox 121+; others wrap as before. */
:root :is(h1,h2,h3,.s-ttl,.m-link){text-wrap:balance}
:root :is(p,li,dd,blockquote){text-wrap:pretty}
/* Designed line breaks in a few headlines apply from tablet width up; on
   phones the headline wraps (and balances) by itself, so no "Them." alone */
@media (max-width:767px){ br.br-wide{display:none} }
/* Smallest labels: nothing under 11px on phones (Apple's minimum) */
@media (max-width:767px){
  :root .footer-address-label{font-size:.6875rem;letter-spacing:.16em}
  :root .footer-col-head{font-size:.6875rem;letter-spacing:.2em}
  :root .footer-tracking,:root .footer-copy{font-size:.6875rem}
  :root :is(.prop-card-badge,.brg-feat-pill,.brg-cat-pill,.bsf-clear,.brg-minimap-eye,#brg-sp-count,
    .s-eye,.bnl-eye,.nr-tag,.ct-copy,.brg-minimap-link,.brg-arch-guide a,.brg-ins-date,.dev-card-bubble-label,.dev-hero-eye,
    .brg-rail-label,.brg-art-nav-eye,.sp-det-row dt,.sp-share-label,.brg-contact-eyebrow,.brg-archive-eyebrow,
    .page-numbers,.proj-card-district,.brg-404-eye){font-size:.6875rem}
}

/* ══ PAGE-TO-PAGE (R-20, R-21) ══════════════════════════════════════════
   The nav, logo and WhatsApp button are the same on every page, so they
   are lifted out of the page crossfade and simply stay put (or morph,
   when the bar's height or colour differs between the two pages).
   The names are only set for the length of a page transition
   (html.brg-vt-named, include/brg-enhance.php), and not when leaving from
   an open menu or panel, which covers the nav.
   Chrome/Edge 126+, Safari 18.2+; Firefox navigates normally. */
html.brg-vt-named .nav{view-transition-name:brg-nav}
html.brg-vt-named .nav-logo{view-transition-name:brg-logo}
html.brg-vt-named .wa-float{view-transition-name:brg-wa}
::view-transition-group(brg-nav),::view-transition-group(brg-logo),::view-transition-group(brg-wa){animation-duration:.35s;animation-timing-function:var(--ease-out)}
::view-transition-old(brg-nav),::view-transition-new(brg-nav),
::view-transition-old(brg-logo),::view-transition-new(brg-logo){animation-duration:.35s}
/* ── Homepage cards -> their page (home.js, include/brg-enhance.php) ──
   The card photo grows into the next page's hero; both images keep their
   proportions (cover) while the frame changes shape. With no hero on the
   next page (property search) the photo opens out and dissolves into it. */
::view-transition-group(brg-launch){animation-duration:.85s;animation-timing-function:cubic-bezier(.32,.72,0,1)}
::view-transition-old(brg-launch),::view-transition-new(brg-launch){height:100%;object-fit:cover;overflow:clip;animation-duration:.85s;animation-timing-function:cubic-bezier(.32,.72,0,1)}
@keyframes brg-launch-dissolve{to{opacity:0;transform:scale(1.16)}}
:root.brg-launch-out::view-transition-old(brg-launch){animation:brg-launch-dissolve .75s cubic-bezier(.32,.72,0,1) both}

/* The page cross-fade, without a see-through moment. The old page used to
   fade out (.3s ease) while the new one faded in (.35s ease-out); mid-way
   both were partly transparent and the browser's own backdrop — white —
   showed through: a white flash in dark mode. Now the old page stays solid
   underneath and the new page fades in over it. (The theme switch has its
   own transition, :root.brg-vt-theme in include/theme-mode.php.) */
@keyframes brg-page-in{from{opacity:0}}
:root:not(.brg-vt-theme)::view-transition-old(root){animation:none;mix-blend-mode:normal}
:root:not(.brg-vt-theme)::view-transition-new(root){animation:brg-page-in .35s ease-out both;mix-blend-mode:normal}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}
/* Arriving from another page of the site (or from a prerender): the
   crossfade is the entrance. Hero lines do not replay their entrance, and
   whatever is already on screen is shown at once (html.brg-instant is set
   in <head> by include/brg-enhance.php; header.js marks the on-screen
   elements .brg-now while it shows them). First visits keep the full entrance. */
html.brg-instant :is(.he1,.he2,.he3,.he4,.he5){animation:none !important}
html.brg-instant :is(.brg-single-eyebrow,#single-page-hero h1){animation:none !important;opacity:1 !important}
/* The marketing pages fade the WhatsApp button in 2s after load; on the
   other pages it is simply there. Arriving from the site, it stays put. */
html.brg-instant .wa-float{animation:none !important;opacity:1}
html.brg-instant .brg-now,html.brg-instant .brg-now *{transition:none !important}

/* ══ PAGE LINKS (R-82) ═══════════════════════════════════════════════════ */
/* Page links under a listing grid (district archives, sale / rent / search, Insights).
   Real /page/N/ URLs for search engines and visitors without JS; with JS the
   archive follows "next" in place and the listing pages scroll on by
   themselves, so their crawl links are hidden (by their scripts in assets/js). */
.brg-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px;padding:24px 30px 72px}
.brg-pager a{display:inline-flex;align-items:center;min-height:44px;padding:0 28px;border:1px solid #1d1d1b;font-family:var(--sans,'Neue Montreal',sans-serif);font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#1d1d1b;transition:background-color .35s var(--ease,ease),color .35s var(--ease,ease)}
@media(hover:hover) and (pointer:fine){.brg-pager a:hover{background:#1d1d1b;color:#fff}}
.brg-pager-pos{font-family:var(--sans,'Neue Montreal',sans-serif);font-size:.72rem;letter-spacing:.12em;color:#6b6b68}
.brg-pager.is-loading .brg-pager-next{opacity:.5;pointer-events:none}
.brg-pager.is-js .brg-pager-prev,.brg-pager.is-js .brg-pager-pos{display:none}
.brg-pager--crawl.is-js .brg-pager-next{display:none}
.brg-pager--crawl.is-js .brg-pager-prev{display:inline-flex}
@media(max-width:600px){.brg-pager{padding:24px 16px 56px}}
:where(:root[data-theme="dark"]) .brg-pager-pos{color:var(--ink-3)}
:where(:root[data-theme="dark"]) .brg-pager a{border-color:var(--ink);color:var(--ink)}
@media(hover:hover) and (pointer:fine){:where(:root[data-theme="dark"]) .brg-pager a:hover{background:var(--ink);color:var(--surface)}}

/* ══ RENDER COST (R-63) ═════════════════════════════════════════════════
   The footer and the related listings are always below the first screen:
   the browser skips laying them out until they come near. Chrome/Edge 85+,
   Safari 18+, Firefox 125+; others render as usual. */
:root .footer,:root #brg-related{content-visibility:auto;contain-intrinsic-size:auto 720px}

/* ══ SHARE (R-50) ════════════════════════════════════════════════════════
   With the system share sheet (assets/js/brg-enhance.js), the network
   links give way to one Share button; "copy link" stays. */
:root .has-native > a.brg-share-btn,
html.brg-native-share :is(.brg-rail-share,.sp-share-row) > a.brg-share-btn{display:none}

/* ══ SPACE FOR LATE FORMS ══════════════════════════════════════════════ */
/* The HubSpot sign-up and enquiry forms load when their band comes near.
   Their box keeps the form's measured height from the start (per language
   and width: brg_form_slot_style(), include/site-chrome.php), and the form
   fills it from the top, so nothing below moves when it appears. */
.brg-form-slot.brg-form-slot{position:relative;align-items:flex-start;min-height:var(--fh-s,52px)}
@media (min-width:375px){.brg-form-slot.brg-form-slot{min-height:var(--fh-m,var(--fh-s,52px))}}
@media (min-width:600px){.brg-form-slot.brg-form-slot{min-height:var(--fh-l,var(--fh-m,52px))}}
.brg-form-slot > :is(.nl-hubspot-loading,.bnl-loading){position:absolute;inset:0;display:flex;align-items:center;justify-content:center}

/* ══ OPERATING-SYSTEM PREFERENCES (R-53, R-54) ══════════════════════════ */
/* No backdrop blur (very old browsers): solid surfaces instead of glass */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :root .brg-mob-wrap{background:rgba(12,12,12,.97)}
  :root .nav.brg-scrolled{background:rgba(16,16,16,.94)}
  :root .wa-float{background:hsl(0,0%,14%)}
}
/* "Reduce transparency" (macOS, iOS; Chrome 118+ reads it on all systems) */
@media (prefers-reduced-transparency:reduce){
  :root .brg-mob-wrap{background:rgba(12,12,12,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
  :root .nav.brg-scrolled{background:rgba(16,16,16,.94);-webkit-backdrop-filter:none;backdrop-filter:none}
  :root .wa-float{background:hsl(0,0%,14%);-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* Windows high contrast / forced colours: give background-only controls a
   border, keep focus visible in the system highlight colour */
@media (forced-colors:active){
  :root :is(.b-btn,.btn-od,.btn-gf,.btn-wt,.btn-primary,.btn-secondary,.sp-btn,.hs-button,.brg-mab-btn,.wa-float,.brg-pager a){border:1px solid ButtonText}
  :root :focus-visible{outline:2px solid Highlight !important}
  :root .s-line,:root .footer-rule{background:CanvasText}
}

/* ══ FOLDABLES (R-35) ═══════════════════════════════════════════════════ */
/* Two-screen devices (Surface Duo, folding phones in book posture —
   Chromium): side panels open on one screen instead of across the hinge. */
@media (horizontal-viewport-segments:2){
  :root :is(#brg-fav-drawer){width:env(viewport-segment-width 1 0,50vw);max-width:none}
}