/*
 * Generation 22 — сторінка FAQ (/faq/), page-specific skin.
 * Підключається автоматично functions.php (assets/css/pages/{slug}.css),
 * поверх home-henna.css + home-studio.css + inner-henna.css (не редагуються
 * тут — тільки .g22-faq / .g22-faq-item лишаються поза їхнім охопленням).
 *
 * Розмітка (не змінюється — контент керується з адмінки):
 *   <div class="g22-faq">
 *     <details class="g22-faq-item">
 *       <summary class="g22-faq-item__question">…</summary>
 *       <div class="g22-faq-item__answer">…</div>
 *     </details>
 *     …
 *   </div>
 *
 * Токени --g22h-* (purple/yellow/ink/bg) успадковані з :root у
 * home-henna.css. Motion-токени (--g22f-*) оголошені локально нижче —
 * FAQ не лежить всередині .g22-henna--clean, тому homepage-скоуплені
 * --g22-t-med / --g22-spring там недоступні.
 */

.g22-faq {
	--g22f-dur-fast: 100ms;
	--g22f-dur-answer: 220ms;
	--g22f-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--g22f-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--g22f-rise: 14px;

	display: grid;
	gap: 10px;
	max-width: 780px;
	margin: 0 auto;
	padding: clamp(24px, 4vw, 40px) 0 clamp(56px, 8vw, 96px);
	counter-reset: g22-faq-index;
}

/* -------------------------------------------------- */
/* Intro — shared editorial hero in inner-henna.css     */
/* (.g22-page-content > .g22-page-section:first-child).  */
/* Keep left-align pins only.                           */
/* -------------------------------------------------- */

body.page-faq .g22-page-kicker,
body.page-faq .g22-page-title,
body.page-faq .g22-page-summary {
	text-align: left;
}

body.page-faq .g22-page-title,
body.page-faq .g22-page-summary {
	margin-left: 0;
	margin-right: 0;
}

/* Henna-жест — зірочка-іскра поруч із H1 */
body.page-faq .g22-page-title {
	position: relative;
}

body.page-faq .g22-page-title::after {
	content: "";
	position: absolute;
	top: -4px;
	right: -2px;
	width: 28px;
	height: 28px;
	background-color: #ffd141;
	-webkit-mask-image: url("../../images/brand/doodles/star-spark.svg");
	mask-image: url("../../images/brand/doodles/star-spark.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	pointer-events: none;
}

@media (max-width: 480px) {
	body.page-faq .g22-page-title::after {
		top: -2px;
		right: 0;
		width: 22px;
		height: 22px;
	}
}

/* -------------------------------------------------- */
/* Reveal insurance — pure CSS, no JS dependency.       */
/* @starting-style degrades to the final (visible)      */
/* state in unsupported browsers, so the accordion can  */
/* never get stuck invisible the way a scroll-observer   */
/* driven reveal could. Reduced-motion below removes the */
/* transition entirely (static, always visible).         */
/* -------------------------------------------------- */

.g22-faq-item {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--g22f-dur-answer) var(--g22f-ease),
		transform var(--g22f-dur-answer) var(--g22f-ease),
		background-color var(--g22f-dur-fast) var(--g22f-ease),
		border-color var(--g22f-dur-fast) var(--g22f-ease);
}

@supports (transition-behavior: allow-discrete) {
	@media (prefers-reduced-motion: no-preference) {
		.g22-faq-item {
			transition:
				opacity var(--g22f-dur-answer) var(--g22f-ease),
				transform var(--g22f-dur-answer) var(--g22f-ease),
				background-color var(--g22f-dur-fast) var(--g22f-ease),
				border-color var(--g22f-dur-fast) var(--g22f-ease);
		}

		@starting-style {
			.g22-faq-item {
				opacity: 0;
				transform: translateY(var(--g22f-rise));
			}
		}
	}
}

/* -------------------------------------------------- */
/* Question card                                        */
/* -------------------------------------------------- */

.g22-faq-item {
	background: #f4f4f2;
	border: 1px solid transparent;
	border-left: 4px solid transparent;
	border-radius: 18px;
	overflow: hidden;
}

.g22-faq-item:hover {
	background: #ecece9;
}

.g22-faq-item[open] {
	background: #fff;
	border-left-color: var(--g22h-purple);
	box-shadow: 0 1px 2px rgba(26, 26, 26, 0.06);
}

.g22-faq-item[open]:hover {
	background: #fff;
}

.g22-faq-item {
	counter-increment: g22-faq-index;
}

.g22-faq-item__question {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 48px;
	padding: 18px 20px 18px clamp(64px, 8vw, 92px);
	font-family: var(--g22h-font);
	font-weight: 600;
	font-size: clamp(0.95rem, 1.4vw, 1.05rem);
	line-height: 1.4;
	color: var(--g22h-ink);
	cursor: pointer;
	list-style: none;
	touch-action: manipulation;
	transition: color var(--g22f-dur-fast) var(--g22f-ease);
}

/* Henna-жест — "editorial index". Всі .g22-faq-item — рівнозначні
   однотипні сиблінги (details), тому CSS-лічильник надійний: нема
   змішаних типів блоків, які могли б збити нумерацію. Число сидить
   у лівому "полі" питання — ::before виходить із flex-потоку
   (position:absolute), тож не заважає розкладці тексту/іконки "+". */
.g22-faq-item__question::before {
	content: counter(g22-faq-index, decimal-leading-zero);
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-family: "Manrope", var(--g22h-font);
	font-weight: 800;
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	color: var(--g22h-ink);
	opacity: 0.15;
	pointer-events: none;
}

.g22-faq-item__question::-webkit-details-marker,
.g22-faq-item__question::marker {
	display: none;
	content: "";
}

.g22-faq-item[open] .g22-faq-item__question {
	color: var(--g22h-purple);
}

.g22-faq-item__question:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--g22h-purple);
	border-radius: 14px;
}

/* Custom "+" indicator — two bars, rotates to a cross when open. Same
   200ms spring easing as the CTA "+" badge on the homepage (home-studio.css
   .g22-cta__slice-label, --g22-t-med / --g22-spring), reproduced locally. */
.g22-faq-item__question::after {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background:
		linear-gradient(var(--g22h-purple), var(--g22h-purple)) center / 14px 2px no-repeat,
		linear-gradient(var(--g22h-purple), var(--g22h-purple)) center / 2px 14px no-repeat;
	transition: transform var(--g22f-dur-fast) var(--g22f-spring);
}

.g22-faq-item[open] .g22-faq-item__question::after {
	transform: rotate(45deg);
}

/* -------------------------------------------------- */
/* Answer expand/collapse                               */
/* ::details-content is Baseline in current evergreen    */
/* browsers (Chrome/Edge/Firefox/Safari) — smooth height  */
/* animation with no JS. Browsers without support simply  */
/* snap open natively (still instant, never "slow"),      */
/* which is exactly what the ТЗ правка asked to fix.       */
/* -------------------------------------------------- */

.g22-faq-item {
	interpolate-size: allow-keywords;
}

.g22-faq-item::details-content {
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition:
		height var(--g22f-dur-answer) var(--g22f-ease),
		content-visibility var(--g22f-dur-answer) allow-discrete,
		opacity var(--g22f-dur-answer) var(--g22f-ease);
}

.g22-faq-item[open]::details-content {
	height: auto;
	opacity: 1;
}

.g22-faq-item__answer {
	padding: 0 20px 20px 20px;
	max-width: 62ch;
	font-family: var(--g22h-font);
	font-size: 0.975rem;
	line-height: 1.65;
	color: var(--g22h-ink-70);
}

@media (prefers-reduced-motion: reduce) {
	.g22-faq-item,
	.g22-faq-item__question::after,
	.g22-faq-item::details-content {
		transition: none !important;
		animation: none !important;
	}

	.g22-faq-item {
		opacity: 1 !important;
		transform: none !important;
	}
}

@media (max-width: 480px) {
	.g22-faq {
		gap: 8px;
		padding-top: 16px;
	}

	.g22-faq-item__question {
		padding: 16px 16px 16px 52px;
		font-size: 0.95rem;
	}

	.g22-faq-item__question::before {
		left: 14px;
		font-size: 1.15rem;
		opacity: 0.18;
	}

	.g22-faq-item__answer {
		padding: 0 16px 18px 16px;
		font-size: 0.925rem;
	}
}