/*
 * Shared by every Sweetme Bakery block. Colours read the theme tokens and fall back to the Royal option
 * values, so the editor preview (which has no theme tokens) looks the same. Mobile first, min-width only.
 */

.sm-block {
	--smb-ink: var(--sm-ink, #b7816d);
	--smb-text: var(--sm-text, #7d7367);
	--smb-pink: var(--sm-pink, #fb6d87);
	--smb-surface: var(--sm-surface, #fff);
	--smb-font: var(--sm-font, Montserrat, Kanit, sans-serif);
	box-sizing: border-box;
	color: var(--smb-text);
	font-family: var(--smb-font);
}

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

/* Stretches a block to the viewport edges from inside the centred page column. */
.sm-fullbleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* A picture behind a section's content, an <img> so the browser can pick a size from srcset (see Blocks::background_image()). */
.sm-has-bg {
	position: relative;
	isolation: isolate;
}

.sm-bg-image {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

body {
	overflow-x: clip;
}

.sm-block-empty {
	margin: 0;
	padding: 24px 16px;
	border: 1px dashed var(--smb-ink, #b7816d);
	color: var(--smb-ink, #b7816d);
	text-align: center;
}

.sm-block a:focus-visible,
.sm-block button:focus-visible {
	outline: 2px solid var(--smb-pink);
	outline-offset: 2px;
}

.sm-block .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}