/* Balerfornia Location — full-bleed live map with the address bottom-anchored
   over it. Models the reference's `.home-a-map-section`.

   SPECIFICITY NOTE — the usual trap; do not collapse these selectors. CozyStay
   styles bare tags via `.elementor-section h2 / p` (0,1,1), so everything is
   scoped under `.bfl` (0,2,0) at minimum. The CTA is an ANCHOR, so it needs
   0,4,0 to beat
   `.elementor-element a:not([class*="button"]):not(:hover) { color: inherit }`
   (0,3,1) — that rule is what once rendered a cream button's label invisible.

   POINTER-EVENTS — the overlay and the content wrapper are `pointer-events:
   none` so the live map underneath stays pannable; only the CTA takes clicks
   back. Without that, the bottom half of the map would be dead to the touch. */

.elementor-widget-balerfornia-location,
.elementor-widget-balerfornia-location > .elementor-widget-container {
	padding: 0 !important;
	margin: 0 !important;
}

.bfl {
	--bfl-h: 76vh;
	--bfl-overlay: rgba(5, 57, 50, 0.9);
	--bfl-text: #F6F1E7;
	--bfl-cta-bg: #F6F1E7;
	--bfl-cta-color: #053932;
	--bfl-font-display: 'Playfair Display', Georgia, serif;
	--bfl-font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;

	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: clamp(460px, var(--bfl-h), 860px);
	display: flex;
	padding: clamp(48px, 8vh, 80px) 0;
	overflow: clip;
	isolation: isolate;
}

/* ---- Map layer (Leaflet + Esri satellite) -------------------------------- */

.bfl .bfl__map {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: #0a2b25; /* shows until tiles paint */
}

/* Leaflet fills the div. The map itself is neutral chrome — no border/outline. */
.bfl .bfl__map.leaflet-container {
	background: #0a2b25;
	font-family: var(--bfl-font-body);
}

/* Keep the satellite's natural colour (turquoise reef, green jungle). */
.bfl .bfl__map .leaflet-tile-pane {
	filter: saturate(1.02) contrast(1);
}

/* Controls must sit above the scrim (z-index 1) to stay usable/visible. */
.bfl .bfl__map .leaflet-control-container {
	position: relative;
	z-index: 3;
}

.bfl .bfl__map .leaflet-control-zoom a {
	color: var(--bfl-cta-color, #053932);
}

.bfl .bfl__map .leaflet-control-attribution {
	background: rgba(246, 241, 231, 0.7);
	font-size: 10px;
}

/* ---- Marker: our own dot, no Leaflet PNGs -------------------------------- */

.bfl .bfl-pin {
	position: relative;
}

.bfl .bfl-pin__dot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	transform: translate(-50%, -50%);
	background: var(--bfl-accent, #CD9A85);
	border: 2px solid #F6F1E7;
	border-radius: 50%;
	box-shadow: 0 1px 6px rgba(5, 57, 50, 0.55);
}

.bfl .bfl-pin__pulse {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--bfl-accent, #CD9A85);
	opacity: 0.55;
	animation: bfl-pulse 2.4s ease-out infinite;
}

@keyframes bfl-pulse {
	0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.5; }
	70%  { transform: translate(-50%, -50%) scale(3.4); opacity: 0; }
	100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.bfl .bfl-pin__pulse { animation: none; opacity: 0; }
}

.bfl .bfl__map .bfl-pin__label {
	background: rgba(5, 57, 50, 0.9);
	color: #F6F1E7;
	border: 0;
	border-radius: 999px;
	padding: 3px 10px;
	font-family: var(--bfl-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	box-shadow: 0 2px 8px rgba(5, 57, 50, 0.4);
	white-space: nowrap;
}

.bfl .bfl__map .bfl-pin__label::before {
	display: none; /* kill Leaflet's tooltip arrow */
}

/* ---- Overlay ------------------------------------------------------------- */

/* Only the lower band — a full scrim would grey out the whole map. Matches the
   reference, whose overlay covers roughly the bottom 38%. */
.bfl .bfl__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	/* Tuned for SATELLITE view. Esri imagery swings from dark water to bright
	   sand frame to frame, so the text zone (bottom band) is held at a near-solid
	   forest floor from 78% down — the headline/address must read over the
	   WORST case (a sunlit sandbar), not the average. The text-shadow halo below
	   is the second layer of insurance. */
	height: 74%;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		color-mix(in srgb, var(--bfl-overlay), transparent 55%) 34%,
		color-mix(in srgb, var(--bfl-overlay), transparent 12%) 58%,
		var(--bfl-overlay) 78%,
		var(--bfl-overlay) 100%
	);
	pointer-events: none;
	z-index: 1;
}

/* ---- Content ------------------------------------------------------------- */

.bfl .bfl__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1800px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 56px);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	pointer-events: none;
}

.bfl .bfl__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
	max-width: 720px;
}

.bfl .bfl__headline {
	margin: 0;
	padding: 0;
	font-family: var(--bfl-font-display);
	/* 400, same restraint as the Statement and Guest Stories headlines. */
	font-weight: 400;
	font-size: clamp(2.25rem, 5vw, 4.5rem);
	line-height: 0.92;
	letter-spacing: -0.03em;
	color: var(--bfl-text);
	text-align: center;
	/* Insurance over a live map whose colours we don't control frame to frame:
	   a tight near-solid edge shadow for contrast against bright pixels, plus a
	   wide soft glow to seat the whole word on the forest scrim. */
	text-shadow: 0 1px 2px rgba(5, 57, 50, 0.92), 0 3px 22px rgba(5, 57, 50, 0.78), 0 0 52px rgba(5, 57, 50, 0.55);
}

.bfl .bfl__headline em {
	font-style: italic;
}

.bfl .bfl__headline .lvh-underline-wave {
	font-style: normal;
	text-decoration: underline;
	text-decoration-style: wavy;
	text-decoration-color: #CD9A85;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.12em;
}

.bfl .bfl__address {
	margin: 0;
	padding: 0;
	/* Wide enough that the longest explicit line ("Purok 7, Sitio Puntian,
	   Cemento", uppercase + 3px tracking) stays on ONE line on desktop; capped
	   to the viewport so it never overflows on a phone. */
	max-width: min(90vw, 480px);
	font-family: var(--bfl-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--bfl-text);
	opacity: 1;
	text-align: center;
	text-shadow: 0 1px 2px rgba(5, 57, 50, 0.95), 0 1px 14px rgba(5, 57, 50, 0.82);
}

/* 0,4,0 — see the specificity note at the top. `.bfl .bfl__cta` (0,2,0) would
   lose to the theme's anchor rule and the label would inherit the overlay's
   cream, going invisible on a cream pill. */
.bfl .bfl__inner .bfl__content .bfl__cta,
.bfl .bfl__inner .bfl__content .bfl__cta:not(:hover) {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	border-radius: 999px;
	background: #CD9A85;
	color: var(--bfl-cta-color);
	font-family: var(--bfl-font-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 250ms ease, color 250ms ease, transform 250ms ease;
}

/* Sits over the (dark) satellite scrim: lighten to teal on hover so it stays visible. */
.bfl .bfl__inner .bfl__content .bfl__cta:hover {
	background: #B77E62;
	color: #053932;
	transform: scale(1.02);
}

.bfl .bfl__inner .bfl__content .bfl__cta:focus-visible {
	outline: 2px solid var(--bfl-cta-bg);
	outline-offset: 3px;
}

@media (max-width: 640px) {
	.bfl .bfl__content {
		gap: 16px;
	}

	.bfl .bfl__overlay {
		height: 58%;
	}
}