/*
Theme Name: Palm Springs Desert Spa
Theme URI: https://example.com/
Author: Palm Springs Desert Spa
Description: A luxe desert-modern block theme for Palm Springs Desert Spa, with a full service menu and Square Appointments booking and payment. Edit every page in the Site Editor; paste your Square booking link under Appearance → Spa Booking.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: palm-springs-desert-spa
Tags: block-theme, full-site-editing, one-column, custom-colors, editor-style
*/

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
a { text-underline-offset: 3px; }

.psds-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.78rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta);
	margin-bottom: 0.75rem !important;
}
.psds-center { text-align: center; }
.psds-center .wp-block-buttons { justify-content: center; }
.psds-lede { font-size: 1.15rem; max-width: 38rem; margin-inline: auto; color: var(--wp--preset--color--ink-soft); }

/* ---------- Header ---------- */
.psds-header {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--cream) 92%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 1rem clamp(1rem, 4vw, 3rem);
}
.psds-header .wp-block-site-title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.45rem; letter-spacing: 0.02em; margin: 0;
}
.psds-header .wp-block-site-title a { text-decoration: none; color: var(--wp--preset--color--ink); }
.psds-header .wp-block-navigation { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; }
.psds-header .wp-block-navigation a { text-decoration: none; }
.psds-header .wp-block-button__link { padding: 0.65rem 1.4rem; font-size: 0.8rem; }

/* ---------- Hero ---------- */
.psds-hero {
	position: relative; overflow: hidden;
	min-height: min(88vh, 760px);
	display: flex; flex-direction: column; justify-content: center;
	background:
		radial-gradient(circle at 50% 118%, #E9A06F 0 22%, transparent 22.2%),
		radial-gradient(circle at 50% 118%, #F2C29A 0 30%, transparent 30.2%),
		linear-gradient(180deg, #F7E6D3 0%, #F1D7BE 55%, #E8C3A1 100%);
	padding: 6rem 1.5rem 8rem !important;
}
.psds-hero::after { /* mountain ridge */
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
	background: var(--wp--preset--color--clay);
	clip-path: polygon(0 62%, 12% 38%, 22% 52%, 34% 18%, 46% 46%, 58% 30%, 70% 54%, 82% 26%, 92% 44%, 100% 34%, 100% 100%, 0 100%);
	opacity: 0.9;
}
.psds-hero::before {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16%; z-index: 1;
	background: var(--wp--preset--color--ink);
	clip-path: polygon(0 70%, 18% 40%, 30% 62%, 48% 30%, 62% 58%, 78% 36%, 100% 60%, 100% 100%, 0 100%);
	opacity: 0.85;
}
.psds-hero > * { position: relative; z-index: 2; }
.psds-hero h1 {
	font-size: clamp(2.8rem, 7vw, 5.5rem);
	line-height: 1.02; font-weight: 400; margin: 0 auto 1.25rem;
	max-width: 14ch;
}
.psds-hero h1 em { font-style: italic; color: var(--wp--preset--color--clay); }

/* ---------- Sections ---------- */
.psds-section { padding: clamp(4rem, 9vw, 7.5rem) 1.5rem !important; }
.psds-section--sand { background: var(--wp--preset--color--sand); }
.psds-section--palm { background: var(--wp--preset--color--palm); color: var(--wp--preset--color--cream); }
.psds-section--palm .psds-eyebrow { color: var(--wp--preset--color--gold); }
.psds-section--palm .psds-lede { color: color-mix(in srgb, var(--wp--preset--color--cream) 80%, transparent); }
.psds-section h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 400; line-height: 1.08; margin-top: 0; }

/* ---------- Service menu ---------- */
.psds-menu { max-width: 56rem; margin-inline: auto; }
.psds-cat { margin-top: 3.5rem !important; }
.psds-cat h3 {
	font-size: 1.9rem; font-weight: 400; margin: 0 0 0.25rem;
}
.psds-cat > p { color: var(--wp--preset--color--ink-soft); margin-top: 0; }
.psds-item {
	display: grid !important;
	grid-template-columns: 1fr auto;
	gap: 0.25rem 2rem;
	padding: 1.35rem 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin: 0 !important;
}
.psds-item > * { margin: 0 !important; }
.psds-item__name { font-family: var(--wp--preset--font-family--serif); font-size: 1.4rem; line-height: 1.2; }
.psds-item__price {
	font-family: var(--wp--preset--font-family--serif); font-size: 1.4rem;
	color: var(--wp--preset--color--clay); text-align: right;
}
.psds-item__meta { grid-column: 1 / -1; font-size: 0.95rem; color: var(--wp--preset--color--ink-soft); }
.psds-item__meta strong { font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.75rem; color: var(--wp--preset--color--terracotta); margin-right: 0.5rem; }
.psds-badge {
	display: inline-block; font-family: var(--wp--preset--font-family--sans);
	font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase;
	background: var(--wp--preset--color--terracotta); color: #fff;
	padding: 0.25rem 0.6rem; border-radius: 99px; vertical-align: middle; margin-left: 0.6rem;
}

/* ---------- Feature (Pampering package) ---------- */
.psds-feature {
	max-width: 56rem; margin-inline: auto !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 60%, transparent);
	border-radius: 999px 999px 24px 24px;
	padding: clamp(3.5rem, 8vw, 5.5rem) clamp(1.5rem, 6vw, 4rem) 3rem !important;
	text-align: center;
}
.psds-feature .psds-price-big { font-family: var(--wp--preset--font-family--serif); font-size: clamp(3rem, 7vw, 4.5rem); line-height: 1; margin: 1rem 0 !important; color: var(--wp--preset--color--gold); }
.psds-feature .wp-block-buttons { justify-content: center; }

/* ---------- Booking steps ---------- */
.psds-steps { gap: 1.5rem !important; margin-top: 3rem !important; }
.psds-step {
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px; padding: 2rem 1.75rem !important; text-align: left;
}
.psds-step .psds-step__num { font-family: var(--wp--preset--font-family--serif); font-size: 2.6rem; line-height: 1; color: var(--wp--preset--color--terracotta); margin: 0 0 0.75rem !important; }
.psds-step h3 { font-size: 1.4rem; font-weight: 400; margin: 0 0 0.5rem; }
.psds-step p { margin: 0; color: var(--wp--preset--color--ink-soft); }

/* Square booking box (output of [psds_square_booking]) */
.psds-booking-box {
	max-width: 44rem; margin: 3rem auto 0; text-align: center;
	background: #fff; border: 1px solid var(--wp--preset--color--line);
	border-radius: 24px; padding: clamp(2rem, 5vw, 3rem);
	box-shadow: 0 20px 50px -30px rgba(122, 62, 38, 0.45);
}
.psds-booking-box h3 { font-family: var(--wp--preset--font-family--serif); font-weight: 400; font-size: 1.8rem; margin: 0 0 0.5rem; }
.psds-booking-box p { color: var(--wp--preset--color--ink-soft); }
.psds-booking-box .psds-secure { font-size: 0.85rem; margin-top: 1.25rem; }
.psds-booking-box .psds-notice { background: #FFF6E5; border: 1px dashed var(--wp--preset--color--gold); padding: 1rem; border-radius: 12px; text-align: left; font-size: 0.9rem; }
.psds-booking-embed { margin-top: 2rem; }
.psds-btn {
	display: inline-block; background: var(--wp--preset--color--terracotta); color: #fff !important;
	text-decoration: none; padding: 1rem 2.25rem; border-radius: 999px;
	font-family: var(--wp--preset--font-family--sans); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem;
	transition: background 0.2s ease;
}
.psds-btn:hover, .psds-btn:focus { background: var(--wp--preset--color--clay); }

/* ---------- About ---------- */
.psds-about .wp-block-column:first-child {
	min-height: 420px; border-radius: 999px 999px 0 0;
	background:
		radial-gradient(circle at 50% 40%, #E9A06F 0 18%, transparent 18.5%),
		linear-gradient(180deg, #EBCDB0, #C98A62);
}
.psds-about .wp-block-column:first-child:has(img) { background: none; }
.psds-about .wp-block-column:first-child img { border-radius: 999px 999px 0 0; width: 100%; height: 100%; object-fit: cover; }
.psds-about .wp-block-column:last-child { align-self: center; }

/* ---------- Footer ---------- */
.psds-footer { background: var(--wp--preset--color--ink); color: #E9DDD0; padding: 4.5rem 1.5rem 2.5rem !important; }
.psds-footer a { color: #F2C29A; }
.psds-footer h2, .psds-footer h3 { color: #fff; font-weight: 400; }
.psds-footer h3 { font-size: 1.05rem; font-family: var(--wp--preset--font-family--sans); letter-spacing: 0.18em; text-transform: uppercase; }
.psds-footer .psds-fine { font-size: 0.8rem; opacity: 0.6; margin-top: 3rem !important; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 1.5rem; }

/* ---------- Buttons ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link { border: 1px solid currentColor; background: transparent; color: inherit; }
.psds-section--palm .wp-block-button__link { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }

@media (max-width: 600px) {
	.psds-item { grid-template-columns: 1fr auto; gap: 0.25rem 1rem; }
	.psds-header .wp-block-button { display: none; }
	.psds-about .wp-block-column:first-child { min-height: 280px; }
}