/* Builder Homes – front end
   Brand tokens are injected from Settings as CSS custom properties (see BH_Frontend::brand_css):
   --bh-accent (primary), --bh-accent-2 (highlight), --bh-ink (text), --bh-font-heading, --bh-font-body.
   Defaults below are the Osprey Homes palette. */
:root {
	--bh-accent: #662626;
	--bh-accent-2: #E6AB15;
	--bh-ink: #1B1B1B;
	--bh-muted: #6b6b6b;
	--bh-border: rgba(27, 27, 27, .12);
	--bh-surface: #ffffff;
	--bh-tint: rgba(102, 38, 38, .06);
	--bh-radius: 4px;
	--bh-shadow: 0 1px 2px rgba(27,27,27,.06), 0 8px 24px rgba(27,27,27,.07);
}

/* Typography: headings use the brand heading font (SemiBold), everything else the body font. */
.bh-instance, .bh-home, .bh-floorplan, .bh-communities, .bh-page, .leaflet-popup-content { font-family: var(--bh-font-body, inherit); color: var(--bh-ink); }
.bh-h, .bh-card-title, .bh-card-price, .bh-card-community, .bh-badge, .bh-btn, .bh-marker, .bh-hotspot-dot, .bh-fp-legend-num,
.bh-section-title, .bh-page-title, .bh-fp-title, .bh-home-price, .bh-home-community a, .bh-community-body h3, .bh-filter > span,
.bh-popup strong, .bh-popup-price, .bh-popup-link, .bh-hotspot-card strong, .bh-specs strong, .bh-fp-legend strong, .bh-back, .bh-filter-reset {
	font-family: var(--bh-font-heading, inherit); font-weight: 600; letter-spacing: .01em;
}
.bh-instance, .bh-home, .bh-floorplan, .bh-communities { box-sizing: border-box; }
.bh-instance *, .bh-home *, .bh-floorplan *, .bh-communities * { box-sizing: border-box; }
.bh-notice { padding: 12px 16px; background: #fdf6e3; border: 1px solid var(--bh-accent-2); border-radius: var(--bh-radius); color: var(--bh-ink); }

/* ------------------------------------------------------------ Filters */
.bh-filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin: 0 0 20px; padding: 14px 16px; background: var(--bh-tint); border-radius: var(--bh-radius); }
.bh-filter { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.bh-filter > span { font-size: .72em; text-transform: uppercase; letter-spacing: .08em; color: var(--bh-accent); }
.bh-filter select { font-family: var(--bh-font-body, inherit); font-size: .95em; padding: 8px 32px 8px 10px; border: 1px solid var(--bh-border); border-radius: var(--bh-radius); background: var(--bh-surface); min-height: 40px; color: var(--bh-ink); }
.bh-filter select:focus { outline: 2px solid var(--bh-accent-2); outline-offset: 1px; }
.bh-filter-reset { font-size: .82em; background: none; border: 0; color: var(--bh-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 8px 4px; }
.bh-filter-count { font-size: .85em; color: var(--bh-muted); margin-left: auto; align-self: center; }
@media (max-width: 640px) { .bh-filter { min-width: 0; flex: 1 1 calc(50% - 8px); } .bh-filter select { width: 100%; } }

/* ---------------------------------------------------------------- Map */
.bh-map { width: 100%; min-height: 240px; border-radius: var(--bh-radius); overflow: hidden; margin: 0 0 24px; z-index: 0; background: #ebe8e4; border: 1px solid var(--bh-border); }
.bh-single-map { width: 100%; height: 320px; border-radius: var(--bh-radius); overflow: hidden; z-index: 0; background: #ebe8e4; border: 1px solid var(--bh-border); }
.bh-map-muted .leaflet-tile-pane { filter: grayscale(1) contrast(.92) brightness(1.04); }
.bh-marker { display: inline-block; white-space: nowrap; background: var(--bh-accent); color: #fff; font-size: 13px; padding: 5px 11px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(27,27,27,.4); transform: translate(-50%, -50%); line-height: 1.2; transition: background .15s, color .15s; }
.bh-marker.is-sold, .bh-marker.is-under-contract { background: #6b6b6b; }
.bh-marker.is-active { background: var(--bh-accent-2); color: var(--bh-ink); }
.leaflet-div-icon.bh-marker-icon { background: none; border: 0; }
.bh-popup { width: 220px; font-size: 13px; line-height: 1.4; }
.bh-popup img { display: block; width: 100%; height: 130px; object-fit: cover; border-radius: var(--bh-radius); margin-bottom: 8px; }
.bh-popup strong { display: block; font-size: 14px; margin-bottom: 2px; }
.bh-popup .bh-popup-price { color: var(--bh-accent); }
.bh-popup .bh-popup-meta { color: var(--bh-muted); font-size: 12px; }
.bh-popup a.bh-popup-link { display: inline-block; margin-top: 8px; color: var(--bh-accent); }
.leaflet-popup-content-wrapper { border-radius: var(--bh-radius); box-shadow: 0 6px 24px rgba(27,27,27,.25); }
.leaflet-popup-content { margin: 12px; }
.leaflet-container { font: inherit; }
.leaflet-container a { color: var(--bh-accent); }
.leaflet-bar a { color: var(--bh-ink); }

/* --------------------------------------------------------------- Cards */
.bh-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bh-cols-1 { grid-template-columns: 1fr; }
.bh-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bh-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bh-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .bh-cols-3, .bh-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bh-grid { grid-template-columns: 1fr; gap: 18px; } }

.bh-card { display: flex; flex-direction: column; border: 1px solid var(--bh-border); border-radius: var(--bh-radius); overflow: hidden; background: var(--bh-surface); box-shadow: var(--bh-shadow); transition: transform .15s ease, box-shadow .15s ease, border-color .15s; }
.bh-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(27,27,27,.06), 0 14px 32px rgba(27,27,27,.12); border-color: rgba(102,38,38,.35); }
.bh-card.is-hidden { display: none; }
.bh-card.is-highlight { outline: 3px solid var(--bh-accent-2); outline-offset: -3px; }
.bh-card-media { position: relative; display: block; aspect-ratio: 4 / 3; background: #ebe8e4; overflow: hidden; }
.bh-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.bh-card:hover .bh-card-media img { transform: scale(1.03); }
.bh-card-noimg { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #ebe8e4, #d9d4cf); }
.bh-badge { position: absolute; top: 12px; left: 12px; padding: 5px 11px; border-radius: 999px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; background: var(--bh-surface); color: var(--bh-ink); box-shadow: 0 1px 3px rgba(27,27,27,.25); line-height: 1.4; }
.bh-badge-available { background: var(--bh-accent-2); color: var(--bh-ink); }
.bh-badge-coming-soon { background: var(--bh-accent); color: #fff; }
.bh-badge-under-contract { background: var(--bh-ink); color: #fff; }
.bh-badge-model { background: var(--bh-surface); color: var(--bh-accent); box-shadow: inset 0 0 0 1.5px var(--bh-accent), 0 1px 3px rgba(27,27,27,.2); }
.bh-badge-sold { background: #8a8a8a; color: #fff; }
.bh-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.bh-card-community { font-size: .72em; text-transform: uppercase; letter-spacing: .1em; color: var(--bh-accent); }
.bh-card-title { margin: 0; font-size: 1.15em; line-height: 1.3; }
.bh-card-title a { color: inherit; text-decoration: none; }
.bh-card-title a:hover { color: var(--bh-accent); }
.bh-card-price { font-size: 1.3em; color: var(--bh-ink); }
.bh-specs { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 4px 0 0; padding: 0; color: var(--bh-muted); font-size: .92em; }
.bh-specs li { margin: 0; }
.bh-specs strong { color: var(--bh-ink); }
.bh-card-address, .bh-card-completion { font-size: .9em; color: var(--bh-muted); }
.bh-card .bh-btn { margin-top: auto; align-self: flex-start; }
.bh-empty, .bh-empty-initial { color: var(--bh-muted); padding: 24px 0; text-align: center; }

.bh-btn { display: inline-block; padding: 11px 22px; border-radius: var(--bh-radius); background: var(--bh-accent); color: #fff !important; font-size: .9em; text-transform: uppercase; letter-spacing: .08em; text-decoration: none !important; line-height: 1.3; border: 2px solid var(--bh-accent); transition: background .15s, border-color .15s, color .15s; }
.bh-btn:hover { background: var(--bh-ink); border-color: var(--bh-ink); }
.bh-btn-outline { background: transparent; color: var(--bh-accent) !important; padding: 8px 16px; font-size: .8em; margin-top: 10px; }
.bh-btn-outline:hover { background: var(--bh-accent); border-color: var(--bh-accent); color: #fff !important; }

/* ---------------------------------------------------------- Communities */
.bh-communities { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .bh-communities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bh-communities { grid-template-columns: 1fr; } }
.bh-community-card { display: block; border-radius: var(--bh-radius); overflow: hidden; border: 1px solid var(--bh-border); box-shadow: var(--bh-shadow); text-decoration: none !important; color: inherit; background: var(--bh-surface); transition: transform .15s, box-shadow .15s; }
.bh-community-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(27,27,27,.12); }
.bh-community-img { aspect-ratio: 16 / 9; background: #d9d4cf center/cover no-repeat; }
.bh-community-body { padding: 16px 18px; border-top: 3px solid var(--bh-accent); }
.bh-community-body h3 { margin: 0 0 4px; font-size: 1.15em; }
.bh-community-body p { margin: 0; color: var(--bh-muted); font-size: .92em; }
.bh-community-body p strong { color: var(--bh-accent); }
.bh-community-desc { margin-top: 6px !important; }

/* ---------------------------------------------------------- Floor plan */
.bh-floorplan { max-width: 100%; }
.bh-fp-title { margin: 0 0 8px; }
.bh-fp-specs { margin-bottom: 14px; }
.bh-fp-stage { position: relative; display: block; width: 100%; line-height: 0; border: 1px solid var(--bh-border); border-radius: var(--bh-radius); background: #fff; overflow: visible; }
.bh-fp-image { display: block; width: 100%; height: auto; border-radius: var(--bh-radius); }
.bh-hotspot { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 0; background: none; cursor: pointer; overflow: visible; line-height: 1; z-index: 2; }
.bh-hotspot-dot { position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--bh-accent); color: #fff; font-size: 13px; line-height: 28px; text-align: center; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(27,27,27,.4); transition: transform .15s, background .15s, color .15s; }
.bh-hotspot-dot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--bh-accent-2); opacity: .6; animation: bh-pulse 2.4s ease-out infinite; }
@keyframes bh-pulse { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(1.3); opacity: 0; } }
.bh-hotspot:hover .bh-hotspot-dot, .bh-hotspot.is-open .bh-hotspot-dot, .bh-hotspot:focus-visible .bh-hotspot-dot { transform: scale(1.15); background: var(--bh-accent-2); color: var(--bh-ink); }
.bh-hotspot.is-open .bh-hotspot-dot::after, .bh-hotspot:hover .bh-hotspot-dot::after { animation: none; opacity: 0; }
.bh-hotspot:focus { outline: none; }
.bh-hotspot:focus-visible .bh-hotspot-dot { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--bh-accent); }
.bh-hotspot-card { font-family: var(--bh-font-body, inherit); position: absolute; left: 38px; top: 2px; width: 250px; max-width: 70vw; padding: 14px 16px; background: var(--bh-surface); color: var(--bh-ink); border-radius: var(--bh-radius); border-top: 3px solid var(--bh-accent-2); box-shadow: 0 6px 28px rgba(27,27,27,.25); text-align: left; font-size: 14px; line-height: 1.45; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 5; pointer-events: none; }
.bh-hotspot-card img { display: block; width: calc(100% + 32px); margin: -14px -16px 10px; height: 140px; object-fit: cover; }
.bh-hotspot-card strong { display: block; margin-bottom: 3px; font-size: 15px; color: var(--bh-accent); }
.bh-hotspot-card span { display: block; color: #4a4a4a; }
.bh-hotspot.is-open .bh-hotspot-card, .bh-hotspot:hover .bh-hotspot-card, .bh-hotspot:focus-visible .bh-hotspot-card { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.bh-hotspot.flip-x .bh-hotspot-card { left: auto; right: 38px; }
.bh-hotspot.flip-y .bh-hotspot-card { top: auto; bottom: 2px; }
.bh-hotspot.is-open { z-index: 6; }
@media (max-width: 640px) {
	/* On phones the call-out becomes a bottom sheet so it never runs off screen. */
	.bh-hotspot-card, .bh-hotspot.flip-x .bh-hotspot-card, .bh-hotspot.flip-y .bh-hotspot-card { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-width: none; box-shadow: 0 -4px 30px rgba(27,27,27,.35); }
	.bh-hotspot-card img { width: calc(100% + 32px); }
	.bh-hotspot:hover:not(.is-open) .bh-hotspot-card { opacity: 0; visibility: hidden; }
}
.bh-fp-legend { margin: 16px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 20px; font-size: .95em; }
.bh-fp-legend li { display: flex; gap: 8px; align-items: flex-start; margin: 0; cursor: pointer; padding: 5px 8px; border-radius: var(--bh-radius); transition: background .15s; }
.bh-fp-legend li:hover, .bh-fp-legend li.is-active { background: rgba(230, 171, 21, .14); }
.bh-fp-legend-num { flex: 0 0 22px; margin-top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--bh-accent); color: #fff; font-size: 12px; text-align: center; line-height: 22px; }
.bh-fp-legend li.is-active .bh-fp-legend-num { background: var(--bh-accent-2); color: var(--bh-ink); }
.bh-fp-legend strong { color: var(--bh-ink); }
.bh-fp-legend-text { color: var(--bh-muted); }

/* ---------------------------------------------------------- Single home */
.bh-home { display: flex; flex-direction: column; gap: 28px; }
.bh-gallery-main { position: relative; aspect-ratio: 16 / 9; background: var(--bh-ink); border-radius: var(--bh-radius); overflow: hidden; }
.bh-gallery-slide { position: absolute; inset: 0; display: none; }
.bh-gallery-slide.is-active { display: block; }
.bh-gallery-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--bh-ink); font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(27,27,27,.35); padding: 0 0 4px; transition: background .15s, color .15s; }
.bh-gallery-nav:hover { background: var(--bh-accent-2); }
.bh-gallery-prev { left: 14px; }
.bh-gallery-next { right: 14px; }
.bh-gallery-counter { position: absolute; right: 14px; bottom: 12px; background: rgba(27,27,27,.7); color: #fff; padding: 3px 10px; border-radius: 999px; font-size: 12px; }
.bh-gallery-main .bh-badge { top: 14px; left: 14px; }
.bh-gallery-thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; padding-bottom: 4px; }
.bh-gallery-thumb { flex: 0 0 90px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: var(--bh-radius); overflow: hidden; background: none; cursor: pointer; opacity: .65; transition: opacity .15s; }
.bh-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-gallery-thumb.is-active { border-color: var(--bh-accent-2); opacity: 1; }
.bh-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(27,27,27,.94); display: flex; align-items: center; justify-content: center; }
.bh-lightbox img { max-width: 94vw; max-height: 90vh; object-fit: contain; }
.bh-lightbox button { position: absolute; background: rgba(255,255,255,.15); color: #fff; border: 0; font-size: 28px; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; }
.bh-lightbox button:hover { background: var(--bh-accent-2); color: var(--bh-ink); }
.bh-lightbox .bh-lb-close { top: 16px; right: 16px; }
.bh-lightbox .bh-lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.bh-lightbox .bh-lb-next { right: 16px; top: 50%; transform: translateY(-50%); }

.bh-home-summary { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.bh-home-community a { color: var(--bh-accent); text-transform: uppercase; letter-spacing: .1em; font-size: .78em; text-decoration: none; margin-right: 10px; }
.bh-home-address { font-size: 1.1em; }
.bh-home-lot, .bh-home-completion { color: var(--bh-muted); font-size: .92em; }
.bh-home-price-wrap { text-align: right; }
.bh-home-price { font-size: 1.9em; line-height: 1.1; color: var(--bh-accent); }
.bh-specs-lg { gap: 10px 28px; font-size: 1em; padding: 16px 0; border-top: 1px solid var(--bh-border); border-bottom: 1px solid var(--bh-border); margin: 0; }
.bh-specs-lg strong { font-size: 1.3em; }
.bh-section-title { margin: 0 0 12px; font-size: 1.25em; padding-left: 12px; border-left: 3px solid var(--bh-accent-2); line-height: 1.2; }
.bh-features { columns: 2; column-gap: 32px; margin: 0; padding-left: 1.2em; }
.bh-features li { break-inside: avoid; margin: 0 0 6px; }
.bh-features li::marker { color: var(--bh-accent); }
@media (max-width: 600px) { .bh-features { columns: 1; } .bh-home-price-wrap { text-align: left; } }
.bh-map-directions { margin: 8px 0 0; font-size: .92em; }
.bh-map-directions a { color: var(--bh-accent); }
.bh-contact { text-align: center; padding: 20px 0; border-top: 1px solid var(--bh-border); }

/* Plugin's own page templates */
.bh-page { max-width: 1200px; margin: 0 auto; padding: 32px 20px 64px; }
.bh-page-title { margin: 0 0 20px; }
.bh-page-header { margin-bottom: 24px; }
.bh-page-header p { color: var(--bh-muted); max-width: 720px; }
.bh-single-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.bh-single-content { line-height: 1.65; }
.bh-back { display: inline-block; margin-bottom: 14px; color: var(--bh-accent); text-decoration: none; font-size: .82em; text-transform: uppercase; letter-spacing: .08em; }
.bh-plan-homes { margin-top: 24px; }