/* FAQ — Figma "FAQ". Tokens only; buttons come from the shared buttons.css. Mobile-first. */

.ppc-faq {
	background: var(--ppc-color-surface-light);
	padding-block: var(--ppc-section-pad-y);
	padding-inline: var(--ppc-section-inset-x);
}

.ppc-faq__container {
	display: flex;
	flex-direction: column;
	gap: 5rem;
	max-width: var(--ppc-container-width);
	margin-inline: auto;
}

/* Intro */
.ppc-faq__intro {
	max-width: var(--ppc-measure);
	margin-inline: auto;
	text-align: center;
}

.ppc-faq__eyebrow {
	margin: 0;
	font-family: var(--ppc-font-open-sans);
	font-weight: var(--ppc-font-weight-semibold);
	font-size: var(--ppc-font-size-tagline);
	line-height: var(--ppc-line-height-tagline);
	color: var(--ppc-color-picton-blue-dark);
}

.ppc-faq__title {
	margin: 0;
	font-family: var(--ppc-font-heading);
	font-weight: var(--ppc-font-weight-bold);
	font-size: var(--ppc-font-size-h2);
	line-height: var(--ppc-line-height-heading);
	letter-spacing: var(--ppc-letter-spacing-heading);
	color: var(--ppc-color-blue-zodiac);
}

.ppc-faq__text {
	margin: 1.5rem 0 0;
	font-family: var(--ppc-font-open-sans);
	font-size: var(--ppc-font-size-lead);
	line-height: var(--ppc-line-height-body);
	color: var(--ppc-color-neutral-darker);
}

/* List */
.ppc-faq__list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 50rem;
	margin-inline: auto;
	width: 100%;
}

.ppc-faq__item {
	background: var(--ppc-color-picton-blue-lightest);
	border-radius: var(--ppc-radius-medium);
}

.ppc-faq__question {
	margin: 0;
	font: inherit;
}

.ppc-faq__toggle {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
	padding: 1.25rem 1.5rem;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--ppc-font-open-sans);
	font-weight: var(--ppc-font-weight-bold);
	font-size: var(--ppc-font-size-lead);
	line-height: var(--ppc-line-height-body);
	color: var(--ppc-color-neutral-darker);
}

.ppc-faq__toggle:focus-visible {
	outline: 2px solid var(--ppc-color-picton-blue-dark);
	outline-offset: 2px;
}

.ppc-faq__question-text {
	flex: 1 1 auto;
}

.ppc-faq__icon {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.ppc-faq__item.is-open .ppc-faq__icon {
	transform: rotate(45deg);
}

/* Panel: JS sets an explicit pixel height to animate open/close (script.js). The 0fr/1fr
   grid trick is not used: transitioning fr tracks resolves the open endpoint against the old
   zero free space in Chromium, so the panel never expands. */
.ppc-faq__panel {
	height: 0;
	overflow: hidden;
	visibility: hidden;
	/* visibility is flipped (delayed until the height animation ends), never tweened: a running
	   visibility transition overrides all author styles and can wedge the panel shut. */
	transition: height 0.25s ease, visibility 0s linear 0.25s;
}

.ppc-faq__item.is-open .ppc-faq__panel {
	visibility: visible;
	transition: height 0.25s ease, visibility 0s;
}

/* No vertical padding here: the answer is the 0fr grid child, and a box can never be shorter
   than its own padding, which would keep the closed panel 24px tall. The bottom gap comes from
   the ::after spacer, which clips away cleanly when closed. */
.ppc-faq__answer {
	padding: 0 1.5rem;
	font-family: var(--ppc-font-open-sans);
	font-size: var(--ppc-font-size-body);
	line-height: var(--ppc-line-height-body);
	color: var(--ppc-color-neutral-darker);
}

.ppc-faq__answer::after {
	content: "";
	display: block;
	height: 1.5rem;
}

.ppc-faq__answer > :first-child {
	margin-top: 0;
}

.ppc-faq__answer > :last-child {
	margin-bottom: 0;
}

/* Outro */
.ppc-faq__outro {
	max-width: 35rem;
	margin-inline: auto;
	text-align: center;
}

.ppc-faq__outro-title {
	margin: 0;
	font-family: var(--ppc-font-heading);
	font-weight: var(--ppc-font-weight-bold);
	font-size: var(--ppc-font-size-h4);
	line-height: 1.4;
	letter-spacing: var(--ppc-letter-spacing-heading);
	color: var(--ppc-color-picton-blue-darker);
}

.ppc-faq__outro-text {
	margin: 1rem 0 0;
	font-family: var(--ppc-font-open-sans);
	font-size: var(--ppc-font-size-lead);
	line-height: var(--ppc-line-height-body);
	color: var(--ppc-color-neutral-darker);
}

.ppc-faq__outro-actions {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.ppc-faq__icon,
	.ppc-faq__panel {
		transition: none;
	}
}