/**
 * Aftercare & FAQs — page-specific styles.
 *
 * Loaded only on pages using the Aftercare & FAQs template
 * (page-templates/template-faq.php) via ba_enqueue_faq_assets().
 *
 * Reuses:
 *   - .ba-section--c-hero + .ba-c-hero (Concerns hero panel)
 *   - .ba-concerns / .ba-concerns__sidebar / __cats / __cat / __cat-chev
 *     (shared side-nav primitive from global.css §21b)
 *   - .ba-c-item accordion (from concerns.css — but concerns.css is NOT
 *     enqueued on this page, so the relevant accordion + hero styles are
 *     re-declared locally for self-sufficiency).
 *   - .ba-banner primitive (global.css §21)
 */

/* Hero panel (.ba-section--c-hero) + grid (.ba-c-hero) come from the unified
 * hero primitive in global.css §5. No redeclaration here. */

/* ---------------------------------------------------------------------------
 * 2. FAQ SECTION — sidebar + stacked groups
 * -------------------------------------------------------------------------*/
.ba-concerns.ba-faq {
	margin-top: 72px;
	display: grid;
	grid-template-columns: 320px minmax(0, 912px);
	gap: 48px;
	align-items: start;
}

/* Smooth anchor scrolling + offset so sticky header (~120px) doesn't hide
 * the group title when jumping. */
html { scroll-behavior: smooth; }
.ba-faq__group {
	padding-top: 8px;
	padding-bottom: 24px;
	scroll-margin-top: 120px;
}
.ba-faq__group + .ba-faq__group { margin-top: 28px; }

.ba-faq__content {
	display: flex;
	flex-direction: column;
}
.ba-faq__group-title {
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: 28px;
	line-height: 1.2;
	color: var(--ba-text-primary);
	margin: 0 0 8px;
}

/* Concerns primitives used here (divider, note, empty) */
.ba-concerns__divider {
	border: 0;
	border-top: 1px solid rgba(56, 39, 30, 0.08);
	margin: 0 0 20px;
	width: 100%;
}
.ba-concerns__empty {
	font-family: var(--ba-font-body);
	font-size: 15px;
	color: var(--ba-text-muted);
	margin: 0;
	padding: 16px 0;
}

.ba-faq__group-sub {
	font-family: var(--ba-font-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ba-text-muted);
	margin: -2px 0 16px;
}

.ba-faq__items {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Optional per-group footer link (e.g. "Explore treatments", "View Pricing"). */
.ba-faq__group-foot {
	margin-top: 18px;
}
.ba-faq__group-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: 15px;
	color: var(--ba-text-primary);
	text-decoration: none;
	border-bottom: 1px solid rgba(56, 39, 30, 0.18);
	transition: color 0.15s ease, border-color 0.15s ease;
}
.ba-faq__group-link:hover {
	color: var(--ba-text-secondary);
	border-bottom-color: rgba(56, 39, 30, 0.5);
}

/* ---- Accordion item ----
 * Base .ba-c-item primitive lives in global.css §20b.
 * FAQ page uses compact summary (smaller font, tighter padding) + answer text. */
.ba-c-item__summary {
	padding: 18px 22px;
	font-size: 17px;
}
.ba-c-item__body { padding: 0 22px 18px; }
.ba-c-item__text {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6;
	color: #6F6258;
	margin: 0;
}

/* ---- Footer note ---- */
.ba-concerns__note {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 28px 0 0;
	padding: 4px 0;
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ba-text-muted);
	justify-content: center;
	text-align: center;
}
.ba-concerns__note-icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: #6F6258;
}

/* ---------------------------------------------------------------------------
 * 3. BOTTOM CTA BANNER — reuses global .ba-banner primitive
 * -------------------------------------------------------------------------*/
.ba-faq-banner .ba-banner__title { max-width: 18ch; }
.ba-faq-banner .ba-banner__text  { max-width: 58ch; }

/* ---------------------------------------------------------------------------
 * RESPONSIVE
 * -------------------------------------------------------------------------*/
@media ( max-width: 1100px ) {
	.ba-concerns.ba-faq {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.ba-faq__group { scroll-margin-top: 96px; }
}

@media ( max-width: 720px ) {
	.ba-faq__group-title { font-size: 24px; }
	.ba-c-item__summary { padding: 16px 18px; font-size: 16px; }
	.ba-c-item__body { padding: 0 18px 18px; }
}