/* Customizer preview only — see assets/js/header-preview-dragdrop.js. */

/* Moved here from style.css: a real visitor never drags or drops anything,
   so an empty zone reserving a 24×24 hit area on the live front end was
   pure wasted, unexplained blank space. That hit area only actually
   matters here, in the Customizer preview, where an empty zone still
   needs to be a real, droppable target. Revealed on hover of the row it's
   in (below), not permanently at rest — every zone, header or footer,
   carries this shared class, see inc/header-layout-builder.php and
   inc/footer-layout-builder.php. */
.ust-header:hover .ust-header-zone,
.ust-header-lower:hover .ust-header-zone,
.ust-topbar:hover .ust-header-zone,
.ust-footer-upper:hover .ust-header-zone,
.ust-footer-main:hover .ust-header-zone,
.ust-footer-bottom:hover .ust-header-zone,
html.ust-header-dragging .ust-header-zone {
	min-height: 24px;
	min-width: 24px;
}

/* A "+" button on an empty zone (assets/js/header-preview-dragdrop.js
   ensureAddButton()) — dragging a chip in from the sidebar palette already
   worked, but nothing on the page itself hinted that an empty zone was
   even interactive, let alone that dragging was the way to fill it.
   Clicking it opens/scopes the Elements palette to this exact row+zone
   (assets/js/header-layout-controls.js), so clicking a chip there adds it
   here too — dragging still works exactly as before either way. Same
   hover-reveal scoping as the hit area above. */
.ust-zone-add-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(calc(-50% - 12px), -50%);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 0;
	background: #2563eb;
	color: #fff;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	z-index: 5;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
	transition: transform .1s ease, background-color .1s ease;
}
.ust-zone-add-btn:hover {
	background: #1d4ed8;
	transform: translate(calc(-50% - 12px), -50%) scale(1.12);
}
.ust-header-zone.ust-zone-empty:hover .ust-zone-add-btn {
	display: flex;
}

/* Every element here is draggable="true" (assets/js/header-preview-
   dragdrop.js), but a plain mousedown-and-move starting on TEXT content
   (a copyright line, a tagline, any button/link label) is ambiguous to
   the browser: without this, it reliably wins that ambiguity as a native
   text SELECTION drag instead of an HTML5 element drag, so trying to drag
   the element instead just highlights its text and nothing moves — even
   grabbing right at a corner, since the text still extends there too.
   user-select: none removes that competing gesture entirely, and
   -webkit-user-drag: element (Safari/older WebKit; harmless, ignored
   elsewhere) makes sure the element itself is what a drag actually picks
   up. Customizer-preview-only, so a real visitor can still select this
   text normally. */
.ust-header-el {
	position: relative;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: element;
}

html.ust-header-dragging .ust-header-el {
	cursor: grab;
}

.ust-header-el.is-dragging {
	opacity: .4;
}

/* Ghosted-but-clickable, so "Hide on this device" (the floating toolbar)
   can be toggled back off — the plain style.css rule for this class is
   display:none, for a real visitor; this only loads in the Customizer
   preview (customize_preview_init), so it's the only place this override
   applies. */
.ust-hel-hidden-device {
	display: block !important;
	opacity: .35;
	outline: 1px dashed #dc2626;
	outline-offset: 2px;
}

/* Floating per-element toolbar (assets/js/header-preview-dragdrop.js
   openToolbar()) — align/valign/duplicate/hide/settings/remove, replacing
   the old always-on-hover edit-pencil and remove badges: those didn't scale
   past a handful of elements and needed a click each anyway, so
   consolidating everything into one toolbar that opens on click removes a
   step rather than adding one. position: fixed since it's positioned from
   getBoundingClientRect() (viewport-relative) and appended to <body>,
   outside any element it might otherwise inherit a transformed/scrolling
   ancestor from. */
.ust-el-toolbar {
	position: fixed;
	z-index: 999999;
	display: flex;
	align-items: center;
	gap: 2px;
	background: #1f2937;
	border-radius: 8px;
	padding: 4px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
.ust-el-toolbar__btn {
	background: none;
	border: 0;
	color: #d1d5db;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	cursor: pointer;
	flex: none;
}
.ust-el-toolbar__btn:hover {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}
.ust-el-toolbar__btn.is-active {
	background: #2563eb;
	color: #fff;
}
.ust-el-toolbar__divider {
	width: 1px;
	align-self: stretch;
	background: rgba(255, 255, 255, .18);
	margin: 2px 2px;
}
html.ust-header-dragging .ust-el-toolbar {
	display: none; /* stay out of the way while something is being dragged */
}

/* Revealed on hover of the row it's in (matching the min-height/width
   rule above, so an empty zone's outline and its actual hit area appear
   together), or once a drag is actually in progress — not permanently at
   rest.
   Drawn as a ::after overlay (not a plain outline) with mix-blend-mode:
   difference and a white base color: a fixed blue outline (the original
   approach) was unreadable against a row whose own background is a
   similar blue — difference-blending against whatever's actually
   underneath renders a color that's always the visual opposite of it,
   readable against any background color a row could have. Isolated to its
   own zero-content pseudo-element (position: absolute, so it never affects
   layout) rather than blending the zone element itself, since that would
   also blend away the zone's real content, not just the outline meant to
   sit over it — inset is *negative* (extending 4px past the zone's own
   edges, the way outline-offset pushes a real outline outward) rather
   than positive: a positive inset pulls the box inward, past the edges of
   content that fills most of the zone (a multi-line logo/tagline, most
   noticeably), so the dashed line crossed directly over letters — with
   mix-blend-mode active, every pixel the dash crossed inverted against
   the letter under it, reading as the text being doubled/ghosted. */
.ust-header-zone {
	position: relative;
}
.ust-header-zone::after {
	content: '';
	position: absolute;
	inset: -4px;
	border: 2px dashed transparent;
	pointer-events: none;
	transition: border-color .1s ease;
}

.ust-header:hover .ust-header-zone::after,
.ust-header-lower:hover .ust-header-zone::after,
.ust-topbar:hover .ust-header-zone::after,
.ust-footer-upper:hover .ust-header-zone::after,
.ust-footer-main:hover .ust-header-zone::after,
.ust-footer-bottom:hover .ust-header-zone::after {
	border-color: #fff;
	mix-blend-mode: difference;
}

html.ust-header-dragging .ust-header-zone::after {
	/* More visible once a drag is actually in progress — the hover state
	   above is deliberately subtle, this needs to read clearly. */
	border-width: 3px;
	border-color: #fff;
	mix-blend-mode: difference;
}

.ust-header-zone.is-drop-target::after {
	border-width: 3px;
	border-color: #fff;
	mix-blend-mode: difference;
}
.ust-header-zone.is-drop-target {
	background-color: rgba(37, 99, 235, .12);
}

/* Individual widget dragging (assets/js/widget-dragdrop.js) — separate
   from the header-el/zone system above, but same visual language. */
[data-ums-widget-id] {
	position: relative; /* anchors .ust-widget-remove below */
}
html.ust-widget-dragging [data-ums-widget-id] {
	cursor: grab;
}
[data-ums-widget-id].is-widget-dragging {
	opacity: .4;
}

/* A small always-on-hover remove badge for individual widgets (header/footer
   *elements* get their own Remove instead as one action in the floating
   toolbar above, but widgets are plain WP widgets, not part of that system)
   — click moves the widget to Inactive Widgets rather than deleting it
   outright, same as WordPress's own widgets screen "Remove". */
.ust-widget-remove {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #dc2626;
	color: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
	padding: 0;
	cursor: pointer;
	opacity: 0;
	transform: scale(.85);
	transition: opacity .12s ease, transform .12s ease, background-color .12s ease;
	z-index: 6;
}
[data-ums-widget-id]:hover .ust-widget-remove,
.ust-widget-remove:focus-visible {
	opacity: 1;
	transform: scale(1);
}
.ust-widget-remove:hover {
	background: #b91c1c;
}
html.ust-widget-dragging .ust-widget-remove {
	display: none;
}
[data-ums-sidebar] {
	outline: 1px dashed rgba(37, 99, 235, .22);
	outline-offset: 4px;
	transition: outline-color .1s ease, background-color .1s ease;
}
html.ust-widget-dragging [data-ums-sidebar] {
	outline: 2px dashed rgba(37, 99, 235, .75);
}
[data-ums-sidebar].is-widget-drop-target {
	outline: 3px dashed #2563eb;
	background-color: rgba(37, 99, 235, .12);
}

/* ---- Row column controls (assets/js/header-preview-dragdrop.js) ---- */

.ust-header-zone { position: relative; }

/* A row with nothing placed in it stays visible in the preview so it can be
   clicked, even if the theme's stylesheet would collapse it for a visitor. */
.ust-row-empty .ust-container.ust-container,
.ust-row-blank .ust-container.ust-container {
	min-height: 48px !important;
	padding-top: 6px !important;
	padding-bottom: 6px !important;
	outline: 1px dashed rgba(37, 99, 235, .45);
	outline-offset: -4px;
}
.ust-row-empty .ust-header-zone.ust-zone-empty,
.ust-row-blank .ust-header-zone.ust-zone-empty {
	min-height: 36px;
	min-width: 36px;
	outline: 1px dashed rgba(37, 99, 235, .35);
	border-radius: 4px;
}

/* Never-configured empty row: the column options bar appears, centered, while the row is hovered. */
.ust-row-unset .ust-header-zone { justify-content: center !important; }
.ust-row-picker {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	width: 100%;
}
.ust-row-picker__options {
	display: flex;
	opacity: 0;
	visibility: hidden;
	transition: opacity .12s ease;
	gap: 8px;
	padding: 6px;
	background: #1f2937;
	border-radius: 10px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
	white-space: nowrap;
}
.ust-row-unset:hover .ust-row-picker__options {
	opacity: 1;
	visibility: visible;
}
.ust-row-picker__option {
	display: flex;
	gap: 2px;
	width: 84px;
	height: 34px;
	padding: 3px;
	border: 1px solid #4b5563;
	border-radius: 6px;
	background: #111827;
	cursor: pointer;
}
.ust-row-picker__option:hover { border-color: #60a5fa; background: #1e3a5f; }
.ust-row-picker__cell {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #2563eb;
	color: #fff;
	border-radius: 3px;
	font: 700 13px/1 sans-serif;
}

/* Small "+" on the right edge of the last column (add a column) and "x" on an empty column (remove it). */
.ust-col-add-btn,
.ust-col-remove-btn {
	position: absolute;
	display: none;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: #fff;
	z-index: 6;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.ust-col-add-btn {
	top: 50%;
	right: -22px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #2563eb;
}
.ust-col-remove-btn {
	top: 50%;
	left: 50%;
	transform: translate(calc(-50% + 13px), -50%);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #6b7280;
}
.ust-col-add-btn:hover { background: #1d4ed8; }
.ust-col-remove-btn:hover { background: #dc2626; }
.ust-row-empty .ust-col-add-btn,
.ust-row-blank .ust-col-add-btn,
.ust-header:hover .ust-col-add-btn,
.ust-header-lower:hover .ust-col-add-btn,
.ust-topbar:hover .ust-col-add-btn,
.ust-footer-upper:hover .ust-col-add-btn,
.ust-footer-main:hover .ust-col-add-btn,
.ust-footer-bottom:hover .ust-col-add-btn { display: flex; }
.ust-header-zone.ust-zone-empty:hover .ust-col-remove-btn { display: flex; }

/* An empty column fills its whole grid track (instead of shrinking to a small
   box in its corner) so its "+" and "x" have room and are easy to hover. */
.ust-header-zone.ust-zone-empty { justify-self: stretch !important; }

/* Placed but currently rendering nothing (see the ghost in ust_*_render_element()). */
.ust-el-ghost {
	display: inline-block;
	padding: 3px 10px;
	border: 1px dashed currentColor;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1.4;
	opacity: .6;
	white-space: nowrap;
}