/* ==========================================================================
   leonsun.ca — shared stylesheet
   Type scale, heading map and body metrics follow the preview design guide.
   Brand colours are lifted from the live Sitejet site; the CTA text colour is
   deliberately NOT (live uses white on --blue, which measures 1.54:1 and fails
   WCAG AA). Navy on --blue measures 10.35:1.
   ========================================================================== */

:root {
  /* Brand */
  --navy: #060b77;
  --blue: #bad3f1;
  --blue-dark: #8fb8e4;      /* hover/border tint, still AA behind navy text */
  --ink: #1a1a1a;
  --mut: #4a4a4a;            /* 8.9:1 on white */
  --line: #e2e2e2;
  --paper: #ffffff;
  --scrim: rgba(4, 8, 40, 0.55);        /* hero: worst pixel 4.55:1 vs white */
  --scrim-map: rgba(4, 8, 40, 0.60);    /* map band: worst pixel 5.26:1 vs white */
  --scrim-banner: rgba(4, 8, 40, 0.58); /* inner banners: worst pixel ≥4.90:1 vs white */

  /* Type scale — only these values may be used */
  --t-12: 0.75rem;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-28: 1.75rem;
  --t-36: 2.25rem;
  --t-40: 2.5rem;
  --t-56: 3.5rem;

  --wrap: 1200px;
  --radius: 16px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Montserrat, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-size: var(--t-18);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

/* --- Headings: h1 56 / h2 36 / h3 24 / h4 18 / h5 16 ---------------------- */
h1, h2, h3, h4, h5 {
  font-family: "Work Sans", Montserrat, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  margin: 0 0 0.5em;
  line-height: 1.2;
  text-wrap: balance;          /* no orphan words in headings */
}
h1 { font-size: var(--t-56); font-weight: 400; }
h2 { font-size: var(--t-36); font-weight: 600; }
h3 { font-size: var(--t-24); font-weight: 600; }
h4 { font-size: var(--t-18); font-weight: 600; }
h5 { font-size: var(--t-16); font-weight: 600; }

p, li { text-wrap: pretty; }
p { margin: 0 0 1rem; }

/* Long unbreakable tokens (leonsun.vanestate@gmail.com) otherwise set a
   min-content floor that pushes narrow layouts past the viewport. */
p, li, a, h1, h2, h3, h4, h5 { overflow-wrap: break-word; }

/* Grid items default to min-width:auto, which refuses to shrink below their
   min-content width. Required alongside the rule above. */
.about-card > *, .contact-grid > * { min-width: 0; }

a { color: var(--navy); }

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--navy); color: #fff;
  padding: 12px 20px; z-index: 100; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; top: 0; }

/* --- Buttons -------------------------------------------------------------
   Live site: white on --blue = 1.54:1 (fails AA). Navy on --blue = 10.35:1. */
.btn {
  display: inline-block;
  background: var(--blue);
  color: var(--navy);
  font-size: var(--t-16);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 12px 24px;          /* ≥24×24 target (WCAG 2.2 AA) */
  min-height: 44px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  transition: background-color 0.18s ease, color 0.18s ease;
}
.btn:hover, .btn:focus-visible { background: var(--navy); color: #fff; }

/* --- Header / nav --------------------------------------------------------- */
.site-header {
  position: absolute; inset: 0 0 auto; z-index: 20;
  padding-block: 18px;
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; }
.logo img { width: 280px; height: 61px; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent; border: 2px solid rgba(255,255,255,0.7);
  color: #fff; border-radius: 8px;
  font: inherit; font-size: var(--t-16);
  min-width: 44px; min-height: 44px;
  cursor: pointer;
}

.nav { margin-left: auto; }
.nav > ul {
  list-style: none; display: flex; align-items: center;
  gap: 28px; margin: 0; padding: 0;
}
.nav a, .nav .dd-toggle {
  color: #fff;
  font-size: var(--t-16);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  background: none; border: 0; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 2px; min-height: 44px;
  cursor: pointer;
}
.nav a:hover, .nav .dd-toggle:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav .dd-toggle::after { content: "▾"; font-size: var(--t-12); }

.has-dd { position: relative; }
.dd {
  list-style: none; margin: 0; padding: 8px 0;
  position: absolute; top: 100%; left: 0;
  min-width: 230px;
  background: #0d0d0d;
  border-radius: 8px;
  display: none;
}
.dd a {
  display: block; padding: 10px 18px;
  letter-spacing: 0.04em;
}
.has-dd:hover > .dd,
.has-dd:focus-within > .dd,
.dd-toggle[aria-expanded="true"] + .dd { display: block; }

.lang-link { border: 1px solid rgba(255,255,255,0.6); border-radius: 6px; padding: 8px 12px !important; }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  /* Fill the viewport so .scroll-cue pins to a visible bottom edge. */
  min-height: 620px;
  min-height: 100vh;
  min-height: 100svh;
  display: grid; place-items: center;
  text-align: center;
  padding: 120px 0 84px;   /* top clears the absolute header; bottom leaves room for .scroll-cue */
  color: #fff;
  background-color: #0b1020;
  background-image:
    linear-gradient(var(--scrim), var(--scrim)),
    -webkit-image-set(url("../images/hero-house-1920.webp") 1x, url("../images/hero-house-3840.webp") 2x);
  background-image:
    linear-gradient(var(--scrim), var(--scrim)),
    image-set(url("../images/hero-house-1920.webp") 1x, url("../images/hero-house-3840.webp") 2x);
  background-size: cover;
  background-position: center;
}
.hero h1 { color: #fff; text-transform: uppercase; max-width: 24ch; margin-inline: auto; }

.badges {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 48px; flex-wrap: wrap; margin: 20px 0 14px;
}
.awards { margin: 0; }
.awards p { font-size: var(--t-18); font-weight: 500; margin: 0 0 6px; }

/* Scroll cue — an anchor, so it works without JS and is keyboard reachable. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 12px;
  color: #fff;
  text-decoration: none;
  font-size: var(--t-14);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.scroll-cue:hover { text-decoration: underline; text-underline-offset: 4px; }
.scroll-cue svg { animation: cue-bob 1.9s ease-in-out infinite; }

@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

.qr { margin-top: 14px; }
.qr img { margin-inline: auto; width: 387px; height: 176px; }
.qr figcaption { font-size: var(--t-18); font-weight: 500; margin-top: 10px; }

/* --- Inner-page banner ----------------------------------------------------
   Every banner photo contains near-white pixels, so white text on the bare
   image measures ~1.0:1 (as the live site ships it). --scrim-banner lifts the
   worst pixel to ≥4.90:1 on all seven banners.

   The image lives here rather than in an inline style: a custom property
   holding image-set(url("…")) can't be written in a style="" attribute without
   the inner quotes closing the attribute. */
.page-banner {
  min-height: 540px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  padding: 150px 20px 60px;
  background-color: #0b1020;
  background-size: cover;
  background-position: center;
}
.page-banner h1 { color: #fff; text-transform: uppercase; margin: 0; }

/* 2× served only where the original actually has the pixels; the rest are 1×. */
.b-about {
  background-image: linear-gradient(var(--scrim-banner), var(--scrim-banner)),
    -webkit-image-set(url("../images/banner-about-1920.webp") 1x, url("../images/banner-about-2880.webp") 2x);
  background-image: linear-gradient(var(--scrim-banner), var(--scrim-banner)),
    image-set(url("../images/banner-about-1920.webp") 1x, url("../images/banner-about-2880.webp") 2x);
}
.b-my-mls {
  background-image: linear-gradient(var(--scrim-banner), var(--scrim-banner)),
    -webkit-image-set(url("../images/banner-my-mls-1920.webp") 1x, url("../images/banner-my-mls-2880.webp") 2x);
  background-image: linear-gradient(var(--scrim-banner), var(--scrim-banner)),
    image-set(url("../images/banner-my-mls-1920.webp") 1x, url("../images/banner-my-mls-2880.webp") 2x);
}
.b-buying-selling {
  background-image: linear-gradient(var(--scrim-banner), var(--scrim-banner)),
    -webkit-image-set(url("../images/banner-buying-selling-1920.webp") 1x, url("../images/banner-buying-selling-2880.webp") 2x);
  background-image: linear-gradient(var(--scrim-banner), var(--scrim-banner)),
    image-set(url("../images/banner-buying-selling-1920.webp") 1x, url("../images/banner-buying-selling-2880.webp") 2x);
}
.b-map-search {
  background-image: linear-gradient(var(--scrim-banner), var(--scrim-banner)),
    -webkit-image-set(url("../images/banner-map-search-1920.webp") 1x, url("../images/banner-map-search-2880.webp") 2x);
  background-image: linear-gradient(var(--scrim-banner), var(--scrim-banner)),
    image-set(url("../images/banner-map-search-1920.webp") 1x, url("../images/banner-map-search-2880.webp") 2x);
}
/* Originals are 1920px wide — no true 2× exists. */
.b-contact {
  background-image: linear-gradient(var(--scrim-banner), var(--scrim-banner)),
    url("../images/banner-contact-1920.webp");
}
.b-city-dawn {
  background-image: linear-gradient(var(--scrim-banner), var(--scrim-banner)),
    url("../images/banner-city-dawn-1920.webp");
}

/* Visually hidden, still announced by screen readers. Used for headings that
   keep the h1→h2→h3 ladder intact on pages whose only content is an embed. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Prose (About / Contact) ---------------------------------------------- */
.prose { max-width: 820px; margin-inline: auto; }
.prose h2 { text-transform: uppercase; }
.prose h3 { margin-top: 32px; }
.prose ul { padding-left: 20px; margin: 0 0 18px; }
.prose li { font-weight: 700; font-style: italic; }

/* --- Contact page --------------------------------------------------------- */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: start;
}
.contact-details h2 { text-transform: uppercase; }
.contact-details h3 {
  font-size: var(--t-24); text-transform: uppercase; margin: 28px 0 4px;
}
.contact-details p { margin: 0 0 4px; }

.contact-form-card { border: 1px solid var(--blue-dark); border-radius: 24px; padding: 32px; }
.contact-form-card h2 { text-transform: uppercase; margin-top: 0; }
.contact-form-card label {
  display: block; font-size: var(--t-16); font-weight: 700;
  margin: 18px 0 6px;
}
.contact-form-card .req { color: #a3341f; }  /* 5.4:1 on white */
.contact-form-card input,
.contact-form-card textarea {
  width: 100%;
  font: inherit;
  font-size: var(--t-16);
  padding: 12px 14px;
  min-height: 44px;
  color: var(--ink);
  border: 1px solid #767676;            /* 4.5:1 on white — AA for UI borders */
  border-radius: 8px;
  background: #fff;
}
.contact-form-card textarea { min-height: 140px; resize: vertical; }
.contact-form-card input:focus-visible,
.contact-form-card textarea:focus-visible { outline: 3px solid var(--navy); outline-offset: 1px; }
.contact-form-card button { margin-top: 22px; cursor: pointer; }

/* Honeypot — off-screen but NOT type=hidden (bots skip hidden inputs). */
.hp {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; opacity: 0;
}

.form-status { margin-top: 16px; font-weight: 700; }
.form-status[data-state="ok"]  { color: #15662f; }  /* 5.6:1 on white */
.form-status[data-state="err"] { color: #a3341f; }  /* 5.4:1 on white */
.form-status:empty { margin-top: 0; }

/* --- Embeds on inner pages ------------------------------------------------- */
.embed-section { padding-block: 60px; }

/* --- Section rhythm ------------------------------------------------------- */
.section { padding-block: 80px; }
.section > .wrap > h2 { text-align: center; text-transform: uppercase; margin-bottom: 40px; }
.section .cta-row { text-align: center; margin-top: 36px; }

/* --- About card ----------------------------------------------------------- */
.about-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
  border: 1px solid var(--blue-dark);
  border-radius: 24px;
  padding: 40px;
}
.about-card h2 { text-transform: uppercase; margin-bottom: 4px; text-align: left; }
.about-card .eyebrow { font-size: var(--t-18); font-weight: 700; margin: 0; }
.about-card .eyebrow + .eyebrow { margin-bottom: 18px; }
.about-card ul { margin: 0 0 18px; padding-left: 20px; }
.about-card li { font-weight: 700; font-style: italic; }
.about-card .portrait { border-radius: 12px; width: 100%; max-width: 531px; }

/* --- Listing embeds ------------------------------------------------------- */
.embed { width: 100%; border: 0; display: block; }

/* --- Map band -------------------------------------------------------------
   The banner contains pure-white pixels, so white text on the bare photo hits
   1.00:1 (this is what the live site ships). A 0.60 navy scrim lifts the worst
   pixel to 5.26:1. */
.map-band {
  position: relative;
  color: #fff;
  text-align: center;
  padding-block: 90px;
  background-color: #0b1020;
  background-image:
    linear-gradient(var(--scrim-map), var(--scrim-map)),
    -webkit-image-set(url("../images/banner-map-1920.webp") 1x);
  background-image:
    linear-gradient(var(--scrim-map), var(--scrim-map)),
    image-set(url("../images/banner-map-1920.webp") 1x);
  background-size: cover;
  background-position: center;
}
.map-band h2 { text-transform: uppercase; color: #fff; }

/* --- Get in touch --------------------------------------------------------- */
.touch {
  border: 1px solid var(--blue-dark);
  border-radius: 24px;
  text-align: center;
  padding: 48px 24px;
}
.touch h2 { text-transform: uppercase; }
.touch .lede { font-weight: 700; margin-bottom: 18px; }
.touch ul { list-style: none; margin: 0; padding: 0; }
.touch li { margin-bottom: 6px; font-weight: 600; }
.touch a { color: var(--navy); }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  background: var(--blue);
  color: var(--navy);
  padding-block: 56px 0;
  margin-top: 80px;
}
.site-footer a { color: var(--navy); }
.footer-grid {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px;
}
.site-footer h3 { text-transform: uppercase; color: var(--navy); }
.site-footer .label { font-size: var(--t-14); font-weight: 700; text-transform: uppercase; margin: 0; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 4px; }
.footer-logo { width: 219px; height: 76px; margin-bottom: 20px; }
.colophon {
  margin-top: 40px; padding-block: 18px;
  border-top: 1px solid rgba(6, 11, 119, 0.25);
  text-align: center;
  font-size: var(--t-14);
}

/* --- Responsive ----------------------------------------------------------- */

/* Short desktop viewports (e.g. 1280×720): shrink the hero so it still fits the
   screen and .scroll-cue stays above the fold. All sizes stay on the scale. */
@media (min-width: 901px) and (max-height: 899px) {
  .hero { padding: 100px 0 68px; }
  .hero h1 { font-size: var(--t-40); margin-bottom: 20px; }
  .badges { margin: 14px 0 10px; gap: 36px; }
  .badges img { max-height: 130px; width: auto; }
  .qr { margin-top: 12px; }
  .qr img { width: 300px; height: auto; }
  .qr figcaption { font-size: var(--t-16); margin-top: 6px; }
}

@media (max-width: 900px) {
  h1 { font-size: var(--t-40); }
  h2 { font-size: var(--t-28); }

  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav { display: none; flex-basis: 100%; margin-left: 0; }
  .nav.open { display: block; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; background: #0d0d0d; border-radius: 12px; padding: 8px 0; margin-top: 14px; }
  .nav > ul > li { padding-inline: 14px; }
  .dd { position: static; display: none; background: transparent; padding-left: 12px; }
  .dd-toggle[aria-expanded="true"] + .dd { display: block; }
  .has-dd:hover > .dd { display: none; }
  .has-dd:focus-within > .dd { display: none; }
  .dd-toggle[aria-expanded="true"] + .dd { display: block; }

  .about-card { grid-template-columns: 1fr; padding: 24px; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-form-card { padding: 24px; }
  .page-banner { min-height: 360px; padding: 130px 20px 48px; }
  .footer-grid { grid-template-columns: 1fr; }
  .badges { gap: 28px; }
  .qr img { width: 100%; height: auto; max-width: 387px; }

  /* The hero is taller than a phone screen, so a bottom-pinned cue would sit
     below the fold. Fitting it would mean shrinking the award badges until the
     text baked into them is unreadable. Phones already signal scrollability, so
     drop the cue rather than wreck the badges. */
  .hero { min-height: 0; }
  .scroll-cue { display: none; }
}

/* A two-word banner heading ("Commercial Listings") has no space to protect
   with a non-breaking space, so it strands its second word whenever it cannot
   fit one line. Measured: it needs a 500px viewport at 40px, 362px at 28px.
   Below 500px, drop banner headings to 28px — still on the scale. */
@media (max-width: 499px) {
  .page-banner h1 { font-size: var(--t-28); }
  .page-banner { padding-inline: 16px; }
}

/* Smallest phones (320px). Same reasoning one step further down the scale:
   at 28px "Commercial Listings" still needs 362px. */
@media (max-width: 380px) {
  h2 { font-size: var(--t-24); }
  .hero h1 { font-size: var(--t-28); }
  .page-banner h1 { font-size: var(--t-24); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}