/**
 * FAQs (blocks/faq): Figma 171:526. Full-width bordered cards, every other one on a
 * faint lavender tint; display-font question, answer below, "+" on the right.
 *
 * Figma draws every card open (160 tall): question 28 in from the edge, answer 20 below
 * it and 56 under the answer, the "+" 70 in from the right and centred on the text.
 */

.kc-faq {
	--kc-faq-border: color-mix( in srgb, var( --kc-dark-purple ) 17%, var( --kc-white ) ); /* Figma #dbdbe5 */
	--kc-faq-tint: color-mix( in srgb, var( --kc-lavender ) 6%, var( --kc-white ) ); /* Figma #f9f9ff */
	--kc-faq-pad: 1.6875rem;
	--kc-faq-pad-open: 3.4375rem;

	padding-block: clamp( 3.5rem, 10.9vw, 9.8125rem ) clamp( 3.5rem, 6.95vw, 6.25rem );
}

/* 1280 wide on the 80px gutters, like the CTA and party rows (Figma x 80). */
.kc-faq.has-global-padding {
	padding-inline: min( var( --kc-gutter-wide ), var( --kc-gutter ) );
}

/* Wave edges (theme.css): a top wave on the next section rises into this one, and a
   bottom wave on the previous one hangs into it, so make room for the wave. */
.kc-faq:not( .kc-wave-bottom ):has( + .kc-wave-top ) {
	padding-bottom: calc( clamp( 3.5rem, 6.95vw, 6.25rem ) + var( --kc-wave-h ) );
}

.kc-wave-bottom + .kc-faq {
	padding-top: calc( clamp( 3.5rem, 10.9vw, 9.8125rem ) + var( --kc-wave-h ) );
}

.kc-faq .kc-faq__heading {
	margin-block: 0;
	font-size: clamp( 2rem, 3.334vw, 3rem );
	line-height: 1;
}

.kc-faq .kc-faq__intro {
	margin: 0.75rem 0 0;
	font-size: clamp( 1rem, 1.25vw, 1.125rem );
	line-height: 1.556;
}

.kc-faq .kc-faq__list {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 1.375rem;
	margin-top: clamp( 2.5rem, 4.93vw, 4.4375rem );
}

.kc-faq__item {
	position: relative;
	overflow-wrap: anywhere;
	border: 1px solid var( --kc-faq-border );
	border-radius: var( --kc-radius-card );
	background: var( --kc-white );
}

.kc-faq__item:nth-child( even ) {
	background: var( --kc-faq-tint );
}

/* Right padding keeps a long question clear of the "+". */
.kc-faq__question {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding: var( --kc-faq-pad ) 6.25rem var( --kc-faq-pad ) var( --kc-faq-pad );
	border-radius: var( --kc-radius-card );
	color: var( --kc-dark-purple );
	font-family: var( --kc-font-display );
	font-size: clamp( 1.25rem, 1.53vw, 1.375rem );
	font-weight: 700;
	line-height: 1.364;
	list-style: none;
	cursor: pointer;
	transition: color 0.2s ease;
}

.kc-faq__question::-webkit-details-marker {
	display: none;
}

.kc-faq__question:hover {
	color: var( --kc-pink );
}

/* Dark ring like the buttons: the pink focus token is under 3:1 on the white card. */
.kc-faq__question:focus-visible {
	outline-color: var( --kc-dark-purple );
	outline-offset: -2px;
}

/* A "+" drawn in CSS, centred on the question (Figma centres it on the whole open card,
   but then it sits beside a long answer and jumps when the card closes); its vertical
   bar folds away when the question is open. */
.kc-faq__icon {
	position: absolute;
	top: var( --kc-faq-pad );
	bottom: var( --kc-faq-pad );
	right: 3.875rem;
	width: 0.875rem;
	height: 0.875rem;
	margin-block: auto;
	color: var( --kc-purple );
}

.kc-faq__item[open] .kc-faq__icon {
	bottom: 1.25rem;
}

.kc-faq__icon::before,
.kc-faq__icon::after {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 0.25rem;
	margin-top: -0.125rem;
	border-radius: 0.125rem;
	background: currentColor;
	content: "";
	transition: transform 0.2s ease;
}

.kc-faq__icon::after {
	transform: rotate( 90deg );
}

.kc-faq__item[open] .kc-faq__icon::after {
	transform: rotate( 0deg );
}

.kc-faq__item[open] .kc-faq__question {
	padding-bottom: 1.25rem;
}

.kc-faq__answer {
	padding: 0 6.25rem var( --kc-faq-pad-open ) var( --kc-faq-pad );
	color: var( --kc-black );
	font-size: 1rem;
	line-height: 1.625;
}

.kc-faq__answer p {
	margin: 0;
}

.kc-faq__answer p + p {
	margin-top: 0.75rem;
}

.kc-faq__answer a {
	color: var( --kc-dark-purple );
	text-decoration: underline;
}

.kc-faq__answer a:hover {
	color: var( --kc-pink );
}

@media ( prefers-reduced-motion: reduce ) {
	.kc-faq__question,
	.kc-faq__icon::before,
	.kc-faq__icon::after {
		transition: none;
	}
}

@media ( max-width: 781px ) {
	.kc-faq {
		--kc-faq-pad: 1.25rem;
		--kc-faq-pad-open: 1.5rem;
	}

	.kc-faq .kc-faq__list {
		gap: 0.75rem;
	}

	.kc-faq__question {
		padding-right: 3.5rem;
	}

	/* On the question's first line, open or closed, so it never sits beside the answer. */
	.kc-faq__icon,
	.kc-faq__item[open] .kc-faq__icon {
		top: calc( var( --kc-faq-pad ) + 0.682em - 0.4375rem );
		right: var( --kc-faq-pad );
		bottom: auto;
		margin-block: 0;
	}

	.kc-faq__answer {
		padding-right: var( --kc-faq-pad );
	}
}