/* Harbrook & Vale demo — site-wide shell. Loaded on every page.
   Visual language (Mäklarhuset reference): strictly monochrome (black / white /
   one warm grey), ultra-light geometric-grotesque display type at weight 200
   with tight negative tracking, hairline dividers over drop shadows, sharp
   corners throughout, and button/badge labels set in the same modern sans
   face as the display type. */

@font-face {
  font-family: "General Sans";
  font-style: normal;
  font-weight: 200 700;               /* variable weight axis */
  font-display: swap;
  src: local("General Sans"), url("../fonts/general-sans-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("Inter"), url("../fonts/inter-latin-variable.woff2") format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }

/* ---------- WP admin-bar offset (logged-in only) ----------
   #wpadminbar is position:fixed and sits on top of the viewport whenever
   WordPress renders it for a logged-in user (body.admin-bar). Its height
   changes with viewport width (wp-admin/css/admin-bar.css), so every
   sticky/absolute offset in this theme that assumes viewport y=0 must add
   this custom property instead of a bare pixel value:
     > 782px   : #wpadminbar is fixed, 32px tall
     601–782px : #wpadminbar is fixed, 46px tall
     <= 600px  : #wpadminbar is position:absolute — it scrolls away with the
                 page, so offsets go back to 0
   Logged out (or no admin bar), body.admin-bar is absent and this resolves
   to 0px everywhere, so every consumer's calc() collapses back to its
   original literal — logged-out rendering is unchanged. Defined once here,
   before any consumer, so every offset only has one place to change. */
body { --sa-adminbar: 0px; }
body.admin-bar { --sa-adminbar: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --sa-adminbar: 46px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar { --sa-adminbar: 0px; }
}

body {
  background: var(--sa-canvas);
  color: var(--sa-ink);
  font-family: var(--sa-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; height: auto; }

/* Display type — one ultra-light grotesque face for every heading. Weight 200,
   tight negative letter-spacing, generous sizes: this single move does most of
   the reference's editorial lift. */
h1, h2, h3, .sa-display {
  font-family: var(--sa-display);
  font-weight: 200;
  line-height: 1.06;
  letter-spacing: -.03em;
  margin: 0 0 .4em;
  color: var(--sa-ink);
}
h1 { font-size: clamp(2.75rem, 1.8rem + 4.4vw, 5rem); letter-spacing: -.045em; }
h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
h3 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem); }

/* Monochrome links — ink, never a brand accent. */
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--sa-ink); color: #fff; }

a:focus-visible, button:focus-visible, .sa-btn:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--sa-ink);
  outline-offset: 2px;
}

.sa-container { max-width: var(--sa-maxw); margin: 0 auto; padding: 0 32px; }
.sa-kicker {
  font-family: var(--sa-sans);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sa-muted);
}

/* Buttons — sharp corners; primary is a solid black block. Labels render in
   the same modern sans face as the rest of the type system. */
.sa-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.6rem; border-radius: var(--sa-radius);
  border: 1px solid var(--sa-ink); background: var(--sa-canvas); color: var(--sa-ink);
  font-family: var(--sa-label); font-size: 1.02rem; font-weight: 400; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.sa-btn:hover { text-decoration: none; background: var(--sa-panel); }
.sa-btn--accent { background: var(--sa-black); border-color: var(--sa-black); color: var(--sa-black-ink); }
.sa-btn--accent:hover { background: #000; color: #fff; text-decoration: none; }
.sa-btn__arrow { font-family: var(--sa-sans); font-weight: 400; }

body.single-property .sa-btn {
  border-radius: var(--sa-r-button);
  padding: .82rem 1.9rem;
  border-color: var(--sa-hairline);
  background: transparent;
  transition: background-color var(--sa-dur) var(--sa-ease),
              color var(--sa-dur) var(--sa-ease),
              box-shadow var(--sa-dur) var(--sa-ease);
}
body.single-property .sa-btn:hover { background: var(--sa-surface);
  box-shadow: var(--sa-shadow-card); }
body.single-property .sa-btn--accent { background: var(--sa-black);
  border-color: var(--sa-black); color: var(--sa-black-ink); }
body.single-property .sa-btn--accent:hover { background: #000; color: #fff;
  box-shadow: var(--sa-shadow-hover); }

/* Flat cards — warm-grey fill, hairline border, no shadow, sharp corners. */
.sa-card {
  background: var(--sa-panel);
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sa-btn, * { transition: none !important; }
  .sa-hero__lead { animation: none !important; }
  .sa-metrics, .sa-branch, .sa-facts-list, .sa-epc, .sa-docs, .sa-dist-wrap,
  .sa-map, .sa-ph, .sa-grid__tile, .sa-mort,
  body.single-property .sa-similar__card { animation: none !important; }
}

/* ---------- Header: single consolidated bar ---------- */
.sa-header { position:sticky; top:calc(0px + var(--sa-adminbar)); z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--sa-line);
  transition:opacity .3s ease, transform .3s ease; }
.sa-header.sa-scrolled { box-shadow:0 2px 18px rgba(0,0,0,.06); }
.sa-header__inner { display:flex; align-items:center; gap:40px; height:74px; }
.sa-header__brand {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sa-display); font-weight:400; font-size:1.35rem;
  letter-spacing:-.01em; margin:0; color:var(--sa-ink);
  transition:opacity var(--sa-dur, 200ms) var(--sa-ease, ease);
}
.sa-header__brand .sa-mark { flex:0 0 auto; display:block; }
.sa-header__brand:hover { text-decoration:none; opacity:.62; }
.sa-header__nav { display:flex; gap:30px; margin-left:auto; }
.sa-header__nav a { color:var(--sa-ink); font-weight:500; font-size:.95rem; letter-spacing:.01em; }
.sa-header__nav a:hover { text-decoration:none; opacity:.6; }

.sa-footer { margin-top:0; padding:64px 0; border-top:1px solid var(--sa-line); background:var(--sa-ink); color:rgba(255,255,255,.72); }
.sa-footer__brand { display:flex; align-items:center; gap:10px;
  font-family:var(--sa-display); font-weight:300; letter-spacing:-.02em;
  color:#fff; font-size:1.4rem; margin:0 0 8px; }
.sa-footer__muted { color:rgba(255,255,255,.55); margin:0; }

@media (max-width:640px){
  .sa-container { padding:0 20px; }
  .sa-header__inner{ gap:18px; height:62px; }
  .sa-header__nav{ gap:16px; margin-left:auto; }
  /* Keep Buy/Rent only on mobile — the tertiary links (Commercial/New homes/
     Guides) folded in from the old utility strip, which was itself hidden here.
     Prevents brand + 5 links overflowing the 62px bar on a ~375px viewport. */
  .sa-header__nav a:nth-child(n+3){ display:none; }
  .sa-header__brand { font-size:1.15rem; gap:8px; }
  .sa-header__brand .sa-mark { width:19px; height:19px; }
}

/* Buy/Rent browse grid (Task 8) — reuses .sa-similar__* card classes from the
   listing-detail "more in this area" section for visual consistency. */
.sa-archive__h { font-family:var(--sa-display); font-weight:200; letter-spacing:-.03em; font-size:clamp(2rem,1.4rem+2vw,3rem); margin:36px 0 24px; }
.sa-archive__grid { margin-bottom:48px; }

/* ---------- Listing-only immersive header ----------
   On the property page the nav floats transparently over the hero photo (the
   Mäklarhuset move). It is NOT sticky here — it scrolls away (see
   header-scroll.js) and the sticky sub-nav takes over. Scoped to desktop
   single-property so archives and mobile keep the solid white bar. */
@media (min-width:641px){
  body.single-property .sa-header {
    position:absolute; top:calc(0px + var(--sa-adminbar)); left:0; right:0; z-index:30;
    background:transparent; backdrop-filter:none; border-bottom:0;
  }
  body.single-property .sa-header__brand {
    color:#fff; text-shadow:0 1px 14px rgba(0,0,0,.5);
  }
  body.single-property .sa-header__nav a { color:#fff; text-shadow:0 1px 14px rgba(0,0,0,.5); }
  body.single-property .sa-header__brand:hover,
  body.single-property .sa-header__nav a:hover { opacity:.82; }
  body.single-property .sa-subnav { top:calc(0px + var(--sa-adminbar)); }
}