/*
Theme Name: Dana Wellness
Description: Organic warm spa block theme for Dana Cohen physiotherapy clinic — terracotta, sand & olive, rounded organic forms, soft wellness feel.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dana-wellness
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready
*/

/* =========================================================================
   Dana Wellness — organic warm spa
   Palette: sand #F4ECE0 · ink #39312A · terracotta #B86A47 · clay #7E3F23
            burnt #9C4E2E · sand-light #E7D7C1 · olive #6F7549 · warm-white #FCF7EF
   ========================================================================= */

:root {
	--radius-lg: 28px;
	--radius-md: 20px;
	--radius-sm: 14px;
	--shadow-soft: 0 18px 40px -24px rgba(57, 49, 42, 0.45);
	--shadow-card: 0 10px 28px -18px rgba(57, 49, 42, 0.5);
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html { scroll-behavior: smooth; }

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ----- layout helpers -----
   Single gutter source: side padding lives ONLY on .dana-inner / .dana-inner--narrow,
   so every section's content edge lands on the SAME vertical line as the header
   (logo on the right, CTA on the left in RTL). Sections must NOT add their own
   side padding. .dana-measure caps text width while staying anchored to the gutter. */
.dana-inner { width: 100%; max-width: 1340px; margin-inline: auto; padding-inline: clamp(1.15rem, 5vw, 2.5rem); }
.dana-inner--narrow { width: 100%; max-width: 1340px; margin-inline: auto; padding-inline: clamp(1.15rem, 5vw, 2.5rem); }
.dana-measure { width: 100%; max-width: 820px; margin-inline-start: 0; margin-inline-end: auto; }

/* Fallback gutter for any stray top-level block not wrapped in .dana-inner. */
.wp-site-blocks main > .wp-block-group:not(.alignfull):not(.dana-inner):not(.dana-inner--narrow),
.wp-site-blocks main > .wp-block-columns,
.wp-site-blocks main > .wp-block-buttons {
	padding-left: clamp(1.15rem, 5vw, 2.5rem);
	padding-right: clamp(1.15rem, 5vw, 2.5rem);
}

/* Eyebrow / kicker */
.dana-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: none;
	color: var(--wp--preset--color--clay);
	margin-bottom: 0.4rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.dana-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--primary);
	display: inline-block;
}

/* Section titles with organic underline accent */
.dana-section-title { position: relative; }

/* =========================================================================
   Header
   ========================================================================= */
.dana-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(244, 236, 224, 0.86);
	border-bottom: 1px solid transparent;
	transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.dana-header.is-scrolled {
	box-shadow: 0 8px 28px -20px rgba(57, 49, 42, 0.6);
	border-bottom-color: var(--wp--preset--color--border);
}
@media (min-width: 782px) {
	.dana-header { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}

.dana-logo { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.dana-logo__mark { display: inline-flex; flex: 0 0 auto; }
.dana-logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.dana-logo__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.32rem;
	color: var(--wp--preset--color--contrast);
}
.dana-logo__sub {
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--clay);
	margin-top: 2px;
}

.dana-nav-wrap { flex: 1; }
.dana-header .wp-block-navigation { justify-content: center; }
.dana-header .wp-block-navigation a {
	text-decoration: none;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	position: relative;
	padding-bottom: 3px;
}
.dana-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	right: 0; bottom: 0;
	width: 0; height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--primary);
	transition: width 0.3s var(--ease);
}
.dana-header .wp-block-navigation a:hover::after,
.dana-header .wp-block-navigation a:focus::after { width: 100%; }

.dana-header-cta .wp-block-button__link { box-shadow: var(--shadow-card); }

/* =========================================================================
   Buttons
   ========================================================================= */
.wp-block-button__link {
	transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.wp-block-button__link:hover { transform: translateY(-2px); }

/* =========================================================================
   Hero — full-bleed photo + directional scrim (RTL: darkest on the right)
   ========================================================================= */
.dana-hero {
	position: relative;
	min-height: clamp(440px, 76vh, 680px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	border-bottom-left-radius: var(--radius-lg);
	border-bottom-right-radius: var(--radius-lg);
}
.dana-hero__media { position: absolute; inset: 0; z-index: 0; }
.dana-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dana-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* RTL: text anchored right → darkest on the right */
	background:
		linear-gradient(to left, rgba(40, 28, 20, 0.82) 0%, rgba(40, 28, 20, 0.5) 42%, rgba(40, 28, 20, 0.12) 100%),
		linear-gradient(to top, rgba(40, 28, 20, 0.5) 0%, rgba(40, 28, 20, 0) 55%);
}
.dana-hero__motif {
	position: absolute;
	z-index: 1;
	left: -90px; top: -70px;
	width: 320px; height: 320px;
	opacity: 0.5;
	pointer-events: none;
}
.dana-hero__inner { position: relative; z-index: 2; width: 100%; }
.dana-hero__copy { max-width: 640px; margin-inline: 0; text-align: start; }
.dana-hero__copy .dana-eyebrow { color: #F0DCC6; }
.dana-hero__copy .dana-eyebrow::before { background: #E0A678; }
.dana-hero__copy h1 {
	color: var(--wp--preset--color--white);
	text-shadow: 0 2px 18px rgba(30, 20, 14, 0.5);
}
.dana-hero__copy p {
	color: #F6ECE0;
	text-shadow: 0 1px 10px rgba(30, 20, 14, 0.55);
}

/* =========================================================================
   Split section (image / text, asymmetric)
   ========================================================================= */
.dana-split .wp-block-image img {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	width: 100%;
}
.dana-split__body { position: relative; }

/* Organic blob-masked images for variety */
.dana-blob img {
	border-radius: 46% 54% 58% 42% / 48% 44% 56% 52%;
}

/* =========================================================================
   Service rows
   ========================================================================= */
.dana-service-row .wp-block-image img {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	width: 100%;
}
.dana-index {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.4rem;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	opacity: 0.55;
	margin-bottom: 0.3rem;
}

/* =========================================================================
   Cards / info / steps / FAQ
   ========================================================================= */
.dana-info-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}
.dana-info-card ul { list-style: none; padding: 0; }

.dana-steps { counter-reset: step; list-style: none; padding: 0; }
.dana-steps li {
	position: relative;
	padding-inline-start: 3.4rem;
	margin-bottom: 1.5rem;
	min-height: 2.4rem;
}
.dana-steps li::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	inset-inline-start: 0;
	top: -2px;
	width: 2.4rem; height: 2.4rem;
	display: grid; place-items: center;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--clay);
	font-family: var(--wp--preset--font-family--heading);
	border-radius: 50%;
	font-size: 1.05rem;
}

.dana-faq .wp-block-details {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--radius-md);
	padding: 0.4rem 1.4rem;
	margin-bottom: 0.9rem;
	transition: box-shadow 0.25s var(--ease);
}
.dana-faq .wp-block-details[open] { box-shadow: var(--shadow-card); }
.dana-faq summary {
	cursor: pointer;
	font-weight: 600;
	padding: 0.9rem 0;
	list-style: none;
}
.dana-faq summary::-webkit-details-marker { display: none; }
.dana-faq summary::after {
	content: "+";
	float: left;
	color: var(--wp--preset--color--primary);
	font-size: 1.4rem;
	line-height: 1;
	transition: transform 0.25s var(--ease);
}
.dana-faq .wp-block-details[open] summary::after { transform: rotate(45deg); }

/* =========================================================================
   Therapist cards
   ========================================================================= */
.dana-therapist .wp-block-image img {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	width: 100%;
}

/* =========================================================================
   CTA with photo background
   ========================================================================= */
.dana-cta-photo { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.dana-cta-photo__media { position: absolute; inset: 0; z-index: 0; }
.dana-cta-photo__media img { width: 100%; height: 100%; object-fit: cover; }
.dana-cta-photo::before {
	content: "";
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(135deg, rgba(124, 63, 35, 0.86) 0%, rgba(57, 49, 42, 0.84) 100%);
}
.dana-cta-photo > .wp-block-group { position: relative; z-index: 2; }
.dana-cta-photo h2 { color: var(--wp--preset--color--white); }
.dana-cta-photo p { color: #F6ECE0; }
.dana-cta-photo .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--clay);
}
.dana-cta-photo .wp-block-button__link:hover {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--clay);
}

/* =========================================================================
   Contact form
   ========================================================================= */
.dana-contact-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 600px;
	margin-top: 1.6rem;
}
.dana-contact-form label {
	display: flex; flex-direction: column; gap: 0.45rem;
	font-weight: 500;
}
.dana-contact-form input,
.dana-contact-form textarea {
	font: inherit;
	padding: 0.8rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--radius-sm);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.dana-contact-form input:focus,
.dana-contact-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(184, 106, 71, 0.2);
}
.dana-contact-form button {
	align-self: flex-start;
	margin-top: 0.5rem;
	font: inherit; font-weight: 600;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--cta-deep);
	border: none;
	border-radius: 999px;
	padding: 0.9rem 2.4rem;
	cursor: pointer;
	transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}
.dana-contact-form button:hover { transform: translateY(-2px); background: var(--wp--preset--color--olive-deep); }

/* =========================================================================
   Footer
   ========================================================================= */
.dana-footer {
	background: var(--wp--preset--color--contrast);
	color: #E9DFD3;
}
.dana-footer h3 { color: var(--wp--preset--color--white); }
.dana-footer a { color: #E9DFD3; text-decoration: none; }
.dana-footer a:hover { color: var(--wp--preset--color--primary); text-decoration: underline; }
.dana-footer ul { list-style: none; padding: 0; }

/* =========================================================================
   Reveal animations (driven by motion.js adding .is-visible)
   ========================================================================= */
.js-ready .reveal,
.js-ready .reveal-img {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
	will-change: opacity, transform;
}
.js-ready .reveal-img { transform: translateY(34px) scale(0.98); }
.js-ready .reveal.is-visible,
.js-ready .reveal-img.is-visible { opacity: 1; transform: none; }

/* Hero copy staggered entrance */
.dana-hero__copy .reveal { transition-delay: 0.05s; }
.dana-hero__copy .reveal:nth-child(2) { transition-delay: 0.15s; }
.dana-hero__copy .reveal:nth-child(3) { transition-delay: 0.25s; }
.dana-hero__copy .reveal:nth-child(4) { transition-delay: 0.35s; }

/* =========================================================================
   Accessibility — focus visibility
   ========================================================================= */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--clay);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js-ready .reveal,
	.js-ready .reveal-img { opacity: 1 !important; transform: none !important; transition: none !important; }
	.wp-block-button__link:hover { transform: none; }
	.dana-hero__motif { transform: none !important; }
}

/* =========================================================================
   Mobile menu fixes + responsive
   ========================================================================= */
@media (max-width: 781px) {
	.dana-header .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--color--base);
		padding-top: 4.5rem;
	}
	.dana-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		text-align: center;
	}
	.is-menu-open .wp-block-navigation__responsive-container-close {
		top: 1.4rem; left: 1.4rem; right: auto;
	}
	.dana-logo__sub { display: none; }
	.dana-hero { min-height: 70vh; }
	.dana-hero__motif { width: 200px; height: 200px; left: -60px; top: -50px; }
	.dana-steps li { padding-inline-start: 3rem; }
}