/* SkinBooster Master — theme.css
 * Frontend polish on top of theme.json base styles.
 * Keeps the system coherent without overriding block-level freedom.
 */

:root {
	--sbm-primary: #2D5D4F;
	--sbm-primary-dark: #1A3D32;
	--sbm-accent: #E9B08C;
	--sbm-cream: #FAF4ED;
	--sbm-text: #1F2937;
	--sbm-muted: #6B7280;
	--sbm-border: #E5E7EB;
	--sbm-accent-dark: #C8896A;
	--sbm-shadow-soft: 0 2px 10px rgba(45, 93, 79, 0.06);
	--sbm-shadow-medium: 0 6px 24px rgba(45, 93, 79, 0.08);
	--sbm-radius: 14px;
	--sbm-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "ss01", "cv11";
	letter-spacing: -0.005em;
}

/* ── Typography refinement ───────────────────────────── */
h1, h2, h3, h4, h5, h6 {
	word-break: keep-all;
	overflow-wrap: break-word;
}
h1 { letter-spacing: -0.035em; }
h2 { letter-spacing: -0.025em; }

p, li { word-break: keep-all; overflow-wrap: break-word; }

a {
	text-decoration: none;
	transition: color 0.2s var(--sbm-ease);
}
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Buttons ────────────────────────────────────────── */
.wp-block-button .wp-block-button__link,
.wp-element-button {
	transition: transform 0.2s var(--sbm-ease), box-shadow 0.2s var(--sbm-ease), background-color 0.2s var(--sbm-ease);
	will-change: transform;
	box-shadow: var(--sbm-shadow-soft);
}
.wp-block-button .wp-block-button__link:hover,
.wp-element-button:hover {
	transform: translateY(-1px);
	box-shadow: var(--sbm-shadow-medium);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--sbm-primary);
	border: 1.5px solid var(--sbm-primary);
	box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--sbm-primary);
	color: #fff;
}

/* ── Header / Nav ──────────────────────────────────── */
.wp-block-template-part[data-template-part="header"],
header.sbm-header {
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: saturate(1.2) blur(10px);
	-webkit-backdrop-filter: saturate(1.2) blur(10px);
	border-bottom: 1px solid var(--sbm-border);
	position: sticky;
	top: 0;
	z-index: 100;
}

.wp-block-site-title a {
	color: var(--sbm-primary) !important;
	text-decoration: none !important;
	font-weight: 800;
}
.wp-block-site-title a::after {
	content: "·";
	color: var(--sbm-accent);
	margin: 0 0.2em;
	font-weight: 900;
}

.wp-block-navigation .wp-block-navigation-item__content {
	color: var(--sbm-text);
	transition: color 0.2s var(--sbm-ease);
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--sbm-primary);
}

/* ── Hero pattern ──────────────────────────────────── */
.sbm-hero {
	background: linear-gradient(135deg, var(--sbm-cream) 0%, #F3EBE0 100%);
	padding: clamp(4rem, 10vw, 8rem) 1rem;
	position: relative;
	overflow: hidden;
}
.sbm-hero::before {
	content: "";
	position: absolute;
	top: -15%;
	right: -10%;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(233, 176, 140, 0.35) 0%, transparent 70%);
	filter: blur(40px);
	pointer-events: none;
}
.sbm-hero::after {
	content: "";
	position: absolute;
	bottom: -30%;
	left: -10%;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(45, 93, 79, 0.12) 0%, transparent 70%);
	filter: blur(60px);
	pointer-events: none;
}
.sbm-hero > * { position: relative; z-index: 1; }

.sbm-hero-eyebrow {
	display: inline-block;
	background: rgba(45, 93, 79, 0.08);
	color: var(--sbm-primary);
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.45rem 1rem;
	border-radius: 999px;
	letter-spacing: 0.02em;
}

/* ── Section card ──────────────────────────────────── */
.sbm-card {
	background: #fff;
	border: 1px solid var(--sbm-border);
	border-radius: var(--sbm-radius);
	padding: 2rem;
	box-shadow: var(--sbm-shadow-soft);
	transition: transform 0.3s var(--sbm-ease), box-shadow 0.3s var(--sbm-ease);
}
.sbm-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--sbm-shadow-medium);
}
.sbm-card h3 {
	color: var(--sbm-primary);
	margin-top: 0;
}

/* ── Features grid ─────────────────────────────────── */
.sbm-features {
	background: var(--sbm-cream);
	padding: clamp(4rem, 8vw, 6rem) 1rem;
}
.sbm-features-header { text-align: center; margin-bottom: 3rem; }
.sbm-features-header p { color: var(--sbm-muted); max-width: 560px; margin: 0.6rem auto 0; }

/* ── FAQ (details/summary) ─────────────────────────── */
.sbm-faq details {
	background: #fff;
	border: 1px solid var(--sbm-border);
	border-radius: 12px;
	padding: 1.1rem 1.4rem;
	margin-bottom: 0.75rem;
	transition: border-color 0.2s;
}
.sbm-faq details[open] {
	border-color: var(--sbm-primary);
	box-shadow: var(--sbm-shadow-soft);
}
.sbm-faq summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--sbm-text);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.sbm-faq summary::-webkit-details-marker { display: none; }
.sbm-faq summary::after {
	content: "+";
	color: var(--sbm-primary);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.3s var(--sbm-ease);
}
.sbm-faq details[open] summary::after {
	content: "−";
	transform: rotate(180deg);
}
.sbm-faq .faq-answer {
	margin-top: 0.9rem;
	color: var(--sbm-muted);
	line-height: 1.7;
}

/* ── CTA section ───────────────────────────────────── */
.sbm-cta {
	background: linear-gradient(135deg, var(--sbm-primary) 0%, var(--sbm-primary-dark) 100%);
	color: #fff;
	padding: clamp(3rem, 7vw, 5rem) 1rem;
	border-radius: var(--sbm-radius);
	text-align: center;
}
.sbm-cta h2, .sbm-cta h3 { color: #fff; }
.sbm-cta p { color: rgba(255, 255, 255, 0.85); max-width: 560px; margin: 0.6rem auto 1.5rem; }
.sbm-cta .wp-block-button__link {
	background: var(--sbm-accent);
	color: var(--sbm-primary-dark);
	font-weight: 700;
}
.sbm-cta .wp-block-button__link:hover {
	background: #fff;
}

/* ── Medical disclaimer badge ──────────────────────── */
.wsag-disclaimer {
	background: var(--sbm-cream);
	border-left: 3px solid var(--sbm-accent);
	padding: 0.8rem 1rem;
	border-radius: 6px;
	font-size: 0.88rem;
	color: var(--sbm-muted);
	margin: 1rem 0;
}

/* ── Post content ─────────────────────────────────── */
.wp-block-post-content > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.wp-block-post-content .alignwide { max-width: 1200px; }
.wp-block-post-content .alignfull { max-width: 100%; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

.wp-block-post-title {
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.2;
}
.wp-block-post-featured-image img {
	border-radius: var(--sbm-radius);
	box-shadow: var(--sbm-shadow-medium);
}

/* ── Footer ────────────────────────────────────────── */
footer.sbm-footer,
.wp-block-template-part[data-template-part="footer"] {
	background: var(--sbm-primary-dark);
	color: rgba(255, 255, 255, 0.75);
	padding: 3rem 1rem 2rem;
	margin-top: 4rem;
}
footer.sbm-footer a,
.wp-block-template-part[data-template-part="footer"] a {
	color: rgba(255, 255, 255, 0.95);
}
footer.sbm-footer a:hover,
.wp-block-template-part[data-template-part="footer"] a:hover {
	color: var(--sbm-accent);
}
.sbm-footer-brand {
	font-weight: 800;
	color: #fff;
	font-size: 1.1rem;
	margin-bottom: 0.4rem;
}

/* ── Responsive tweaks ─────────────────────────────── */
@media (max-width: 600px) {
	.sbm-hero { padding: 3rem 1rem; }
	.wp-block-site-title a::after { display: none; }
}

/* ── Hospital (clinic) archive polish (works with plugin CSS) ─ */
.wsag-hosp-grid { margin-top: 2rem !important; }
.wsag-hosp-card h2 a { color: var(--sbm-primary) !important; }
.wsag-hosp-card h2 a:hover { color: var(--sbm-primary-dark) !important; }
.wsag-badge { background: var(--sbm-accent) !important; color: var(--sbm-primary-dark) !important; }

/* ── Utility ───────────────────────────────────────── */
.sbm-text-center { text-align: center; }
.sbm-muted { color: var(--sbm-muted); }
/* Note: text-transform/letter-spacing/font-weight/font-style here are
 * intentionally overridden by the v2 Editorial Trust block below
 * (search "v2 Editorial Trust additions"). Color and size remain. */
.sbm-eyebrow {
	display: inline-block;
	text-transform: uppercase;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	font-weight: 700;
	color: var(--sbm-primary);
	margin-bottom: 0.6rem;
}

/* ─────────────────────────────────────────────────────
 * v2 Editorial Trust additions (2026-04-24)
 * Appended below v1 base. All new selectors use .sbm-*
 * namespace or existing block classes to avoid collisions.
 * ───────────────────────────────────────────────────── */

/* Serif eyebrow — applied only where class is present */
.sbm-eyebrow,
.sbm-eyebrow-serif {
	font-family: var(--wp--preset--font-family--serif-display);
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
}

/* Focus ring for keyboard users */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--sbm-primary);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Skip-to-content */
.sbm-skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	background: var(--sbm-primary);
	color: #fff;
	padding: 0.6rem 1rem;
	border-radius: 0 0 8px 0;
	z-index: 200;
	font-weight: 600;
}
.sbm-skip-link:focus {
	left: 0;
	top: 0;
	width: auto;
	height: auto;
}

/* Hero 2-column layout */
.sbm-hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
@media (min-width: 900px) {
	.sbm-hero-grid {
		grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
		gap: 4rem;
	}
}
.sbm-hero-text > * + * { margin-top: 1rem; }
.sbm-hero-text h1 {
	font-size: clamp(2rem, 4.5vw, 3.75rem) !important;
	line-height: 1.15;
	margin: 0.6rem 0 0.8rem;
}
.sbm-hero-text p { max-width: 460px; }
.sbm-hero-art { display: flex; justify-content: center; }
.sbm-hero-art img { width: 100%; max-width: 420px; height: auto; }

/* Serif italic hero eyebrow */
.sbm-hero-eyebrow-serif {
	font-family: var(--wp--preset--font-family--serif-display);
	font-style: italic;
	font-size: 0.95rem;
	color: var(--sbm-primary);
	letter-spacing: 0.01em;
	display: inline-block;
	background: none;
	padding: 0;
	border-radius: 0;
}
.sbm-hero-eyebrow-serif .accent-x {
	border-bottom: 2px solid var(--sbm-accent);
	padding: 0 0.12em 1px;
}

/* Data-proof badge pills (hero) */
.sbm-proof-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.4rem;
}
.sbm-proof-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--sbm-text);
	background: var(--sbm-cream);
	border: 1px solid var(--sbm-border);
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	line-height: 1.2;
}
.sbm-proof-pill--dot::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--sbm-primary);
	display: inline-block;
}
.sbm-proof-pill img {
	width: 14px; height: 14px; display: block;
}

/* Ghost secondary button — applied via .is-style-ghost custom style */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--sbm-primary);
	border: 1.5px solid var(--sbm-primary);
	box-shadow: none;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: var(--sbm-primary);
	color: #fff;
}

/* Selection-criteria numeral badge */
.sbm-numeral {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--serif-display);
	font-style: italic;
	color: var(--sbm-muted);
	font-size: 0.95rem;
	letter-spacing: 0.04em;
}
.sbm-numeral .divider {
	width: 18px; height: 1px; background: var(--sbm-border); display: inline-block;
	transform: translateY(-4px);
}

/* Compare table — sticky first column + mobile scroll hint */
.wsag-compare-wrap { position: relative; }
@media (min-width: 1024px) {
	.wsag-compare-wrap table th:first-child,
	.wsag-compare-wrap table td:first-child {
		position: sticky; left: 0;
		background: #fff;
		box-shadow: 1px 0 0 var(--sbm-border);
		z-index: 1;
	}
}
.wsag-compare-wrap::after {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 24px;
	background: linear-gradient(to right, rgba(255,255,255,0), #fff);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s;
}
@media (max-width: 900px) {
	.wsag-compare-wrap::after { opacity: 1; }
}
.wsag-compare-wrap table thead th {
	background: var(--sbm-cream);
	color: var(--sbm-primary);
	font-weight: 700;
}

.sbm-source-line {
	text-align: center;
	color: var(--sbm-muted);
	font-size: 0.82rem;
	margin-top: 0.4rem;
}

/* Features — source pills */
.sbm-source-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 1rem;
}
.sbm-source-pill {
	display: inline-block;
	font-size: 0.72rem;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--sbm-cream);
	color: var(--sbm-primary);
	font-weight: 600;
}
.sbm-card .sbm-card-icon img {
	width: 40px; height: 40px; display: block;
}

/* FAQ Q/A labels */
.sbm-faq summary .sbm-q,
.sbm-faq .faq-answer .sbm-a {
	font-family: var(--wp--preset--font-family--serif-display);
	font-style: italic;
	font-weight: 500;
	margin-right: 0.5rem;
	letter-spacing: 0.02em;
}
.sbm-faq summary .sbm-q { color: var(--sbm-primary); }
.sbm-faq .faq-answer .sbm-a { color: var(--sbm-accent-dark, #C8896A); }
.sbm-faq details[open] { border-left: 2px solid var(--sbm-accent); }
.sbm-faq summary { line-height: 1.4; }

/* CTA peach accent (decorative, no new image) */
.sbm-cta { position: relative; overflow: hidden; }
.sbm-cta::after {
	content: "";
	position: absolute;
	bottom: -40%;
	left: -10%;
	width: 60%;
	height: 200%;
	background: radial-gradient(circle, rgba(233,176,140,0.22) 0%, transparent 70%);
	filter: blur(50px);
	pointer-events: none;
}
.sbm-cta > * { position: relative; z-index: 1; }

/* Nearby-clinics tertiary link */
.sbm-tertiary-link {
	display: inline-block;
	color: var(--sbm-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: 0.88rem;
	margin-top: 0.4rem;
}
.sbm-tertiary-link:hover { color: var(--sbm-primary); }

/* Scroll reveal */
.sbm-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
.sbm-reveal.sbm-revealed {
	opacity: 1;
	transform: none;
}

/* Reduce motion — hard overrides */
@media (prefers-reduced-motion: reduce) {
	.sbm-reveal, .sbm-reveal.sbm-revealed {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.wp-block-button .wp-block-button__link:hover,
	.wp-element-button:hover {
		transform: none !important;
	}
	.sbm-card:hover { transform: none !important; }
}

/* Hero buttons align under left (text) column on desktop */
@media (min-width: 900px) {
	.sbm-hero .sbm-hero-buttons {
		max-width: 58%;
	}
}