/*
 * Consumes the custom properties written by assets/style-apply.js.
 *
 * Every property here is generated from class-am-vb-style-schema.php, so this
 * file is the render half of the same contract the inspector and the save
 * whitelist use. Breakpoints match the React app's index.css exactly:
 * mobile base, tablet at 640px, desktop at 1024px.
 *
 * The historical --am-element-* / --am-media-* transform variables are left
 * alone; they are still owned by index.css. Everything below is new surface.
 */

[data-am-vb-styled="true"] {
	rotate: var(--am-vb-rotate-mobile, 0deg);
	opacity: var(--am-vb-opacity, 1);
}

/* Box ------------------------------------------------------------------- */

[data-am-vb-styled="true"][style*="--am-vb-padding-mobile"] {
	padding: var(--am-vb-padding-mobile, 0px);
}

/* Size ------------------------------------------------------------------
   Set from the side resize handles. Text reflows onto the next line as its
   width shrinks; media stretches along that axis. Same declaration, different
   result, because that is simply how the two element types lay out. */

[data-am-vb-styled="true"][style*="--am-vb-width-mobile"] {
	max-width: 100%;
	width: var(--am-vb-width-mobile);
}

[data-am-vb-styled="true"][style*="--am-vb-height-mobile"] {
	height: var(--am-vb-height-mobile);
}

[data-am-vb-styled="true"][style*="--am-vb-bg"] {
	background-color: var(--am-vb-bg);
}

[data-am-vb-styled="true"][style*="--am-vb-radius"] {
	border-radius: var(--am-vb-radius, 0px);
	overflow: hidden;
}

[data-am-vb-styled="true"][style*="--am-vb-border-width"] {
	border-color: var(--am-vb-border-color, currentColor);
	border-style: var(--am-vb-border-style, solid);
	border-width: var(--am-vb-border-width, 0px);
}

/* Typography ------------------------------------------------------------ */

[data-am-vb-styled="true"][style*="--am-vb-font-size-mobile"] {
	font-size: var(--am-vb-font-size-mobile);
}

[data-am-vb-styled="true"][style*="--am-vb-font-weight"] {
	font-weight: var(--am-vb-font-weight);
}

[data-am-vb-styled="true"][style*="--am-vb-line-height"] {
	line-height: var(--am-vb-line-height);
}

[data-am-vb-styled="true"][style*="--am-vb-letter-spacing"] {
	letter-spacing: var(--am-vb-letter-spacing);
}

[data-am-vb-styled="true"][style*="--am-vb-color"] {
	color: var(--am-vb-color);
}

[data-am-vb-styled="true"][style*="--am-vb-text-align-mobile"] {
	text-align: var(--am-vb-text-align-mobile);
}

[data-am-vb-styled="true"][style*="--am-vb-text-transform"] {
	text-transform: var(--am-vb-text-transform);
}

/* Media ----------------------------------------------------------------- */

[data-am-vb-styled="true"][style*="--am-vb-object-fit"] img,
img[data-am-vb-styled="true"][style*="--am-vb-object-fit"] {
	object-fit: var(--am-vb-object-fit);
}

[data-am-vb-styled="true"][style*="--am-vb-aspect"] {
	aspect-ratio: var(--am-vb-aspect);
}

[data-am-vb-styled="true"][style*="--am-vb-brightness"],
[data-am-vb-styled="true"][style*="--am-vb-saturate"] {
	filter: brightness(var(--am-vb-brightness, 1)) saturate(var(--am-vb-saturate, 1));
}

[data-am-vb-styled="true"][data-am-vb-mask="circle"] {
	border-radius: 50%;
	overflow: hidden;
}

[data-am-vb-styled="true"][data-am-vb-mask="arch"] {
	border-radius: 50% 50% 12px 12px / 40% 40% 12px 12px;
	overflow: hidden;
}

[data-am-vb-styled="true"][data-am-vb-mask="squircle"] {
	border-radius: 28%;
	overflow: hidden;
}

[data-am-vb-styled="true"][style*="--am-vb-tint-opacity"] {
	position: relative;
	isolation: isolate;
}

[data-am-vb-styled="true"][style*="--am-vb-tint-opacity"]::after {
	background: var(--am-vb-tint, transparent);
	border-radius: inherit;
	content: "";
	inset: 0;
	opacity: var(--am-vb-tint-opacity, 0);
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

/* Shadow ---------------------------------------------------------------- */

[data-am-vb-styled="true"][data-am-vb-shadow="soft"] {
	box-shadow: 0 2px 10px rgba(32, 55, 42, .09);
}

[data-am-vb-styled="true"][data-am-vb-shadow="medium"] {
	box-shadow: 0 8px 24px rgba(32, 55, 42, .15);
}

[data-am-vb-styled="true"][data-am-vb-shadow="strong"] {
	box-shadow: 0 18px 44px rgba(32, 55, 42, .24);
}

/* Hover ----------------------------------------------------------------- */

[data-am-vb-styled="true"][data-am-vb-hover]:not([data-am-vb-hover="none"]) {
	transition: box-shadow .25s ease, translate .25s ease, scale .25s ease, filter .25s ease;
}

[data-am-vb-styled="true"][data-am-vb-hover="lift"]:hover {
	box-shadow: 0 16px 34px rgba(32, 55, 42, .2);
	translate: 0 -4px;
}

[data-am-vb-styled="true"][data-am-vb-hover="zoom"]:hover {
	scale: 1.04;
}

[data-am-vb-styled="true"][data-am-vb-hover="glow"]:hover {
	filter: brightness(1.08);
}

[data-am-vb-styled="true"][data-am-vb-hover="underline"]:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Scroll animation ------------------------------------------------------ */

[data-am-vb-styled="true"][data-am-vb-animate]:not([data-am-vb-animate="none"]) {
	transition: opacity .6s ease, translate .6s ease, scale .6s ease;
}

[data-am-vb-styled="true"][data-am-vb-animate]:not([data-am-vb-animate="none"])[data-am-vb-inview="false"] {
	opacity: 0;
}

[data-am-vb-styled="true"][data-am-vb-animate="rise"][data-am-vb-inview="false"] {
	translate: 0 26px;
}

[data-am-vb-styled="true"][data-am-vb-animate="slide"][data-am-vb-inview="false"] {
	translate: -26px 0;
}

[data-am-vb-styled="true"][data-am-vb-animate="zoom"][data-am-vb-inview="false"] {
	scale: .94;
}

/* Canvas quiet ----------------------------------------------------------- */

/*
 * Editable elements must be outlined only when hovered or selected.
 *
 * `editor.js` already says `outline: 2px dashed transparent`, but something in
 * the app's own stylesheets was winning and painting a permanent dashed
 * `currentColor` box on 37 of the 74 editable elements on the contact page -
 * every field, every heading, every line of address. The client read the whole
 * canvas as covered in boxes, which is exactly what it looked like. This
 * restores the intended behaviour, and only inside the builder canvas: the
 * attribute below is set by the editor and never exists on the public site.
 */
html[data-am-vb-canvas-mode] [data-am-vb-editable] {
	/*
	 * `outline-style`, not `outline-color`. The editor tried to hide these by
	 * setting the colour to transparent and it did not hold - measured, 37 of
	 * 74 elements still drew a dashed `currentColor` box. Suppressing the
	 * style is what actually stops the browser painting it.
	 */
	outline-style: none !important;
}

html[data-am-vb-canvas-mode] [data-am-vb-editable]:hover,
html[data-am-vb-canvas-mode] [data-am-vb-edit-selected] {
	outline-style: dashed !important;
	outline-color: #ff8a34 !important;
}

html[data-am-vb-canvas-mode] [data-am-vb-edit-selected] {
	outline-style: solid !important;
}

/* Visibility ------------------------------------------------------------ */

[data-am-vb-styled="true"][data-am-vb-hidden-mobile="true"] {
	display: none !important;
}

/*
 * Inside the builder canvas, while editing, a removed item stays on screen but
 * ghosted. Genuinely hiding it there would strand the client: the only way to
 * bring an item back is to select it, and you cannot click something that is
 * not rendered. It still disappears completely in View mode and on the public
 * page, because this attribute is only ever set by the editor.
 */
html[data-am-vb-canvas-mode="edit"] [data-am-vb-styled="true"][data-am-vb-hidden-mobile="true"],
html[data-am-vb-canvas-mode="edit"] [data-am-vb-styled="true"][data-am-vb-hidden-tablet="true"],
html[data-am-vb-canvas-mode="edit"] [data-am-vb-styled="true"][data-am-vb-hidden-desktop="true"] {
	display: revert !important;
	opacity: .3;
	outline: 1px dashed #b45309;
	outline-offset: 2px;
}

/* Tablet ---------------------------------------------------------------- */

@media (min-width: 640px) {
	[data-am-vb-styled="true"] {
		rotate: var(--am-vb-rotate-tablet, var(--am-vb-rotate-mobile, 0deg));
	}

	[data-am-vb-styled="true"][style*="--am-vb-padding-tablet"] {
		padding: var(--am-vb-padding-tablet);
	}

	[data-am-vb-styled="true"][style*="--am-vb-width-tablet"] {
		width: var(--am-vb-width-tablet);
	}

	[data-am-vb-styled="true"][style*="--am-vb-height-tablet"] {
		height: var(--am-vb-height-tablet);
	}

	[data-am-vb-styled="true"][style*="--am-vb-font-size-tablet"] {
		font-size: var(--am-vb-font-size-tablet);
	}

	[data-am-vb-styled="true"][style*="--am-vb-text-align-tablet"] {
		text-align: var(--am-vb-text-align-tablet);
	}

	[data-am-vb-styled="true"][data-am-vb-hidden-mobile="true"] {
		display: revert !important;
	}

	[data-am-vb-styled="true"][data-am-vb-hidden-tablet="true"] {
		display: none !important;
	}
}

/* Desktop --------------------------------------------------------------- */

@media (min-width: 1024px) {
	[data-am-vb-styled="true"] {
		rotate: var(--am-vb-rotate-desktop, var(--am-vb-rotate-tablet, var(--am-vb-rotate-mobile, 0deg)));
	}

	[data-am-vb-styled="true"][style*="--am-vb-padding-desktop"] {
		padding: var(--am-vb-padding-desktop);
	}

	[data-am-vb-styled="true"][style*="--am-vb-width-desktop"] {
		width: var(--am-vb-width-desktop);
	}

	[data-am-vb-styled="true"][style*="--am-vb-height-desktop"] {
		height: var(--am-vb-height-desktop);
	}

	[data-am-vb-styled="true"][style*="--am-vb-font-size-desktop"] {
		font-size: var(--am-vb-font-size-desktop);
	}

	[data-am-vb-styled="true"][style*="--am-vb-text-align-desktop"] {
		text-align: var(--am-vb-text-align-desktop);
	}

	[data-am-vb-styled="true"][data-am-vb-hidden-tablet="true"] {
		display: revert !important;
	}

	[data-am-vb-styled="true"][data-am-vb-hidden-desktop="true"] {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-am-vb-styled="true"][data-am-vb-animate]:not([data-am-vb-animate="none"]) {
		opacity: 1 !important;
		scale: none !important;
		transition: none !important;
		translate: none !important;
	}
}