/**
 * GETAWAY / stepfox-hotel-booking — 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_hb_render_loop_items(), and anything
 * clickable inside a preview is inert so a click selects the block.
 *
 * @package stepfox-hotel-booking
 */

/* ------------------------------------------------------------------ tokens */
.sfhb-ed-block,
.sfhb-ed-loop,
.sfhb-ed-container,
.sfhb-ed-controls,
.sfhb-ed-skeleton,
.sfhb-ed-ghost,
.sfhb-ed-placeholder {
	--sfhb-ed-accent: var(--wp--preset--color--accent, #b4492a);
	--sfhb-ed-teal: var(--wp--preset--color--accent-2, #0b6c7e);
	--sfhb-ed-ink: var(--wp--preset--color--ink, #0f2a30);
	--sfhb-ed-muted: var(--wp--preset--color--muted, #566669);
	--sfhb-ed-line: var(--wp--preset--color--line, rgba(15, 42, 48, 0.12));
	--sfhb-ed-panel: var(--wp--preset--color--panel-2, #ece4d6);
	--sfhb-ed-font: var(--wp--preset--font-family--ui, Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sfhb-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(). */
.sfhb-ed-control--invalid .components-base-control__help {
	color: #cc1818;
}

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