/**
 * Buildler block style variations.
 *
 * Every rule here belongs to a variation registered in inc/block-styles.php.
 * Values are read from the theme.json design tokens, so a style variation in
 * /styles or a change in the Site Editor restyles all of them at once.
 */

/* Arrow glyphs, declared once and swapped per button variation. */
:root,
.editor-styles-wrapper {
	--buildler-arrow-dark: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230a0a0a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cline x1="4" y1="12" x2="19" y2="12"/%3E%3Cpolyline points="12 5 19 12 12 19"/%3E%3C/svg%3E');
	--buildler-arrow-light: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cline x1="4" y1="12" x2="19" y2="12"/%3E%3Cpolyline points="12 5 19 12 12 19"/%3E%3C/svg%3E');
}

/* -------------------------------------------------------------------------
 * Buttons
 *
 * Three mutually exclusive variations, each carrying the circular arrow badge
 * that runs through the theme. A button with no variation applied stays a
 * plain pill, as defined in theme.json.
 * ---------------------------------------------------------------------- */

.wp-block-button.is-style-buildler-arrow .wp-block-button__link,
.wp-block-button.is-style-buildler-outline .wp-block-button__link,
.wp-block-button.is-style-buildler-accent .wp-block-button__link {
	align-items: center;
	display: inline-flex;
	gap: 0.875rem;
	padding-inline-end: 0.4375rem;
}

.wp-block-button.is-style-buildler-arrow .wp-block-button__link::after,
.wp-block-button.is-style-buildler-outline .wp-block-button__link::after,
.wp-block-button.is-style-buildler-accent .wp-block-button__link::after {
	background-color: var(--buildler-arrow-badge);
	background-image: var(--buildler-arrow-icon);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0.9375rem auto;
	block-size: 2.25rem;
	border-radius: var(--wp--custom--radius--pill);
	content: "";
	flex: 0 0 auto;
	inline-size: 2.25rem;
	transition: transform var(--wp--custom--transition--base);
}

.wp-block-button.is-style-buildler-arrow .wp-block-button__link:hover::after,
.wp-block-button.is-style-buildler-arrow .wp-block-button__link:focus::after,
.wp-block-button.is-style-buildler-outline .wp-block-button__link:hover::after,
.wp-block-button.is-style-buildler-outline .wp-block-button__link:focus::after,
.wp-block-button.is-style-buildler-accent .wp-block-button__link:hover::after,
.wp-block-button.is-style-buildler-accent .wp-block-button__link:focus::after {
	transform: translateX(3px);
}

/* Right-to-left locales: the arrow points the other way, and so does its
   nudge on hover. */
[dir="rtl"] .wp-block-button.is-style-buildler-arrow .wp-block-button__link::after,
[dir="rtl"] .wp-block-button.is-style-buildler-outline .wp-block-button__link::after,
[dir="rtl"] .wp-block-button.is-style-buildler-accent .wp-block-button__link::after {
	scale: -1 1;
}

[dir="rtl"] .wp-block-button.is-style-buildler-arrow .wp-block-button__link:hover::after,
[dir="rtl"] .wp-block-button.is-style-buildler-arrow .wp-block-button__link:focus::after,
[dir="rtl"] .wp-block-button.is-style-buildler-outline .wp-block-button__link:hover::after,
[dir="rtl"] .wp-block-button.is-style-buildler-outline .wp-block-button__link:focus::after,
[dir="rtl"] .wp-block-button.is-style-buildler-accent .wp-block-button__link:hover::after,
[dir="rtl"] .wp-block-button.is-style-buildler-accent .wp-block-button__link:focus::after {
	transform: translateX(-3px);
}

/* Dark + arrow: the default call to action. */
.wp-block-button.is-style-buildler-arrow .wp-block-button__link {
	--buildler-arrow-badge: var(--wp--preset--color--base);
	--buildler-arrow-icon: var(--buildler-arrow-dark);
}

/* Outline + arrow: a quieter, secondary action. */
.wp-block-button.is-style-buildler-outline .wp-block-button__link:not(.has-background) {
	background-color: transparent;
	border-color: var(--wp--preset--color--contrast-3);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-buildler-outline .wp-block-button__link {
	--buildler-arrow-badge: var(--wp--preset--color--contrast);
	--buildler-arrow-icon: var(--buildler-arrow-light);
}

.wp-block-button.is-style-buildler-outline .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-buildler-outline .wp-block-button__link:not(.has-background):focus {
	--buildler-arrow-badge: var(--wp--preset--color--base);
	--buildler-arrow-icon: var(--buildler-arrow-dark);
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Accent + arrow: for the single most important action on a page. */
.wp-block-button.is-style-buildler-accent .wp-block-button__link:not(.has-background) {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-buildler-accent .wp-block-button__link {
	--buildler-arrow-badge: var(--wp--preset--color--contrast);
	--buildler-arrow-icon: var(--buildler-arrow-light);
}

.wp-block-button.is-style-buildler-accent .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-buildler-accent .wp-block-button__link:not(.has-background):focus {
	--buildler-arrow-badge: var(--wp--preset--color--accent);
	--buildler-arrow-icon: var(--buildler-arrow-dark);
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* -------------------------------------------------------------------------
 * Group: Card and Outline card
 * ---------------------------------------------------------------------- */

.wp-block-group.is-style-buildler-card {
	background-color: var(--wp--preset--color--base-2);
	border-radius: var(--wp--custom--radius--medium);
	padding: var(--wp--preset--spacing--40);
	transition: transform var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base);
}

.wp-block-group.is-style-buildler-card:hover {
	box-shadow: var(--wp--preset--shadow--lifted);
	transform: translateY(-4px);
}

.wp-block-group.is-style-buildler-card-outline {
	border: 1px solid var(--wp--preset--color--contrast-3);
	border-radius: var(--wp--custom--radius--medium);
	padding: var(--wp--preset--spacing--40);
	transition: border-color var(--wp--custom--transition--base);
}

.wp-block-group.is-style-buildler-card-outline:hover {
	border-color: var(--wp--preset--color--contrast);
}

/* On dark sections, borders need to read against the background. */
.has-surface-dark-background-color .wp-block-group.is-style-buildler-card-outline,
.has-contrast-background-color .wp-block-group.is-style-buildler-card-outline {
	border-color: rgba(255, 255, 255, 0.18);
}

.has-surface-dark-background-color .wp-block-group.is-style-buildler-card-outline:hover,
.has-contrast-background-color .wp-block-group.is-style-buildler-card-outline:hover {
	border-color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
 * Heading: Display serif and Eyebrow label
 * ---------------------------------------------------------------------- */

.wp-block-heading.is-style-buildler-display {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1;
}

.wp-block-heading.is-style-buildler-eyebrow,
.wp-block-paragraph.is-style-buildler-eyebrow,
p.is-style-buildler-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * Paragraph: Lead
 * ---------------------------------------------------------------------- */

p.is-style-buildler-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	max-inline-size: 46ch;
}

.has-text-align-center p.is-style-buildler-lead,
p.is-style-buildler-lead.has-text-align-center {
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
 * Image: Soft rounded
 * ---------------------------------------------------------------------- */

.wp-block-image.is-style-buildler-rounded,
.wp-block-post-featured-image.is-style-buildler-rounded {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--large);
}

.wp-block-image.is-style-buildler-rounded img,
.wp-block-post-featured-image.is-style-buildler-rounded img {
	border-radius: inherit;
}

/* -------------------------------------------------------------------------
 * Details: FAQ item
 * ---------------------------------------------------------------------- */

.wp-block-details.is-style-buildler-faq {
	background-color: var(--wp--preset--color--base-2);
	border-radius: var(--wp--custom--radius--medium);
	padding: 0;
}

.wp-block-details.is-style-buildler-faq > summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	gap: 1rem;
	justify-content: space-between;
	list-style: none;
	padding: 1.25rem var(--wp--preset--spacing--30);
}

.wp-block-details.is-style-buildler-faq > summary::-webkit-details-marker,
.wp-block-details.is-style-buildler-faq > summary::marker {
	content: "";
	display: none;
}

.wp-block-details.is-style-buildler-faq > summary::after {
	background-color: var(--wp--preset--color--accent);
	background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230a0a0a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"/%3E%3C/svg%3E');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0.75rem auto;
	block-size: 2rem;
	border-radius: var(--wp--custom--radius--pill);
	content: "";
	flex: 0 0 auto;
	inline-size: 2rem;
	transition: transform var(--wp--custom--transition--base);
}

.wp-block-details.is-style-buildler-faq[open] > summary::after {
	transform: rotate(180deg);
}

.wp-block-details.is-style-buildler-faq > :not(summary) {
	margin-block: 0 1.25rem;
	padding-inline: var(--wp--preset--spacing--30);
}

/* -------------------------------------------------------------------------
 * List: Checklist
 * ---------------------------------------------------------------------- */

ul.is-style-buildler-checklist {
	list-style: none;
	padding-inline-start: 0;
}

ul.is-style-buildler-checklist li {
	padding-inline-start: 2rem;
	position: relative;
}

ul.is-style-buildler-checklist li + li {
	margin-block-start: 0.625rem;
}

ul.is-style-buildler-checklist li::before {
	background-color: var(--wp--preset--color--contrast);
	block-size: 1.125rem;
	content: "";
	inline-size: 1.125rem;
	inset-block-start: 0.28em;
	inset-inline-start: 0;
	-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
	-webkit-mask-size: contain;
	mask-size: contain;
	position: absolute;
}

/* -------------------------------------------------------------------------
 * Quote: Testimonial card
 * ---------------------------------------------------------------------- */

.wp-block-quote.is-style-buildler-testimonial {
	background-color: var(--wp--preset--color--base-2);
	border: 0;
	border-radius: var(--wp--custom--radius--medium);
	margin: 0;
	padding: var(--wp--preset--spacing--40);
}

.wp-block-quote.is-style-buildler-testimonial p {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
}

.wp-block-quote.is-style-buildler-testimonial cite {
	display: block;
	font-style: normal;
	font-weight: 600;
	margin-block-start: 1rem;
}

/* -------------------------------------------------------------------------
 * Columns: Price row
 * A treatment name on one side, the price on the other, joined by a rule.
 * ---------------------------------------------------------------------- */

.wp-block-columns.is-style-buildler-price-row {
	align-items: baseline;
	border-block-end: 1px solid var(--wp--preset--color--contrast-3);
	flex-wrap: nowrap !important;
	gap: 1rem;
	margin-block: 0;
	padding-block: 1.125rem;
}

.wp-block-columns.is-style-buildler-price-row > .wp-block-column:last-child {
	flex-basis: auto;
	flex-grow: 0;
	text-align: end;
	white-space: nowrap;
}

.wp-block-columns.is-style-buildler-price-row p {
	margin-block: 0;
}

@media (max-width: 599px) {
	.wp-block-columns.is-style-buildler-price-row {
		flex-direction: row;
	}
}

/* -------------------------------------------------------------------------
 * List: Plain list
 *
 * Markers removed. Useful for footer link columns and navigation-like lists.
 * ---------------------------------------------------------------------- */

.wp-block-list.is-style-buildler-plain {
	list-style: none;
	margin-inline-start: 0;
	padding-inline-start: 0;
}

.wp-block-list.is-style-buildler-plain li {
	margin-inline-start: 0;
}

/* -------------------------------------------------------------------------
 * Buttons on coloured surfaces
 *
 * A button variation only works while its own colour differs from the section
 * behind it. An accent button on an accent band, or an outline button on a
 * dark band, would otherwise vanish. Each variation is given a fallback
 * treatment for the surfaces it can collide with. No colour is hard-coded,
 * so this holds in every style variation.
 * ---------------------------------------------------------------------- */

/* Accent button standing on an accent surface flips to the dark treatment. */
.has-accent-background-color .wp-block-button.is-style-buildler-accent .wp-block-button__link:not(.has-background),
.has-accent-2-background-color .wp-block-button.is-style-buildler-accent .wp-block-button__link:not(.has-background) {
	--buildler-arrow-badge: var(--wp--preset--color--accent);
	--buildler-arrow-icon: var(--buildler-arrow-dark);
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.has-accent-background-color .wp-block-button.is-style-buildler-accent .wp-block-button__link:not(.has-background):hover,
.has-accent-background-color .wp-block-button.is-style-buildler-accent .wp-block-button__link:not(.has-background):focus,
.has-accent-2-background-color .wp-block-button.is-style-buildler-accent .wp-block-button__link:not(.has-background):hover,
.has-accent-2-background-color .wp-block-button.is-style-buildler-accent .wp-block-button__link:not(.has-background):focus {
	--buildler-arrow-badge: var(--wp--preset--color--contrast);
	--buildler-arrow-icon: var(--buildler-arrow-light);
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* The plain dark button also collides with a dark band, so it inverts. */
.has-surface-dark-background-color .wp-block-button:not(.is-style-buildler-accent):not(.is-style-buildler-outline) .wp-block-button__link:not(.has-background),
.has-contrast-background-color .wp-block-button:not(.is-style-buildler-accent):not(.is-style-buildler-outline) .wp-block-button__link:not(.has-background) {
	--buildler-arrow-badge: var(--wp--preset--color--contrast);
	--buildler-arrow-icon: var(--buildler-arrow-light);
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Outline button on a dark band: borrow the surrounding text colour. */
.has-surface-dark-background-color .wp-block-button.is-style-buildler-outline .wp-block-button__link:not(.has-background),
.has-contrast-background-color .wp-block-button.is-style-buildler-outline .wp-block-button__link:not(.has-background) {
	--buildler-arrow-badge: currentColor;
	--buildler-arrow-icon: var(--buildler-arrow-dark);
	border-color: currentColor;
	color: currentColor;
}

.has-surface-dark-background-color .wp-block-button.is-style-buildler-outline .wp-block-button__link:not(.has-background):hover,
.has-surface-dark-background-color .wp-block-button.is-style-buildler-outline .wp-block-button__link:not(.has-background):focus,
.has-contrast-background-color .wp-block-button.is-style-buildler-outline .wp-block-button__link:not(.has-background):hover,
.has-contrast-background-color .wp-block-button.is-style-buildler-outline .wp-block-button__link:not(.has-background):focus {
	--buildler-arrow-badge: var(--wp--preset--color--contrast);
	--buildler-arrow-icon: var(--buildler-arrow-light);
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

/* Cards inside a dark band tint the band instead of turning pale. */
.has-surface-dark-background-color .wp-block-group.is-style-buildler-card,
.has-contrast-background-color .wp-block-group.is-style-buildler-card {
	background-color: rgba(255, 255, 255, 0.06);
	color: currentColor;
}

.has-surface-dark-background-color .wp-block-quote.is-style-buildler-testimonial,
.has-contrast-background-color .wp-block-quote.is-style-buildler-testimonial {
	background-color: rgba(255, 255, 255, 0.06);
}

/* Checklist ticks follow the inherited colour rather than the fixed dark. */
.has-surface-dark-background-color ul.is-style-buildler-checklist li::before,
.has-contrast-background-color ul.is-style-buildler-checklist li::before,
.has-accent-background-color ul.is-style-buildler-checklist li::before {
	background-color: currentColor;
}

/* Price rows on a coloured band need a rule that reads against it. */
.has-surface-dark-background-color .wp-block-columns.is-style-buildler-price-row,
.has-contrast-background-color .wp-block-columns.is-style-buildler-price-row,
.has-accent-background-color .wp-block-columns.is-style-buildler-price-row,
.has-base-2-background-color .wp-block-columns.is-style-buildler-price-row {
	border-block-end-color: currentColor;
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Price list
 *
 * Two supporting pieces used by the Price list pattern: a duration chip and a
 * leader rule that fills the space between a treatment and its price.
 * ---------------------------------------------------------------------- */

/* No opacity here on purpose. The note inherits the secondary text colour,
   and dimming it further pushed the contrast below 4.5:1 in the lighter style
   variations. The smaller size already separates it from the treatment name. */
.buildler-price-note {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	margin-block-start: 0.25rem;
}

.buildler-price-amount {
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}