/**
 * Replenish Aromatics — supplementary styles.
 *
 * Only rules that theme.json cannot express belong here: registered block
 * styles, and a few structural details. Colours, fonts and spacing are all
 * read from theme.json custom properties so this file never hard-codes a
 * brand value. If you change the palette, nothing here needs touching.
 */

/* -------------------------------------------------------------------------
   Registered block styles
   ---------------------------------------------------------------------- */

/* Group → "Card" */
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--rule);
	border-radius: 3px;
	padding: var(--wp--preset--spacing--40);
	box-shadow: var(--wp--preset--shadow--soft);
	height: 100%;
}

/* Group → "Hairline border" */
.wp-block-group.is-style-bordered {
	border: 1px solid var(--wp--custom--rule);
	border-radius: 3px;
	padding: var(--wp--preset--spacing--40);
}

/* Image → "Soft corner" */
.wp-block-image.is-style-soft-corner img {
	border-radius: 3px;
}

/* Heading → "Eyebrow" — a small uppercase label above a section heading. */
.wp-block-heading.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.4rem;
}

/* List → "Checklist" */
.wp-block-list.is-style-checklist {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-checklist li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.5rem;
}

.wp-block-list.is-style-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.55rem;
	height: 0.3rem;
	border-left: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: rotate(-45deg);
}

/* -------------------------------------------------------------------------
   Structure
   ---------------------------------------------------------------------- */

/* Headings wrap more gracefully when the browser balances them. */
h1, h2, h3,
.wp-block-post-title,
.wp-block-site-title {
	text-wrap: balance;
}

/* Long prose reads better with a slightly tighter measure than the theme's
   content width, used by the "Page — legal / long text" template. */
.replenish-prose > * {
	max-width: 38rem;
	margin-left: auto;
	margin-right: auto;
}

/* Site header: a hairline under it rather than a hard edge. */
.wp-block-template-part.replenish-header {
	border-bottom: 1px solid var(--wp--custom--rule);
}

/* Navigation: a quiet underline on hover rather than a colour jump. */
.wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

/* Current page gets a persistent marker so people know where they are. */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

/* The booking embed drops in as raw HTML from Square. Give it room and stop
   it forcing the page to scroll sideways on a phone. */
.replenish-embed {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.replenish-embed iframe {
	width: 100%;
	min-height: 46rem;
	border: 0;
	display: block;
}

/* Fallback shown if the booking embed fails to load. Hidden by default and
   revealed by the pattern's own markup when there is no iframe. */
.replenish-embed__fallback {
	border: 1px solid var(--wp--custom--rule);
	border-radius: 3px;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
}

/* Treatment / price rows — a dotted leader between name and price. */
.replenish-price-row {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--wp--custom--rule);
}

.replenish-price-row__name {
	font-weight: 600;
}

.replenish-price-row__rule {
	flex: 1 1 auto;
	border-bottom: 1px dotted var(--wp--custom--rule);
	transform: translateY(-0.25em);
}

.replenish-price-row__price {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--wp--preset--color--contrast-soft);
}

/* Wide content must never make the page scroll sideways. */
.wp-block-table {
	overflow-x: auto;
}

/* Skip link visibility, in case the parent theme's is inherited. */
.skip-link:focus {
	outline: 2px solid var(--wp--custom--focus);
	outline-offset: 3px;
}