/* ═══════════════════════════════════════════════════════════════
   bv-site-text.css — Site-wide typography accessibility pass
   ───────────────────────────────────────────────────────────────
   Goal: minimum 17-18px body text, bold/larger headings, and easy-
   to-read nav + footer across every Brightview Homes page. Target
   audience is 35-65 yrs old, readability matters. Loaded LAST in
   <head> so it wins the cascade against earlier page-specific styles.
═══════════════════════════════════════════════════════════════ */

/* ── Base body text ── */
html, body {
  font-size: 18px;
  line-height: 1.6;
}

/* ── Generic content elements ── */
p, li, dd, blockquote {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
}

/* ── Table cells (generic, excluding component tables) ── */
table:not(.proof-table):not(.compare-table) td,
table:not(.proof-table):not(.compare-table) th {
  font-size: 17px;
}

/* ── Headings ── */
h1 { font-size: 52px; font-weight: 700; line-height: 1.08; }
h2 { font-size: 40px; font-weight: 700; line-height: 1.12; }
h3 { font-size: 27px; font-weight: 700; line-height: 1.2; }
h4 { font-size: 22px; font-weight: 700; line-height: 1.25; }
h5 { font-size: 18px; font-weight: 700; }

/* ── Form controls — 16px+ prevents iOS auto-zoom on focus ── */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="date"],
select, textarea {
  font-size: 17px !important;
}
label, .field-label {
  font-size: 16px;
  font-weight: 600;
}

/* ── Generic buttons + CTA links ── */
button, .btn, .cta-btn,
input[type="submit"], input[type="button"] {
  font-size: 18px;
  font-weight: 700;
}

/* ── Common Brightview component classes (gentle overrides) ── */
.section-title { font-size: 44px; font-weight: 700; line-height: 1.08; }
.section-sub   { font-size: 20px; font-weight: 500; line-height: 1.55; }
.section-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .14em; }

/* ══════════════════════
   HEADER NAV — enlarged for visibility
══════════════════════ */

/* Nav height bumped so larger text fits. !important on the variable wins page-level overrides.
   8/21: the previous sizes (18px bold links, 2.25rem gaps, 54px logo, 27px
   phone) overflowed the bar on ordinary laptop widths — flexbox ate the gaps
   and the links sat flush against the logo (Chris: "fix this header"). This
   block right-sizes the type, guarantees a minimum gap between the flex
   children, and hands crowded widths to the hamburger instead of cramming. */
:root {
  --nav-h: 72px !important;
}
.bv-nav {
  height: 72px !important;
  padding: 0 1.75rem !important;
  gap: 1.25rem !important; /* children can never touch, whatever the width */
}

/* Logo — the artwork has a baked-in white background, so present it as a
   deliberate rounded chip instead of a bare white box on the navy bar. */
.nav-logo { flex-shrink: 0 !important; }
.nav-logo img { height: 44px !important; width: auto !important; border-radius: 8px !important; display: block !important; }

/* Menu links — readable without owning the whole bar */
.nav-links { gap: clamp(0.9rem, 1.5vw, 1.75rem) !important; }
.nav-links a {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.95) !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
}

/* "Contact Us" CTA button */
.nav-cta {
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 10px 22px !important;
  border-width: 2px !important;
  white-space: nowrap !important;
}

/* Phone number — prominent but it shares the bar */
.nav-phone {
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
.nav-phone svg {
  width: 17px !important;
  height: 17px !important;
}

/* Below ~1120px the full row genuinely doesn't fit — collapse to the
   hamburger early rather than letting flexbox crush the gaps. */
@media (max-width: 1120px) {
  .bv-nav .nav-links { display: none !important; }
  .bv-nav .nav-phone { display: none !important; }
  .nav-hamburger { display: flex !important; }
}

/* ── Centre the menu without letting it collide ──
   The language pill carries margin-left:auto (bv-i18n.js), so that one auto
   margin swallowed every spare pixel and left the links bunched against the
   logo. Balancing the spare space either side of the links instead centres
   them between the logo and whatever sits on the right.

   This was previously done by taking the links out of flow and pinning them to
   50%. That is exact, but it cannot see its siblings: on pages that carry a
   phone number in the bar the centred links ran straight through it. Auto
   margins are a few pixels off true centre and can never overlap, which is the
   right trade for a header that differs page to page. */
@media (min-width: 1121px) {
  .bv-nav .nav-links {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .bv-nav .bv-lang-loose { margin-left: 0 !important; }
}

/* Hamburger touch target */
.nav-hamburger {
  width: 50px !important;
  height: 50px !important;
}

/* Mobile nav overlay links — tappable + readable */
.mobile-nav-links a {
  font-size: 23px !important;
  font-weight: 700 !important;
  padding: 1.2rem 1.75rem !important;
  min-height: 68px !important;
}
.mobile-nav-cta button {
  font-size: 17px !important;
  font-weight: 700 !important;
  padding: 18px 22px !important;
  min-height: 56px !important;
}

/* ══════════════════════
   FOOTER — enlarged for readability
══════════════════════ */
.footer-col a,
.footer-brand p,
.footer-brand-addr {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
}
.footer-col-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
}
.footer-brand-logo {
  font-size: 24px !important;
}
.footer-brand-phone {
  font-size: 26px !important;
  font-weight: 700 !important;
}
.footer-copyright {
  font-size: 13px !important;
  line-height: 1.7 !important;
}
.footer-legal-links a {
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Mobile call bar stays at its original sizes (set on each page) */
.mobile-call-bar, .mobile-call-bar * {
  font-size: revert;
  font-weight: revert;
  line-height: revert;
}

/* ── Fine print: TCPA / consent / legal copy ── */
.hero-form-consent, .consent-copy, .fine-print, small {
  font-size: 12.5px;
  font-weight: 400;
}

/* ══════════════════════
   MOBILE (≤768px)
══════════════════════ */
@media (max-width: 768px) {
  html, body { font-size: 17px; line-height: 1.55; }
  p, li, dd, blockquote { font-size: 17px; }
  h1 { font-size: 38px; }
  h2 { font-size: 32px; }
  h3 { font-size: 24px; }
  h4 { font-size: 20px; }
  .section-title { font-size: 34px; }
  .section-sub   { font-size: 18px; }
  button, .btn, input[type="submit"] { font-size: 17px; }

  /* Mobile nav — bigger but compact */
  :root { --nav-h: 72px !important; }
  .bv-nav { height: 72px !important; padding: 0 1rem !important; }
  .nav-logo img { height: 46px !important; }
  .nav-phone {
    font-size: 21px !important;
    font-weight: 700 !important;
  }
  .nav-phone svg {
    width: 17px !important;
    height: 17px !important;
  }

  /* Mobile footer */
  .footer-col a,
  .footer-brand p,
  .footer-brand-addr {
    font-size: 16px !important;
  }
  .footer-col-title { font-size: 13px !important; }
  .footer-brand-phone { font-size: 24px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   FINAL SIZE FLOOR (added 2026-08-02)
   ───────────────────────────────────────────────────────────────
   The rules above target bare elements (h1, p …). Page-level CSS
   styles by CLASS (.hero h1, .step-card p), and a class selector
   beats an element selector no matter which sheet loads last — so
   headlines stayed at 28px and card copy at 13px while unclassed
   text got fixed. These rules use !important to set a real floor.

   Scale: h1 46 / h2 34 / h3 22 · body + card copy 17 · labels 13 min.
   Reversible: delete this block and the site returns to as-was.
═══════════════════════════════════════════════════════════════ */

/* ── Headings ── */
h1, .hero h1, .hero-title, .s2-banner h1, .war-hero h1 {
  font-size: 46px !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
}
h2, .section-title, .hero-form-title {
  font-size: 34px !important;
  line-height: 1.15 !important;
}
h3 { font-size: 22px !important; line-height: 1.25 !important; }
h4 { font-size: 19px !important; line-height: 1.3 !important; }

/* ── Body + card copy: 17px floor on the text people actually read ── */
p, li,
.step-card p, .benefit-card p, .why-card p, .card p,
.plan-card-desc, .hero-form-sub, .section-sub, .sub,
.war-cov-item p, .legal-wrap p, .legal-wrap li,
.bv-custom-note p, .ghl-placeholder p, .footer-brand p {
  font-size: 17px !important;
  line-height: 1.6 !important;
}

/* ── Small print: never below 13px ── */
.nav-cta, .footer-copyright, .footer-col-title, .footer-brand-addr,
.testimonial-owner, .testimonial-meta-item, .step-label, .eyebrow,
.section-eyebrow, .card-eyebrow, .proof-stat-label, .form-status,
.effective, .price, .price-pill, .city, .hero-trust-badge,
.s2-step, .bv-custom-cta, .hero-form-consent, .consent {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* ── Footer + nav links stay comfortably tappable ── */
.footer-col a, .footer-legal-links a { font-size: 16px !important; }

/* ═══ COMPONENT PASS ═══════════════════════════════════════════════════════
   The first floor above only caught generic tags (p, li, .card p). Most of the
   text on the pages people actually browse — the quick-move-in cards, the
   county cards, the floor-plan specs, the form labels — is rendered through
   named component classes, so it stayed at 10–14px and the site still read
   small. Measured live and floored here by role.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Card copy + spec/meta text people read to make a decision → 16px */
.qmi-card-plan, .qmi-card-county, .qmi-card-price, .qmi-card-addr, .qmi-photo-hint,
.comm-card-cities, .comm-card-name, .comm-spec, .comm-card-price,
.fpb-spec-val, .fpb-card-sqft, .fpb-card-name, .fpb-card-price,
.byol-plan-specs, .byol-plan-name, .byol-plan-price,
.plan-card-meta, .plan-card-price, .plan-spec, .card-meta,
.faq-q, .faq-a, .county-chip-name, .county-chip-from,
.p1-list-meta, .p2-hero-sub, .comm-card-desc {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* Form labels and choices — small labels are where forms lose people → 16px */
.field-label, .radio-card, .radio-card span, .form-label, .input-label,
.checkbox-row, .checkbox-row label, .select-label {
  font-size: 16px !important;
  line-height: 1.45 !important;
}

/* Buttons stay tappable and legible → 15px */
.btn-view, .btn-tour, .fpb-btn-primary, .fpb-btn-tour, .fpb-btn,
.byol-plan-cta, .comm-card-cta, .qmi-card-cta, .card-btn {
  font-size: 15px !important;
  letter-spacing: .02em !important;
}

/* Uppercase micro-labels and status chips are decorative — keep them small,
   but never below 12px, where they stop being readable at all. */
.qmi-card-status, .comm-card-region, .fpb-spec-label, .status-chip, .badge,
.card-tag, .county-tag {
  font-size: 12px !important;
}

/* ── Mobile: scale headlines down so they don't overflow ── */
@media (max-width: 768px) {
  h1, .hero h1, .hero-title, .s2-banner h1, .war-hero h1 {
    font-size: 32px !important;
  }
  h2, .section-title, .hero-form-title { font-size: 26px !important; }
  h3 { font-size: 20px !important; }
}
@media (max-width: 420px) {
  h1, .hero h1, .hero-title, .s2-banner h1, .war-hero h1 {
    font-size: 28px !important;
  }
  h2, .section-title, .hero-form-title { font-size: 23px !important; }
}


/* ── Second sweep: measured after the component pass ─────────────────────────
   Form labels with no class at all (the contact form was rendering at 11px),
   FAQ answer text, and the remaining 11px micro-labels. */

/* Anything a person reads to answer a question or fill in a field → 16px */
form label, label, .faq-a-inner, .faq-a-inner p, .faq-answer,
.lender-cta, .lender-name, .pd-tab-content, .pd-body {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* Secondary buttons and tab controls → 15px */
.plan-btn, .pd-tab, .lender-cta, .qmi-card-cta, .tab-btn {
  font-size: 15px !important;
}

/* Remaining uppercase micro-labels: 12px hard floor, never 10 or 11 */
.plan-spec-label, .stat-label, .fp-stat-label, .qmi-photo-badge,
.byol-plan-style, .lender-tag, .spec-label, .stat-caption {
  font-size: 12px !important;
}

/* Last of the 10–11px uppercase section/box labels found by measurement. */
.fpb-card-badge, .pd-contact-title, .pd-sb-title, .contact-box-title,
.byol-stat-label, .byol-capture-eyebrow, .step-divider, .proof-market {
  font-size: 12px !important;
}

/* Realtors page: stat labels and the link chips (those are real links, so 15px). */
.realtor-hero-stat-label { font-size: 12px !important; }
a.tag { font-size: 15px !important; }

/* Hero stat captions (all landing + service pages). */
.hero-stat-label { font-size: 12px !important; letter-spacing: .06em !important; }

/* ═══════════════════════════════════════════════════════════════
   Toll-style refresh (Chris 10/12: "looks like AI slop").
   Reference: tollbrothers.com uses a light refined serif for headings
   (Domaine), a clean geometric sans set light (Gotham), deep navy text,
   small blue-gray uppercase labels, and ONE blue for anything you can
   click. Domaine and Gotham are licensed, so: Newsreader + Montserrat.
   This block is the site-wide backstop; page templates were also moved
   to these families so regeneration keeps them.
═══════════════════════════════════════════════════════════════ */
:root {
  --serif: 'Newsreader', Georgia, serif !important;
  --sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
  --action: #0070CD;
  --action-dark: #005BA6;
  --label: #6E8494;
}
body { font-family: var(--sans); }
h1, h2, h3 { font-weight: 400; letter-spacing: -0.005em; }
h4, h5 { font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
p, li, dd, blockquote { font-weight: 400; }

/* Labels: small, uppercase, blue-gray. No gold, no stars. */
.section-eyebrow, .eyebrow, .card-eyebrow, .footer-col-title {
  font-family: var(--sans) !important; font-weight: 600 !important; letter-spacing: .14em !important;
}
.section-eyebrow, .card-eyebrow { color: var(--label) !important; }
.hero .eyebrow, .cta-band .section-eyebrow { color: #A9BCC9 !important; }

/* Anything you can click to act: one solid blue, slight rounding. */
.btn-primary, .btn-gold, .nav-cta, .mobile-nav-cta button, .hero-form-btn, .submit-btn, .form-btn,
.cta-strip-btn, .hero-cta-btn, .final-cta, .byol-plan-cta, .btn-view, .btn-tour, .fpb-btn-tour,
.bv-form button[type="submit"], form button[type="submit"]:not(.btn-outline) {
  background: var(--action) !important; border-color: var(--action) !important; color: #fff !important;
  border-radius: 4px !important; font-family: var(--sans) !important; font-weight: 600 !important;
  letter-spacing: .01em !important; text-transform: none !important; box-shadow: none !important;
  transition: background-color .15s ease, border-color .15s ease !important;
}
.btn-primary:hover, .btn-gold:hover, .nav-cta:hover, .mobile-nav-cta button:hover, .hero-form-btn:hover, .submit-btn:hover,
.form-btn:hover, .cta-strip-btn:hover, .hero-cta-btn:hover, .final-cta:hover, .byol-plan-cta:hover, .btn-view:hover,
.btn-tour:hover, .fpb-btn-tour:hover, .bv-form button[type="submit"]:hover, form button[type="submit"]:not(.btn-outline):hover {
  background: var(--action-dark) !important; border-color: var(--action-dark) !important; color: #fff !important;
}
.btn-outline { color: var(--action); border-color: var(--action); border-radius: 4px; font-family: var(--sans); font-weight: 600; }
.btn-outline:hover { background: var(--action); border-color: var(--action); color: #fff; }
.cta-band .btn-outline, .hero .btn-outline { color: #fff; border-color: rgba(255,255,255,.7); }
.cta-band .btn-outline:hover, .hero .btn-outline:hover { background: #fff; color: var(--navy, #1E3A52); border-color: #fff; }
:is(.btn-primary, .btn-outline, .nav-cta, .btn-gold, button[type="submit"]):focus-visible { outline: 3px solid #8CC4F2 !important; outline-offset: 2px !important; }

/* Inline text links inside reading copy read as links: blue, underlined. */
main p a:not(.btn):not([class*="btn"]), main li a:not(.btn):not([class*="btn"]):not(.tag):not(.keys) {
  color: var(--action); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
main p a:not(.btn):hover, main li a:not(.btn):hover { color: var(--action-dark); }

/* Lighter, Toll-like weights. These restate earlier !important rules on
   purpose (same importance, later wins): serif headlines read best at 400,
   and the nav reads calmer at 500 than 600. */
h1, .hero h1, .hero-title, .s2-banner h1, .war-hero h1 { font-weight: 400 !important; }
h2 { font-weight: 400; }
.nav-links a, .mobile-nav-links a { font-weight: 500 !important; }

/* Page-specific action buttons and labels that use their own class names. */
.btn-qmi, .btn-lot-inquire, .btn-all {
  background: var(--action) !important; border-color: var(--action) !important; color: #fff !important;
  border-radius: 4px !important; font-family: var(--sans) !important; font-weight: 600 !important; box-shadow: none !important;
}
.btn-qmi:hover, .btn-lot-inquire:hover, .btn-all:hover { background: var(--action-dark) !important; border-color: var(--action-dark) !important; }
.btn-hero-outline, .btn-lot-view { border-radius: 4px !important; font-family: var(--sans) !important; font-weight: 600 !important; }
[class*="eyebrow"] { font-family: var(--sans) !important; font-weight: 600 !important; letter-spacing: .14em !important; }
.byol-eyebrow, .pd-section-eyebrow, .qmi-eyebrow, .qmi-modal-eyebrow, .info-modal-eyebrow { color: var(--label) !important; }
.hero-eyebrow, .viewer-eyebrow { color: #D5E1EA !important; }