/* base.css — Prime Real Estate Consultants ===============================
   Reset + defaults + semantic HTML styling. Applies to bare elements only,
   except the layout utilities in section 5 that every page needs.
   Requires tokens.css to be loaded first.
   ========================================================================= */

/* 1. RESET ---------------------------------------------------------------- */

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

/* Strip default margins; we add spacing back deliberately below. */
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }

/* Only lists we style ourselves lose their markers. */
ul[class], ol[class] { padding: 0; list-style: none; }

html {
  /* NEVER override the root font size — the reader's browser text-size
     setting is a real accessibility preference for this audience. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Breathing room for the #anchor jumps the page index makes. Generous,
     because the section heading must land clear of the top edge. */
  scroll-padding-top: var(--space-2xl);
  overflow-x: hidden;                   /* no sideways scroll at 320px */
}

body {
  min-height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }

/* Long strings (case numbers, emails, URLs) wrap instead of pushing the
   page sideways on a 320px phone. */
p, li, dd, h1, h2, h3, h4, td, th, a { overflow-wrap: break-word; }

/* 2. TYPOGRAPHY ----------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  color: var(--color-text-strong);
  margin-block-end: var(--space-sm);
  text-wrap: balance;   /* avoids a one-word last line; ignored if unsupported */
}
h1 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-2xl); margin-block-start: var(--space-xl); }
h3 { font-size: var(--text-xl);  margin-block-start: var(--space-lg); }
h4 { font-size: var(--text-lg);  margin-block-start: var(--space-md); }
/* h5/h6 are small labels, set in the body sans. Sentence case: this site has
   NO tracked-out ALL-CAPS eyebrow labels floating above a heading. The only
   caps on the site are the nav band's standing compliance line and the
   IMPORTANT NOTICE label — both structural, neither decorative. */
h5, h6 {
  font-family: var(--font-body); font-size: var(--text-sm);
  margin-block-start: var(--space-md);
}
:is(h1, h2, h3, h4, h5, h6):first-child { margin-block-start: 0; }

p { max-width: var(--measure); margin-block-end: var(--space-md); }
p:last-child { margin-block-end: 0; }

/* .lead — the one sentence under a page title. */
.lead {
  font-size: var(--text-lg); line-height: var(--leading-snug);
  max-width: var(--measure-narrow);
}

/* Plain content lists keep their markers and get breathing room. */
ul:not([class]), ol:not([class]) {
  max-width: var(--measure);
  margin-block-end: var(--space-md);
  padding-inline-start: var(--space-md);
}
ul:not([class]) li, ol:not([class]) li { margin-block-end: var(--space-2xs); }

a {
  color: var(--color-link);
  text-decoration: underline;
  /* Thick enough to see; offset so it does not cut through descenders. */
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
a:hover  { color: var(--color-link-hover); }
a:active { color: var(--color-accent); }

strong, b { font-weight: var(--weight-bold); }
/* --text-xs is for non-prose only (badges, superscripts). Any string a reader
   is meant to READ stays at the 19px floor — this audience is the reason the
   floor exists. */
small { font-size: var(--text-sm); color: var(--color-text-muted); }
abbr[title] { text-decoration: underline dotted; cursor: help; }
address { font-style: normal; }  /* addresses read as text, not italics */

blockquote {
  border-inline-start: var(--border-rule) solid var(--color-brass-rule-on-light);
  padding-inline-start: var(--space-md);
  margin-block: var(--space-lg);
  max-width: var(--measure-narrow);
}
hr {
  border: 0;
  border-block-start: var(--border-hairline) solid var(--color-border-hairline);
  margin-block: var(--space-xl);
}
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.95em; }

/* 3. FOCUS ---------------------------------------------------------------
   The most important accessibility rule on this site: a keyboard user must
   always see where they are. 3px ring, 2px offset so the background shows
   through and it reads as a ring. NEVER write `outline: none` in this
   project outside the one guarded rule at the end of this section. */

:focus-visible {
  outline: var(--border-thick) solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* On navy surfaces the ring flips to white so it stays visible.
   Keep this list in step with the navy components in components.css. */
.utility-bar :focus-visible,
.disclaimer-bar :focus-visible,
.nav :focus-visible,
.hero :focus-visible,
.section--dark :focus-visible,
.call-card:focus-visible,
.office-panel :focus-visible,
.contact-strip :focus-visible,
.site-footer :focus-visible,
.btn--primary:focus-visible { outline-color: var(--color-focus-inverse); }

/* Mouse clicks do not draw a ring; keyboard focus always does. */
:focus:not(:focus-visible) { outline: none; }

/* 4. TABLES, FORMS and other bare semantics ------------------------------- */

table { border-collapse: collapse; width: 100%; }
caption { text-align: start; font-weight: var(--weight-bold); padding-block-end: var(--space-2xs); }
th { text-align: start; }

fieldset {
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin: 0 0 var(--space-lg);
  min-width: 0;   /* lets fieldsets shrink inside a grid on small screens */
}
legend { font-weight: var(--weight-bold); padding-inline: var(--space-2xs); }
summary { cursor: pointer; }   /* native marker kept — see .faq */
::selection { background-color: var(--navy-100); color: var(--color-text); }

/* 5. LAYOUT UTILITIES — the only utilities this project allows ------------ */

/* .container — centres content and applies the page gutters. Wrap the inner
   content of every section, and every chrome bar, in one. Using the same
   container in the chrome is what keeps the utility bar, the masthead, the
   nav band and the hero optically aligned down the left edge. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

/* .measure / .measure-center — cap a BLOCK at reading measure. A bare <p>
   is already capped; these are for a wrapper holding several elements. */
.measure { max-width: var(--measure); }
.measure-center { max-width: var(--measure); margin-inline: auto; }

/* .skip-link — the first focusable element in <body>; hidden until tabbed to.
   <a class="skip-link" href="#main">Skip to main content</a> */
.skip-link {
  position: absolute; top: var(--space-2xs); inset-inline-start: var(--space-2xs);
  z-index: var(--z-skiplink);
  display: inline-block;
  min-height: var(--tap-min);
  padding: var(--space-xs) var(--space-md);
  background-color: var(--color-surface);
  color: var(--color-text-strong);
  border: var(--border-thick) solid var(--color-accent);
  border-radius: var(--radius-md);
  font-weight: var(--weight-bold);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  /* Moved off-screen rather than display:none, so it stays announceable. */
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

/* .visually-hidden — text for screen readers only. Use it to give a link or
   a control a real accessible name. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 6. REDUCED MOTION ------------------------------------------------------
   Honoured globally. Nothing on this site conveys meaning through movement,
   and our audience includes people with vestibular disorders. The only
   transitions in the whole project are 150ms colour changes on hover and
   active — direct feedback to a user action — and even those go here. */

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

/* 7. PRINT ---------------------------------------------------------------
   Two things must print perfectly, because readers WILL print them and take
   them to court or to an attorney: the contact block (.print-contact) and
   the audit checklist (.checklist). Both are forced onto one page. */

@media print {
  html, body { background: #fff; color: #000; font-size: 12pt; line-height: 1.4; }

  /* Chrome off — nobody needs navigation on paper. */
  /* NOTE: .site-header is deliberately NOT hidden here. The disclaimer bar
     lives inside it, and a hidden parent wins over the display:block below,
     so hiding the header silently dropped a required notice from every
     printed page. Hide the header's inner rows instead. */
  /* .contact-strip is NOT hidden, for the same reason .site-header is not:
     .print-contact lives inside it, and a hidden parent beats a descendant's
     display:block. Hiding the strip silently dropped the office name, address
     and phone from every printed page. Hide its interactive children instead. */
  .utility-bar, .site-header__band, .nav, .skip-link, .hero__actions,
  .page-index, .call-card, .site-footer__nav,
  .breadcrumb, .btn, .btn-row, form, .testimonial { display: none; }
  .contact-strip .btn, .contact-strip .call-card, .contact-strip form { display: none; }

  /* The disclaimer stays: it is a compliance requirement on paper too. */
  /* !important is load-bearing here, not laziness. components.css loads AFTER
     base.css and sets .disclaimer-bar{color:inverse;background:navy} at the same
     specificity, so source order won and the federally required 12 CFR
     1015.4(a)(1) notice printed white-on-white — 1.00:1 — because browsers do
     not print background colours by default. Do not remove these. */
  .disclaimer-bar, .disclaimer-bar p, .disclaimer-bar__label,
  .disclaimer-block, .print-contact {
    background: transparent !important;
    background-image: none !important;
    color: #000 !important;
  }
  .disclaimer-bar, .disclaimer-block, .print-contact {
    display: block; border: 1pt solid #000; padding: 6pt; margin-block: 6pt;
    font-size: 10pt;
  }

  /* Navy bands print as plain paper — a full-bleed navy hero wastes a
     cartridge and makes the copy inside it unreadable in greyscale. */
  .hero, .section--dark, .office-panel, .callout, .card {
    background: transparent !important; color: #000 !important;
    background-image: none !important;
  }
  .hero :is(h1, h2, h3, p, li, a), .section--dark :is(h1, h2, h3, p, li, a) { color: #000 !important; }

  /* Checklist and contact block each own a page and never split an item. */
  .checklist, .print-contact { break-inside: avoid; page-break-inside: avoid; }
  .checklist li {
    break-inside: avoid; page-break-inside: avoid;
    padding-block: 4pt; border-block-end: 0.5pt solid #999;
  }
  .checklist { page-break-after: avoid; }

  /* Every FAQ answer prints open, even if the reader left it collapsed. */
  .faq details { display: block; }
  .faq details > *:not(summary) { display: block !important; }

  /* Print real URLs, but not in-page anchors or tel:/mailto: links whose
     text already says the number or address. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  a[href^="#"]::after, a[href^="tel:"]::after, a[href^="mailto:"]::after { content: ""; }

  h1, h2, h3 { break-after: avoid; page-break-after: avoid; color: #000; }
  p, li, blockquote { orphans: 3; widows: 3; }
  .card, .callout { border: 1pt solid #000; box-shadow: none; }
  @page { margin: 15mm; }
}