/* Small layer on top of theme.json: only what theme.json can't express. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
[id] { scroll-margin-top: 96px; }

.sl-eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }

.sl-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--wp--preset--color--sand); }
/* Logged-in preview: sit below the fixed admin bar (32px, 46px under 783px). */
.admin-bar .sl-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .sl-header { top: 46px; } }
.sl-header .wp-block-navigation a:hover { color: var(--wp--preset--color--clay); }

.sl-card {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--card);
	padding: var(--wp--preset--spacing--40);
	overflow: hidden;
}

.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; border: 1.5px solid currentColor; }

/* Booking form */
.sl-form { display: grid; gap: var(--wp--preset--spacing--30); }
.sl-field { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 0.875rem; font-weight: 500; }
.sl-input { font: inherit; font-weight: 400; font-size: 1rem; min-height: 48px; padding: 12px 14px; border: 1px solid var(--wp--preset--color--sand); border-radius: 12px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); width: 100%; }
.sl-input:focus { outline: 2px solid var(--wp--preset--color--forest); outline-offset: 1px; }
.sl-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sl-form__notice { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--wp--preset--color--forest) 12%, var(--wp--preset--color--paper)); margin: 0; }
.sl-form__notice--error { background: color-mix(in srgb, var(--wp--preset--color--clay) 12%, var(--wp--preset--color--paper)); }

/* Sticky Text / Book bar on phones */
.sl-mobilebar { display: none; }
@media (max-width: 900px) {
	.sl-mobilebar {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: var(--wp--preset--color--paper); border-top: 1px solid var(--wp--preset--color--sand);
	}
	body { padding-bottom: 76px; }
}

/* ==========================================================================
   Shared section patterns (theme/patterns/shared-*.php)
   Every section is <section class="sl-section sl-<type>">. Rules below are
   prefixed with .sl-section where they must beat WordPress layout styles.
   ========================================================================== */

/* Small text helpers */
.sl-crumb { font-size: 0.875rem; }
.sl-crumb a { color: inherit; }
.sl-trust { font-size: 0.9375rem; color: var(--wp--preset--color--sand); }
.sl-arrow { font-weight: 600; }
.sl-arrow a { color: var(--wp--preset--color--clay); text-decoration: none; }
.sl-arrow a:hover { color: var(--wp--preset--color--clay-dark); text-decoration: underline; }

/* Section heading row (eyebrow + h2 left, note or button right) */
.sl-section__head { margin-bottom: var(--wp--preset--spacing--30); }
.sl-section__head > p { max-width: 420px; }

/* Image crops: class on the core/image block, the img fills the ratio box */
.sl-ratio-4x3 img, .sl-ratio-16x10 img, .sl-ratio-16x9 img, .sl-ratio-4x5 img, .sl-ratio-1x1 img, .sl-ratio-2x3 img {
	width: 100%; height: auto; object-fit: cover; border-radius: var(--wp--custom--radius--image);
}
.sl-ratio-4x3 img { aspect-ratio: 4 / 3; }
.sl-ratio-16x10 img { aspect-ratio: 16 / 10; }
.sl-ratio-16x9 img { aspect-ratio: 16 / 9; }
.sl-ratio-4x5 img { aspect-ratio: 4 / 5; }
.sl-ratio-1x1 img { aspect-ratio: 1 / 1; }
.sl-ratio-2x3 img { aspect-ratio: 2 / 3; }

/* Page hero (core/cover): keep headline and lead readable, left-aligned */
.sl-hero .wp-block-cover__inner-container > h1 { max-width: 860px; margin-left: 0 !important; }
.sl-hero .wp-block-cover__inner-container > p { max-width: 640px; margin-left: 0 !important; }
.sl-hero .sl-crumb, .sl-hero .sl-eyebrow { margin-bottom: var(--wp--preset--spacing--30); }
.sl-hero .wp-block-buttons { margin-top: var(--wp--preset--spacing--40); }

/* Cards: image bleeds to the card edge, text keeps the card padding */
.sl-section .sl-card > * + *, .sl-section .sl-step > * + *, .sl-section .sl-feature > * + * { margin-block-start: var(--wp--preset--spacing--20); }
.sl-card > .wp-block-image:first-child {
	margin: calc(-1 * var(--wp--preset--spacing--40)) calc(-1 * var(--wp--preset--spacing--40)) 0;
}
.sl-card > .wp-block-image:first-child img { width: 100%; border-radius: 0; }
.sl-section .sl-card > .wp-block-image + * { margin-block-start: var(--wp--preset--spacing--40); }
.sl-section .sl-card > .sl-arrow { margin-block-start: var(--wp--preset--spacing--30); }

/* Price list: label · dotted leader · price, 1px sand line under each row */
.sl-section .sl-price-list > .sl-price-row { margin-block: 0; }
.sl-section .sl-price-row { gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--wp--preset--color--sand); }
.sl-price-row > :first-child { order: 0; }
.sl-price-row::after { content: ""; flex: 1; order: 1; min-width: 16px; border-bottom: 1px dotted currentColor; opacity: .6; transform: translateY(-6px); }
.sl-price-row > .sl-price { order: 2; font-weight: 600; white-space: nowrap; }
.sl-section .sl-price-list + .wp-block-buttons, .sl-section .sl-price-list + p { margin-block-start: var(--wp--preset--spacing--40); }

/* Steps 1-2-3: cards with a 44px forest circle and a serif number */
.sl-step {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--40);
}
.has-paper-background-color .sl-step { background: var(--wp--preset--color--cream); }
.sl-step__num {
	display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
	background: var(--wp--preset--color--forest); color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--cormorant); font-weight: 600; font-size: 1.375rem; line-height: 1;
}
.sl-step h3 { font-family: var(--wp--preset--font-family--jost); font-size: var(--wp--preset--font-size--large); letter-spacing: 0; }
.sl-section .sl-step > .sl-step__num + * { margin-block-start: var(--wp--preset--spacing--30); }
.sl-step p:not(.sl-step__num) { font-size: 0.9375rem; color: var(--wp--preset--color--moss); }
/* Vertical variant (Home booking section): number left, text right, no card */
.sl-steps--stacked .sl-step { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--wp--preset--spacing--30); background: none; border: 0; padding: 0; }
.sl-steps--stacked .sl-step__num { grid-row: 1 / span 2; }
.sl-section .sl-steps--stacked .sl-step > * + * { margin-block-start: 0; }

/* Two-column (core/media-text with image fill) */
.sl-two-col .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media { min-height: min(480px, 70vw); }
.sl-two-col .wp-block-media-text__media img { border-radius: var(--wp--custom--radius--image); }
.sl-two-col .wp-block-media-text__content > .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--40); }
@media (max-width: 600px) {
	.sl-two-col .wp-block-media-text__content { padding-left: 0; padding-right: 0; }
}

/* Quote */
.sl-quote { line-height: 1.25; }
.sl-section .sl-quote + .sl-quote__cite { margin-block-start: var(--wp--preset--spacing--30); }

/* Gallery strip (core/gallery, cropped): square by default, modifiers for other crops */
.sl-gallery .wp-block-gallery.has-nested-images { --wp--style--unstable-gallery-gap: 12px; gap: var(--wp--style--unstable-gallery-gap); } /* gap must equal the var core uses for column widths */
/* :not(#individual-image) mirrors core's own selector so these win on specificity */
.sl-gallery .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img { width: 100%; height: auto; flex: none; aspect-ratio: 1 / 1; object-fit: cover; }
.sl-gallery .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { flex-grow: 0; } /* a short last row keeps equal tiles */
.sl-gallery--4x3 .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img { aspect-ratio: 4 / 3; }
.sl-gallery--3x4 .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img { aspect-ratio: 3 / 4; }
@media (max-width: 900px) and (min-width: 601px) {
	.sl-gallery .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image) { width: calc(33.333% - var(--wp--style--unstable-gallery-gap, 12px) * 0.667); }
}

/* Feature list: heading + paragraph pairs with a thin top rule */
.sl-feature { border-top: 1px solid var(--wp--preset--color--sand); padding-top: var(--wp--preset--spacing--30); }

/* Long-form text + core/details ("Continue reading" as an outline pill) */
.sl-longform p { line-height: 1.75; }
.sl-longform details > summary {
	display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; list-style: none; cursor: pointer;
	border: 1.5px solid var(--wp--preset--color--forest); border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--forest); font-weight: 600; line-height: 1.2;
}
.sl-longform details > summary::-webkit-details-marker { display: none; }
.sl-longform details > summary:hover { background: var(--wp--preset--color--forest); color: var(--wp--preset--color--white); }
.sl-longform details[open] > summary { margin-bottom: var(--wp--preset--spacing--40); }
.sl-longform details > p + p { margin-block-start: var(--wp--preset--spacing--30); }

/* Dark sections (backgroundColor forest or ink): soften rules and leaders */
.sl-section.has-forest-background-color .sl-price-row, .sl-section.has-ink-background-color .sl-price-row { border-bottom-color: var(--wp--preset--color--moss); }
.sl-section.has-forest-background-color .sl-price-row::after, .sl-section.has-ink-background-color .sl-price-row::after { border-color: var(--wp--preset--color--sand); opacity: 1; }
.sl-section.has-forest-background-color .sl-feature, .sl-section.has-ink-background-color .sl-feature { border-top-color: var(--wp--preset--color--moss); }
.sl-section.has-forest-background-color .sl-quote, .sl-section.has-ink-background-color .sl-quote { color: var(--wp--preset--color--white); }
.sl-section.has-forest-background-color .sl-quote__cite, .sl-section.has-ink-background-color .sl-quote__cite { color: var(--wp--preset--color--sand); }
.sl-section.has-forest-background-color .sl-arrow a, .sl-section.has-ink-background-color .sl-arrow a { color: var(--wp--preset--color--sand); }
.sl-section.has-forest-background-color .sl-step__num, .sl-section.has-ink-background-color .sl-step__num { background: var(--wp--preset--color--sand); color: var(--wp--preset--color--ink); }
.sl-section.has-forest-background-color .sl-step, .sl-section.has-ink-background-color .sl-step { background: transparent; border-color: var(--wp--preset--color--moss); }
.sl-section.has-forest-background-color .sl-step p:not(.sl-step__num), .sl-section.has-ink-background-color .sl-step p:not(.sl-step__num) { color: var(--wp--preset--color--sand); }

/* ===== Header, CTA band, footer ===== */

/* Header */
.sl-header .sl-header__row { align-items: center; }
.sl-header .sl-header__logo { margin: 0; flex-shrink: 0; }
.sl-header .sl-header__logo img { border-radius: 0; display: block; }
.sl-header .sl-header__actions { flex-shrink: 0; }
.sl-header .sl-header__phone { margin: 0; font-weight: 500; }
.sl-header .sl-header__phone a { color: var(--wp--preset--color--ink); text-decoration: none; }
.sl-header .sl-header__phone a:hover { color: var(--wp--preset--color--clay); }
/* "Gallery & Art" and "Book a Session" live only in the mobile overlay: hidden whenever the menu
   renders inline (desktop, >900px), shown once the overlay is open. */
.sl-header .wp-block-navigation__responsive-container:not(.is-menu-open) .sl-nav__mobile-only { display: none; }
.sl-header .is-menu-open .sl-nav__book a { color: var(--wp--preset--color--clay); font-weight: 600; }
/* Open overlay: left-aligned 18px links, as on the design's mobile board (the inline nav is right-justified). */
.sl-header .is-menu-open { --navigation-layout-justification-setting: flex-start; }
.sl-header .is-menu-open .wp-block-navigation-item__content { font-size: 1.125rem; padding: 10px 0; }
@media (max-width: 900px) {
	.sl-header .sl-header__phone { display: none; }
	/* Two classes beat core's `body .is-layout-flex { display:flex }`. The sticky .sl-mobilebar carries the Book button instead. */
	.sl-header .sl-header__cta.wp-block-buttons { display: none; }
}

/* CTA band */
.sl-cta.wp-block-cover { min-height: 0; }
.sl-cta .sl-cta__inner { align-items: center; }
.sl-cta .sl-cta__text { max-width: 620px; }
.sl-cta .sl-cta__text .sl-eyebrow { margin-bottom: var(--wp--preset--spacing--20); }

/* Footer */
.sl-footer .sl-footer__logo { margin: 0 0 var(--wp--preset--spacing--30); }
.sl-footer .sl-footer__logo img { border-radius: 0; display: block; }
.sl-footer .sl-footer__title {
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
	margin-bottom: var(--wp--preset--spacing--20);
}
.sl-footer .sl-footer__links { list-style: none; margin: 0; padding: 0; }
.sl-footer .sl-footer__links li { padding: 4px 0; }
.sl-footer .sl-footer__links a,
.sl-footer .sl-footer__brand a { color: var(--wp--preset--color--sand); text-decoration: none; }
.sl-footer .sl-arrow a { color: var(--wp--preset--color--white); font-weight: 600; text-decoration: none; }
.sl-footer a:hover { color: var(--wp--preset--color--white); }
.sl-footer .wp-block-social-links { margin-top: var(--wp--preset--spacing--20); }
.sl-footer .sl-footer__legal {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--moss);
}

/* Book page "Pay & reserve" card. The PayPal row holds a long email in .sl-price,
   which is nowrap above; let it wrap inside the card at phone widths (the board sets overflow-wrap: anywhere). */
.sl-book .sl-price-row > .sl-price { white-space: normal; overflow-wrap: anywhere; text-align: right; }
.sl-book .sl-price-row > :first-child { flex-shrink: 0; }
@media (max-width: 600px) {
	/* Label on one line, value on the next; no dotted leader. */
	.sl-book .sl-price-row { flex-wrap: wrap; row-gap: 2px; }
	.sl-book .sl-price-row::after { display: none; }
	.sl-book .sl-price-row > .sl-price { flex-basis: 100%; text-align: left; }
}