/* ============================================================
   TODD SHEA REAL ESTATE
   Brand tokens per shea-brand-guidelines v1 (July 2026)
   Asphalt is home turf. Flat only — no shadows, glows, gradients.
   ============================================================ */

:root {
  /* Brand color — do not add colors without updating the brand sheet */
  --clay:         #D85A30;  /* Sunset Clay   — stripe 1, lead accent */
  --gold:         #EF9F27;  /* Golden Hour   — stripe 2, sub-line on dark */
  --bone:         #F4F1E8;  /* Bone          — ring + type on dark */
  --asphalt:      #161311;  /* Asphalt       — home turf background */
  --shorebreak:   #85B7EB;  /* Shorebreak    — the wave, on dark */
  --deep:         #378ADD;  /* Deep Shorebreak — the wave, on light */

  /* Derived neutrals (tints of brand values only) */
  --bone-dim:     rgba(244, 241, 232, 0.66);
  --bone-faint:   rgba(244, 241, 232, 0.13);
  --asphalt-dim:  rgba(22, 19, 17, 0.66);
  --asphalt-faint:rgba(22, 19, 17, 0.13);
  --panel:        #1F1B18;   /* dark contrast block */
  --panel-light:  #EAE6DA;   /* subtle tint on Bone */

  /* Accessibility tint of Deep Shorebreak. Deep (#378ADD) only reaches
     3.18:1 on Bone, which fails WCAG AA for body-size text. This is the
     same hue darkened to 76% brightness — 5.12:1 on Bone, 4.63:1 on the
     tint. Used for small text and links on light surfaces only; the
     brand Deep Shorebreak is still used for fills, rules, and large type.
     Flag to add to the brand sheet. */
  --deep-text:    #2968A7;

  /* Type — Helvetica/Arial per guidelines */
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Scale */
  --measure: 68ch;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --shell: 1240px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--asphalt);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--deep);
  outline-offset: 3px;
}
.section--dark :focus-visible, .section--panel :focus-visible, .hero :focus-visible,
.site-footer :focus-visible, .offmarket :focus-visible {
  outline-color: var(--gold);
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--asphalt);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- Type ---------- */

.eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 1.1rem;
}
.eyebrow--clay { color: var(--clay); }
.eyebrow--dim  { color: var(--asphalt-dim); }
.eyebrow--blue { color: var(--deep-text); }

h1, h2, h3, h4 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.04;
  margin: 0 0 1rem;
}

h1 { font-size: clamp(2.6rem, 7.5vw, 5.6rem); letter-spacing: 0.02em; }
h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); letter-spacing: 0.04em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: 0.08em; }
h4 { font-size: 0.95rem; letter-spacing: 0.14em; }

p { margin: 0 0 1.15rem; max-width: var(--measure); }

.lede {
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  line-height: 1.5;
  color: var(--asphalt);
}

.muted { color: var(--asphalt-dim); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1.05rem 2.2rem;
  border: 2px solid var(--asphalt);
  background: transparent;
  color: var(--asphalt);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover, .btn:focus-visible { background: var(--asphalt); color: var(--bone); }

.btn--clay { background: var(--clay); border-color: var(--clay); color: var(--bone); }
.btn--clay:hover, .btn--clay:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--asphalt); }

/* Deep Shorebreak button — the blue gets a real job on the light base */
.btn--blue { background: var(--deep); border-color: var(--deep); color: var(--bone); }
.btn--blue:hover, .btn--blue:focus-visible { background: var(--asphalt); border-color: var(--asphalt); color: var(--bone); }

/* For use over the dark hero image */
.btn--onDark { border-color: var(--bone); color: var(--bone); }
.btn--onDark:hover, .btn--onDark:focus-visible { background: var(--bone); color: var(--asphalt); }

/* Legacy alias */
.btn--dark { border-color: var(--asphalt); color: var(--asphalt); }
.btn--dark:hover, .btn--dark:focus-visible { background: var(--asphalt); color: var(--bone); }

/* ---------- Stripe rule (brand device: clay then gold, always) ---------- */

.stripes {
  display: flex;
  gap: 6px;
  height: 8px;
  width: 84px;
  margin-bottom: 1.75rem;
}
.stripes span { flex: 1; }
.stripes span:nth-child(1) { background: var(--clay); }
.stripes span:nth-child(2) { background: var(--gold); }

.stripes--wide { width: 100%; max-width: 240px; }
.stripes--center { margin-inline: auto; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bone);
  border-bottom: 1px solid var(--asphalt-faint);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
}
.site-header__logo { display: block; flex-shrink: 0; }
.site-header__logo img { height: 42px; width: auto; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); }
.nav a {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--asphalt-dim);
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
  white-space: nowrap;
}
.nav a:hover, .nav a:focus-visible { color: var(--asphalt); }
.nav a[aria-current="page"] { color: var(--asphalt); border-bottom-color: var(--clay); }

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--asphalt-faint);
  color: var(--asphalt);
  padding: 0.6rem 0.9rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--bone);
    border-bottom: 1px solid var(--asphalt-faint);
    padding: 0.5rem var(--gutter) 1.5rem;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { width: 100%; padding-block: 0.95rem; border-bottom: 1px solid var(--asphalt-faint); }
  .nav a[aria-current="page"] { border-bottom-color: var(--clay); }
  .site-header__inner { position: relative; }
}

/* ---------- Sections ---------- */

.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
/* Dark contrast block — used sparingly against the Bone base */
.section--dark { background: var(--asphalt); color: var(--bone); }

/* Any dark surface flips the text helpers back to the Bone tokens.
   Keep this list in sync with the dark surfaces: .section--dark,
   .section--panel, .hero, .offmarket, and .site-footer. */
.section--dark .lede, .section--panel .lede, .hero .lede,
.offmarket .lede, .site-footer .lede { color: var(--bone); }

.section--dark .muted, .section--panel .muted, .hero .muted,
.offmarket .muted, .site-footer .muted { color: var(--bone-dim); }

.section--dark .eyebrow--dim, .section--panel .eyebrow--dim,
.hero .eyebrow--dim, .site-footer .eyebrow--dim { color: var(--bone-dim); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--bone); }
.section--panel h1, .section--panel h2, .section--panel h3, .section--panel h4 { color: var(--bone); }
.section--dark .btn { border-color: var(--bone); color: var(--bone); }
.section--dark .btn:hover, .section--dark .btn:focus-visible { background: var(--bone); color: var(--asphalt); }

/* Subtle tint block on the light base */
.section--tint { background: var(--panel-light); }

/* Legacy aliases kept so existing markup keeps working */
.section--light { background: var(--panel-light); color: var(--asphalt); }
.section--light .muted { color: var(--asphalt-dim); }
.section--light .eyebrow--dim { color: var(--asphalt-dim); }
.section--panel { background: var(--asphalt); color: var(--bone); }

.section-head { margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--asphalt);
  color: var(--bone);
  border-top: 3px solid var(--deep);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 800px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } }

.site-footer h4 { color: var(--bone-dim); }
.site-footer__mark img { width: 220px; margin-bottom: 1.25rem; }

.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.footer-links a {
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--bone-dim);
  transition: color 0.16s ease;
}
.footer-links a:hover, .footer-links a:focus-visible { color: var(--bone); }

.legal {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--bone-faint);
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--bone-dim);
}
.legal p { max-width: none; margin-bottom: 0.9rem; }

.legal__identity p {
  color: var(--bone);
  font-size: 0.8rem;
  line-height: 1.75;
  margin-bottom: 1.25rem;
}
.legal__identity strong { letter-spacing: 0.04em; }

.legal__badges {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 1.5rem 0 1rem;
  flex-wrap: wrap;
}
/* --- BHHS company logo ---------------------------------------------------
   Brand Guidelines (Jul 2025) p13: the company logo must appear on the home
   page at minimum, with clear space on all sides of at least the height of
   the "H" in Hathaway. In the secondary lockup that cap height is roughly
   18% of the logo's width, so the 2.25rem margin below comfortably clears it
   at the rendered size. The logo is never tinted, animated, or combined with
   another graphic — the Salt Seal stays in its own part of the footer.
------------------------------------------------------------------------- */
.legal__logo { margin: 2.25rem 0; }
.legal__logo img {
  width: 100%;
  max-width: 340px;
  height: auto;
}

.legal__disclaimer {
  font-size: 0.7rem;
  line-height: 1.8;
  color: var(--bone-dim);
  max-width: 88ch;
}

.legal__badges {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 2rem 0 0;
  flex-wrap: wrap;
}
.legal__badge { height: 42px; width: auto; opacity: 0.85; }
.legal__badge--realtor { height: 34px; }

.legal__note {
  font-size: 0.68rem;
  font-style: italic;
  color: var(--bone-dim);
}