/* ============================================================
   BrightStar Real Estate — legal page content styles
   (Terms & Conditions, Privacy Policy, Accessibility Statement)

   Tokens, scales, the reset, the navigation and the footer all come
   from brightstar.css, which these pages load first. Only the article
   layout that is unique to the legal pages lives here — previously this
   file re-declared the whole palette, ran its own breakpoint ladder and
   carried a second copy of the nav and footer, which is how the two
   drifted apart.
   ============================================================ */

/* ===================== PAGE HERO ===================== */
.legal-hero {
  background: var(--obsidian);
  color: var(--cream);
  padding: 160px 0 70px;
  text-align: center;
}

.legal-hero__eyebrow {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-muted-dark);
  margin-bottom: 18px;
}

.legal-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
}

.legal-hero__date {
  margin-top: 20px;
  font-size: var(--fs-sm);
  color: var(--text-muted-dark);
}

/* A stitched rule closes the dark hero, tying these pages to the same
   detail the rest of the site is built on. */
.legal-hero::after {
  /* The seam itself is drawn by the shared rule in brightstar.css, which
     names this selector. Only the size and placement live here. */
  content: '';
  display: block;
  width: 128px;   /* matches .footer__divider */
  margin: 26px auto 0;
}

/* ===================== CONTENT ===================== */
.legal-body { padding: 72px 0 96px; }   /* a <section> inside <main>, so that
                                           the page title is inside the landmark too */

/* Running text sits near a 65-character measure rather than the full
   820px the container allows. */
.legal-body .container { max-width: 780px; }

.legal-intro {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  line-height: var(--lh-body);
  margin-bottom: 44px;
}

.legal-section { margin-bottom: 40px; }

.legal-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--obsidian);
  margin-bottom: 14px;
}

.legal-section h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--obsidian);
  margin: 24px 0 10px;
}

.legal-section p {
  margin-bottom: 14px;
  color: var(--text-muted);
  line-height: var(--lh-body);
}

.legal-section ul {
  margin: 0 0 16px 22px;
  color: var(--text-muted);
  line-height: var(--lh-body);
}

.legal-section li { margin-bottom: 8px; }

.legal-section a {
  color: var(--maroon-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-section a:hover { color: var(--maroon); }

.legal-callout {
  background: var(--dove);
  border-left: 3px solid var(--maroon-light);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 18px 22px;
  margin: 28px 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-body);
  box-shadow: var(--e-1);
}

.legal-contact-block {
  margin-top: 8px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.9;
}

/* ===================== RESPONSIVE =====================
   Uses the shared 768px breakpoint rather than the 520/768/900 ladder
   this file used to run against the main site's 480/600/768/1024. */
@media (max-width: 768px) {
  .legal-hero { padding: 130px 0 56px; }
  .legal-body { padding: 56px 0 72px; }
}