/* LFG QA round 2026-09-29: map-with-info overrides for bokka-data-structures blocks. Loaded site-wide after the child style.css. */

/* Map with info ("Stop By for a Visit") - the plugin's own layout, like SJV:
   a bordered Address / Hours / Phone column beside a boxed map, on white.
   (The full-bleed Consort-style map from earlier on 2026-09-29 was dropped
   at the client's request; the cream background was dropped the same day.)

   Markup (plugin, read-only): #map-with-info holds #map-with-info-heading
   (the green banner), then #map-with-info-wrap-outer holding the info column
   (first child, `.border`) and #map-with-info-wrap > #map-with-info-map. */

/* White behind the whole block, wherever it sits (community, plan, home and
   model singles); the banner is flat green (no gradients, 2026-10-09). */
.bokka-plugin #map-with-info {
	background-color: #FFFFFF;
}

/* Border box around the info column. The plugin already marks it
   `border border-neutral-medium-gray`, but its Tailwind build ships with
   preflight off, so nothing sets border-style and the 1px width computes to
   0. Same light gray (#9CA3AF, Tailwind gray-400) as the outline around the
   text CTA boxes; the column already has 32px padding. */
.bokka-plugin #map-with-info-wrap-outer > .border {
	border: 1px solid #9CA3AF;
}

/* Phones: the columns stack, and the box's mx-auto shrinks it to its content
   width, narrower than the map above it. Fill the row (still capped by the
   plugin's 342px max-width) so the box and map line up. */
@media (max-width: 767px) {
	.bokka-plugin #map-with-info-wrap-outer > .border {
		width: 100%;
	}
}

/* Side by side (tablet up) the column only gets what the 800px map leaves,
   about 238px, which at LFG's type sizes splits the email address and the
   Get Directions button over two lines. A fixed column width (the map
   gives up the difference) keeps them on one line, as on SJV; 290px fits
   the 20px email (about 218px) inside the 32px padding. */
@media (min-width: 768px) {
	.bokka-plugin #map-with-info-wrap-outer > .border {
		flex: 0 0 290px;
	}
}

@media (min-width: 1024px) {
	.bokka-plugin #map-with-info-wrap-outer > .border {
		flex-basis: 300px;
	}
}

/* Email at the same size as the other details (phone, hours: the plugin's
   text-paragraph); the plugin sets it smaller (text-label). */
.bokka-plugin #map-with-info-wrap-outer > .border a[href^="mailto:"] {
	font-size: 20px;
	line-height: 24px;
}