/**
 * 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;
}

/* 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;
	}
}