/**
 * Realist — SKIN layer (default presentation).
 *
 * Everything here is decoration: colours, spacing, radii, shadows, type. It gives
 * Realist a sensible out-of-the-box look on any theme, and is fully overridable —
 * or dequeue it entirely and let an owning theme style the `realist-*` classes:
 *
 *     add_filter( 'realist_enqueue_default_skin', '__return_false' );
 *
 * Every value reads from a token with a fallback, so a theme can restyle Realist
 * by setting a handful of custom properties rather than fighting selectors.
 */

:root {
	/* Brand — also injected per-site from Settings (see Assets::enqueue_styles). */
	--realist-color-primary: #737F83;
	--realist-color-secondary: #22224A;

	/* Neutrals */
	--realist-color-text: #0D0B05;
	--realist-color-surface: #FFFFFF;
	--realist-color-border: #F1F1F1;
	--realist-color-on-brand: #FFFFFF;

	/* Shape & rhythm */
	--realist-radius: 8px;
	--realist-radius-sm: 4px;
	--realist-radius-pill: 50px;
	--realist-space: 15px;
	--realist-space-lg: 30px;
	--realist-card-min: 320px;
	--realist-card-ratio: 66.66%;
	--realist-transition: 0.3s ease;
}

/* ---------- Filter bar ---------- */
.realist-filter-bar {
	gap: var( --realist-space );
	background: var( --realist-color-surface );
	padding: 20px;
	border-radius: var( --realist-radius );
	margin-bottom: var( --realist-space-lg );
}
.realist-filter-group label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var( --realist-color-primary );
	margin-bottom: 5px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.realist-filter-group select {
	border-radius: var( --realist-radius-sm );
	font-size: 1rem;
	color: var( --realist-color-text );
	outline: none;
	background: var( --realist-color-surface );
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	padding: 10px 35px 10px 10px;
	border: 1px solid var( --realist-color-border );
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23737F83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 20px;
}
.realist-filter-group input[type="number"],
.realist-filter-group input[type="text"] {
	padding: 10px;
	border: 1px solid var( --realist-color-border );
	border-radius: var( --realist-radius-sm );
	font-size: 1rem;
	color: var( --realist-color-text );
}
.realist-filter-group select:focus,
.realist-filter-group input:focus { border-color: var( --realist-color-primary ); outline: none; }
.realist-filter-range { gap: 8px; }
.realist-filter-checks { gap: 12px; padding-top: 8px; }
.realist-filter-checks label {
	gap: 6px;
	font-size: 0.95rem;
	color: var( --realist-color-text );
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

/* Count hint on a document button that fronts a multi-file carousel. */
.realist-action-count { opacity: 0.7; font-weight: 400; margin-left: 0.35em; }

/* ---------- Availability toggle ---------- */
.realist-toggle { gap: 10px; cursor: pointer; user-select: none; }
.realist-toggle-opt {
	font-size: 0.9rem;
	font-weight: 500;
	color: var( --realist-color-text );
	opacity: 0.45;
	transition: opacity var( --realist-transition );
}
/* Default (unchecked) = "All" active. :checked flips the emphasis. */
.realist-toggle-opt--off { opacity: 1; }
.realist-toggle-input:checked ~ .realist-toggle-opt--off { opacity: 0.45; }
.realist-toggle-input:checked ~ .realist-toggle-opt--on { opacity: 1; }
.realist-toggle-track {
	width: 46px;
	height: 24px;
	background: var( --realist-color-border );
	border-radius: var( --realist-radius-pill );
	transition: background var( --realist-transition );
}
.realist-toggle-thumb {
	left: 3px;
	width: 18px;
	height: 18px;
	background: var( --realist-color-surface );
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.25 );
	transition: left var( --realist-transition );
}
.realist-toggle-input:checked ~ .realist-toggle-track { background: var( --realist-color-primary ); }
.realist-toggle-input:checked ~ .realist-toggle-track .realist-toggle-thumb { left: 25px; }
.realist-toggle-input:focus-visible ~ .realist-toggle-track {
	outline: 2px solid var( --realist-color-primary );
	outline-offset: 2px;
}

/* ---------- Grid & loader ---------- */
.realist-grid-container { gap: var( --realist-space-lg ); transition: opacity var( --realist-transition ); }
.realist-loader {
	border: 4px solid var( --realist-color-border );
	border-top: 4px solid var( --realist-color-primary );
	border-radius: 50%;
	width: 40px;
	height: 40px;
}

/* ---------- Card ---------- */
.realist-property-card {
	background: var( --realist-color-surface );
	border-radius: var( --realist-radius );
	text-decoration: none;
	color: inherit;
	transition: transform var( --realist-transition );
	box-shadow: none !important;
}
.realist-property-card:hover { transform: translateY( -4px ); box-shadow: none !important; }
.realist-card-image { background: var( --realist-color-border ); }
.realist-card-image img { transition: transform 0.5s ease; }
.realist-property-card:hover .realist-card-image img { transform: scale( 1.05 ); }

.realist-card-badge {
	padding: 6px 12px;
	border-radius: var( --realist-radius-sm );
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var( --realist-color-on-brand );
}
.realist-badge-active { background: var( --realist-color-primary ); }
.realist-badge-sold { background: var( --realist-color-secondary ); }

.realist-card-content { padding: 20px; }
.realist-card-header-row { gap: var( --realist-space ); margin-bottom: 5px; }
/* Card fonts are variation-settable (theme.json → settings.custom.realist.card.*). */
.realist-card-title { margin: 0; font-size: var( --realist-card-title-size, var( --wp--custom--realist--card--title-size, 1.15rem ) ); color: var( --realist-color-text ); font-weight: 600; flex: 1 1 60%; min-width: 0; overflow-wrap: break-word; line-height: 1.3; }
.realist-card-link { color: inherit; }
/* A card paints its own surface (--realist-color-surface), so it must also
 * assert its own text colour rather than inherit the section it sits in.
 * Dropping a card grid into a group with a link colour set makes WordPress emit
 * `.wp-elements-<hash> a:where(:not(.wp-element-button)) { color: … }` —
 * specificity (0,1,1), which beats `.realist-card-link` (0,1,0) and paints the
 * title in that section's link colour. On a light card in a coloured band that
 * is white-on-white. Scoping to the card wrapper gives (0,2,0) and wins without
 * needing !important. */
.realist-property-card .realist-card-title,
.realist-property-card .realist-card-link { color: var( --realist-color-text ); }
/* Keyboard focus lands on the stretched link — ring the whole card. */
.realist-card-link:focus-visible::after { outline: 2px solid var( --realist-color-primary ); outline-offset: -3px; }
.realist-card-price { margin: 0; font-size: var( --realist-card-price-size, var( --wp--custom--realist--card--price-size, 1.15rem ) ); color: var( --realist-color-primary ); font-weight: 700; white-space: nowrap; text-align: right; flex: 0 0 auto; }
.realist-card-subtitle { margin: 0 0 var( --realist-space ) 0; font-size: var( --realist-card-subtitle-size, var( --wp--custom--realist--card--subtitle-size, 0.95rem ) ); color: var( --realist-color-primary ); }
.realist-card-meta {
	gap: var( --realist-space );
	padding-top: var( --realist-space );
	border-top: 1px solid var( --realist-color-border );
	font-size: 0.9rem;
	color: var( --realist-color-primary );
}
.realist-card-meta span i { margin-right: 5px; color: var( --realist-color-primary ); }
.realist-no-results { text-align: center; padding: 40px; font-size: 1.2rem; color: var( --realist-color-primary ); }

.realist-load-more-btn {
	display: inline-block;
	background-color: var( --realist-color-primary );
	color: var( --realist-color-on-brand );
	padding: 14px 30px;
	border-radius: var( --realist-radius );
	font-size: 1rem;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: all var( --realist-transition );
}
.realist-load-more-btn:hover { background-color: var( --realist-color-secondary ); transform: translateY( -2px ); }
.realist-load-more-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ---------- Feature tags ---------- */
.realist-features-tags { gap: 8px; margin-bottom: 20px; font-family: inherit; }
.realist-feature-badge {
	background-color: var( --realist-color-primary );
	color: var( --realist-color-on-brand );
	padding: 6px 14px;
	border-radius: var( --realist-radius-pill );
	font-size: 0.85em;
	font-weight: 600;
}

/* ---------- Sidebar & badges ---------- */
.realist-sidebar i.fa { color: var( --realist-color-primary ); margin-right: 10px; }
.realist-sidebar p { margin-bottom: 0.5rem; }
.realist-sidebar a { text-decoration: none; font-weight: bold; }
.realist-sidebar .realist-icon-success { color: var( --realist-color-primary ); }
.realist-sidebar .realist-icon-danger { color: var( --realist-color-secondary ); }
.realist-sidebar .realist-tenancy-details { margin-top: 0.5rem; }
.realist-badge { padding: 5px 10px; border-radius: var( --realist-radius-sm ); font-size: 0.8rem; font-weight: bold; text-transform: uppercase; }
.realist-badge-primary { background-color: var( --realist-color-primary ); color: var( --realist-color-on-brand ); }
.realist-badge-warning { background-color: var( --realist-color-secondary ); color: var( --realist-color-on-brand ); }
hr.realist-sidebar-divider { border: 0; border-top: 1px solid #eee; margin: 1.5rem 0; }

/* ---------- Action buttons ---------- */
.realist-action-buttons { gap: var( --realist-space ); margin-top: 40px; margin-bottom: 40px; }
.realist-action-btn {
	background-color: var( --realist-color-primary );
	color: var( --realist-color-on-brand );
	padding: 14px 24px;
	border-radius: var( --realist-radius );
	font-weight: 600;
	text-decoration: none;
	transition: all var( --realist-transition );
	font-size: 0.9em;
}
.realist-action-btn i.fa { margin-right: 10px; font-size: 1.2em; }
.realist-action-btn:hover {
	background-color: var( --realist-color-secondary );
	color: var( --realist-color-on-brand );
	transform: translateY( -3px );
	box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.1 );
}

/* ---------- Map ---------- */
.realist-map-wrapper { margin: 0; overflow: hidden; border-radius: var( --realist-radius ); position: relative; z-index: 1; }
.realist-map { width: 100%; }
/* Leaflet's own controls, nudged onto Realist's shape scale. */
.realist-map .leaflet-control-attribution { font-size: 0.7rem; }

/* ---------- Carousel ---------- */
.realist-property-carousel { margin-bottom: var( --realist-space-lg ); }
.realist-property-carousel .splide__slide { opacity: 0.4; transition: opacity var( --realist-transition ); }
.realist-property-carousel .splide__slide.is-active { opacity: 1; }
.realist-property-carousel .splide__slide img { border-radius: var( --realist-radius ); }
.realist-property-carousel .splide__arrow { background: rgba( 0, 0, 0, 0.4 ); transition: background var( --realist-transition ); height: 3rem; width: 3rem; }
.realist-property-carousel .splide__arrow:hover { background: rgba( 0, 0, 0, 0.7 ); }
.realist-property-carousel .splide__arrow svg { fill: var( --realist-color-on-brand ); }
.realist-property-carousel .splide__pagination { bottom: -25px; }
.realist-property-carousel .splide__pagination__page.is-active { background: #000; transform: scale( 1.2 ); }

/* ---------- Lead form ----------
 * Every default here is wrapped in :where() (zero specificity) and driven by a
 * form-scoped custom property that falls back through the Realist token, then
 * the theme's own WordPress preset, then a literal. So the form adopts the
 * active theme / style variation automatically, and a theme or Global Styles
 * override always wins without !important. The spacing is handled by the grid
 * gap in the structure layer, so there are no per-field margins here.
 */
:where( .realist-lead-form ) {
	--realist-form-field-bg: var( --wp--custom--realist--form--field--background, var( --realist-color-surface, var( --wp--preset--color--base, #fff ) ) );
	--realist-form-field-border: var( --wp--custom--realist--form--field--border, var( --realist-color-border, #ddd ) );
	--realist-form-accent: var( --realist-color-primary, var( --wp--preset--color--primary, #737f83 ) );
	--realist-form-radius: var( --realist-radius, 6px );

	/* Three independently themeable groups. Set any of these from the theme via
	   theme.json settings.custom → realist.form.{label,field,heading}.{color,size,weight};
	   each falls back to a sensible inherited default when unset. */
	--realist-form-label-color: var( --wp--custom--realist--form--label--color, inherit );
	--realist-form-label-size: var( --wp--custom--realist--form--label--size, inherit );
	--realist-form-label-weight: var( --wp--custom--realist--form--label--weight, 600 );
	--realist-form-label-transform: var( --wp--custom--realist--form--label--transform, none );
	--realist-form-label-spacing: var( --wp--custom--realist--form--label--spacing, normal );

	--realist-form-field-color: var( --wp--custom--realist--form--field--color, var( --wp--preset--color--contrast, inherit ) );
	--realist-form-field-size: var( --wp--custom--realist--form--field--size, inherit );
	--realist-form-field-weight: var( --wp--custom--realist--form--field--weight, inherit );
	--realist-form-field-padding: var( --wp--custom--realist--form--field--padding, 10px );
	--realist-form-field-radius: var( --wp--custom--realist--form--field--radius, var( --realist-form-radius ) );
	--realist-form-label-gap: var( --wp--custom--realist--form--label--gap, 5px );

	/* The submit button is its own group. It previously took the accent colour and
	   the field radius, which coupled three unrelated decisions together: pointing
	   the accent at a focus colour repainted the button, and a dark block style
	   setting `--realist-form-accent: currentColor` for its focus ring turned the
	   button white-on-white. The fill therefore resolves its own colour chain
	   rather than reading the accent — same default value, no shared fate.
	   Every default below reproduces the pre-0.29 value exactly. */
	--realist-form-submit-bg: var( --wp--custom--realist--form--submit--background, var( --realist-color-primary, var( --wp--preset--color--primary, #737f83 ) ) );
	--realist-form-submit-color: var( --wp--custom--realist--form--submit--color, var( --realist-color-on-brand, #fff ) );
	--realist-form-submit-radius: var( --wp--custom--realist--form--submit--radius, var( --realist-form-radius ) );
	--realist-form-submit-padding: var( --wp--custom--realist--form--submit--padding, 12px 26px );
	--realist-form-submit-size: var( --wp--custom--realist--form--submit--size, 1rem );
	--realist-form-submit-weight: var( --wp--custom--realist--form--submit--weight, 600 );
	--realist-form-submit-transform: var( --wp--custom--realist--form--submit--transform, none );
	--realist-form-submit-spacing: var( --wp--custom--realist--form--submit--spacing, normal );
	--realist-form-submit-hover: var( --wp--custom--realist--form--submit--hover, var( --realist-color-secondary, var( --wp--preset--color--secondary, #22224a ) ) );

	--realist-form-heading-color: var( --wp--custom--realist--form--heading--color, inherit );
	--realist-form-heading-size: var( --wp--custom--realist--form--heading--size, inherit );
	--realist-form-heading-weight: var( --wp--custom--realist--form--heading--weight, 700 );
}
:where( .realist-lead-title ) {
	margin: 0;
	color: var( --realist-form-heading-color );
	font-size: var( --realist-form-heading-size );
	font-weight: var( --realist-form-heading-weight );
}
:where( .realist-lead-field label ) {
	margin-bottom: var( --realist-form-label-gap );
	color: var( --realist-form-label-color );
	font-size: var( --realist-form-label-size );
	font-weight: var( --realist-form-label-weight );
	text-transform: var( --realist-form-label-transform );
	letter-spacing: var( --realist-form-label-spacing );
}
:where( .realist-lead-field input[type="text"] ),
:where( .realist-lead-field input[type="email"] ),
:where( .realist-lead-field input[type="tel"] ),
:where( .realist-lead-field input[type="number"] ),
:where( .realist-lead-field input[type="datetime-local"] ),
:where( .realist-lead-field select ),
:where( .realist-lead-field textarea ) {
	padding: var( --realist-form-field-padding );
	border: 1px solid var( --realist-form-field-border );
	border-radius: var( --realist-form-field-radius );
	background: var( --realist-form-field-bg );
	color: var( --realist-form-field-color );
	font-size: var( --realist-form-field-size );
	font-weight: var( --realist-form-field-weight );
}
:where( .realist-lead-field input:focus ),
:where( .realist-lead-field select:focus ),
:where( .realist-lead-field textarea:focus ) { outline: none; border-color: var( --realist-form-accent ); }
:where( .realist-lead-consent label ) { font-weight: 400; gap: 8px; }
:where( .realist-lead-submit ) {
	display: inline-block;
	background-color: var( --realist-form-submit-bg );
	color: var( --realist-form-submit-color );
	padding: var( --realist-form-submit-padding );
	border: none;
	border-radius: var( --realist-form-submit-radius );
	font-size: var( --realist-form-submit-size );
	font-weight: var( --realist-form-submit-weight );
	text-transform: var( --realist-form-submit-transform );
	letter-spacing: var( --realist-form-submit-spacing );
	cursor: pointer;
	transition: background-color var( --realist-transition, 0.2s );
}
:where( .realist-lead-submit:hover ) { background-color: var( --realist-form-submit-hover ); }
:where( .realist-lead-submit:disabled ) { opacity: 0.6; cursor: not-allowed; }
:where( .realist-lead-message ) { padding: 12px 15px; border-radius: var( --realist-form-radius ); }
:where( .realist-lead-message.is-error ) { background: #fde8e8; color: #9b1c1c; }
:where( .realist-lead-message.is-success ) { background: #e6f4ea; color: #1e6b3a; }

/* Features rendered as a plain list (block layout option). */
.realist-features-list { margin: 0 0 20px; padding-left: 1.2em; }
.realist-features-list .realist-feature-item { margin-bottom: 4px; }

/* ---------- Building / divider gallery ---------- */
.realist-divider-gallery {
	background: var( --realist-divider-bg, var( --realist-color-secondary, #22224a ) );
	padding: var( --realist-divider-padding, 2rem ) 0;
}
.realist-divider-carousel .splide__slide img { border-radius: var( --realist-radius, 8px ); }
.realist-divider-carousel .splide__arrow { background: rgba( 255, 255, 255, 0.85 ); }
.realist-divider-carousel .splide__arrow:hover { background: #fff; }
.realist-divider-carousel .splide__arrow svg { fill: var( --realist-color-secondary, #22224a ); }

/* ---------- Agent card ---------- */
.realist-agent-card {
	padding: var( --realist-space );
	border: 1px solid var( --realist-color-border, #eee );
	border-radius: var( --realist-radius );
	background: var( --realist-color-surface, #fff );
}
.realist-agent-photo { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; }
.realist-agent-name { margin: 0 0 2px; font-size: 1.1rem; }
.realist-agent-name a { color: inherit; text-decoration: none; }
.realist-agent-title { color: var( --realist-color-muted, #666 ); font-size: 0.9rem; }
.realist-agent-phone a,
.realist-agent-email a { color: var( --realist-color-primary ); text-decoration: none; }
.realist-agent-socials { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.realist-agent-social {
	font-size: 0.8rem;
	color: var( --realist-color-secondary );
	text-decoration: none;
	border: 1px solid var( --realist-color-border, #eee );
	border-radius: var( --realist-radius );
	padding: 2px 8px;
}
.realist-agent-social:hover { background: var( --realist-color-primary ); color: var( --realist-color-on-brand ); }