/* =========================================================================
   SSR federated Algolia autocomplete — artboard 10i
   Destination: Site Editor > Styles > Additional CSS
               (wp_global_styles post 116474, key styles.css)
   All selectors are namespaced .ssr-fs-*; the panel is a body-level element,
   so nothing here can leak into theme or Kadence styles.

   DEPLOY PREREQUISITE — Perfmatters, not FlyingPress.
   FlyingPress currently has css_js_minify=false and css_rucss=false, so the
   @keyframes-inside-@media and SVG data-URI concerns are moot there. Perfmatters
   is the active optimizer (defer_js=1, delay_js=1) and already carries persisted
   Remove-Unused-CSS settings (rucss_method='file'). Every .ssr-fs-* element is
   created at runtime by JS and appears in no page's HTML, so the moment anyone
   turns Perfmatters RUCSS on, this entire stylesheet is stripped and the panel
   renders unstyled and unpositioned. Before or with this deploy:
       Perfmatters > Assets > rucss_excluded_selectors   ->  add  .ssr-fs-

   ROUND 3 — C1, the scrim and the homepage
   The round-2 fix (B7) put the scrim at z-index 999, BELOW the header's own
   stacking context, and that is only true on some pages. Verified against the
   live site, Kadence's rule is:

       :where(header .kb-row-layout-wrap:has(.wp-block-kadence-navigation)){z-index:1000}
       :where(       .kb-row-layout-wrap:has(.wp-block-kadence-navigation)){z-index:49}

   (kadence-blocks/dist/style-blocks-rowlayout.css — the selector is
   .wp-block-kadence-navigation, NOT .wp-block-navigation.) The homepage builds
   its header from the "Header and Footer" page template and emits no <header>
   element at all — curled today: 0 <header> on / and 1 on /real-estate/ — so its
   header row matches the second rule, lands at 49, and .kb-row-layout-wrap is
   position:relative, so a stacking context forms there. A 999 scrim paints
   straight over the site's most-used search box, and no z-index on the input can
   escape a context two ancestors up. Renumbering is not a fix.

   So the scrim is no longer one rectangle. `.ssr-fs-backdrop` paints nothing and
   takes no pointer events; it hosts FOUR `.ssr-fs-scrim-part` rectangles that JS
   lays around the focused field's own bounding box, leaving a genuine hole. The
   field is never painted over and never hit-tested over, so the visitor keeps the
   caret, drag-select, double-click-to-select and the native type="search" clear
   (×) button.

   With the hole in place the scrim is free to sit ABOVE the header (999998)
   rather than gambling on being below it, which is what makes / and
   /real-estate/ behave identically instead of differing by which template part
   rendered. Nothing in this file reads a theme z-index any more. The highest
   real full-page overlay on the site is 100000 (the core navigation modal, the
   lightbox overlay and the skip link), so 999998/999999 clear everything without
   resorting to 2147483647.

   Carried forward from round 2, unchanged:
   D1  The "See all N results →" CTA is gone — `/?s=` renders Auto Drafts and test
       pages, and there is no all-results view to point at. The footer strip is
       "Search by Algolia" alone, centred so it reads as a deliberate band.
   M7  The panel's height/width/offset all come from JS custom properties that are
       recomputed on visualViewport resize AND scroll, so the iOS soft keyboard
       cannot detach the panel from its input or hide the list underneath itself.
       The mobile block no longer hardcodes 100vw — that measures the LAYOUT
       viewport and is wrong the moment the keyboard is up.
   ========================================================================= */

:root {
	--ssr-fs-panel-bg: #ffffff;
	--ssr-fs-border: #d6d5d8;          /* --border-on-light */
	--ssr-fs-title: #2f2e30;           /* charcoal-800 */
	--ssr-fs-muted: #6f6d73;           /* --text-on-light-muted / charcoal-500 */
	--ssr-fs-faint: #8f8d93;           /* charcoal-400 */
	--ssr-fs-hover: #f7f7f6;           /* charcoal-50 */
	--ssr-fs-mark-bg: #f4fad1;         /* green-100 */
	--ssr-fs-placeholder: #ececeb;
	--ssr-fs-radius: var( --ssr-radius-md, 10px );
	--ssr-fs-shadow: 0 18px 30px -14px rgba( 26, 26, 27, .35 );
	--ssr-fs-scrim: rgba( 26, 26, 27, .18 );

	/*
	 * C1. Both above every stacking context on the site; the panel above the
	 * scrim. These no longer have to be coordinated with the theme, because the
	 * scrim has a hole in it where the search field is — see the header note.
	 * Keep them adjacent and keep the panel the larger of the two.
	 */
	--ssr-fs-z-backdrop: 999998;
	--ssr-fs-z-panel: 999999;

	/* Site tokens first, then a real fallback stack for each. */
	--ssr-fs-display: var( --ssr-font-display, var( --wp--preset--font-family--outfit, Outfit ) ),
		Outfit, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ssr-fs-ui: var( --ssr-font-ui, var( --wp--preset--font-family--public-sans, "Public Sans" ) ),
		"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Scrim -------------------------------------------------------------
 * C1. A cut-out, not a pane.
 *
 * `.ssr-fs-backdrop` is a positioning and stacking HOST only: it paints nothing
 * and takes no pointer events, so the gap between the four parts is a real hole
 * — no paint, no hit-testing — and not a transparent sheet that still eats the
 * first click on the field.
 *
 * The four parts are laid out from JS in layout-viewport pixels (top / bottom
 * span the full width; left / right fill the band beside the field), so the only
 * thing this file has to get right is that they are absolutely positioned inside
 * the inset:0 fixed host, which makes their coordinates viewport coordinates.
 *
 * A scrim over the search input eats the first click: the visitor cannot get back
 * into their own query to fix a typo, cannot drag-select or double-click a word
 * in it, and cannot reach the native clear (×) button. That is what the hole
 * prevents — on every page, at any z-index, with no dependency on the theme.
 * ---------------------------------------------------------------------- */

.ssr-fs-backdrop {
	position: fixed;
	inset: 0;
	z-index: var( --ssr-fs-z-backdrop, 999998 );
	background: none;
	/* The hole is only a hole if nothing here is hit-testable. */
	pointer-events: none;
}

.ssr-fs-backdrop[hidden] {
	display: none;
}

/*
 * The four rectangles. Geometry (left/top/width/height) is written inline by JS
 * every time the panel opens and on every scroll, resize and visualViewport
 * change, so nothing is declared here that JS also sets.
 */
.ssr-fs-scrim-part {
	position: absolute;
	background: var( --ssr-fs-scrim );
	pointer-events: auto;
}

/* --- Panel ------------------------------------------------------------- */

.ssr-fs-panel {
	position: fixed;
	top: var( --ssr-fs-top, 0px );
	left: var( --ssr-fs-left, 0px );
	width: var( --ssr-fs-width, 560px );
	max-width: calc( 100vw - 16px );
	/*
	 * JS always sets --ssr-fs-maxheight from the VISUAL viewport before the panel
	 * is shown, so this fallback only covers the frame before that lands. It is
	 * deliberately ONE declaration: a var() whose substituted value is invalid
	 * computes to the property's initial value rather than falling back to an
	 * earlier declaration, so a "vh then svh" pair would silently mean
	 * max-height:none anywhere svh is unknown.
	 */
	max-height: var( --ssr-fs-maxheight, 60vh );
	z-index: var( --ssr-fs-z-panel, 999999 );
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 4px 8px 0;
	background: var( --ssr-fs-panel-bg );
	border: 1px solid var( --ssr-fs-border );
	border-top: 0;
	border-radius: 0 0 var( --ssr-fs-radius ) var( --ssr-fs-radius );
	box-shadow: var( --ssr-fs-shadow );
	font-family: var( --ssr-fs-ui );
	color: var( --ssr-fs-title );
	text-align: left;
	overflow: hidden;
}

.ssr-fs-panel[hidden] {
	display: none;
}

.ssr-fs-panel * {
	box-sizing: border-box;
}

@media ( prefers-reduced-motion: no-preference ) {
	.ssr-fs-panel {
		animation: ssr-fs-in 120ms ease-out both;
	}
}

/* Kept at the top level, not nested inside the @media block: some CSS
   minifiers mangle a nested @keyframes, and Perfmatters' optimizer is the one
   active on this site. */
@keyframes ssr-fs-in {
	from { opacity: 0; transform: translateY( -4px ); }
	to   { opacity: 1; transform: none; }
}

/* role="listbox" lives here, on the scrolling list — not on the panel — so the
   footer attribution is not loose text inside a listbox. */
.ssr-fs-list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* --- Group ------------------------------------------------------------- */

.ssr-fs-grouphead {
	font-family: var( --ssr-fs-display );
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var( --ssr-fs-muted );
	padding: 12px 12px 4px;
	margin: 0;
}

/* --- Row --------------------------------------------------------------- */

.ssr-fs-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	border-radius: 8px;
	cursor: pointer;
	user-select: none;
}

.ssr-fs-row:hover {
	background: var( --ssr-fs-hover );
}

/* Keyboard focus reads differently from a mouse hover on purpose. */
.ssr-fs-row.is-active {
	background: var( --ssr-fs-hover );
	box-shadow: inset 0 0 0 1px var( --ssr-fs-border );
}

.ssr-fs-main {
	flex: 1 1 auto;
	min-width: 0;
}

.ssr-fs-title {
	font-family: var( --ssr-fs-display );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var( --ssr-fs-title );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ssr-fs-sub {
	font-family: var( --ssr-fs-ui );
	font-size: 12px;
	line-height: 1.35;
	color: var( --ssr-fs-muted );
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ssr-fs-rail {
	flex: 0 0 auto;
	font-family: var( --ssr-fs-ui );
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var( --ssr-fs-muted );
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Search-match tint. */
.ssr-fs-mark {
	background: var( --ssr-fs-mark-bg );
	border-radius: 2px;
	color: inherit;
	padding: 0 1px;
}

/* --- Listing thumbnail (added to 10i at the client's request) ----------- */

.ssr-fs-thumb {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 6px;
	object-fit: cover;
	display: block;
	background: var( --ssr-fs-placeholder );
}

/* A small house glyph so a missing photo still reads as a listing. */
.ssr-fs-thumb--empty {
	box-shadow: inset 0 0 0 1px var( --ssr-fs-border );
	background-color: var( --ssr-fs-placeholder );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8d93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 4l9 6.5'/%3E%3Cpath d='M5.5 12v7.5h13V12'/%3E%3C/svg%3E" );
}

/* --- Empty state -------------------------------------------------------
 * Carries role="option" aria-disabled="true" so a listbox-mode screen reader
 * reaches it instead of hearing nothing. It is not selectable, so it must not
 * look clickable.
 * ---------------------------------------------------------------------- */

.ssr-fs-empty {
	font-family: var( --ssr-fs-ui );
	font-size: 13px;
	color: var( --ssr-fs-muted );
	padding: 18px 12px;
	cursor: default;
}

/* --- Footer ------------------------------------------------------------
 * D1. The "See all N results →" CTA is gone. What remains is the Algolia
 * attribution, which their terms require — centred, so a single short item in
 * a full-width strip reads as intentional rather than orphaned in a corner.
 * ---------------------------------------------------------------------- */

.ssr-fs-footer {
	flex: none;
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 1px solid var( --ssr-fs-border );
	margin-top: 6px;
	padding: 10px 12px;
}

.ssr-fs-attribution {
	font-family: var( --ssr-fs-ui );
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: .01em;
	color: var( --ssr-fs-faint );
	white-space: nowrap;
}

/* The empty state gets a slightly tighter strip — nothing above it to balance. */
.ssr-fs-panel.is-empty .ssr-fs-footer {
	margin-top: 0;
	padding: 8px 12px;
}

/* --- Screen-reader live region ----------------------------------------- */

.ssr-fs-live {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* --- Mobile ------------------------------------------------------------
 * Width, left offset and max-height all come from JS, which measures the
 * VISUAL viewport (window.visualViewport) rather than 100vw. On iOS the two
 * disagree the whole time the soft keyboard is up: 100vw is the layout
 * viewport, which the keyboard does not change. Only the type and spacing
 * tweaks belong here.
 * ---------------------------------------------------------------------- */

@media ( max-width: 767px ) {
	.ssr-fs-panel {
		/* Defensive only: JS always sets --ssr-fs-width before the panel shows. */
		max-width: calc( 100vw - 16px );
		border-radius: var( --ssr-fs-radius );
		border-top: 1px solid var( --ssr-fs-border );
	}

	.ssr-fs-title {
		font-size: 14.5px;
	}

	.ssr-fs-row {
		padding: 10px;
	}

	/* The price/count rail wins the space fight over a long address. */
	.ssr-fs-rail {
		max-width: 40%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* --- Forced-colors ----------------------------------------------------- */

@media ( forced-colors: active ) {
	/*
	 * Forced-colors mode replaces author background-color with a system colour, so
	 * a translucent scrim would repaint as an OPAQUE Canvas rectangle and blank the
	 * page around the panel. The dimming is decoration; the panel's CanvasText
	 * border already separates it from the page. Drop the scrim entirely — the
	 * hole logic and the pointer-events behaviour are unaffected because the parts
	 * are gone rather than transparent.
	 */
	.ssr-fs-backdrop {
		display: none;
	}

	.ssr-fs-panel {
		border: 1px solid CanvasText;
	}

	.ssr-fs-row.is-active {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}

	.ssr-fs-mark {
		background: Mark;
		color: MarkText;
	}
}