/* B Realtors - community page styles.
 * Migrated from WPCode snippet #201 (database) to file, 2026-07-21.
 * Legacy class prefix renamed to br-comm-. Listing-card selectors
 * (br-lcard / br-lgrid) intentionally unchanged - they are emitted
 * by br-spark.php and br-dual-listings.php and are out of scope here.
 */

/* ═══════════════════════════════════════════════════════════════════════
   B Realtors — Community Pages CSS  |  v2.0  |  Editorial redesign (listings-at-top)
   ───────────────────────────────────────────────────────────────────────
   WPCode settings:  Code type: CSS · Auto insert: Run Everywhere · #201
   Scope: body.br-community-page — zero bleed to any other page type.
   Owner: this snippet only. Engine components (.br-lcard listings, .br-hist
   market history) self-style; this file styles the template shell (.br-comm-*)
   and the profile engine sections (.br-prof__*).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
body.br-community-page {
  --navy:    #0a1628;
  --navy-m:  #0d1f3c;
  --gold:    #c9a84c;
  --gold-dk: #8a6f22;
  --cream:   #f5f0e8;
  --light:   #f8f8f6;
  --white:   #ffffff;
  --line:    #e7e2d8;
  --text:    #2b2b2b;
  --muted:   #6b6b6b;
  --serif:   Georgia, 'Times New Roman', serif;
  --wrap:    1180px;
}

/* ── 2. FULL-WIDTH RESET (remove theme sidebar + container constraints) ─── */
body.br-community-page #secondary,
body.br-community-page .widget-area { display: none !important; }
body.br-community-page #primary,
body.br-community-page .content-area {
  width: 100% !important; max-width: 100% !important; float: none !important; padding: 0 !important;
}
body.br-community-page .entry-content,
body.br-community-page .site-content,
body.br-community-page #content,
body.br-community-page .site-main,
body.br-community-page article.page {
  width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important;
}
body.br-community-page .inside-article { padding: 0 !important; }
/* Hero owns the H1 — hide theme-generated title. */
body.br-community-page .entry-header,
body.br-community-page .entry-title,
body.br-community-page h1.main-title,
body.br-community-page .title-header { display: none !important; }

/* ── 3. SHELL ──────────────────────────────────────────────────────────── */
body.br-community-page .br-comm-root { color: var(--text); font-size: 16px; line-height: 1.65; }
.br-comm-root *, .br-comm-root *::before, .br-comm-root *::after { box-sizing: border-box; }
.br-comm-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.br-comm-section { padding: 64px 0; }
.br-comm-section-alt { background: var(--light); }
.br-comm-h2 { font-family: var(--serif); font-size: 1.9rem; font-weight: 400; color: var(--navy); margin: 0 0 14px; letter-spacing: .2px; }
.br-comm-h2-center { text-align: center; }
.br-comm-h2-invert { color: var(--white); }
.br-comm-rule { width: 64px; height: 3px; background: var(--gold); border-radius: 2px; margin: 0 0 26px; }
.br-comm-rule-center { margin-left: auto; margin-right: auto; }
.br-comm-prose { font-size: 1.02rem; color: #3a3a3a; }
.br-comm-prose p { margin: 0 0 1em; }

/* ── 4. BUTTONS ────────────────────────────────────────────────────────── */
.br-comm-btn { display: inline-block; font-size: .84rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; padding: 13px 26px; border-radius: 3px; text-decoration: none; transition: all .18s ease; cursor: pointer; }
.br-comm-btn-gold { background: var(--gold); color: var(--navy) !important; }
.br-comm-btn-gold:hover { background: var(--gold-dk); }
.br-comm-btn-outline { background: transparent; color: var(--white) !important; border: 1px solid rgba(255,255,255,.7); }
.br-comm-btn-outline:hover { background: rgba(255,255,255,.12); }
.br-comm-btn-navy { background: var(--navy); color: var(--white) !important; }
.br-comm-btn-block { display: block; text-align: center; }

/* ── 5. HERO ───────────────────────────────────────────────────────────── */
.br-comm-hero { width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); position: relative; min-height: clamp(320px, 62svh, 620px); display: flex; align-items: flex-end;
  background-size: cover; background-position: center; color: var(--white); }
/* 2026-08-14: the note above says the clamp floor handles landscape phones. Measured, it
   does not quite -- it improved matters without finishing them. At a 360px landscape fold
   the 320px floor still occupies 89% of the viewport, because a fixed px floor cannot know
   how tall the fold is. Same root cause as F6 on .br-hero--img (br-hubs.php), which was
   100%; fixing only the one the audit named would have left all 197 community pages at 89%.
   In landscape the floor is dropped so the ideal 62svh can actually apply. */
@media(orientation:landscape) and (max-height:520px){ .br-comm-hero { min-height: 62svh; } }
.br-comm-hero-scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,15,26,.25) 0%, rgba(6,15,26,.35) 45%, rgba(6,15,26,.82) 100%); }
.br-comm-hero-inner { position: relative; z-index: 2; max-width: var(--wrap); width: 100%; margin: 0 auto; padding: 0 24px 56px; }
.br-comm-crumbs { font-size: .82rem; letter-spacing: .02em; margin-bottom: 18px; opacity: .92; }
.br-comm-crumbs a { color: rgba(255,255,255,.85); text-decoration: none; }
.br-comm-crumbs a:hover { color: var(--gold); }
.br-comm-crumbs span { margin: 0 8px; opacity: .6; }
.br-comm-crumb-here { opacity: .8; }
.br-comm-hero-title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.02; margin: 0 0 8px; color: var(--white); text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.br-comm-hero-locale { font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.br-comm-hero-desc { font-size: 1.12rem; max-width: 640px; line-height: 1.55; margin: 0 0 26px; color: rgba(255,255,255,.94); }
.br-comm-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── 6. STAT BAR ───────────────────────────────────────────────────────── */
.br-comm-statbar { background: var(--white); box-shadow: 0 10px 40px rgba(10,22,40,.10);
  position: relative; z-index: 3; max-width: var(--wrap); margin: -42px auto 0; border-radius: 6px; }
.br-comm-statbar-inner { display: flex; flex-wrap: wrap; }
.br-comm-stat { flex: 1 1 0; min-width: 120px; text-align: center; padding: 22px 12px;
  border-right: 1px solid var(--line); }
.br-comm-stat:last-child { border-right: 0; }
.br-comm-stat-lbl { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.br-comm-stat-num { font-family: var(--serif); font-size: 1.5rem; color: var(--navy); line-height: 1; }

/* ── 7. STICKY SUB-NAV ─────────────────────────────────────────────────── */
.br-comm-subnav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.97);
  backdrop-filter: saturate(1.4) blur(6px); border-bottom: 1px solid var(--line); margin-top: 40px; }
.br-comm-subnav-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; display: flex; gap: 30px; overflow-x: auto; }
.br-comm-subnav-link { flex: none; padding: 16px 0; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; white-space: nowrap; }
.br-comm-subnav-link:hover { color: var(--navy); }
.br-comm-subnav-link.is-active { color: var(--navy); border-bottom-color: var(--gold); }
.br-comm-subnav-inner::-webkit-scrollbar { height: 0; }

/* ── 8. LISTINGS (engine markup: .br-lgrid / .br-lcard) ────────────── */
.br-comm-section-listings { padding-top: 52px; }
.br-comm-root .br-strip { margin: 0 0 44px; }
.br-comm-root .br-strip:last-child { margin-bottom: 0; }
.br-comm-root .br-lgrid__head { margin-bottom: 20px; }
.br-comm-root .br-lgrid__h2 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; color: var(--navy); margin: 0; }
.br-comm-root .br-snapshot { font-size: .92rem; color: var(--muted); margin: 6px 0 0; }
.br-comm-root .br-snapshot strong { color: var(--navy); }
.br-comm-root .br-lgrid__grid {
  display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.br-comm-root .br-lcard {
  background: var(--white); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease;
}
.br-comm-root .br-lcard:hover { box-shadow: 0 14px 34px rgba(10,22,40,.14); transform: translateY(-3px); }
.br-comm-root .br-lcard__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--light); }
.br-comm-root .br-lcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.br-comm-root .br-status {
  position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 12px; border-radius: 3px;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #fff; background: var(--navy);
}
.br-comm-root .br-status--sale  { background: var(--navy); }
.br-comm-root .br-status--lease { background: #2f6b4f; }
.br-comm-root .br-status--sold  { background: #7a2f2f; }
.br-comm-root .br-lcard__heart {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.92); cursor: pointer; font-size: .9rem; line-height: 34px; color: var(--navy);
}
.br-comm-root .br-lcard__link { text-decoration: none; color: inherit; display: block; }
.br-comm-root .br-lcard__body { padding: 16px 18px 18px; }
.br-comm-root .br-lcard__price { font-family: var(--serif); font-size: 1.35rem; color: var(--navy); line-height: 1.1; }
.br-comm-root .br-lcard__meta { font-size: .9rem; color: var(--text); margin: 4px 0 8px; }
.br-comm-root .br-lcard__bldg { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: 8px; }
.br-comm-root .br-lcard__blurb { font-size: .86rem; color: var(--muted); line-height: 1.5; margin: 0 0 10px; }
.br-comm-root .br-lcard__attr { font-size: .72rem; color: #767676; }
.br-comm-root .br-lgrid__disc { font-size: .74rem; color: #767676; margin-top: 16px; }
.br-comm-root .br-lgrid__empty, .br-comm-root .br-empty { color: var(--muted); font-size: .95rem; padding: 8px 0; }
@media (max-width: 900px) { .br-comm-root .br-lgrid__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 560px) { .br-comm-root .br-lgrid__grid { grid-template-columns: 1fr; } }

/* ── 9. OVERVIEW ───────────────────────────────────────────────────────── */
.br-comm-overview-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 48px; align-items: start; }
.br-comm-overview-side { display: flex; flex-direction: column; gap: 22px; }
.br-comm-snapshot { border: 1px solid var(--line); border-radius: 6px; background: var(--white); padding: 24px 26px; }
.br-comm-snapshot-ttl { font-family: var(--serif); font-size: 1.2rem; color: var(--navy); margin: 0 0 14px; }
.br-comm-snapshot-list { margin: 0; }
.br-comm-snap-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.br-comm-snap-row:last-child { border-bottom: 0; }
.br-comm-snap-row dt { color: var(--muted); margin: 0; }
.br-comm-snap-row dd { margin: 0; color: var(--navy); font-weight: 600; text-align: right; }
.br-comm-snapshot-photo img { width: 100%; height: auto; border-radius: 6px; display: block; }
.br-comm-cta-card { background: var(--navy); color: var(--white); border-radius: 6px; padding: 26px; }
.br-comm-cta-card-eyebrow { font-family: var(--serif); font-size: 1.15rem; color: var(--gold); margin-bottom: 8px; }
.br-comm-cta-card p { font-size: .95rem; color: rgba(255,255,255,.85); margin: 0 0 18px; }

/* ── 10. MARKET & HISTORY ──────────────────────────────────────────────── */
.br-comm-market-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 34px; }
.br-comm-mcard { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--gold);
  border-radius: 6px; padding: 24px; text-align: center; }
.br-comm-mcard-eyebrow { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.br-comm-mcard-sub { font-size: .8rem; color: var(--muted); margin-bottom: 12px; }
.br-comm-mcard-big { font-family: var(--serif); font-size: 2.4rem; color: var(--navy); line-height: 1; }
.br-comm-mcard-cap { font-size: .82rem; color: var(--muted); margin: 6px 0 14px; }
.br-comm-mcard-row { display: flex; justify-content: space-between; font-size: .9rem; padding: 6px 0; border-top: 1px solid var(--line); }
.br-comm-mcard-row span:last-child { color: var(--navy); font-weight: 600; }

/* ── 11. LOCATION ──────────────────────────────────────────────────────── */
.br-comm-location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.br-comm-map-frame { position: relative; padding-bottom: 66%; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.br-comm-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.br-comm-map-addr { font-size: .9rem; color: var(--muted); margin-top: 10px; }

/* ── 12. PROFILE ENGINE SECTIONS (.br-prof__*) ─────────────────────────── */
.br-comm-root .br-prof { margin: 0 0 30px; }
.br-comm-root .br-prof:last-child { margin-bottom: 0; }
.br-comm-root .br-prof__h2 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--navy); margin: 0 0 6px; }
.br-comm-root .br-prof__head { margin-bottom: 14px; border-bottom: 2px solid var(--gold); display: inline-block; padding-bottom: 4px; }
.br-comm-root .br-prof__prose { font-size: 1rem; color: #3a3a3a; }
.br-comm-root .br-prof__prose p { margin: 0 0 1em; }
.br-comm-root .br-prof__tablewrap { overflow-x: auto; }
.br-comm-root .br-prof__table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.br-comm-root .br-prof__table th, .br-comm-root .br-prof__table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.br-comm-root .br-prof__table thead th { background: var(--navy); color: var(--white); font-weight: 600; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
.br-comm-root .br-prof__table tbody tr:nth-child(even) { background: var(--light); }
.br-comm-root .br-prof__muted { font-size: .82rem; color: var(--muted); margin-top: 10px; }
.br-comm-nearby-slot .br-prof { margin-bottom: 0; }
.br-comm-overview-main .br-prof--intro { margin: 0; }

/* Amenities — lay the engine's category groups out horizontally as styled columns. */
.br-comm-root .br-prof__amengrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px 40px;
}
.br-comm-root .br-prof__amencat h3 {
  font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--navy);
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.br-comm-root .br-prof__amencat ul { list-style: none; margin: 0; padding: 0; }
.br-comm-root .br-prof__amencat li { position: relative; padding: 5px 0 5px 22px; font-size: .95rem; }
.br-comm-root .br-prof__amencat li::before { content: '\2713'; position: absolute; left: 0; color: var(--gold); font-weight: 700; }

/* Merged Schools block inside the Location section. */
.br-comm-schools-slot { margin-top: 36px; }
.br-comm-schools-slot .br-prof { margin: 0; }
@media (max-width: 560px) { .br-comm-root .br-prof__amengrid { grid-template-columns: 1fr; gap: 22px; } }

/* ── 12b. AMENITIES FALLBACK LIST ──────────────────────────────────────── */
.br-comm-amen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.br-comm-amen-h3 { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: var(--navy); margin: 0 0 12px; }
.br-comm-amen-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
.br-comm-amen-list li { position: relative; padding: 6px 0 6px 22px; font-size: .95rem; break-inside: avoid; }
.br-comm-amen-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
@media (max-width: 900px) { .br-comm-amen-grid { grid-template-columns: 1fr; gap: 24px; } .br-comm-amen-list { columns: 1; } }

/* ── 13. CTA BAND ──────────────────────────────────────────────────────── */
.br-comm-cta-band { background: var(--navy); color: var(--white); text-align: center; }
.br-comm-cta-band-head { max-width: 640px; margin: 0 auto 30px; }
.br-comm-cta-band-sub { font-size: 1.05rem; color: rgba(255,255,255,.82); margin: 0; }
.br-comm-cta-band a { color: var(--gold); }

/* ── 14. RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .br-comm-overview-grid, .br-comm-location-grid { grid-template-columns: 1fr; gap: 30px; }
  .br-comm-market-cards { grid-template-columns: 1fr; }
  .br-comm-statbar { margin-top: -30px; }
  .br-comm-stat { flex-basis: 33.33%; border-bottom: 1px solid var(--line); }
  .br-comm-section { padding: 46px 0; }
}
@media (max-width: 520px) {
  .br-comm-stat { flex-basis: 50%; }
  .br-comm-hero-btns { flex-direction: column; }
  .br-comm-btn { text-align: center; }
}


/* ── City (market) archive: intro + grid spacing ─────────────────────────── */
.br-city__intro{max-width:820px;margin:2.5rem auto 0;padding:0 1rem}
.br-city__intro p{font:400 1.075rem/1.72 Georgia,serif;color:var(--br-ink,#26333f);margin:0 0 1.15rem}
.br-city__intro p:last-child{margin-bottom:0}
.br-city__grid{margin-top:2.5rem}

/* Full-bleed heroes use 100vw, which includes the scrollbar gutter. clip (not hidden)
   suppresses the resulting sideways scroll without disabling position:sticky. */
html{overflow-x:clip}

/* BeachesMLS source mark, IDX Rules v10-19-23 s20.3.6. Held small deliberately:
   s20.3.11 presumes co-branding is not misleading only where our own mark is larger. */
.br-lcard__img{position:relative}
.br-bmls{position:absolute;right:.45rem;bottom:.45rem;width:66px;max-width:38%;height:auto;z-index:3;
  pointer-events:none;background:rgba(255,255,255,.86);padding:.18rem .3rem;border-radius:3px}
@media(max-width:600px){.br-bmls{width:56px}}