/*
 * Block style variations (inc/block-styles.php): script titles, the swirl divider and the ribbons of the old site.
 * Selectors are class names only, so they also work inside the wysiwyg text of the custom blocks. Loaded on the
 * front end and in the block editor. Mobile first: base styles are the smallest screen.
 */

/* Script titles (the old h1 font): the closest free match to Adelicia Script, Kanit for Thai. */
@font-face {
	font-family: "SM Allura";
	src: url(../fonts/allura-latin.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--sm-script: "SM Allura", "SM Kanit Light", Kanit, cursive;
	/* The old site button (WPBakery "More"): pale pink, white text, a thin frame set off from the edge. */
	--sm-btn-bg: #f9d9da;
	--sm-btn-hover: #f4b8c4;
	--sm-btn-text: #fff;
	/* The call line: "call : 089 ..." in the old pink. */
	--sm-call: #f38399;
}

/* Buttons: core/button as the old site drew it (square, pale pink, white text, thin frame); the Outline style keeps the frame colour. */
.wp-block-buttons.is-layout-flex {
	gap: 20px;
	margin-block: 28px;
}

.wp-block-button .wp-block-button__link {
	padding: 12px 20px;
	border: 0;
	border-radius: 0;
	outline: 1px solid var(--sm-btn-bg);
	outline-offset: 4px;
	background: var(--sm-btn-bg);
	color: var(--sm-btn-text);
	font-size: 16px;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 150ms, outline-color 150ms;
}

.wp-block-button .wp-block-button__link:hover {
	outline-color: var(--sm-btn-hover);
	background: var(--sm-btn-hover);
	color: var(--sm-btn-text);
}

.wp-block-button .wp-block-button__link:focus-visible {
	outline: 2px solid var(--sm-pink, #fb6d87);
	outline-offset: 4px;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--sm-soft-pink, #e09fa9);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--sm-btn-bg);
	color: var(--sm-btn-text);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button .wp-block-button__link {
		transition: none;
	}
}

.is-style-sm-script,
.is-style-sm-script-brown,
.is-style-sm-script-grey {
	margin-block: 16px;
	color: var(--sm-pink, #fb6d87);
	font-family: var(--sm-script);
	font-size: clamp(2.5rem, 8vw, 4.5rem);
	font-weight: 400;
	line-height: 1.15;
	text-align: center;
	text-transform: none;
}

/* The brown script title: "Contact Us" on the contact card; the grey one: "Follow us on". */
.is-style-sm-script-brown {
	color: #b07761;
}

.is-style-sm-script-grey {
	color: var(--sm-text, #7d7367);
}

/* Subtitle: the light grey line under a page title ("Sweet Me Bakery" under "About Me"). */
.is-style-sm-subtitle {
	margin-block: 0 24px;
	color: var(--sm-text, #7d7367);
	font-size: 28px;
	font-weight: 200;
	line-height: 1.3;
	text-align: center;
	text-transform: none;
}

/* Swirl divider: a dashed line with the swirl on it. On a heading it sits under the text; on an empty paragraph it is the divider alone. */
.is-style-sm-swirl::after {
	content: "";
	display: block;
	width: min(74%, 760px);
	height: 26px;
	margin: 14px auto 0;
	background:
		url(../images/catalogue/icon_o.png) center / 26px 26px no-repeat,
		linear-gradient(var(--sm-bg, #fcfefd), var(--sm-bg, #fcfefd)) center / 48px 26px no-repeat,
		repeating-linear-gradient(90deg, #cfaba1 0 4px, transparent 4px 8px) center / 100% 1px no-repeat;
}

p.is-style-sm-swirl {
	margin-block: 24px;
}

/* Swirl and arrows: the small swirl with the two arrows under it (an empty paragraph), closing the home intro as on the old site.
   Percent positions count from (box - picture), so +-82.5px puts the 105px arrows 30px either side of the centre. */
p.is-style-sm-arrows {
	height: 64px;
	margin-block: 24px 0;
	background:
		url(../images/catalogue/icon_o.png) center top / 26px 26px no-repeat,
		url(../images/catalogue/arrow_left.png) calc(50% - 82.5px) bottom / 105px 21px no-repeat,
		url(../images/catalogue/arrow_right.png) calc(50% + 82.5px) bottom / 105px 21px no-repeat;
}

/* Menu ribbon: the pink ribbon on a dashed line, as above the product grid of each category. */
.is-style-sm-ribbon {
	margin-block: 24px;
	padding: 16px 0;
	background:
		url(../images/catalogue/ribbon.png) center / contain no-repeat,
		repeating-linear-gradient(90deg, #ddd 0 4px, transparent 4px 8px) center / 100% 1px no-repeat;
	color: var(--sm-soft-pink, #e09fa9);
	font-size: 17px;
	font-weight: 300;
	line-height: 1.3;
	text-align: center;
}

.is-style-sm-ribbon strong {
	color: #bf8f7f;
	font-weight: 400;
}

/* Promotion ribbon: gold ribbon, white text (home "Promotions & Events", "Recipes"). */
.is-style-sm-promo-ribbon {
	margin-block: 24px;
	background: url(../images/blog/promo-ribbon.png) center / contain no-repeat;
	color: #fff;
	font-size: 20px;
	font-weight: 300;
	line-height: 36px;
	text-align: center;
}

/* Name with rule: a pink name over a thin line, then the first line of the text (the baker on the about page). */
.is-style-sm-name {
	margin-block: 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid #efe4e1;
	color: #f38399;
	font-size: 24px;
	font-weight: 300;
	line-height: 1.3;
}

/* Section title: a left-aligned pink title above a list of pictures (the frozen cake page). */
.is-style-sm-section-title {
	margin-block: 24px 16px;
	color: var(--sm-pink, #fb6d87);
	font-size: 20px;
	font-weight: 300;
	line-height: 1.4;
	text-align: left;
}

/* Banner title and lines: white text on the photo banner (about-me "SINCE 2009"). */
.is-style-sm-banner-title,
.is-style-sm-banner-line {
	margin-block: 8px;
	color: #fff;
	text-align: center;
	text-transform: none;
	font-style: normal;
}

.is-style-sm-banner-title {
	font-size: 22px;
	font-weight: 400;
}

.is-style-sm-banner-line {
	font-size: 15px;
	font-weight: 300;
}

/* Headline: the first line of the wedding offer, larger and light in pink. */
p.is-style-sm-headline {
	margin-block: 0 16px;
	color: var(--sm-pink, #fb6d87);
	font-size: 22px;
	font-weight: 300;
	line-height: 1.5;
	text-align: center;
}

/* Large text: the offer paragraph under the headline (wedding page), 16px on phones and 18px from tablets, light. */
p.is-style-sm-large {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.7;
}

/* Directions link: "Get Direction" with the pink map pin in front (the contact card). */
p.is-style-sm-direction {
	margin-block: 12px;
	font-size: 14px;
}

p.is-style-sm-direction a {
	color: #b27a66;
	text-decoration: none;
}

p.is-style-sm-direction a::before {
	content: "";
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	margin-inline-end: 0.2em;
	background: #f6abb7;
	vertical-align: -0.4em;
	-webkit-mask: url(../images/blocks/map-pin.svg) center / contain no-repeat;
	mask: url(../images/blocks/map-pin.svg) center / contain no-repeat;
}

/* Uppercase line: the first line of the home intro ("Your destination for high-quality cake & bakery"). */
p.is-style-sm-lead {
	text-transform: uppercase;
}

/* Call line and call ribbon: "call : phone  Line : id  open : hours" on one larger pink line, on the pink ribbon for the ribbon style. */
.is-style-sm-call-line,
.is-style-sm-call-ribbon {
	margin-block: 24px;
	color: var(--sm-call);
	font-size: 14px;
	line-height: 1.8;
	text-align: center;
	text-transform: uppercase;
}

.is-style-sm-call-ribbon {
	padding: 36px 8px;
	background: url(../images/catalogue/ribbon.png) center / contain no-repeat;
}

/* One item of the call line, built by the migration: the label in <strong>, the icon after it. Items wrap whole. */
.sm-call-item {
	display: inline-block;
	margin-inline: 0.5em;
	white-space: nowrap;
}

.sm-call-item strong {
	font-weight: inherit;
}

.sm-call-item strong::after {
	content: "";
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	margin-inline: 0.3em 0.2em;
	background: currentColor;
	vertical-align: -0.2em;
	-webkit-mask: var(--sm-call-icon) center / contain no-repeat;
	mask: var(--sm-call-icon) center / contain no-repeat;
}

.sm-call-item--phone {
	--sm-call-icon: url(../images/blocks/call-phone.svg);
}

.sm-call-item--line {
	--sm-call-icon: url(../images/header/icons/line.svg);
}

.sm-call-item--open {
	--sm-call-icon: url(../images/blocks/call-clock.svg);
}

@media (min-width: 768px) {
	.is-style-sm-name {
		font-size: 28px;
	}

	.is-style-sm-subtitle {
		font-size: 40px;
	}

	.is-style-sm-banner-title {
		font-size: 30px;
	}

	.is-style-sm-banner-line {
		font-size: 20px;
	}

	p.is-style-sm-headline {
		font-size: 25px;
	}

	p.is-style-sm-large {
		font-size: 18px;
	}

	.is-style-sm-ribbon {
		font-size: 25px;
	}

	.is-style-sm-promo-ribbon {
		margin-block: 32px;
		font-size: 30px;
		line-height: 52px;
	}

	.is-style-sm-call-line,
	.is-style-sm-call-ribbon {
		font-size: 16px;
	}

	.is-style-sm-call-ribbon {
		padding: 52px 8px;
	}
}

/*
 * Widths: some old rows were narrower than the container. `sm-w-990` is the widest a block may be (the about page's banner,
 * the picture at its own shape); `sm-inset-120` the home promotion cards (the old row's 100px margin and column gutters
 * either side, less the slider's own 10px padding, from 993px); `sm-inset-13` the baker's row (13% padding either side, from 768px). The migration puts these class
 * names on the blocks, so they are a contract between the theme and `sweetme-bakery-core`.
 */
.sm-w-990 {
	max-width: 990px;
	margin-inline: auto;
}

@media (min-width: 768px) {
	.sm-inset-13 {
		margin-inline: 13%;
	}
}

@media (min-width: 993px) {
	.sm-inset-120 {
		margin-inline: 120px;
	}
}