/*
 * Part of the site's standard look since October 2026: glass touches on top of look-2026.css.
 * Adding ?look=original to an address leaves this file out, with the 2026 colours.
 *
 * Real glass (a see-through panel that blurs what is behind it) is used in three places where
 * something does pass behind: the menu strip, the phone booking bar and the frame of the treatment
 * photo. Solid navy has nothing behind it to blur, so the banner and the price-list bars are given
 * the look of glass instead: a sheen, a hairline of light and a gentle shadow. The circles, buttons
 * and reading text are left alone. Browsers that cannot blur show a near-solid version.
 */

/* ---------- 1. The menu strip: frosted, with the page showing softly through as it scrolls ---------- */

/* (The long selector is the theme's own for the strip once it has stuck to the top of the window.) */
html #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner {
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: saturate(170%) blur(16px);
	backdrop-filter: saturate(170%) blur(16px);
	border-bottom: 1px solid rgba(14, 57, 91, 0.08);
}

/* ---------- 2. The navy banner at the top of a page: the bar itself looks like glass ---------- */

/* The circles are left exactly as in the standard look, flat and in their two blues. A sheet of glass
   is laid over the whole bar, circles included: very slightly lighter along the top, a bright hairline
   on the top edge, and a shadow underneath so the bar sits above the page. (An earlier version also
   had a band of reflected light across the middle; it was distracting and was taken out.) It is drawn
   above the circles and below the words. */
html:root .sl-page-head,
.entry-hero .entry-hero-container-inner {
	box-shadow: 0 14px 30px rgba(14, 57, 91, 0.18);
}

html:root .sl-page-head::after,
.entry-hero .entry-hero-container-inner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0) 70%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* ---------- 3. Price-list bars: a sheen along the top and a soft shadow, so they sit proud of the list ---------- */

.sl-section h3:has(+ .sl-prices),
html:root .sl-pricelist__item h3 {
	position: relative;
	z-index: 1;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0) 62%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 18px rgba(14, 57, 91, 0.16);
}

/* ---------- 4. White cards lift slightly off the page ---------- */

.sl-prices,
.sl-glance,
.sl-card,
.sl-tile,
.blog .loop-entry {
	border-color: rgba(14, 57, 91, 0.09);
	box-shadow: 0 1px 2px rgba(14, 57, 91, 0.04), 0 12px 30px rgba(14, 57, 91, 0.07);
}

.sl-card,
.sl-tile,
.blog .loop-entry {
	transition: box-shadow 0.2s ease;
}

.sl-card:hover,
.sl-tile:hover,
.blog .loop-entry:hover {
	box-shadow: 0 2px 4px rgba(14, 57, 91, 0.05), 0 18px 40px rgba(14, 57, 91, 0.13);
}

/* ---------- 5. The treatment photo sits in a frame of frosted glass where it overlaps the banner ---------- */

html:root .sl-page-head .sl-page-head__photo {
	padding: 6px;
	border-radius: calc(var(--sl-radius) + 6px);
	background: rgba(255, 255, 255, 0.18);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32), 0 22px 44px rgba(14, 57, 91, 0.22);
}

html:root .sl-page-head .sl-page-head__photo img {
	box-shadow: none;
}

/* ---------- 6. Phones: the booking bar is frosted too ---------- */

@media (max-width: 767px) {
	.sl-bookbar {
		background: rgba(255, 255, 255, 0.74);
		-webkit-backdrop-filter: saturate(170%) blur(16px);
		backdrop-filter: saturate(170%) blur(16px);
		border-top-color: rgba(14, 57, 91, 0.08);
	}
}

/* Browsers that cannot blur what is behind a panel get it nearly solid, so text stays easy to read. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	html #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner,
	.sl-bookbar {
		background: rgba(255, 255, 255, 0.97);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sl-card,
	.sl-tile,
	.blog .loop-entry {
		transition: none;
	}
}