/*
 * Block: cy/redesign-cpv-faq — capability-page FAQ.
 *
 * Ported from the SPM test page FAQ: minimalist two-column accordion,
 * warm sand palette, bare "+"→"−" toggle, smooth ::details-content slide.
 *
 * Uses a dedicated `cpvfaq2__*` class namespace so it does NOT inherit the
 * shared `.cpv-faq__*` / `.faq__*` rules in the capability-section
 * stylesheet (which also style pricing/solutions/vp FAQs). The section
 * keeps its `.cpv-faq` class; section-level overrides are raised to
 * `.cpv-faq.cpvfaq2` specificity to win cleanly over the shared rules.
 */

/* Lets the native <details> panel animate its height to/from `auto`
 * (Chromium/Edge 129+). Harmless and ignored elsewhere. */
:root {
	interpolate-size: allow-keywords;
	/* One step darker than --color-sand-700; sits between 700 and 900. */
	--color-sand-800: #2d2b24;
}

.cpv-faq.cpvfaq2 {
	background: #f3f2ee;
	padding: 120px 40px 136px;
	box-sizing: border-box;
}

.cpvfaq2__inner {
	/* Match the shared capability container so the FAQ aligns with every
	   other section on the page (was 1120, which sat ~22px wider each side). */
	max-width: var(--cpv-container, 1076px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(220px, 0.72fr) 1.55fr;
	gap: 96px;
	align-items: start;
}

/* ─── Left column ──────────────────────────────────────────────── */

.cpvfaq2__aside {
	position: sticky;
	/* Clear the fixed navbar and keep a comfortable gap on scroll. */
	top: 161px;
}

.cpvfaq2__heading {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(30px, 3.2vw, 40px); /* canonical section-title scale (page-wide) */
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--color-sand-800, #2d2b24);
	text-align: left;
	margin: 0;
}

/* ─── Right column: accordion ──────────────────────────────────── */

.cpvfaq2__list {
	width: 100%;
}

.cpvfaq2__item {
	border-top: 1px solid var(--color-sand-300, #d8d5cc);
}

.cpvfaq2__item:last-child {
	border-bottom: 1px solid var(--color-sand-300, #d8d5cc);
}

.cpvfaq2__question {
	list-style: none;
	cursor: pointer;
	padding: 30px 0;
	display: flex;
	align-items: center;
	gap: 40px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: -0.2px;
	color: var(--color-sand-700, #3c3a30);
	transition: color 0.25s ease;
}

/* Hover deepens to the darkest sand for a strong contrast lift. */
.cpvfaq2__question:hover {
	color: var(--color-sand-900, #1e1d18);
}

.cpvfaq2__item[open] .cpvfaq2__question {
	color: var(--color-sand-800, #2d2b24);
}

.cpvfaq2__question::-webkit-details-marker { display: none; }
.cpvfaq2__question::marker { display: none; content: ""; }

.cpvfaq2__question > span:first-child {
	flex: 1 1 auto;
}

/* Bare "+" → "−" toggle: two thin strokes; the vertical one fades out. */
.cpvfaq2__icon {
	position: relative;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.cpvfaq2__icon::before,
.cpvfaq2__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--color-sand-600, #5c584c);
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            background 0.25s ease;
}

.cpvfaq2__item[open] .cpvfaq2__icon::before,
.cpvfaq2__item[open] .cpvfaq2__icon::after {
	background: var(--color-sand-800, #2d2b24);
}

.cpvfaq2__question:hover .cpvfaq2__icon::before,
.cpvfaq2__question:hover .cpvfaq2__icon::after {
	background: var(--color-sand-900, #1e1d18);
}

.cpvfaq2__icon::before {
	width: 16px;
	height: 1.25px;
	transform: translate(-50%, -50%);
}

.cpvfaq2__icon::after {
	width: 1.25px;
	height: 16px;
	transform: translate(-50%, -50%);
}

.cpvfaq2__item[open] .cpvfaq2__icon::after {
	opacity: 0;
	transform: translate(-50%, -50%) scaleY(0);
}

.cpvfaq2__answer {
	padding: 0 64px 32px 0;
}

/* Smoothly slide the whole panel open/closed by animating the native
 * ::details-content box height (not just the text). The content fades
 * and lifts slightly as it expands for a soft, natural reveal. */
.cpvfaq2__item::details-content {
	height: 0;
	overflow: clip;
	opacity: 0;
	transform: translateY(6px);
	transition:
		height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.4s ease,
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		content-visibility 0.5s allow-discrete;
}

.cpvfaq2__item[open]::details-content {
	height: auto;
	opacity: 1;
	transform: none;
}

.cpvfaq2__answer p {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16.5px;
	line-height: 1.7;
	letter-spacing: -0.16px;
	color: var(--color-sand-700, #3c3a30);
	margin: 0;
	max-width: 58ch;
}


@media (prefers-reduced-motion: reduce) {
	.cpvfaq2__item::details-content,
	.cpvfaq2__icon::before,
	.cpvfaq2__icon::after,
	.cpvfaq2__question {
		transition: none;
	}
	.cpvfaq2__item::details-content { transform: none; }
}


/* ─── Responsive ───────────────────────────────────────────────── */

@media (max-width: 980px) {
	.cpv-faq.cpvfaq2 { padding: 80px 24px 88px; }
	.cpvfaq2__inner {
		grid-template-columns: 1fr;
		gap: 44px;
	}
	.cpvfaq2__aside { position: static; }
	.cpvfaq2__question { font-size: 19px; padding: 26px 0; gap: 28px; }
	.cpvfaq2__answer { padding-right: 32px; }
}

@media (max-width: 640px) {
	.cpv-faq.cpvfaq2 { padding: 56px 16px 64px; }
	.cpvfaq2__question { font-size: 17px; padding: 22px 0; line-height: 1.35; gap: 20px; }
	.cpvfaq2__answer { padding-right: 0; }
	.cpvfaq2__answer p { font-size: 15.5px; }
}