/* --------------------------------------------------------------------------
   11. IDX photo lightbox.

   The pop-out gallery for property detail pages. The overlay is built in the
   light dom by custom.js rather than inside the IDX shadow root: React owns
   that root and re-renders it, and anything placed there has to be re-created
   each time. Out here it is built once and styled like any other component.
   -------------------------------------------------------------------------- */
.bw-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	gap: clamp( 8px, 2vw, 28px );
	padding: clamp( 16px, 4vw, 56px );
	background: rgba( 20, 16, 13, 0.94 );
	-webkit-backdrop-filter: blur( 4px );
	backdrop-filter: blur( 4px );
}

.bw-lb.is-open {
	display: flex;
}

.bw-lb__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	margin: 0;
	min-width: 0;
	max-height: 100%;
}

.bw-lb__img {
	max-width: 100%;
	max-height: 84vh;
	width: auto;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 40px 90px -40px rgba( 0, 0, 0, 0.8 );
	object-fit: contain;
}

/* Controls share one shape: a hairline disc that fills on hover. */
.bw-lb__close,
.bw-lb__nav {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid rgba( 255, 255, 255, 0.4 );
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.08 );
	color: #fff;
	font-family: var( --e-global-typography-text-font-family, sans-serif );
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.bw-lb__close:hover,
.bw-lb__nav:hover {
	background: rgba( 255, 255, 255, 0.22 );
	transform: scale( 1.06 );
}

.bw-lb__close:focus-visible,
.bw-lb__nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Close sits out of the flow so the photo stays optically centred. */
.bw-lb__close {
	position: absolute;
	top: clamp( 14px, 3vw, 34px );
	right: clamp( 14px, 3vw, 34px );
	font-size: 26px;
}

.bw-lb__count {
	position: absolute;
	bottom: clamp( 14px, 3vw, 30px );
	left: 50%;
	transform: translateX( -50% );
	margin: 0;
	font-family: var( --e-global-typography-text-font-family, sans-serif );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.72 );
}

/* On phones the arrows overlay the photo rather than squeezing it. */
@media ( max-width: 640px ) {
	.bw-lb__nav {
		position: absolute;
		top: 50%;
		width: 44px;
		height: 44px;
		margin-top: -22px;
		font-size: 24px;
	}

	.bw-lb__nav--prev { left: 10px; }
	.bw-lb__nav--next { right: 10px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.bw-lb__close,
	.bw-lb__nav {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   12. IDX pages: header strip and page title.

   The IDX detail page is not an Elementor document, so it gets neither the
   hero that normally sits under the transparent fixed header nor the theme
   spacing. custom.js adds .bw-idx-page to the body when an IDX widget is on
   the page, and these two rules hang off it.
   -------------------------------------------------------------------------- */

/*
 * Without a hero behind it the white nav sat on white page, invisible. Give
 * the header the same solid treatment it takes on scroll, permanently, and
 * clear its height so the gallery does not start underneath it.
 */
/*
 * The strip is its own layer rather than a background on the header.
 *
 * Elementor 4 drives container boxes through custom properties - post-59.css
 * emits --min-height, --position, --z-index and the rest, and its base
 * stylesheet reads them. Declaring background-color, border-color or
 * min-height on .bw-header therefore loses to machinery that is not a simple
 * cascade, even with !important; backdrop-filter, which Elementor does not
 * manage, was the only property from that rule to survive.
 *
 * A fixed bar behind the header sidesteps all of it. z-index 99 comes from
 * Elementor's own --z-index:100 on the header, so it sits directly beneath.
 */
body.bw-idx-page::before {
	content: "";
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 99;
	height: 120px;
	background: rgba( 18, 15, 13, 0.96 );
	pointer-events: none;
}

@media ( max-width: 1024px ) {
	body.bw-idx-page::before {
		height: 92px;
	}
}

/*
 * Line the IDX widget up with the rest of the site. Left to itself it renders
 * 1156px wide, inset about 72px inside the 1300px container the header and
 * footer use, so the listing sat visibly narrower than everything around it.
 *
 * min-height keeps the footer down the page while Kestrel fetches. Without it
 * the widget is an empty div on first paint and the footer rides up under the
 * header, then jumps when the listing arrives.
 */
body.bw-idx-page .ihf-container {
	display: block;
	width: 100%;
	max-width: 1300px;
	min-height: 50vh;
	margin: 132px auto 0;
}

/*
 * Hello Elementor caps its main column at 1140px, which is what actually held
 * the listing narrower than the header - a max-width on the widget alone could
 * never widen it past its parent. Raised to the 1300px the rest of the site
 * uses so the two line up.
 */
body.bw-idx-page #content.site-main {
	max-width: 1300px;
}

/*
 * The theme prints the listing address as an h1 above everything, which put a
 * 186px title before the gallery. The widget renders the same address a few
 * rows further down, styled as the price header, so the duplicate goes and the
 * title lands after the gallery where it belongs.
 *
 * Hidden rather than removed: it stays in the document for screen readers and
 * for anything reading the page outline.
 */
body.bw-idx-page .page-header {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* While the gallery is still fetching the rest of the photos. */
.bw-lb.is-loading .bw-lb__count {
	opacity: 0.8;
}

.bw-lb.is-loading .bw-lb__count::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 9px;
	vertical-align: middle;
	border: 1.5px solid rgba( 255, 255, 255, 0.35 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: bwLbSpin 0.7s linear infinite;
}

@keyframes bwLbSpin {
	to { transform: rotate( 360deg ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.bw-lb.is-loading .bw-lb__count::after {
		animation: none;
	}
}