/* LFG QA round 2026-09-29: plan / model / home single overrides for bokka-data-structures blocks. Loaded site-wide after the child style.css. */


/* ------------------------------------------------------------------------
   Brand window "Select to explore" community dropdown - visible border

   The button has `border border-neutral-medium-gray`, but the plugin's
   Tailwind preflight is off, so there is no border-style and nothing draws.
   --------------------------------------------------------------------- */
.bokka-plugin .custom-dropdown-button {
	border-style: solid;
}


/* ------------------------------------------------------------------------
   Plan and home single form CTA ("Curious about this floor plan / home?")
   - brand cream background. Community singles keep the plugin's white.
   On the home single, the plugin's divider line under the form goes too
   (single-home.php prints a bare <hr> after the form CTA).
   --------------------------------------------------------------------- */
:is(.single-bokka_plan, .single-bokka_home) .bokka-plugin .form-cta {
	background-color: #F7F6F3;
}

/* Form CTA intro line ("Whether you're just getting started..."): normal
   weight, on every page that uses the block (plugin: font-primary-bold). */
.bokka-plugin .form-cta .form-cta-description {
	font-weight: 400;
}

.single-bokka_home .bokka-plugin:has(> .form-cta) + hr {
	display: none;
}

/* The home's "Get Brochure" button sits right above the form CTA; space it
   off the cream edge. */
.single-bokka_home .bokka-plugin .form-cta {
	margin-top: 64px;
}

@media (max-width: 639px) {
	.single-bokka_home .bokka-plugin .form-cta {
		margin-top: 40px;
	}
}


/* ------------------------------------------------------------------------
   Model single - green divider in place of the community features band
   (inc/bokka-lfg-model-layout.php), and 64px above the image grid below it.
   --------------------------------------------------------------------- */
.lfg-model-divider {
	height: 80px;
}

@media (max-width: 639px) {
	.lfg-model-divider {
		height: 48px;
	}
}

.single-bokka_model .model .gallery-grid > ul {
	padding-top: 64px;
}


/* ------------------------------------------------------------------------
   Home single brand window - SJV layout (inc/bokka-lfg-headings-map.php):
   plan name, divider, address, divider, details. The plugin already marks
   the address with `border-b`; with no border-style (preflight off) nothing
   drew. The lot line that used to carry the divider under the plan name is
   gone (lot numbers are internal), so the title draws it, in the same
   spacing and color as the one under the address.
   --------------------------------------------------------------------- */
#home-detail .product-detail-brand-window .border-b {
	border-bottom-style: solid;
}

#home-detail #product-detail-brand-window-title {
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(106, 112, 116, 0.4);
}


/* ------------------------------------------------------------------------
   Plan single "2 homes found" count under the filters: the label is lower
   case (the heading is uppercase in inc/bokka-lfg-plan-filters.php).
   --------------------------------------------------------------------- */
.lfg-plan-homes .plan-homes-count-label {
	text-transform: lowercase;
}

/* QA 2026-09-30: a plan with one available home gets no filter band
   (inc/bokka-lfg-plan-filters.php), so the count and card sat right under
   the heading transition, whose -25px bottom margin (the arrow) overlaps
   them. Room below the arrow, only when the band is absent (with it, the
   band's own padding does this). */
.lfg-plan-homes > .bokka-plugin + .px-8 {
	padding-top: 72px;
}
@media (max-width: 767px) {
	.lfg-plan-homes > .bokka-plugin + .px-8 {
		padding-top: 56px;
	}
}


/* ------------------------------------------------------------------------
   Home / plan single description photo - square corners, brand window shape

   Client revisions 2026-10-09: no circle images. The circular flag is
   dropped in inc/bokka-lfg-home-layout.php / bokka-lfg-plan-layout.php;
   this removes the plugin's rounded-[2vw] corners on the plain image.
   Round 3 (2026-10-12): the photo takes the brand window photo's shape
   (790 x 497 on desktop) at every width, in place of the plugin's 3:2
   (phone) / 10:9 (lg) and its 250px phone height cap. The band behind it
   is the cream #F7F6F3, set as the block's background_color in PHP.
   --------------------------------------------------------------------- */
.bokka-plugin :is(.home-split-content-2, .home-split-content-3, .plan-split-content-1) img.img-primary {
	height: auto;
	max-height: none;
	border-radius: 0;
	aspect-ratio: 790 / 497;
	object-fit: cover;
	object-position: center;
}


/* ------------------------------------------------------------------------
   Plan single "Available in these locations" - price per location

   Pricing audit 2026-10-09: each location carries its own range under its
   name (inc/bokka-lfg-plan-layout.php), so the list agrees with the plan
   cards, which show the price for the community they sit under.
   --------------------------------------------------------------------- */
/* The prices make each option taller; the plugin's max-h-60 list would
   scroll the third location out of view. */
#plan-community-dropdown-options {
	max-height: none;
}
#plan-community-dropdown-options .lfg-location-name,
#plan-community-dropdown-options .lfg-location-price {
	display: block;
}
#plan-community-dropdown-options .lfg-location-price {
	margin-top: 2px;
	font-size: 0.875em;
	opacity: 0.75;
}

/* Even spacing inside the band: the description's 32px bottom margin only
   matters when a button follows it, and the plan single's own lg padding
   (single-plan.css: 90px top / 144px bottom) becomes the home single's
   56px so the two bands match. */
.bokka-plugin :is(.home-split-content-2, .home-split-content-3, .plan-split-content-1) .text > .description:last-child {
	margin-bottom: 0;
}
@media (min-width: 1024px) {
	#floorplan-detail .split-content.plan-split-content-1 {
		padding-top: 56px;
		padding-bottom: 56px;
	}
}