/*
Theme Name: Pamper
Text Domain: pamper
Description: Pamper Me! — on-demand massage therapy marketing/lead-gen landing page. Native Gutenberg blocks and block patterns only; no page builder, no React/Next front end.
Version: 1.0.0
Author: TechZ Digital
Author URI: https://techz.digital
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
WPVibe: yes
*/

/* ==========================================================================
   Pamper design tokens
   Soft cream/sage palette, gold-brown accents. Newsreader (serif) for
   headings, Figtree (sans) for body copy, JetBrains Mono for the small
   "Sneak peek" eyebrow label. Values are locked to the Claude Design
   handoff — do not improvise new colors/type here.
   ========================================================================== */
:root {
	--pamper-cream: #F7F2EA;
	--pamper-card: #FBF8F2;
	--pamper-ink: #2B2A26;
	--pamper-body: #55534C;
	--pamper-body-2: #44493F;
	--pamper-body-3: #4E4A42;
	--pamper-muted: #5F6259;

	--pamper-green: #2F3B31;
	--pamper-sage-label: #5E7462;
	--pamper-sage-bg: #EDF0E8;
	--pamper-sage-bg-2: #DCE3D4;
	--pamper-tan-bg: #EFE3CF;

	--pamper-gold: #8C6532;
	--pamper-gold-dark: #6E4E24;
	--pamper-gold-light: #E3C79B;
	--pamper-icon-bg: #F1E6D4;

	--pamper-border: #E6DECF;
	--pamper-border-2: #DCE2D5;
	--pamper-border-3: #CDD5C4;
	--pamper-border-4: #E0D7C6;

	--pamper-cream-text: #F3EFE6;
	--pamper-cream-text-2: #FBF8F2;
	--pamper-light-body: #D8DDD2;
	--pamper-light-label: #C9D4C0;
	--pamper-dark-border: #4A5A4C;
	--pamper-dark-border-2: #56675A;

	--pamper-font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
	--pamper-font-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--pamper-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ==========================================================================
   Base
   ========================================================================== */
html {
	scroll-behavior: smooth;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--pamper-cream);
	color: var(--pamper-ink);
	font-family: var(--pamper-font-sans);
	-webkit-font-smoothing: antialiased;
}

body.pamper-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.pamper-main {
	flex: 1 1 auto;
}

a {
	color: var(--pamper-gold);
	text-decoration: none;
}

a:hover {
	color: var(--pamper-gold-dark);
	text-decoration: underline;
}

h1, h2, h3, h4, p {
	margin: 0;
}

h1, h2, h3, h4, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

:where(*:focus-visible) {
	outline: 2px solid var(--pamper-gold);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Header / nav
   ========================================================================== */
.pamper-header {
	background: var(--pamper-cream);
	border-bottom: 1px solid var(--pamper-border);
	position: relative;
	z-index: 10;
}

.pamper-header__inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: 18px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.pamper-brand {
	display: flex;
	align-items: center;
	text-decoration: none !important;
	flex: none;
}

.pamper-brand__logo {
	height: 36px;
	width: auto;
	display: block;
}

.pamper-nav {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 14px;
	flex-wrap: wrap;
}

.pamper-nav__links {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pamper-nav__links a {
	color: var(--pamper-ink);
	white-space: nowrap;
	text-decoration: none;
}

.pamper-nav__links a:hover {
	color: var(--pamper-gold);
}

.pamper-nav__cta {
	flex: none;
	white-space: nowrap;
	background: var(--pamper-gold);
	color: #FFFDF8 !important;
	padding: 10px 18px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none !important;
}

.pamper-nav__cta:hover {
	background: var(--pamper-gold-dark);
}

.pamper-nav__toggle {
	display: none;
}

.pamper-nav__close {
	display: none;
}

.pamper-nav__overlay {
	display: none;
}

/* ---- Mobile: hamburger + right-side drawer ------------------------------ */
@media (max-width: 860px) {
	.pamper-nav__toggle {
		display: inline-flex;
		flex: none;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		width: 40px;
		height: 40px;
		padding: 0;
		background: none;
		border: none;
		cursor: pointer;
	}

	.pamper-nav__toggle-bar {
		width: 22px;
		height: 2px;
		border-radius: 2px;
		background: var(--pamper-green);
		transition: transform 0.25s ease, opacity 0.2s ease;
	}

	.pamper-nav__toggle.is-active .pamper-nav__toggle-bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.pamper-nav__toggle.is-active .pamper-nav__toggle-bar:nth-child(2) {
		opacity: 0;
	}

	.pamper-nav__toggle.is-active .pamper-nav__toggle-bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	.pamper-nav {
		position: fixed;
		top: 0;
		right: 0;
		height: 100dvh;
		width: min(320px, 84vw);
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 28px;
		background: var(--pamper-cream);
		padding: 84px 28px 32px;
		box-shadow: -16px 0 40px rgba(43, 42, 38, 0.18);
		transform: translateX(100%);
		transition: transform 0.3s ease;
		z-index: 100;
		overflow-y: auto;
	}

	.pamper-nav.is-open {
		transform: translateX(0);
	}

	.pamper-nav__close {
		display: block;
		position: absolute;
		top: 22px;
		right: 24px;
		width: 36px;
		height: 36px;
		line-height: 1;
		font-size: 30px;
		font-weight: 400;
		color: var(--pamper-green);
		background: none;
		border: none;
		cursor: pointer;
	}

	.pamper-nav__links {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		width: 100%;
	}

	.pamper-nav__links a {
		font-size: 17px;
	}

	.pamper-nav__cta {
		width: 100%;
		text-align: center;
	}

	.pamper-nav__overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(43, 42, 38, 0.45);
		z-index: 95;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease;
	}

	.pamper-nav__overlay.is-active {
		opacity: 1;
		pointer-events: auto;
	}
}

body.pamper-nav-is-open {
	overflow: hidden;
}

/* ==========================================================================
   Back to top button (accessibility)
   Fixed, bottom-right; appears after scrolling past the hero. Sits below
   the mobile nav drawer/overlay (z-index 95/100 above) so it's covered
   while the drawer is open rather than floating on top of it.
   ========================================================================== */
.pamper-back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 40;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	border: 1px solid var(--pamper-gold);
	background: var(--pamper-gold);
	color: #FFFDF8;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(43, 42, 38, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background 0.2s ease;
}

.pamper-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.pamper-back-to-top:hover,
.pamper-back-to-top:focus-visible {
	background: var(--pamper-gold-dark);
	border-color: var(--pamper-gold-dark);
}

@media (max-width: 600px) {
	.pamper-back-to-top {
		right: 16px;
		bottom: 16px;
		width: 44px;
		height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pamper-back-to-top {
		transition: opacity 0.01ms linear, visibility 0.01ms linear;
	}
}

/* ==========================================================================
   Buttons (shared visual language for wp:button on this theme)
   ========================================================================== */
.wp-block-button__link {
	font-family: var(--pamper-font-sans);
}

/* ==========================================================================
   Equal-height card rows (e.g. the "Now onboarding" perk cards and the
   "Why Pamper" 2x2 feature grid) — a wp:columns row already stretches
   each column to the tallest column's height by default flexbox behavior,
   but the visible card inside each column only wraps its own content
   unless it's told to fill that height.
   ========================================================================== */
.pamper-perks-row .wp-block-column {
	display: flex;
}

.pamper-perks-row .wp-block-column > .pamper-perk-card {
	flex: 1 1 auto;
	box-sizing: border-box;
}

.pamper-features-row .wp-block-column {
	display: flex;
}

.pamper-features-row .wp-block-column > .pamper-feature-card {
	flex: 1 1 auto;
	box-sizing: border-box;
}

/* ==========================================================================
   wp:group "blockGap" / "layout":"flex" support, applied by hand.
   This theme's section patterns are hand-authored PHP/HTML, not saved by
   the block editor, so the JSON comment metadata (blockGap, layout type)
   never gets the companion <style> tag WordPress normally generates for
   real block-editor content — confirmed by grepping a live-rendered page
   for the generated `.wp-container-core-group-is-layout-*` class names:
   the class is present (render_block() adds classes unconditionally) but
   no matching CSS rule exists anywhere on the page. Net effect: intended
   gaps silently collapse to 0. Same root cause as the equal-height fix
   above; fixed here the same way, with explicit classes, per section
   flagged by Rico (2026-09-23 round 3) rather than a blanket rewrite.
   ========================================================================== */

/* How It Works step cards — number badge → heading → body, 14px gap,
   matching the Claude Design reference (`Pamper Me Landing v2.dc.html`,
   #how section) exactly. */
.pamper-step-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Why Pamper feature cards — icon badge beside heading/body, 20px gap,
   matching the design reference's `display:flex;gap:20px;align-items:
   flex-start` on the card. */
.pamper-feature-card {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

/* Feature icon badge (ID / QR / ↗ / SOS) — fixed 48x48, must never wrap
   to a second line. `min-height` alone (no `height`) let the box grow
   taller than 48px and, combined with the missing flex-row CSS above,
   was letting "ID"/"QR"/"SOS" break mid-word. */
.pamper-feature-mark {
	height: 48px;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Mid-page subscribe strip — heading / subtext / form, 20px gap, matching
   the design reference. This group uses layout type "constrained" (needed
   for the 640px content width), which WordPress renders with an extra
   `.wp-block-group__inner-container` wrapper holding the real children —
   putting `display:flex` on the outer `.pamper-subscribe-strip` div itself
   would only turn its single child (that wrapper) into a flex item and do
   nothing, so it targets the inner container instead. */
.pamper-subscribe-strip > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
}

/* Therapist perk cards (become-therapist.php) — h3 + p stacked with 10px
   gap, matching the design reference. Same missing-blockGap issue: the
   card is a plain wp:group (no explicit "layout" attr → renders
   is-layout-flow with a `.wp-block-group__inner-container` wrapper), and
   `h1,h2,h3,h4,p { margin:0 }` in the Base reset above means the heading
   and body paragraph render with zero space between them without this. */
.pamper-perk-card > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ==========================================================================
   FAQ accordion — native <details>/<summary>, no JS required
   ========================================================================== */
.pamper-faq-item {
	border-top: 1px solid var(--pamper-border-4);
}

.pamper-faq-item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 24px 0;
	font-family: var(--pamper-font-serif);
	font-size: 22px;
	color: var(--pamper-green);
	min-height: 44px;
}

.pamper-faq-item summary::-webkit-details-marker {
	display: none;
}

.pamper-faq-item summary::marker {
	content: '';
}

.pamper-faq-item__icon {
	flex: none;
	color: var(--pamper-gold);
	font-family: var(--pamper-font-sans);
	font-size: 24px;
	line-height: 1;
	transition: transform 0.2s ease;
}

.pamper-faq-item[open] .pamper-faq-item__icon {
	transform: rotate(45deg);
}

.pamper-faq-item p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--pamper-body);
	padding: 0 40px 24px 0;
}

/* ==========================================================================
   Subscribe form block (pamper/subscribe-form)
   ========================================================================== */
.pamper-subscribe {
	width: 100%;
}

.pamper-subscribe input[type="email"],
.pamper-subscribe input[type="text"] {
	min-height: 56px;
	padding: 0 20px;
	border-radius: 14px;
	border: 1px solid var(--pamper-border-3);
	background: #FFFDF8;
	font-family: var(--pamper-font-sans);
	font-size: 16px;
	color: var(--pamper-ink);
	width: 100%;
}

.pamper-subscribe input:focus-visible {
	outline: 2px solid var(--pamper-gold);
	outline-offset: 1px;
}

.pamper-subscribe button {
	min-height: 56px;
	border-radius: 999px;
	border: none;
	background: var(--pamper-gold);
	color: #FFFDF8;
	font-family: var(--pamper-font-sans);
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	padding: 0 28px;
	transition: background 0.15s ease;
}

.pamper-subscribe button:hover,
.pamper-subscribe button:focus-visible {
	background: var(--pamper-gold-dark);
}

.pamper-subscribe button[disabled] {
	opacity: 0.65;
	cursor: not-allowed;
}

.pamper-subscribe .pamper-subscribe__note {
	font-size: 13px;
	line-height: 1.5;
	color: var(--pamper-muted);
	margin-top: 10px;
}

.pamper-subscribe .pamper-subscribe__note a {
	color: var(--pamper-gold-dark);
	text-decoration: underline;
}

.pamper-subscribe__error {
	font-size: 14px;
	color: #A0402A;
	margin-top: 10px;
	display: none;
}

.pamper-subscribe.has-error .pamper-subscribe__error {
	display: block;
}

/* Inline variant (mid-page subscribe) */
.pamper-subscribe--inline form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.pamper-subscribe--inline input[type="email"] {
	flex: 1 1 260px;
	border-radius: 999px;
	padding: 0 22px;
}

.pamper-subscribe--inline button {
	flex: none;
}

/* Inline variant's note ("By subscribing you agree…") sits in a centered
   flex column (.pamper-subscribe-strip above) but .pamper-subscribe has
   width:100%, so the paragraph itself still defaults to left-aligned text
   inside that full-width box. Center it to match the design. */
.pamper-subscribe--inline .pamper-subscribe__note {
	text-align: center;
}

/* Card variant (closing CTA subscribe) */
.pamper-subscribe--card form {
	background: var(--pamper-card);
	border-radius: 24px;
	padding: clamp(20px, 3vw, 28px);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pamper-subscribe--card button {
	min-height: 60px;
	font-size: 17px;
}

.pamper-subscribe__done {
	margin-top: 8px;
	padding: 18px 24px;
	border-radius: 999px;
	background: var(--pamper-card);
	border: 1px solid var(--pamper-border-3);
	font-size: 16px;
	font-weight: 600;
	color: var(--pamper-green);
	display: none;
}

.pamper-subscribe--card .pamper-subscribe__done {
	border-radius: 24px;
	padding: 28px;
	display: none;
	flex-direction: column;
	gap: 6px;
	text-align: left;
}

.pamper-subscribe--card .pamper-subscribe__done strong {
	font-family: var(--pamper-font-serif);
	font-size: 26px;
	font-weight: 400;
	color: var(--pamper-green);
}

.pamper-subscribe.is-done form {
	display: none;
}

.pamper-subscribe.is-done .pamper-subscribe__done {
	display: flex;
}

.pamper-subscribe--inline.is-done .pamper-subscribe__done {
	display: block;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.pamper-footer {
	background: var(--pamper-green);
	color: var(--pamper-light-body);
}

.pamper-footer a {
	color: var(--pamper-cream-text);
}

.pamper-footer a:hover {
	color: var(--pamper-gold-light);
}

.pamper-footer__inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: 64px 24px 32px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.pamper-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 40px;
}

.pamper-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pamper-footer__brand-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pamper-footer__mark {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--pamper-cream-text);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
}

.pamper-footer__mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pamper-footer__wordmark {
	font-family: var(--pamper-font-serif);
	font-size: 28px;
	font-weight: 500;
	color: var(--pamper-cream-text-2);
}

.pamper-footer__tagline {
	font-size: 15px;
	line-height: 1.6;
	max-width: 280px;
}

.pamper-footer__social {
	display: flex;
	gap: 10px;
}

.pamper-footer__social a {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid var(--pamper-dark-border-2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
}

.pamper-footer__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 15px;
}

.pamper-footer__col-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pamper-light-label);
}

.pamper-footer__bottom {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 24px;
	border-top: 1px solid var(--pamper-dark-border);
	font-size: 14px;
}

.pamper-footer__bottom-links {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

/* ==========================================================================
   Generic page template (Privacy Policy, Terms, etc. placeholder pages)
   ========================================================================== */
.pamper-page {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(56px, 8vw, 96px) 24px;
}

.pamper-page h1 {
	font-family: var(--pamper-font-serif);
	font-weight: 400;
	font-size: clamp(34px, 5vw, 48px);
	color: var(--pamper-green);
	margin-bottom: 24px;
}

.pamper-page .pamper-page__content {
	font-size: 17px;
	line-height: 1.7;
	color: var(--pamper-body);
}

/* ==========================================================================
   Small-screen adjustments
   ========================================================================== */
@media (max-width: 600px) {
	.pamper-footer__bottom {
		flex-direction: column;
	}

	/* Hero CTAs ("Get Early Access" / "Join as Therapist") — keep them
	   side by side on mobile instead of stacking full-width, per Rico's
	   screenshot (2026-09-23 round 5). Equal flexible share + min-width:0
	   so long button text can't force an overflow/wrap onto a 3rd line;
	   reduced padding/font-size so both fit comfortably in a phone-width
	   row while staying pill-shaped and centered. */
	.pamper-hero-ctas {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.pamper-hero-ctas > .wp-block-button {
		flex: 1 1 0;
		min-width: 0;
	}

	/* !important needed: each button's padding/font-size are inline styles
	   from the block markup (block editor "typography"/"spacing" support),
	   and an inline style attribute always outranks an external stylesheet
	   rule regardless of selector specificity. */
	.pamper-hero-ctas > .wp-block-button .wp-block-button__link {
		width: 100%;
		box-sizing: border-box;
		display: block;
		text-align: center;
		padding-left: 14px !important;
		padding-right: 14px !important;
		font-size: 14px !important;
	}

	/* Mid-page subscribe form (inline variant) — email input already goes
	   full width via flex-wrap; once the Subscribe button wraps onto its
	   own line below it, stretch it full width too instead of leaving it
	   at its intrinsic/fit-content size, per Rico's screenshot. */
	.pamper-subscribe--inline button {
		flex: 1 1 100%;
		width: 100%;
	}
}