/**
 * DOORSTEP / stepfox-real-estate — block editor styles.
 *
 * Loaded in the editor CANVAS (enqueue_block_assets, admin only) and in the
 * outer editor document (inspector controls). Never on the front end.
 *
 * Rule of thumb: the canvas should look like the site. Server previews are
 * unwrapped with display:contents so a field's real root element sits where
 * the front end puts it (flex rows, grids), loops lay their items out as
 * direct children exactly like stepfox_re_render_loop_items(), and anything
 * clickable inside a preview is inert so a click selects the block.
 *
 * @package stepfox-real-estate
 */

/* ------------------------------------------------------------------ tokens */
.sfre-ed-block,
.sfre-ed-loop,
.sfre-ed-container,
.sfre-ed-controls,
.sfre-ed-skeleton,
.sfre-ed-ghost,
.sfre-ed-placeholder {
	--sfre-ed-accent: var(--wp--preset--color--accent, #e0553d);
	--sfre-ed-teal: var(--wp--preset--color--accent-2, #0f766e);
	--sfre-ed-ink: var(--wp--preset--color--ink, #14181f);
	--sfre-ed-muted: var(--wp--preset--color--muted, #5d6672);
	--sfre-ed-line: var(--wp--preset--color--line, rgba(20, 24, 31, 0.12));
	--sfre-ed-panel: var(--wp--preset--color--panel-2, #efeae1);
	--sfre-ed-font: var(--wp--preset--font-family--ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* --------------------------------------------------------------- previews */
.sfre-ed-block {
	max-width: 100%;
}

.sfre-ed-block--component {
	min-height: 24px;
}

.sfre-ed-preview,
.sfre-ed-preview > .sfre-ed-preview__html {
	display: contents;
}

.sfre-ed-preview.is-refreshing > .sfre-ed-preview__html > * {
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

/* Inert interactive content: a click selects the block, never navigates. */
.sfre-ed-preview a,
.sfre-ed-preview button,
.sfre-ed-preview input,
.sfre-ed-preview select,
.sfre-ed-preview textarea,
.sfre-ed-preview label,
.sfre-ed-preview summary,
.sfre-ed-preview iframe,
.sfre-ed-preview video,
.sfre-ed-preview canvas,
.sfre-ed-preview [data-sfre-map],
.sfre-ed-preview [role="button"] {
	pointer-events: none !important;
}

.sfre-ed-preview a {
	cursor: default;
}

/* Out-of-flow roots (editor.js rootLayout() === 'out'): an absolutely
 * positioned root (Looks position:absolute, .is-fill hero photos, tile
 * backgrounds) would resolve against the editor wrapper — position:relative
 * and 0x0 around it. The wrapper instead fills the containing block the root
 * uses on the site, takes no room in the flex/grid flow, and lets clicks
 * through to the blocks beneath; the root itself stays clickable. */
.block-editor-block-list__block.sfre-ed-block.is-out-of-flow {
	position: absolute;
	inset: 0;
	width: auto;
	max-width: none;
	height: auto;
	min-height: 0;
	margin: 0 !important;
	pointer-events: none;
}

.sfre-ed-block.is-out-of-flow > .sfre-ed-preview > .sfre-ed-preview__html > * {
	pointer-events: auto;
}

/* Stretched links (rootLayout() === 'link'): the zero-size <a>'s ::after
 * covers the nearest positioned ancestor — the card — exactly as on the site
 * (it stays inert: .sfre-ed-preview a has pointer-events:none). Selecting the
 * block outlines the whole card. */
.block-editor-block-list__block.sfre-ed-block.is-link-overlay {
	position: static;
}

.sfre-ed-linkchip {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border: 1px dashed var(--sfre-ed-accent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--sfre-ed-panel) 92%, transparent);
	color: var(--sfre-ed-ink);
	font-family: var(--sfre-ed-font);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease;
}

.sfre-ed-linkchip svg {
	color: var(--sfre-ed-accent);
}

.block-editor-block-list__block:hover > .is-link-overlay > .sfre-ed-linkchip,
.is-link-overlay.is-selected > .sfre-ed-linkchip,
.is-link-overlay.is-highlighted > .sfre-ed-linkchip,
.is-link-overlay:focus > .sfre-ed-linkchip {
	opacity: 1;
	visibility: visible;
}

.sfre-ed-loop__row .sfre-ed-linkchip,
.block-editor-block-preview__content .sfre-ed-linkchip {
	display: none;
}

/* Front-end direct-child rules the editor wrappers would otherwise break. */
.sfre-location-tile > .sfre-ed-block--field > .sfre-ed-preview > .sfre-ed-preview__html > .sfre-f-location-image {
	position: absolute;
	inset: 0;
	z-index: -1;
	aspect-ratio: auto;
	border-radius: 0;
}

/* Front-end "reveal on scroll" (fx.js .sfre-reveal) would leave previews invisible. */
.sfre-ed-preview .sfre-reveal {
	opacity: 1 !important;
	transform: none !important;
}

/* ---------------------------------------------------------------- skeleton */
@keyframes sfre-ed-shimmer {
	0% {
		background-position: -320px 0;
	}
	100% {
		background-position: 320px 0;
	}
}

.sfre-ed-skeleton {
	box-sizing: border-box;
	font-family: var(--sfre-ed-font);
}

.sfre-ed-skeleton--inline {
	display: inline-flex;
	align-items: center;
	min-width: 72px;
	height: 1.25em;
	vertical-align: middle;
}

.sfre-ed-skeleton--box {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	min-height: 140px;
	padding: 20px;
	border: 1px solid var(--sfre-ed-line);
	border-radius: 16px;
	background: color-mix(in srgb, var(--sfre-ed-panel) 55%, transparent);
}

.sfre-ed-skeleton__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
	color: var(--sfre-ed-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.sfre-ed-skeleton__icon {
	display: inline-flex;
	color: var(--sfre-ed-accent);
}

.sfre-ed-skeleton__bar {
	display: block;
	width: 70%;
	height: 12px;
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(127, 127, 127, 0.12) 0%, rgba(127, 127, 127, 0.24) 40%, rgba(127, 127, 127, 0.12) 80%);
	background-size: 640px 100%;
	animation: sfre-ed-shimmer 1.3s linear infinite;
}

.sfre-ed-skeleton--inline .sfre-ed-skeleton__bar {
	width: 100%;
	height: 0.8em;
}

.sfre-ed-skeleton__bar--wide {
	width: 92%;
	height: 16px;
}

.sfre-ed-skeleton__bar--short {
	width: 40%;
}

@media (prefers-reduced-motion: reduce) {
	.sfre-ed-skeleton__bar {
		animation: none;
	}
}

/* ------------------------------------------------------------ empty states */
.sfre-ed-ghost {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	padding: 3px 10px;
	border: 1px dashed var(--sfre-ed-line);
	border-radius: 999px;
	color: var(--sfre-ed-muted);
	font-family: var(--sfre-ed-font);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0.85;
}

.sfre-ed-ghost__dot {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sfre-ed-accent);
	opacity: 0.7;
}

.sfre-ed-placeholder.components-placeholder {
	min-height: 140px;
	border-radius: 16px;
	box-shadow: inset 0 0 0 1px var(--sfre-ed-line);
	font-family: var(--sfre-ed-font);
}

.sfre-ed-placeholder .components-placeholder__label svg {
	color: var(--sfre-ed-accent);
	margin-right: 8px;
}

.sfre-ed-placeholder .components-placeholder__instructions {
	max-width: 46ch;
	color: var(--sfre-ed-muted);
}

/* -------------------------------------------------------------------- loops */
/* Items are DIRECT children of the loop root on the front end; the live item
 * and the read-only rows must not add boxes of their own. */
.sfre-ed-loop__live,
.sfre-ed-loop__row {
	display: contents;
}

.sfre-ed-loop__row {
	pointer-events: none;
}

.sfre-ed-loop > .block-list-appender,
.sfre-ed-loop__live > .block-list-appender {
	grid-column: 1 / -1;
}

.sfre-ed-loop__note {
	grid-column: 1 / -1;
	margin: 8px 0 0;
	color: var(--sfre-ed-muted);
	font-family: var(--sfre-ed-font);
	font-size: 12px;
}

/* An empty loop / container still needs a click target. */
.sfre-ed-loop:not(:has(.wp-block)),
.sfre-ed-container:not(:has(.wp-block)) {
	min-height: 56px;
	border: 1px dashed var(--sfre-ed-line);
	border-radius: 12px;
}

/* -------------------------------------------------------- inspector (outer) */
.sfre-ed-controls {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sfre-ed-controls .components-base-control {
	margin-bottom: 0;
}

.sfre-ed-note {
	margin: 0;
	color: #757575;
	font-size: 12px;
	line-height: 1.5;
}

/* A link attribute the site would drop (javascript:, data:…): see editor.js isSafeHref(). */
.sfre-ed-control--invalid .components-base-control__help {
	color: #cc1818;
}

.sfre-ed-control--invalid input.components-text-control__input {
	border-color: #cc1818;
	box-shadow: 0 0 0 1px #cc1818;
}