/**
 * Front-end styles for Dynamic Templates & Elements.
 */

.fse-ta-element {
	--fse-ta-el-z: 10;
	box-sizing: border-box;
}

.fse-ta-element *,
.fse-ta-element *::before,
.fse-ta-element *::after {
	box-sizing: border-box;
}

/* Neutral Element: no modal chrome — your popup/modal blocks control UI. */
.fse-ta-element--element:not(.fse-ta-element--has-z):not(.fse-ta-element--delayed),
.fse-ta-element--element:not(.fse-ta-element--has-z):not([hidden]) {
	display: contents;
}

.fse-ta-element--element:not(.fse-ta-element--has-z):not([hidden]) > .fse-ta-element__content {
	display: contents;
}

/* When z-index is set, use a real stacking context so order is controllable. */
.fse-ta-element--element.fse-ta-element--has-z:not([hidden]) {
	display: block;
	position: relative;
	z-index: var(--fse-ta-el-z);
}

.fse-ta-element--element.fse-ta-element--has-z:not([hidden]) > .fse-ta-element__content {
	display: contents;
}

/* Delayed elements start hidden; when revealed, keep a real box for fixed, contents for plain. */
.fse-ta-element--element[hidden] {
	display: none !important;
}

.fse-ta-element--element:not(.fse-ta-element--has-z):not([hidden]).fse-ta-element--delayed {
	display: contents;
}

/* Fixed element: pinned with X/Y offsets (inline styles). */
.fse-ta-element--fixed {
	position: fixed;
	z-index: var(--fse-ta-el-z);
	max-width: min(360px, 100vw);
}

/*
 * Theme/global block styles often set horizontal auto margins on children.
 * That insets the visible block even when this wrapper is flush to the viewport edge.
 */
.fse-ta-element--fixed > .fse-ta-element__content > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100%;
}

.fse-ta-element--fixed[hidden] {
	display: none !important;
}

/*
 * Go to top — behaviour only (.go-to-top).
 * Click scrolls to #header (see elements-front.js). Use on any block or icon.
 * Old class .fse-ta-go-top still triggers the same click behaviour.
 */
.go-to-top,
.fse-ta-go-top {
	cursor: pointer;
}

/*
 * Go to top — fallback look (.go-to-design).
 * Used by the Button starter when core/icon is not available (pre–WordPress 7.0).
 * Circle, arrow icon, default colors. Pair with .go-to-top for click behaviour.
 * Inline block styles (radius, padding, background) win over the defaults below.
 * Color rules step aside once the button sets its own text, background, or border color.
 */
.go-to-design.wp-block-button {
	width: auto;
	margin: 0;
}

.go-to-design .wp-block-button__link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	min-width: 3rem;
	min-height: 3rem;
	margin: 0;
	padding: 0;
	border-style: solid;
	border-width: 1px;
	border-radius: 50%;
	line-height: 0;
	font-size: 0;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
}

.go-to-design .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--bluemedium, #3b6ea5);
}

.go-to-design .wp-block-button__link:not(.has-background) {
	background-color: rgba(255, 255, 255, 0.3);
}

.go-to-design .wp-block-button__link:not(.has-border-color) {
	border-color: var(--wp--preset--color--bluemedium, #3b6ea5);
}

.go-to-design .wp-block-button__link::before {
	content: "";
	display: block;
	width: 1.125rem;
	height: 1.125rem;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12%204.2%204.8%2011.4%206.2%2012.8%2011%208v11.2h2V8l4.8%204.8%201.4-1.4L12%204.2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12%204.2%204.8%2011.4%206.2%2012.8%2011%208v11.2h2V8l4.8%204.8%201.4-1.4L12%204.2z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Vertical text (topdown / downtop): see assets/vertical-text.css */

/* Page / Woo content replacement (keeps theme chrome). */
.fse-ta-content-element {
	box-sizing: border-box;
	width: 100%;
}

.fse-ta-content-element *,
.fse-ta-content-element *::before,
.fse-ta-content-element *::after {
	box-sizing: border-box;
}

/*
 * Own layout canvas (FSE + classic) for Page content and Woo product elements.
 *
 * Breaks out of the theme content column to the layout viewport (--fse-ta-vw /
 * clientWidth). None / Wide / side padding come from plugin Settings (inline CSS
 * vars), not from the theme — so Kadence/Blocksy/GP/Fork no longer fight us.
 *
 * Defaults below; kind-specific overrides via FSE_TA_Layout_Settings::get_inline_css().
 */
.fse-ta-content-element--layout-canvas {
	--fse-ta-content: 740px;
	--fse-ta-wide: 1200px;
	--fse-ta-side-pad: 1.5rem;
	/* Republish for nested Groups / constrained blocks inside the canvas. */
	--wp--style--global--content-size: var(--fse-ta-content);
	--wp--style--global--wide-size: var(--fse-ta-wide);
	box-sizing: border-box;
	position: relative;
	width: var(--fse-ta-vw, var(--global-vw, 100vw)) !important;
	max-width: var(--fse-ta-vw, var(--global-vw, 100vw)) !important;
	margin-left: calc(50% - (var(--fse-ta-vw, var(--global-vw, 100vw)) / 2)) !important;
	margin-right: calc(50% - (var(--fse-ta-vw, var(--global-vw, 100vw)) / 2)) !important;
}

/*
 * Side padding must beat theme rules that zero padding on .alignfull
 * (e.g. Kadence .entry-content .alignfull { padding-left/right: 0 }).
 * Without this, None columns and Kadence Full rows lose their gutters on mobile.
 */
.fse-ta-content-element.fse-ta-content-element--layout-canvas.alignfull,
.entry-content .fse-ta-content-element.fse-ta-content-element--layout-canvas.alignfull,
.wp-block-post-content .fse-ta-content-element.fse-ta-content-element--layout-canvas.alignfull,
.wp-site-blocks .fse-ta-content-element.fse-ta-content-element--layout-canvas.alignfull {
	padding-left: var(--fse-ta-side-pad) !important;
	padding-right: var(--fse-ta-side-pad) !important;
}

/* None */
.fse-ta-content-element--layout-canvas.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--fse-ta-content);
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Wide */
.fse-ta-content-element--layout-canvas.is-layout-constrained > .alignwide {
	width: 100% !important;
	max-width: var(--fse-ta-wide) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/*
 * Full: bleed past side padding to the canvas edge (viewport).
 * Beat theme rules such as Kadence .entry-content .alignfull and Fork .wp-site-blocks .alignfull.
 */
.fse-ta-content-element--layout-canvas > .alignfull,
.entry-content .fse-ta-content-element--layout-canvas > .alignfull,
.wp-block-post-content .fse-ta-content-element--layout-canvas > .alignfull,
.wp-site-blocks .fse-ta-content-element--layout-canvas > .alignfull {
	width: auto !important;
	max-width: none !important;
	margin-left: calc(var(--fse-ta-side-pad) * -1) !important;
	margin-right: calc(var(--fse-ta-side-pad) * -1) !important;
}

/*
 * Nesting: alignments inside a column stay in the column; Wide under Full stays Wide-sized.
 */
.fse-ta-content-element--layout-canvas .wp-block-column .alignwide,
.fse-ta-content-element--layout-canvas .wp-block-column .alignfull {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: auto !important;
	max-width: 100% !important;
}

.fse-ta-content-element--layout-canvas .alignwide .alignwide {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

.fse-ta-content-element--layout-canvas .alignfull .alignwide {
	width: 100% !important;
	max-width: var(--fse-ta-wide) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/*
 * Product Details defaults to align:wide/full and can break out of columns.
 */
.fse-ta-content-element .wp-block-woocommerce-product-details.alignwide,
.fse-ta-content-element .wp-block-woocommerce-product-details.alignfull {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*
 * Page content slot: top-level slot is alignfull (Full bleed). Canvas re-applies
 * side padding so page-body None stays inset; Full inside the canvas bleeds out.
 */
.fse-ta-page-content-slot {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.fse-ta-content-element--layout-canvas > .fse-ta-page-content-slot,
.wp-block-post-content > .fse-ta-page-content-slot,
.entry-content > .fse-ta-page-content-slot {
	max-width: none !important;
}

.fse-ta-page-content-slot__canvas {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
}

.fse-ta-content-element--layout-canvas .fse-ta-page-content-slot__canvas {
	padding-left: var(--fse-ta-side-pad) !important;
	padding-right: var(--fse-ta-side-pad) !important;
}

.fse-ta-content-element--layout-canvas .fse-ta-page-content-slot__canvas.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--fse-ta-content);
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
}

.fse-ta-content-element--layout-canvas .fse-ta-page-content-slot__canvas.is-layout-constrained > .alignwide {
	width: 100% !important;
	max-width: var(--fse-ta-wide) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.fse-ta-content-element--layout-canvas .fse-ta-page-content-slot__canvas.is-layout-constrained > .alignfull,
.entry-content .fse-ta-content-element--layout-canvas .fse-ta-page-content-slot__canvas.is-layout-constrained > .alignfull,
.wp-site-blocks .fse-ta-content-element--layout-canvas .fse-ta-page-content-slot__canvas.is-layout-constrained > .alignfull {
	width: auto !important;
	max-width: none !important;
	margin-left: calc(var(--fse-ta-side-pad) * -1) !important;
	margin-right: calc(var(--fse-ta-side-pad) * -1) !important;
}

/* Device visibility (Show/Hide per breakpoint). */
@media (min-width: 1025px) {
	.fse-ta-element.fse-ta-hide-desktop,
	.fse-ta-content-element.fse-ta-hide-desktop {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.fse-ta-element.fse-ta-hide-tablet,
	.fse-ta-content-element.fse-ta-hide-tablet {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.fse-ta-element.fse-ta-hide-mobile,
	.fse-ta-content-element.fse-ta-hide-mobile {
		display: none !important;
	}
}