/* =========================================================================
   Health & Wellness — FAQ (Categorized) — Services page
   Section: faq / tmpl-health-wellness--faq--categorized--24

   Split 60/40: sticky intro aside + categorized accordion. Noise-texture
   backdrop, xl shadow on the accordion card, bounce-in entrance, scale-up
   card hover, glow-pulse CTA. All values come from the design tokens.
   ========================================================================= */

.hwfaq {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 70vh;
	padding-block: var(--space-section);
	background-color: var(--color-surface-soft);
	color: var(--color-body);
}

/* ---- Noise-texture background -------------------------------------------- */
.hwfaq__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: var(--color-surface-soft);
	background-image:
		radial-gradient(circle at 15% 12%, rgba(var(--color-primary-rgb), 0.07), transparent 45%),
		radial-gradient(circle at 88% 88%, rgba(var(--color-accent-rgb), 0.06), transparent 42%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat, repeat;
}

.hwfaq__inner {
	width: min(100% - (var(--container-padding) * 2), 1280px); /* max-w-7xl */
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); /* aside | main → 40/60 */
	gap: clamp(var(--space-8), 5vw, var(--space-20));
	align-items: start;
}

/* ---- Aside (sticky intro) ------------------------------------------------ */
.hwfaq__aside-sticky {
	position: sticky;
	top: calc(var(--nav-height) + var(--space-8));
}

.hwfaq__eyebrow {
	margin: 0 0 var(--space-4);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-primary-600);
}

.hwfaq__title {
	margin: 0 0 var(--space-5);
	font-family: var(--font-heading);
	/* 7xl heading — scaled to the token rhythm for this canvas */
	font-size: clamp(var(--text-3xl), 5vw, var(--text-4xl));
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: -0.01em;
	text-align: left;
	color: var(--color-ink);
}

.hwfaq__subtitle {
	margin: 0 0 var(--space-8);
	max-width: 42ch;
	font-family: var(--font-body);
	font-size: var(--text-lg);
	line-height: var(--leading-normal);
	color: var(--color-muted);
}

/* ---- Category quick-nav (hidden on mobile → hidden-aside) ----------------- */
.hwfaq__nav {
	margin-bottom: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-hairline);
}

.hwfaq__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.hwfaq__nav-link {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	color: var(--color-body);
	text-decoration: none;
	transition: background-color var(--duration-fast) var(--ease-default),
		color var(--duration-fast) var(--ease-default);
}

.hwfaq__nav-dot {
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: var(--radius-full);
	background-color: var(--color-primary-400);
	transition: transform var(--duration-fast) var(--ease-bounce);
}

.hwfaq__nav-link:hover,
.hwfaq__nav-link:focus-visible {
	background-color: var(--color-primary-50);
	color: var(--color-primary-700);
	outline: none;
}

.hwfaq__nav-link:hover .hwfaq__nav-dot,
.hwfaq__nav-link:focus-visible .hwfaq__nav-dot {
	transform: scale(1.6);
	background-color: var(--color-accent-500);
}

.hwfaq__nav-link:focus-visible {
	outline: 2px solid var(--color-primary-500);
	outline-offset: 2px;
}

/* ---- CTA (glow-pulse on hover) ------------------------------------------- */
.hwfaq__cta-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
}

.hwfaq__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-6);
	border-radius: var(--radius-full);
	background-color: var(--color-cta);
	color: var(--color-on-dark);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	text-decoration: none;
	box-shadow: var(--shadow-md);
	transition: background-color var(--duration-normal) var(--ease-default),
		box-shadow var(--duration-normal) var(--ease-default),
		transform var(--duration-normal) var(--ease-default);
}

.hwfaq__cta:hover {
	background-color: var(--color-cta-active);
	transform: translateY(-2px);
	animation: hwfaq-glow-pulse 1.6s var(--ease-default) infinite;
}

.hwfaq__cta:focus-visible {
	outline: 2px solid var(--color-primary-500);
	outline-offset: 3px;
}

.hwfaq__cta-arrow {
	flex: none;
	transition: transform var(--duration-normal) var(--ease-default);
}

.hwfaq__cta:hover .hwfaq__cta-arrow {
	transform: translateX(4px);
}

.hwfaq__cta-note {
	margin: 0;
	max-width: 34ch;
	font-size: var(--text-sm);
	color: var(--color-muted);
}

@keyframes hwfaq-glow-pulse {
	0%   { box-shadow: var(--shadow-md), 0 0 0 0 rgba(var(--color-primary-rgb), 0.35); }
	70%  { box-shadow: var(--shadow-lg), 0 0 0 14px rgba(var(--color-primary-rgb), 0); }
	100% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(var(--color-primary-rgb), 0); }
}

/* ---- Main: categorized accordion (xl shadow card) ------------------------ */
.hwfaq__main {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	padding: clamp(var(--space-6), 3vw, var(--space-10));
	background-color: var(--color-canvas);
	border: 1px solid var(--color-hairline);
	box-shadow: var(--shadow-xl);
	/* border-radius: none per spec */
	border-radius: var(--radius-none);
}

.hwfaq__group {
	scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}

.hwfaq__group-title {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	margin: 0 0 var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 2px solid var(--color-primary-100);
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--letter-snug);
	color: var(--color-ink);
}

.hwfaq__group-index {
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	color: var(--color-accent-500);
	font-variant-numeric: tabular-nums;
}

.hwfaq__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* ---- Accordion item (scale-up on hover) ---------------------------------- */
.hwfaq__item {
	background-color: var(--color-surface-soft);
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-none);
	overflow: hidden;
	transition: transform var(--duration-normal) var(--ease-bounce),
		box-shadow var(--duration-normal) var(--ease-default),
		border-color var(--duration-normal) var(--ease-default);
}

.hwfaq__item:hover {
	transform: scale(1.015);
	box-shadow: var(--shadow-lg);
	border-color: var(--color-primary-200);
}

.hwfaq__item.is-open {
	background-color: var(--color-canvas);
	border-color: var(--color-primary-300);
	box-shadow: var(--shadow-md);
}

.hwfaq__q {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.hwfaq__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	width: 100%;
	padding: var(--space-5) var(--space-6);
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	color: var(--color-ink);
	transition: color var(--duration-fast) var(--ease-default);
}

.hwfaq__trigger:hover {
	color: var(--color-primary-700);
}

.hwfaq__trigger:focus-visible {
	outline: 2px solid var(--color-primary-500);
	outline-offset: -2px;
}

.hwfaq__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-full);
	color: var(--color-primary-600);
	background-color: var(--color-primary-50);
	transition: transform var(--duration-normal) var(--ease-bounce),
		background-color var(--duration-normal) var(--ease-default),
		color var(--duration-normal) var(--ease-default);
}

.hwfaq__trigger[aria-expanded="true"] .hwfaq__icon {
	transform: rotate(135deg);
	background-color: var(--color-accent-500);
	color: var(--color-neutral-900);
}

/* Panel: JS animates max-height; hidden attr closes it fully for no-JS/reduced. */
.hwfaq__panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height var(--duration-normal) var(--ease-default);
}

.hwfaq__panel[hidden] {
	display: block; /* keep animatable; JS toggles [hidden] on for a11y after collapse */
}

.hwfaq__answer {
	padding: 0 var(--space-6) var(--space-5);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	color: var(--color-body);
}

.hwfaq__answer p {
	margin: 0;
	max-width: 62ch;
}

.hwfaq__count {
	margin: var(--space-2) 0 0;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-muted);
}

/* ---- Entrance: bounce-in (1000ms, staggered) ----------------------------- */
[data-hwfaq-anim] {
	opacity: 0;
	transform: translateY(24px) scale(0.98);
}

.hwfaq.is-visible [data-hwfaq-anim] {
	opacity: 1;
	transform: none;
	transition: opacity 1000ms var(--ease-out),
		transform 1000ms var(--ease-bounce);
	transition-delay: calc(var(--hwfaq-delay, 0) * 90ms);
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) { /* tablet: stack */
	.hwfaq__inner {
		grid-template-columns: 1fr;
		gap: var(--space-10);
	}
	.hwfaq__aside-sticky {
		position: static;
	}
	.hwfaq__subtitle {
		max-width: 60ch;
	}
}

@media (max-width: 600px) { /* mobile: hidden-aside (quick-nav) */
	.hwfaq__nav {
		display: none;
	}
	.hwfaq__main {
		padding: var(--space-5) var(--space-4);
	}
	.hwfaq__trigger {
		padding: var(--space-4) var(--space-4);
	}
	.hwfaq__answer {
		padding: 0 var(--space-4) var(--space-4);
	}
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	[data-hwfaq-anim],
	.hwfaq.is-visible [data-hwfaq-anim] {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.hwfaq__item:hover {
		transform: none;
	}
	.hwfaq__cta:hover {
		animation: none;
	}
	.hwfaq__panel {
		transition: none;
	}
}