/*
 * WDT Blocks presentation layer.
 * Theme-level only: global structure, header/footer, motion and generic slider.
 */

:root {
	--wdt-site-gutter: var(--wp--preset--spacing--30);
	--wdt-admin-bar-offset: 0px;
	--wdt-mobile-header-height: 72px;
	--wdt-fixed-header-space: var(--wp--custom--layout--header-height, 76px);
}

body.admin-bar {
	--wdt-admin-bar-offset: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--wdt-admin-bar-offset: 46px;
	}
}

html {
	scroll-behavior: smooth;
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
}

body {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow-x: clip;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

img,
video,
svg {
	max-width: 100%;
	height: auto;
}

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.wp-site-blocks {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 100vh;
	padding-top: var(--wdt-fixed-header-space);
	overflow-x: clip;
}

/* Keep full-width WDT sections flush. Internal spacing remains owned by the plugin. */
.wp-site-blocks > .wdt-gl,
.wp-site-blocks > [class*="wp-block-wdt-gl-"] {
	margin-block-start: 0;
}

.wp-block-post-content > .wdt-gl + .wdt-gl,
.entry-content > .wdt-gl + .wdt-gl,
.is-layout-flow > .wdt-gl + .wdt-gl,
.is-layout-constrained > .wdt-gl + .wdt-gl {
	margin-block-start: 0;
}

/* ------------------------------
 * Site header
 * The template-part host owns viewport positioning. The inner block tree stays
 * normal FSE markup and is never re-parented at runtime.
 * ------------------------------ */
header.wp-block-template-part:has(> .wdt-site-header),
.wdt-header-host {
	position: fixed !important;
	z-index: 10020;
	inset-block-start: var(--wdt-admin-bar-offset, 0px) !important;
	inset-inline: 0 !important;
	inline-size: auto !important;
	max-inline-size: none !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none;
}

.wdt-site-header {
	position: relative !important;
	inline-size: 100% !important;
	max-inline-size: none !important;
	min-inline-size: 0;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none;
}

.wdt-site-header__surface {
	position: relative;
	inline-size: 100% !important;
	max-inline-size: none !important;
	min-inline-size: 0;
	min-block-size: var(--wp--custom--layout--header-height, 76px);
	margin: 0 !important;
	padding: 0 !important;
	background: color-mix(in srgb, var(--wp--preset--color--canvas, #fff) 94%, transparent);
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--border, #ddd) 62%, transparent);
	box-shadow: none;
	backdrop-filter: blur(16px) saturate(120%);
	-webkit-backdrop-filter: blur(16px) saturate(120%);
	pointer-events: auto;
	transform: translateY(0);
	will-change: transform;
	transition:
		transform 320ms var(--wp--custom--motion--ease--enter, cubic-bezier(0.16, 1, 0.3, 1)),
		background-color 180ms ease,
		box-shadow 180ms ease;
}

.wdt-site-header__inner {
	inline-size: min(
		calc(100% - (2 * var(--wdt-site-gutter, 1.25rem))),
		var(--wp--style--global--wide-size, 1440px)
	) !important;
	max-inline-size: none !important;
	min-inline-size: 0;
	min-block-size: var(--wp--custom--layout--header-height, 76px);
	margin-inline: auto !important;
	padding: 0 !important;
}

.wdt-site-header__brand,
.wdt-site-header__nav,
.wdt-site-header__actions {
	min-inline-size: 0;
}

.wdt-site-header__brand {
	position: relative;
	z-index: 3;
	flex: 0 0 auto;
}

.wdt-site-header__brand .wp-block-site-logo img,
.wdt-site-header__compact .wp-block-site-logo img {
	display: block;
	inline-size: auto;
	max-inline-size: 100%;
	max-block-size: 46px;
}

.wdt-site-header.is-scrolled:not(.is-condensed) .wdt-site-header__surface {
	background: color-mix(in srgb, var(--wp--preset--color--canvas, #fff) 98%, transparent);
	box-shadow: 0 5px 18px rgb(0 0 0 / 0.045);
}

.wdt-header--smart-hide.is-hidden .wdt-site-header__surface,
.wdt-header--smart-minimal.is-condensed .wdt-site-header__surface {
	transform: translateY(calc(-100% - 2px));
}

/* Independent compact brand shown only by Smart Minimal on desktop. */
.wdt-site-header__compact {
	position: absolute;
	z-index: 4;
	inset-block-start: 10px;
	inset-inline-start: max(
		var(--wdt-site-gutter, 1.25rem),
		calc((100% - var(--wp--style--global--wide-size, 1440px)) / 2)
	);
	display: flex;
	align-items: center;
	justify-content: center;
	max-inline-size: 10rem;
	padding: 0.42rem 0.52rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--border, #ddd) 48%, transparent);
	border-radius: 11px;
	background: color-mix(in srgb, var(--wp--preset--color--canvas, #fff) 97%, transparent);
	box-shadow: 0 4px 14px rgb(0 0 0 / 0.045);
	backdrop-filter: blur(12px) saturate(112%);
	-webkit-backdrop-filter: blur(12px) saturate(112%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-8px) scale(0.97);
	transform-origin: top left;
	transition: opacity 170ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 260ms;
}

.wdt-site-header__compact .wp-block-site-logo {
	margin: 0;
}

.wdt-header--smart-minimal.is-condensed .wdt-site-header__compact {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0) scale(1);
	transition-delay: 70ms, 70ms, 0s;
}

@media (max-width: 781px) {
	:root {
		--wdt-fixed-header-space: var(--wdt-mobile-header-height, 72px);
	}

	header.wp-block-template-part:has(> .wdt-site-header),
	.wdt-header-host {
		position: fixed !important;
		inset-block-start: var(--wdt-admin-bar-offset, 0px) !important;
		inset-inline: 0 !important;
		inline-size: auto !important;
		max-inline-size: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.wdt-site-header,
	.wdt-site-header__surface {
		inline-size: 100% !important;
		max-inline-size: none !important;
		margin: 0 !important;
	}

	.wdt-site-header__surface,
	.wdt-header--smart-hide.is-hidden .wdt-site-header__surface,
	.wdt-header--smart-minimal.is-condensed .wdt-site-header__surface,
	.wdt-site-header.is-revealed .wdt-site-header__surface {
		min-block-size: var(--wdt-mobile-header-height, 72px);
		transform: none !important;
		background: var(--wp--preset--color--canvas, #fff);
		border-block-end-color: color-mix(in srgb, var(--wp--preset--color--border, #ddd) 60%, transparent);
		box-shadow: 0 2px 10px rgb(0 0 0 / 0.035);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		overflow: visible !important;
	}

	.wdt-site-header__inner {
		inline-size: 100% !important;
		max-inline-size: none !important;
		min-block-size: var(--wdt-mobile-header-height, 72px);
		margin: 0 !important;
		padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right)) !important;
	}

	.wdt-site-header__compact,
	.wdt-site-header__actions,
	.wdt-site-header__brand .wp-block-site-title {
		display: none !important;
	}

	.wdt-site-header__brand .wp-block-site-logo img {
		max-block-size: 46px;
	}

	.wdt-site-header__nav {
		position: static !important;
		z-index: 4;
		margin-inline-start: auto;
	}
}

/* Site Editor: normal document flow inside the editor iframe. */
.editor-styles-wrapper .wp-site-blocks {
	padding-top: 0;
}

.editor-styles-wrapper .wdt-site-header {
	position: relative !important;
	inset: auto !important;
	inline-size: 100% !important;
	max-inline-size: none !important;
	pointer-events: auto;
}

.editor-styles-wrapper .wdt-site-header__compact {
	display: none !important;
}

/* ------------------------------
 * Footer system
 * ------------------------------ */
.wdt-site-footer {
	margin-block-start: 0 !important;
}

.wdt-site-footer a {
	transition: color var(--wp--custom--motion--duration--fast) ease,
		opacity var(--wp--custom--motion--duration--fast) ease;
}

.wdt-site-footer a:hover {
	opacity: 0.72;
}

.wdt-footer__columns {
	align-items: flex-start;
}

@media (max-width: 781px) {
	.wdt-footer__columns.wp-block-columns {
		gap: var(--wp--preset--spacing--50);
	}
}

/* ------------------------------
 * Motion system
 * Hidden states are enabled only after JS marks the document as motion-ready.
 * ------------------------------ */
.wdt-motion-ready :where(
	.is-style-wdt-reveal,
	.is-style-wdt-reveal-up,
	.is-style-wdt-reveal-left,
	.is-style-wdt-reveal-right,
	.is-style-wdt-reveal-scale
) {
	transition:
		opacity var(--wp--custom--motion--duration--slow) var(--wp--custom--motion--ease--enter),
		transform var(--wp--custom--motion--duration--slow) var(--wp--custom--motion--ease--enter),
		filter var(--wp--custom--motion--duration--slow) var(--wp--custom--motion--ease--enter);
	will-change: opacity, transform;
}

.wdt-motion-ready .is-style-wdt-reveal:not(.is-wdt-visible) {
	opacity: 0;
}

.wdt-motion-ready .is-style-wdt-reveal-up:not(.is-wdt-visible) {
	opacity: 0;
	transform: translate3d(0, var(--wp--custom--motion--distance), 0);
}

.wdt-motion-ready .is-style-wdt-reveal-left:not(.is-wdt-visible) {
	opacity: 0;
	transform: translate3d(calc(var(--wp--custom--motion--distance) * -1), 0, 0);
}

.wdt-motion-ready .is-style-wdt-reveal-right:not(.is-wdt-visible) {
	opacity: 0;
	transform: translate3d(var(--wp--custom--motion--distance), 0, 0);
}

.wdt-motion-ready .is-style-wdt-reveal-scale:not(.is-wdt-visible) {
	opacity: 0;
	transform: scale(0.975);
	filter: blur(3px);
}

.wdt-motion-ready .is-style-wdt-stagger > * {
	transition:
		opacity var(--wp--custom--motion--duration--slow) var(--wp--custom--motion--ease--enter),
		transform var(--wp--custom--motion--duration--slow) var(--wp--custom--motion--ease--enter);
	transition-delay: calc(var(--wdt-stagger-index, 0) * 70ms);
}

.wdt-motion-ready .is-style-wdt-stagger:not(.is-wdt-visible) > * {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
}

/* Editor must always show editable content, never motion-hidden states. */
.editor-styles-wrapper :where(
	.is-style-wdt-reveal,
	.is-style-wdt-reveal-up,
	.is-style-wdt-reveal-left,
	.is-style-wdt-reveal-right,
	.is-style-wdt-reveal-scale,
	.is-style-wdt-stagger
),
.editor-styles-wrapper .is-style-wdt-stagger > * {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
}

/* ------------------------------
 * Generic theme slider for core Group blocks.
 * Child Group blocks become slides on the front end.
 * ------------------------------ */
.is-style-wdt-slider {
	position: relative;
	overflow: clip;
	isolation: isolate;
}

.wdt-slider-ready {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.wdt-slider-ready > .wdt-slide {
	grid-area: 1 / 1;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate3d(24px, 0, 0);
	transition:
		opacity var(--wp--custom--motion--duration--base) var(--wp--custom--motion--ease--enter),
		transform var(--wp--custom--motion--duration--base) var(--wp--custom--motion--ease--enter),
		visibility 0s linear var(--wp--custom--motion--duration--base);
}

.wdt-slider-ready > .wdt-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate3d(0, 0, 0);
	transition-delay: 0s;
}

.wdt-slider--fade.wdt-slider-ready > .wdt-slide {
	transform: none;
}

.wdt-slider-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	position: absolute;
	inset-inline: 1rem;
	inset-block-end: 1rem;
	z-index: 4;
	pointer-events: none;
}

.wdt-slider-controls__group,
.wdt-slider-dots {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	pointer-events: auto;
}

.wdt-slider-button,
.wdt-slider-dot {
	appearance: none;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 16%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--canvas) 92%, transparent);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 6px 20px rgb(0 0 0 / 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	cursor: pointer;
	transition:
		transform var(--wp--custom--motion--duration--fast) ease,
		background-color var(--wp--custom--motion--duration--fast) ease;
}

.wdt-slider-button {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--wp--custom--radius--pill);
	font-size: 1.1rem;
	line-height: 1;
}

.wdt-slider-dot {
	width: 0.55rem;
	height: 0.55rem;
	padding: 0;
	border-radius: var(--wp--custom--radius--pill);
}

.wdt-slider-dot[aria-current="true"] {
	width: 1.45rem;
	background: var(--wp--preset--color--contrast);
}

.wdt-slider-button:hover,
.wdt-slider-button:focus-visible,
.wdt-slider-dot:hover,
.wdt-slider-dot:focus-visible {
	transform: translateY(-1px);
}

.wdt-slider-status {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.editor-styles-wrapper .is-style-wdt-slider {
	overflow: visible;
}

.editor-styles-wrapper .is-style-wdt-slider > * {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

/* ------------------------------
 * Subtle interactive polish
 * ------------------------------ */
:where(.wp-block-button__link, .wp-element-button) {
	transition:
		transform var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--ease--standard),
		background-color var(--wp--custom--motion--duration--fast) ease,
		color var(--wp--custom--motion--duration--fast) ease,
		box-shadow var(--wp--custom--motion--duration--fast) ease;
}

:where(.wp-block-button__link, .wp-element-button):hover {
	transform: translateY(-1px);
}

.wp-block-navigation-item__content {
	position: relative;
}

.wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -0.25em;
	height: 1px;
	background: currentColor;
	transition: right var(--wp--custom--motion--duration--base) var(--wp--custom--motion--ease--enter);
}

.wp-block-navigation-item__content:hover::after,
.wp-block-navigation-item__content:focus-visible::after {
	right: 0;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
	}

	.wdt-motion-ready :where(
		.is-style-wdt-reveal,
		.is-style-wdt-reveal-up,
		.is-style-wdt-reveal-left,
		.is-style-wdt-reveal-right,
		.is-style-wdt-reveal-scale,
		.is-style-wdt-stagger,
		.is-style-wdt-stagger > *
	) {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
}

/* ------------------------------
 * Optional hover interaction styles
 * ------------------------------ */
.is-style-wdt-interactive-card {
	position: relative;
	transition:
		transform var(--wp--custom--motion--duration--base) var(--wp--custom--motion--ease--enter),
		box-shadow var(--wp--custom--motion--duration--base) var(--wp--custom--motion--ease--enter);
}

@media (hover: hover) and (pointer: fine) {
	.is-style-wdt-interactive-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 18px 50px rgb(0 0 0 / 0.10);
	}
}

.is-style-wdt-media-zoom {
	overflow: clip;
}

.is-style-wdt-media-zoom img {
	transition: transform var(--wp--custom--motion--duration--slow) var(--wp--custom--motion--ease--enter);
}

@media (hover: hover) and (pointer: fine) {
	.is-style-wdt-media-zoom:hover img {
		transform: scale(1.025);
	}
}

.editor-styles-wrapper .is-style-wdt-interactive-card,
.editor-styles-wrapper .is-style-wdt-media-zoom img {
	transform: none !important;
}