/* BuyInvestSellProsper -- base styles. Colors come from CSS variables set
   by inc/customizer.php (--bisp-primary etc.) so the Customizer color
   pickers control the whole site without touching this file. */

:root {
	--bisp-primary: #24344D;
	--bisp-secondary: #1D2B3F;
	--bisp-accent: #D6BD8E;
	--bisp-background: #F8F6F1;
	--bisp-surface: #FFFFFF;
	--bisp-text: #221E1A;
	--bisp-footer-bg: #34383D;
	--bisp-radius: 14px;
	--bisp-max-width: 1200px;
	--bisp-font-heading: Georgia, 'Times New Roman', serif;
	--bisp-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Defensive reset -- without this, any <img> that isn't covered by a more
   specific sizing rule below renders at its native pixel dimensions
   (ignoring its actual container width), which either overflows a card or
   gets clipped/stretched-looking depending on the card's overflow
   handling. */
img { max-width: 100%; height: auto; }

body {
	margin: 0;
	background: var(--bisp-background);
	color: var(--bisp-text);
	font-family: var(--bisp-font-body);
	line-height: 1.6;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; }
h4 { font-family: var(--bisp-font-heading); }

/* "Titles" (h1 page titles + h3 card/post titles) and "Headings" (h2
   section headings) are independently controllable from Customize >
   BISP Typography. h1 keeps its own responsive clamp() size (set where
   each hero renders) -- only h3 picks up the Titles size control, since
   forcing a page title and a small card title to the same explicit
   pixel size would wreck the normal big/small hierarchy between them. */
h1, h3 { font-family: var(--bisp-font-title); font-weight: var(--bisp-weight-title); }
h3 { font-size: var(--bisp-size-title); }
h2 { font-family: var(--bisp-font-heading2); font-weight: var(--bisp-weight-heading2); font-size: var(--bisp-size-heading2); }

a { color: var(--bisp-primary); }

.bisp-container { max-width: var(--bisp-max-width); margin: 0 auto; padding: 0 24px; }

.screen-reader-text { position: absolute; left: -9999px; }

/* ---- Header ----
   Starts semi-transparent with a frosted-glass blur; once the page is
   scrolled a bit, JS (main.js) adds .is-scrolled and it solidifies to a
   fully opaque bar with a soft shadow -- easier to read once page content
   is scrolling underneath it. */
.bisp-site-header { background: rgba(255,255,255,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,.06); position: sticky; top: 0; z-index: 100; transition: background-color .25s ease, box-shadow .25s ease; }
.bisp-site-header.is-scrolled { background: var(--bisp-surface); box-shadow: 0 2px 14px rgba(0,0,0,.08); }
.bisp-site-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; }
.bisp-branding { display: flex; align-items: center; }
.bisp-branding img, .bisp-branding .custom-logo { height: 42px; width: auto; max-width: 220px; object-fit: contain; }
.bisp-site-title { font-family: var(--bisp-font-heading); font-size: 1.5rem; font-weight: bold; text-decoration: none; color: var(--bisp-secondary); }
/* .bisp-nav-fallback is what prints when no menu is assigned yet under
   Appearance > Menus -- it needs the exact same treatment as the real
   menu (.bisp-nav-menu) so it never falls back to the browser's default
   bulleted list. */
.bisp-nav-menu, .bisp-nav-fallback { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 32px; margin: 0; padding: 0; font-family: var(--bisp-font-body); }
.bisp-nav-menu a, .bisp-nav-fallback a { position: relative; display: inline-block; text-decoration: none; color: var(--bisp-text); font-weight: 600; font-size: .95rem; letter-spacing: .01em; padding: 6px 0; transition: color .2s ease; }
.bisp-nav-menu a:hover, .bisp-nav-fallback a:hover { color: var(--bisp-primary); }
.bisp-nav-menu a:after, .bisp-nav-fallback a:after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--bisp-accent); transition: width .25s ease; }
.bisp-nav-menu a:hover:after, .bisp-nav-fallback a:hover:after { width: 100%; }
.bisp-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.bisp-nav-toggle-bar { display: block; width: 24px; height: 2px; background: var(--bisp-text); margin: 5px 0; }
.bisp-mobile-nav { display: none; background: var(--bisp-surface); padding: 12px 24px; }
.bisp-mobile-nav.is-open { display: block; }
.bisp-mobile-nav .bisp-nav-menu, .bisp-mobile-nav .bisp-nav-fallback { flex-direction: column; align-items: flex-start; gap: 14px; }

@media (max-width: 820px) {
	.bisp-primary-nav { display: none; }
	.bisp-nav-toggle { display: block; }
}

/* ---- Hero ---- */
.bisp-hero { position: relative; background: linear-gradient(135deg, var(--bisp-secondary), var(--bisp-primary)); color: #fff; padding: 96px 0; text-align: center; overflow: hidden; }
.bisp-hero.has-photo { background-color: var(--bisp-secondary); }
.bisp-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,30,45,.55), rgba(20,30,45,.7)); }
.bisp-hero-inner { position: relative; z-index: 1; }
.bisp-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.bisp-hero-subtitle { font-size: 1.15rem; opacity: .92; max-width: 640px; margin: 0 auto; }

/* Front-page hero when a Homepage Slideshow is running above it (see
   .bisp-hero-slideshow below): a plain, light title block for whenever
   this page actually has a title to show or an excerpt set (see
   $show_hero_header in inc/curated-homepage.php) -- most of the time
   neither is true (front page title is just "Home", no excerpt), so this
   whole header is skipped and the search band right below starts
   immediately under the slideshow instead. */
.bisp-front-hero--plain { background: var(--bisp-surface); color: var(--bisp-text); padding: 48px 0 56px; }
.bisp-front-hero--plain h1 { color: var(--bisp-text); }
.bisp-front-hero--plain .bisp-hero-subtitle { color: var(--bisp-text); opacity: .72; }

/* Homepage hero slideshow -- full-bleed, auto-rotating photo banner across
   the very top of the front page, above the title/search block. Photos
   come from the "Homepage Slideshow" meta box (inc/meta-boxes.php);
   rendering is skipped entirely when none are set (see
   inc/curated-homepage.php), so the section never shows empty. */
.bisp-hero-slideshow { position: relative; width: 100%; height: min(72vh, 640px); min-height: 420px; overflow: hidden; background: var(--bisp-secondary); }
.bisp-hero-slideshow__track { position: relative; width: 100%; height: 100%; }
.bisp-hero-slideshow__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.1s ease; }
.bisp-hero-slideshow__slide.is-active { opacity: 1; z-index: 1; }

/* Neighborhood highlight slides -- these are real links ("Explore
   {neighborhood}"), unlike the plain photo-bank slides above, so they get
   a bottom gradient scrim + caption text for legibility. */
a.bisp-hero-slideshow__slide { display: block; text-decoration: none; }
.bisp-hero-slideshow__slide--link::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, rgba(10,14,20,.62) 0%, rgba(10,14,20,0) 42%); pointer-events: none; }
.bisp-hero-slideshow__caption { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 54px; color: #fff; font-size: clamp(1.15rem, 2.6vw, 1.7rem); font-weight: 600; text-shadow: 0 2px 10px rgba(0,0,0,.4); text-align: center; }
/* "Explore" and the neighborhood name each get their own font (Customize
   > BISP Typography), so they're set here individually rather than once
   on .bisp-hero-slideshow__caption above. A space between the two spans
   in the markup keeps them visually separated when the fonts differ. */
.bisp-hero-slideshow__caption-label { font-family: var(--bisp-font-slideshow-label); }
.bisp-hero-slideshow__caption-name { font-family: var(--bisp-font-slideshow-name); }
.bisp-hero-slideshow__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,.28); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .2s ease; }
.bisp-hero-slideshow__arrow:hover { background: rgba(255,255,255,.45); }
.bisp-hero-slideshow__arrow--prev { left: 20px; }
.bisp-hero-slideshow__arrow--next { right: 20px; }
.bisp-hero-slideshow__dots { position: absolute; z-index: 2; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 9px; }
.bisp-hero-slideshow__dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.bisp-hero-slideshow__dot.is-active { background: #fff; transform: scale(1.25); }
@media (max-width: 640px) {
	.bisp-hero-slideshow { height: 56vh; min-height: 340px; }
	.bisp-hero-slideshow__arrow { width: 36px; height: 36px; font-size: 20px; }
}

/* ---- Front page search ----
   Its own colored band (Customize > BISP Brand Colors > "Front page
   search section background"), with the same pill-field + rounded-orange-
   button-with-shadow look as the neighborhood pages' search bar
   (.bisp-idx-searchbar etc. -- shared rules further down), just reused
   here as a real, functional site-search form instead of a static
   pre-filled link. */
.bisp-front-search-section { background: var(--bisp-search-band-bg); padding: 48px 0 56px; text-align: center; }
.bisp-front-search-section .bisp-section-title h2 { color: #fff; }
.bisp-front-search-section .bisp-section-title .bisp-post-meta { color: #fff; opacity: .75; }
.bisp-front-search-section .bisp-idx-searchbar { max-width: 640px; margin: 0 auto; }
/* Front page only -- its own brighter orange + uppercase CTA, distinct
   from the neighborhood pages' search button. */
.bisp-front-search-section .bisp-idx-searchbar .bisp-idx-quicksearch-btn {
	background: #ff6200;
	border-radius: 999px;
	box-shadow: 0 8px 10px rgba(119, 63, 63, 0.45);
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
	text-transform: uppercase;
}

/* The site's own real search (?s=) -- unlike the neighborhood pages'
   IDX stand-in, .bisp-idx-searchbar-field is a genuine <input> here, so
   it needs its own reset on top of the shared pill styling (no default
   browser border/outline/appearance breaking the pill shape). */
.bisp-site-searchbar-input {
	border: none;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
}
.bisp-site-searchbar-input::placeholder { color: rgba(0,0,0,.45); }
.bisp-idx-searchbar-field.bisp-site-searchbar-input:focus-visible {
	box-shadow: 0 0 0 3px rgba(0,0,0,.12);
}
.bisp-search-again { max-width: 640px; margin: 32px auto; }
.bisp-search-result-card { display: block; text-decoration: none; color: inherit; }
.bisp-search-result-card .bisp-entry-summary p { margin: 8px 0 0; color: var(--bisp-text); opacity: .8; }

/* Excerpts -- Customize > BISP Typography controls font, weight, and size
   for every card excerpt on the site (neighborhood cards, review cards,
   blog/post cards), so they always match regardless of which card type
   they show up on. */
.bisp-review-card p, .bisp-post-card-body p, .bisp-entry-summary, .bisp-entry-summary p, .bisp-neighborhood-card-excerpt {
	font-family: var(--bisp-font-excerpt);
	font-weight: var(--bisp-weight-excerpt);
	font-size: var(--bisp-size-excerpt);
}

/* Labels -- Customize > BISP Typography controls font, weight, and size
   for the small uppercase "eyebrow" tags above card titles: county/region
   (.bisp-neighborhood-card-region, .bisp-review-area) and Eclectic Kim
   category (.bisp-review-category). Colors stay distinct per type (set
   where each is individually defined below) -- only font/weight/size are
   shared here. */
.bisp-neighborhood-card-region, .bisp-review-area, .bisp-review-category {
	font-family: var(--bisp-font-label);
	font-weight: var(--bisp-weight-label);
	font-size: var(--bisp-size-label);
}

/* ---- Cards / grids ---- */
.bisp-card { background: var(--bisp-surface); border-radius: var(--bisp-radius); padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.bisp-post-grid, .bisp-review-grid, .bisp-listing-grid, .bisp-sale-grid, .bisp-contractor-grid, .bisp-neighborhood-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; margin: 32px 0;
}
/* Front page only ("Welcome Home to...", "On Market + Insights",
   "Kimberly's Local Insights") -- a guaranteed 4-across on desktop
   instead of however many auto-fill happens to fit, reflowing down at
   narrower widths. Added alongside (not instead of) the shared grid
   classes above, so nothing else using those classes elsewhere is
   affected. */
.bisp-front-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
	.bisp-front-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.bisp-front-grid-4 { grid-template-columns: 1fr; }
	/* Reviews specifically: 4 cards are in the page either way, but only
	   3 show on phone-sized screens -- a lone 4th card by itself at the
	   bottom of a stacked single column looked unbalanced. */
	.bisp-front-review-grid .bisp-review-card:nth-child(4) { display: none; }
}
.bisp-neighborhood-card { text-decoration: none; color: inherit; display: block; background: var(--bisp-surface); border-radius: var(--bisp-radius); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
/* Same treatment as the Eclectic Kim review cards' location label
   (.bisp-review-area) -- county/region above the title. */
.bisp-neighborhood-card-meta { padding: 14px 16px 0; margin: 0; }
.bisp-neighborhood-card-region { text-transform: uppercase; color: var(--bisp-secondary); opacity: .75; }
.bisp-neighborhood-card h3 { padding: 4px 16px 0; margin: 0; }
.bisp-neighborhood-card-excerpt { padding: 6px 16px 16px; margin: 0; line-height: 1.55; color: rgba(34,30,26,.75); }
/* Vertical/portrait per spec -- crops to fill rather than the previous
   letterboxed "contain" treatment. */
.bisp-neighborhood-card img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: rgba(0,0,0,.04); }
.bisp-card-placeholder { width: 100%; height: 160px; background: rgba(0,0,0,.06); }
.bisp-listing-card .bisp-card-placeholder, .bisp-neighborhood-card .bisp-card-placeholder { border-radius: 0; }
/* display:flex + height:100% (rather than plain display:block) so the
   "Read More" pill at the end of .bisp-post-card-body can sit flush at
   the bottom of every card in a row via margin-top:auto, no matter how
   short or long that card's excerpt is -- see .bisp-post-card-body and
   .bisp-readmore below. */
.bisp-post-card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.bisp-post-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.bisp-post-card-thumb img, .bisp-listing-card img, .bisp-sale-card img, .bisp-contractor-card img { width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; border-radius: calc(var(--bisp-radius) - 4px); margin-bottom: 12px; display: block; }
/* Eclectic Kim review photos -- confirmed directly against EclecticKim's
   API: it always returns a fixed 300x300 square crop, regardless of the
   original photo's orientation or any size parameter (that's on
   eclectickim.com's own REST endpoint, out of this site's control). A
   square display box matches that native shape exactly, so the browser
   only has to stretch it slightly to fill a normal-sized card -- the
   previous portrait (3:4) box assumed a taller source than EclecticKim
   actually provides, forcing a much bigger, blurrier upscale than
   necessary. This is the better of the two options available to us here;
   truly sharper photos would require eclectickim.com's own endpoint to
   start returning a larger image size. */
.bisp-review-card-thumb { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: calc(var(--bisp-radius) - 4px); margin-bottom: 12px; background: rgba(0,0,0,.04); }
.bisp-review-card-thumb img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; display: block; margin-bottom: 0; }
.bisp-post-meta { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bisp-secondary); opacity: .8; margin: 0 0 6px; }
.bisp-tag { display: inline-block; background: var(--bisp-accent); color: #221E1A; padding: 3px 10px; border-radius: 999px; font-size: .78rem; text-decoration: none; margin: 0 6px 6px 0; }

/* ---- Buttons ---- */
.bisp-btn { display: inline-block; background: var(--bisp-primary); color: #fff; padding: 12px 22px; border-radius: 999px; text-decoration: none; border: none; cursor: pointer; }
.bisp-btn:hover { opacity: .9; color: #fff; }
/* "Read more on Eclectic Kim" (.bisp-btn-outline) gets its own solid
   gold/accent look -- deliberately a different color AND treatment
   (filled, not just outlined) from the in-card "Read More" pill
   (.bisp-readmore, still solid navy) below, so the two are never
   mistaken for the same action at a glance. #4A3A1E matches the dark
   text already used on the accent-colored pillar badges elsewhere. */
.bisp-btn-outline { background: var(--bisp-accent); color: #4A3A1E; border: none; }
.bisp-btn-outline:hover { opacity: .85; color: #4A3A1E; }
.bisp-btn-block { display: block; width: 100%; text-align: center; box-sizing: border-box; }

/* Buttons -- Customize > BISP Typography controls font + weight for
   every button-styled element site-wide; the size field only affects
   the main .bisp-btn style, so the intentionally-smaller "Read More"
   pill and search bar CTA keep their own proportions. */
.bisp-btn, .bisp-idx-quicksearch-btn, .bisp-readmore, .bisp-review-showmore {
	font-family: var(--bisp-font-button);
	font-weight: var(--bisp-weight-button);
}
.bisp-btn { font-size: var(--bisp-size-button); }

/* ---- About / bio ---- */
.bisp-about-card { display: flex; align-items: center; gap: 40px; background: var(--bisp-surface); border-radius: var(--bisp-radius); padding: 40px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.bisp-about-photo { flex: 0 0 auto; width: 220px; height: 220px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.15); border: 4px solid var(--bisp-surface); outline: 3px solid var(--bisp-accent); }
.bisp-about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bisp-about-photo-circle { border-radius: 50%; }
.bisp-about-text { flex: 1 1 auto; }
.bisp-about-text h2 { margin-bottom: 10px; }
.bisp-about-text p { margin: 0; color: rgba(34,30,26,.85); }

@media (max-width: 680px) {
	.bisp-about-card { flex-direction: column; text-align: center; padding: 32px 24px; }
	.bisp-about-photo { width: 180px; height: 180px; }
}

/* ---- Neighborhood pocket page ---- */
.bisp-pocket-section { padding: 48px 0; }
.bisp-pocket-section + .bisp-pocket-section { border-top: 1px solid rgba(0,0,0,.06); }
.bisp-section-title { text-align: center; margin: 0 0 28px; }
.bisp-section-title h2 { margin-bottom: 4px; }
.bisp-section-title .bisp-post-meta { display: inline-block; margin: 0; }
.bisp-mls-placeholder { border: 2px dashed var(--bisp-secondary); border-radius: var(--bisp-radius); padding: 40px 24px; text-align: center; background: rgba(31,92,87,.05); }
.bisp-idx-quicksearch-btn { display: inline-block; background: var(--bisp-secondary); color: #fff; border: none; border-radius: 999px; padding: 12px 26px; cursor: pointer; font-size: .95rem; text-decoration: none; }
.bisp-idx-quicksearch-btn:hover { opacity: .9; color: #fff; }

/* ---- "Search homes here" bar ----
   A search-bar-shaped stand-in (see the admin comment in
   page-neighborhood.php for why it isn't a real editable field): the
   neighborhood name on the left in its own fully-rounded field, a gap,
   then a separate fully-rounded CTA button in Trademark's own brand
   orange (sampled from the logo/wordmark at trademark-realestate.com --
   their site doesn't expose it as a CSS variable, so this is a close
   visual match rather than a copy-pasted hex) with a shadow so it stands
   out as the actual call to action. */
.bisp-idx-searchbar { display: flex; align-items: stretch; flex-wrap: wrap; gap: 14px; width: 100%; }
.bisp-idx-searchbar-field { flex: 1 1 auto; min-width: 200px; display: flex; align-items: center; padding: 0 22px; background: var(--bisp-surface); border: 2px solid rgba(0,0,0,.1); border-radius: 999px; color: var(--bisp-text); font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bisp-idx-searchbar-field {
	font-weight: 200;
	font-size: .95rem;
}
.bisp-idx-searchbar .bisp-idx-quicksearch-btn { background: #F2792D; border-radius: 999px; box-shadow: 0 8px 20px rgba(242,121,45,.45); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.bisp-idx-searchbar .bisp-idx-quicksearch-btn:hover { background: #D9631F; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(242,121,45,.55); }
@media (max-width: 560px) {
	.bisp-idx-searchbar { flex-direction: column; }
	.bisp-idx-searchbar-field { padding: 14px 20px; white-space: normal; }
	.bisp-idx-searchbar .bisp-idx-quicksearch-btn { text-align: center; }
}
.bisp-map-wrap { border-radius: var(--bisp-radius); overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.08); }

/* ---- Neighborhoods archive page ---- */
.bisp-region-map { width: 100%; height: 340px; border-radius: var(--bisp-radius); overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.08); margin: 0 0 28px; }
@media (max-width: 640px) {
	.bisp-region-map { height: 260px; }
}

/* ---- Buy Invest Sell Prosper pillar page ----
   Optional -- only needed if a four-card grid layout is wanted here.
   Applied by hand from the classic editor's "Text" tab: wrap the four
   sections in <div class="bisp-pillars-grid">, each one in its own
   <div class="bisp-pillar"> -- see page-pillars.php. Otherwise this page
   is just normal flowing content. */
.bisp-pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin: 8px 0 40px; }
.bisp-pillar { background: var(--bisp-surface); border-radius: var(--bisp-radius); padding: 32px 24px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.bisp-pillar-badge { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%; background: var(--bisp-accent); color: #4A3A1E; display: flex; align-items: center; justify-content: center; font-family: var(--bisp-font-heading); font-weight: 700; font-size: 1.3rem; }
.bisp-pillar h3 { margin-bottom: 8px; }
.bisp-pillar p { margin: 0; color: rgba(34,30,26,.8); font-size: .95rem; line-height: 1.6; }
@media (max-width: 900px) {
	.bisp-pillars-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.bisp-pillars-grid { grid-template-columns: 1fr; }
}

/* ---- Pillar page cross-nav (Buy / Invest / Sell / Prosper) ----
   Since those four pillars are now four separate pages sharing the same
   template, page-pillars.php builds this nav dynamically from whichever
   pages use that template -- so it just needs pill-tab styling here,
   matching the tag/badge language used elsewhere on the site. */
.bisp-pillar-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 28px 0 0; }
.bisp-pillar-nav-link { display: inline-block; padding: 10px 22px; border-radius: 999px; background: var(--bisp-surface); color: var(--bisp-text); text-decoration: none; font-weight: 700; font-size: .92rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); border: 2px solid transparent; transition: border-color .2s ease, color .2s ease; }
.bisp-pillar-nav-link:hover { border-color: var(--bisp-accent); }
.bisp-pillar-nav-link.is-current { background: var(--bisp-primary); color: #fff; }

/* ---- Map pin preview (Google Maps InfoWindow content) ----
   Rebuilt to match eclectickim.com's ACTUAL map info-box CSS (Kimberly
   pasted her site's real stylesheet -- this isn't a guess anymore). Her
   version is built on the ".fc-infobox" classes from her map plugin:
   centered content, a bold ~600-weight Raleway title, a small red
   uppercase Nunito Sans category label, and a solid black uppercase CTA
   button -- see bisp_enqueue_assets() in functions.php for where Raleway
   + Nunito Sans get loaded (the free Google Fonts versions, since her
   real ones are served through a private Adobe/Typekit account we don't
   have access to). The vertical 2/3 photo crop stays -- her own site's
   uploaded photos are natively portrait (768x1024 confirmed), even
   though our REST feed only hands us a square 300x300 crop of them.

   Kept deliberately compact top to bottom -- Google's InfoWindow has no
   max-height of its own, so if the content is taller than the space
   available above the pin inside the map, Google adds its own internal
   scrollbars rather than resizing anything. Small photo + tight spacing
   keeps the whole thing comfortably under that threshold so it always
   opens fully visible in one click, no scrolling needed. */
.bisp-map-info { display: block; width: 190px; text-decoration: none; color: inherit; margin: -12px; text-align: center; }
.bisp-map-info-thumb { width: 38%; aspect-ratio: 2 / 3; overflow: hidden; background: rgba(0,0,0,.04); margin: 0 auto 6px; }
.bisp-map-info-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.bisp-map-info-body { padding: 0 10px 22px; }
.bisp-map-info-category { font-family: 'Nunito Sans', sans-serif; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: red; font-weight: 500; margin-bottom: 3px; }
.bisp-map-info-title { font-family: 'Raleway', var(--bisp-font-heading); font-weight: 600; font-size: 1rem; line-height: 1.15; color: var(--bisp-text); margin-bottom: 8px; }
.bisp-map-info-cta { display: inline-block; background: #000; color: #fff; font-family: 'Nunito Sans', sans-serif; font-size: .66rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding: 6px 14px; }
.bisp-map-info:hover .bisp-map-info-cta { background: var(--bisp-primary); }
/* Google's own JS sets an inline max-height/overflow on its internal
   InfoWindow wrapper elements based on available space above the marker --
   there's no official API option to disable this, so the fix has to beat
   it in the cascade. !important in our stylesheet DOES win over a
   non-!important inline style, which is what Google sets. */
.gm-style-iw-d { max-height: none !important; overflow: visible !important; }
.gm-style-iw-c { max-height: none !important; }
.gm-style .gm-style-iw-c .gm-style-iw-d::-webkit-scrollbar-thumb {
	background-color: white;
}

/* "Reset" map control (main.js) -- styled to blend in with Google's own
   native map controls (white pill button, drop shadow) rather than
   looking like a random page element bolted onto the map. */
.bisp-map-reset-btn {
	margin: 10px;
	padding: 8px 16px;
	background: #fff;
	border: none;
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba(0,0,0,.3);
	font-family: var(--bisp-font-body);
	font-size: .8rem;
	font-weight: 600;
	color: #333;
	cursor: pointer;
}
.bisp-map-reset-btn:hover { background: #f8f8f8; }
/* Same flex-column/height:100% treatment as .bisp-post-card-link, for the
   same reason: lets that card's "Read More" pill sit flush at the bottom,
   centered, regardless of how long the excerpt above it runs. */
.bisp-review-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.bisp-review-card h3 { margin-bottom: 4px; }
.bisp-review-meta { margin-bottom: 4px; }
.bisp-review-area { text-transform: uppercase; color: var(--bisp-secondary); opacity: .75; }
.bisp-review-category { display: block; text-transform: uppercase; color: var(--bisp-primary); margin: -2px 0 6px; }
.bisp-empty-note { background: rgba(0,0,0,.04); border-radius: var(--bisp-radius); padding: 20px; text-align: center; color: rgba(34,30,26,.7); }

/* ---- "Read More" after every excerpt ----
   Solid primary-blue pill, same look as .bisp-btn, used after review
   excerpts, blog/market-notes excerpts, open house notes, and contractor
   bios. Where the whole card is already one big <a> (review cards, blog
   cards, open house cards), this prints as a <span> -- a real nested
   <a> inside another <a> is invalid HTML -- since the card is already
   fully clickable, it's a visual cue rather than a second link. Where
   the card ISN'T already a link (contractor cards, the fallback archive
   template), it's a real <a href> so it actually navigates. */
.bisp-readmore { display: inline-block; margin-top: 10px; padding: 8px 18px; background: var(--bisp-primary); color: #fff; font-size: .78rem; letter-spacing: .02em; border-radius: 999px; text-decoration: none; }
a:hover .bisp-readmore, .bisp-readmore:hover { background: var(--bisp-secondary); color: #fff; }
/* Review cards and blog/open-house post cards: pin "Read More" to the
   bottom-center of the card instead of right after wherever the excerpt
   happens to end -- margin-top:auto pushes it down to fill the leftover
   space in the flex column (see .bisp-review-card / .bisp-post-card-link
   / .bisp-post-card-body above), align-self:center keeps it centered
   rather than stretched full-width. */
.bisp-review-card .bisp-readmore, .bisp-post-card-body .bisp-readmore { margin-top: auto; align-self: center; }

/* ---- Neighborhood review grid "Show more" ----
   Six cards visible up front; the rest are already rendered in the page
   (no extra request) but hidden until "Show more" is clicked, at which
   point they slide/fade in. */
.bisp-review-grid-wrap.has-more .bisp-review-grid .bisp-review-card:nth-child(n+7) { display: none; }
.bisp-review-grid-wrap.has-more.is-expanded .bisp-review-grid .bisp-review-card:nth-child(n+7) {
	display: flex;
	animation: bisp-review-slide-in .45s ease both;
}
.bisp-review-grid-wrap.has-more.is-expanded .bisp-review-grid .bisp-review-card:nth-child(n+7) { animation-delay: 0s; }
.bisp-review-grid-wrap.has-more.is-expanded .bisp-review-grid .bisp-review-card:nth-child(n+8) { animation-delay: .05s; }
.bisp-review-grid-wrap.has-more.is-expanded .bisp-review-grid .bisp-review-card:nth-child(n+9) { animation-delay: .1s; }
.bisp-review-grid-wrap.has-more.is-expanded .bisp-review-grid .bisp-review-card:nth-child(n+10) { animation-delay: .15s; }
.bisp-review-grid-wrap.has-more.is-expanded .bisp-review-grid .bisp-review-card:nth-child(n+11) { animation-delay: .2s; }
.bisp-review-grid-wrap.has-more.is-expanded .bisp-review-grid .bisp-review-card:nth-child(n+12) { animation-delay: .25s; }
@keyframes bisp-review-slide-in {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}
.bisp-review-showmore-wrap { text-align: center; margin: 28px 0 0; }
.bisp-review-more-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 20px 0 0; }
.bisp-review-showmore { padding: 12px 28px; border-radius: 999px; }

/* "Read more on Eclectic Kim" only makes sense once every review pulled
   onto this page is already visible -- hidden until main.js marks the
   wrapper .is-expanded (either the "Show more" button was clicked, or
   there was nothing to hide in the first place at this breakpoint). */
.bisp-review-grid-wrap.has-more:not(.is-expanded) .bisp-review-more-wrap { display: none; }

/* Phone-sized screens: 3 cards up front instead of 6 (main.js decides
   whether the "Show more" button itself needs to be visible at all, based
   on which of these two thresholds actually applies at the current
   width). */
@media (max-width: 640px) {
	.bisp-review-grid-wrap.has-more .bisp-review-grid .bisp-review-card:nth-child(n+4) { display: none; }
	.bisp-review-grid-wrap.has-more.is-expanded .bisp-review-grid .bisp-review-card:nth-child(n+4) {
		display: flex;
		animation: bisp-review-slide-in .45s ease both;
	}
}

/* ---- Listings / Sales / Contractors ---- */
.bisp-listing-card, .bisp-sale-card, .bisp-contractor-card { background: var(--bisp-surface); border-radius: var(--bisp-radius); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.bisp-listing-card { display: block; text-decoration: none; color: inherit; }
.bisp-listing-card-body, .bisp-sale-card-body, .bisp-contractor-card-body { padding: 18px; }
.bisp-status-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .75rem; font-weight: 700; text-transform: uppercase; background: var(--bisp-accent); color: #221E1A; }
.bisp-status-badge.is-sold { background: var(--bisp-secondary); color: #fff; }
.bisp-price { font-size: 1.4rem; font-weight: 800; color: var(--bisp-primary); }
.bisp-fact-row { display: flex; gap: 16px; color: rgba(34,30,26,.75); font-size: .92rem; margin: 6px 0; }
.bisp-mls-number { font-size: .8rem; color: rgba(34,30,26,.55); }

/* ---- Contractor categories / disclaimer ---- */
.bisp-category-with-icon { display: inline-flex; align-items: center; gap: 6px; }
.bisp-category-icon { width: 15px; height: 15px; flex: 0 0 auto; }
.bisp-contact-name { color: rgba(34,30,26,.75); font-size: .92rem; margin: 2px 0 10px; }
.bisp-contractor-disclaimer { background: rgba(0,0,0,.04); border-left: 3px solid var(--bisp-accent); border-radius: 0 var(--bisp-radius) var(--bisp-radius) 0; padding: 18px 22px; margin: 32px 0; }
.bisp-contractor-disclaimer p { margin: 0; font-size: .85rem; line-height: 1.6; color: rgba(34,30,26,.75); }

/* ---- Agent / brokerage block (Listings, Sales) ---- */
.bisp-agent-brokerage-block { background: rgba(0,0,0,.03); border-radius: var(--bisp-radius); padding: 20px 24px; margin: 24px 0; }
.bisp-agent-brokerage-block p { margin: 4px 0; }

/* ---- Featured photo banner (Listings, Sales, Open House notes) ---- */
.bisp-featured-photo-banner { margin: 24px 0; border-radius: var(--bisp-radius); overflow: hidden; }
.bisp-featured-photo-banner img { width: 100%; height: 420px; object-fit: cover; display: block; }

/* ---- Listing -> neighborhood map + Eclectic Kim reviews ---- */
.bisp-listing-neighborhood-section { margin: 32px 0; }
.bisp-listing-neighborhood-section .bisp-map-wrap { margin-bottom: 20px; }

/* ---- Open house notes ---- */
.bisp-openhouse-meta { background: rgba(0,0,0,.03); border-radius: var(--bisp-radius); padding: 20px; margin: 24px 0; }
.bisp-openhouse-meta dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.bisp-openhouse-meta dt { font-weight: 700; }
.bisp-openhouse-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 24px 0; }
.bisp-openhouse-gallery img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; }

/* ---- Right sidebar (all internal pages) ---- */
.bisp-with-sidebar { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; padding-top: 40px; padding-bottom: 24px; }
.bisp-with-sidebar .bisp-main { padding: 0; }
.bisp-sidebar { position: sticky; top: 84px; }
.bisp-agent-card { background: var(--bisp-surface); border-radius: var(--bisp-radius); padding: 28px 24px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.bisp-agent-card-photo { width: 120px; height: 120px; margin: 0 auto 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.12); outline: 3px solid var(--bisp-accent); }
.bisp-agent-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bisp-agent-card-photo-circle { border-radius: 50%; }
.bisp-agent-card-name { margin: 0 0 4px; font-size: 1.15rem; }
.bisp-agent-card-brokerage { font-size: .82rem; color: rgba(34,30,26,.7); margin: 0 0 14px; }
.bisp-agent-card-bio { font-size: .88rem; line-height: 1.55; color: rgba(34,30,26,.85); text-align: left; margin: 0 0 18px; }
.bisp-agent-card-contact { display: flex; flex-direction: column; gap: 10px; }
.bisp-sidebar-widgets { margin-top: 24px; }
.bisp-sidebar-widget { background: var(--bisp-surface); border-radius: var(--bisp-radius); padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.06); margin-bottom: 20px; }
.bisp-sidebar-widget:last-child { margin-bottom: 0; }
.bisp-sidebar-widget-title { margin: 0 0 .5em; font-size: 1rem; }

@media (max-width: 960px) {
	.bisp-with-sidebar { grid-template-columns: 1fr; }
	.bisp-sidebar { position: static; }
}

/* ---- Compliance / footer ---- */
.bisp-site-footer { background: var(--bisp-footer-bg); color: #fff; margin-top: 64px; }
/* Widget columns + nav menu row -- everything above the copyright strip
   -- gets its own background (Customize > BISP Brand Colors > "Footer
   area background"), independent of .bisp-site-footer's background
   above, which now only actually shows through behind the copyright
   strip at the very bottom. */
.bisp-footer-top { background: var(--bisp-footer-top-bg); }
/* Only holds the footer nav now (the "Buy Invest Sell Prosper / Los
   Angeles Real Estate" site title + tagline row was removed) -- centered
   rather than the old two-column split, which was built to balance that
   row against the nav. */
.bisp-footer-grid { display: flex; justify-content: center; gap: 32px; padding: 48px 24px; }
.bisp-footer-grid.has-widgets-above { padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); }
.bisp-footer-grid a { color: #fff; }

/* Wider gap (was 32px) so the two columns read as clearly separate areas,
   plus more left/right breathing room (was 24px) than the standard
   .bisp-container padding. Everything inside each column -- widget
   titles, text, links, and any images (Instagram grid excluded, see
   below) -- is centered within its own column. */
.bisp-footer-widgets-row { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 56px; padding: 40px 48px 8px; }
.bisp-footer-widgets-col { text-align: center; }
.bisp-footer-widgets-col .bisp-footer-widget { margin-bottom: 20px; }
.bisp-footer-widgets-col .bisp-footer-widget:last-child { margin-bottom: 0; }
.bisp-footer-widget-title { color: #fff; font-size: 1rem; margin-bottom: .5em; }
.bisp-footer-widgets-col a { color: #fff; }

.bisp-footer-compliance { border-top: 1px solid rgba(255,255,255,.15); padding: 20px 24px; font-size: .82rem; opacity: .85; text-align: center; }
.bisp-footer-compliance .bisp-dre-block { max-width: 640px; margin: 0 auto; }
.bisp-footer-copy { margin: 6px 0 0; }
.bisp-dre-block p { margin: 2px 0; }
.bisp-footer-logos { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.bisp-equal-housing-logo { display: flex; align-items: center; gap: 8px; }
.bisp-equal-housing-logo svg { flex: 0 0 auto; opacity: .9; }
.bisp-equal-housing-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; opacity: .8; text-align: left; max-width: 90px; line-height: 1.25; }
.bisp-realtor-logo { height: 40px; width: auto; opacity: .95; }

@media (max-width: 780px) {
	.bisp-footer-widgets-row { grid-template-columns: 1fr; }
	/* Footer Column 2 stacks above Footer Column 1 on phone-sized screens
	   (grid order, not the underlying widget-area assignment or markup). */
	.bisp-footer-widgets-col:nth-child(1) { order: 2; }
	.bisp-footer-widgets-col:nth-child(2) { order: 1; }
}