/*
 * RealtyPress skin.
 *
 * Loaded only when RealtyPress is active — see ADX_RealtyPress::styles(). It
 * exists purely to make another plugin's markup inherit this theme's tokens,
 * so shipping it to every page of every non-real-estate site would be a
 * request for nothing.
 *
 * Everything is scoped under .adx-rps, the container the theme wraps around
 * plugin output. Nothing here can reach RealtyPress's own admin screens, or a
 * page where the site owner has used the plugin's shortcodes directly and
 * wants its stock look.
 *
 * The approach is deliberately narrow: type, colour, radius, spacing and
 * touch-target sizes get the theme's tokens; the plugin keeps its own
 * structure. Rewriting its layout from a theme stylesheet would break on its
 * next release, and its templates are what the vendor keeps compliant with
 * CREA's DDF® display terms.
 *
 * Selectors use attribute matching ([class*="listing-item"]) alongside the
 * literal class names, because the Lite and Premium editions do not emit an
 * identical DOM and a theme cannot assume which one is installed.
 */

.adx-rps {
	--adx-rps-radius: var(--wp--custom--radius--lg);
	font-family: var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--body);
}

.adx-rps :where(h1, h2, h3, h4, h5) {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--ink);
	letter-spacing: -0.02em;
}

.adx-rps :where(img) { max-inline-size: 100%; block-size: auto; }

/* RealtyPress lays its results out in its own grid; capping the track
 * minimum is what stops a long unbroken address widening the page. */
.adx-rps :where([class*="listing"], [class*="property"], [class*="rps-"]) { min-width: 0; }

.adx-rps :where(.rps-listing, .rps-listing-item, [class*="listing-item"]) {
	border-radius: var(--adx-rps-radius);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--surface);
	transition: border-color var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base);
}

.adx-rps :where(.rps-listing, .rps-listing-item, [class*="listing-item"]):hover {
	border-color: var(--wp--preset--color--line-strong);
	box-shadow: var(--wp--preset--shadow--md);
}

.adx-rps :where([class*="price"]) {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 680;
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums;
}

.adx-rps :where(button, input[type="submit"], .btn, [class*="button"]) {
	border-radius: var(--wp--custom--radius--md);
	min-block-size: 2.75rem;
	font-family: inherit;
	font-weight: 600;
}

.adx-rps :where(input, select, textarea) {
	min-block-size: 2.75rem;
	border-radius: var(--wp--custom--radius--sm);
	border: 1px solid var(--wp--preset--color--line-strong);
	/* 16px minimum, or iOS zooms the whole page on focus. */
	font-size: max(1rem, var(--wp--preset--font-size--sm));
	font-family: inherit;
	padding-inline: 0.85rem;
}

.adx-rps :where(input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--brand);
}

/* The search form sitting inside a dark hero. */
.adx-hero .adx-rps-search,
.adx-rps-search.is-on-hero {
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--30);
	box-shadow: var(--wp--preset--shadow--xl);
}

/* Tables of listing details overflow on phones; they scroll in their own box
 * rather than widening the document. */
.adx-rps :where(table) { display: block; overflow-x: auto; max-inline-size: 100%; }