/**
 * DRIVEWAY / stepfox-car-dealer — 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_cd_render_loop_items(), and anything
 * clickable inside a preview is inert so a click selects the block.
 *
 * @package stepfox-car-dealer
 */

/* ------------------------------------------------------------------ tokens */
.sfcd-ed-block,
.sfcd-ed-loop,
.sfcd-ed-container,
.sfcd-ed-controls,
.sfcd-ed-skeleton,
.sfcd-ed-ghost,
.sfcd-ed-placeholder {
	--sfcd-ed-accent: var(--wp--preset--color--accent, #c2410c);
	--sfcd-ed-blue: var(--wp--preset--color--accent-2, #1d4ed8);
	--sfcd-ed-ink: var(--wp--preset--color--ink, #0e1116);
	--sfcd-ed-muted: var(--wp--preset--color--muted, #596372);
	--sfcd-ed-line: var(--wp--preset--color--line, rgba(14, 17, 22, 0.12));
	--sfcd-ed-panel: var(--wp--preset--color--panel-2, #e6e8ec);
	--sfcd-ed-font: var(--wp--preset--font-family--ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

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

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

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

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

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

.sfcd-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.sfcd-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;
}

.sfcd-ed-block.is-out-of-flow > .sfcd-ed-preview > .sfcd-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: .sfcd-ed-preview a has pointer-events:none). Selecting the
 * block outlines the whole card. */
.block-editor-block-list__block.sfcd-ed-block.is-link-overlay {
	position: static;
}

.sfcd-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(--sfcd-ed-accent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--sfcd-ed-panel) 92%, transparent);
	color: var(--sfcd-ed-ink);
	font-family: var(--sfcd-ed-font);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease;
}

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

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

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

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

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

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

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

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

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

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

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

.sfcd-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: sfcd-ed-shimmer 1.3s linear infinite;
}

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

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

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

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

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

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

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

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

.sfcd-ed-placeholder .components-placeholder__instructions {
	max-width: 46ch;
	color: var(--sfcd-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. */
.sfcd-ed-loop__live,
.sfcd-ed-loop__row {
	display: contents;
}

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

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

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

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

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

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

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

/* Checklist control (editor.js MultiSelect): items / fields attributes. */
.sfcd-ed-fieldset {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.sfcd-ed-fieldset__legend {
	margin: 0 0 4px;
	padding: 0;
	color: #1e1e1e;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
}

.sfcd-ed-checks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 12px;
}

.sfcd-ed-checks .components-base-control,
.sfcd-ed-checks .components-checkbox-control__label {
	min-width: 0;
}

.sfcd-ed-check {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
}

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

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