/*
 * rekos/faq-accordion (Figma HR 151:3833 desktop, 1008:4888 mobile; list answer 601:3212).
 * Tokens only. Literal values only for breakpoints, 0, percentages, unitless line heights and
 * Figma geometry (the 34 / 24 px toggle circles and their 18 / 12 px icons).
 * Rules that override theme.json element styles (h2, p, links) start with .rk-faq-accordion so
 * they beat the global styles whatever the load order.
 *
 * Desktop ≥1200 (1440 frame): padding 80; left column 525 (heading H36, 24 to the 16/24 text,
 *   40 to the ring CTA, pill 200), 96 gap, right column 675: items 8 apart, white, radius 30
 *   (→ card 32), padding 24; question Open Sans 700 20/28, 24 to a 34 px navy circle with an
 *   18 px add_2 / remove icon; answer 16/24, 16 below the question, in the question's column.
 *   Background white → light blue (90 % tint at 56 %).
 * Mobile ≤767 (375 frame): padding 72 / 16; heading H30, 16 to the 14/20 text, 24 to the
 *   full-width CTA; 48 to the items: radius 12, padding 16, question 16/24 bold, 12 to a 24 px
 *   circle with a 12 px icon; answer 14/20, 12 below.
 * Tablet (derived): 768–1023 one column with the desktop item sizes; 1024–1199 two columns
 *   (525 : 675) with a 40–56 px gap.
 */

.rk-faq-accordion {
	--rk-faq-pad: var(--wp--preset--spacing--40);
	--rk-faq-gap: var(--wp--preset--spacing--30);
	--rk-faq-toggle: 24px;
	--rk-faq-icon: 12px;
	--rk-faq-line: 1.43;
	/* Question type: 16/24 bold on phones, 20/28 from 768 (H 16 bold / H 20 bold). */
	--rk-faq-q-size: var(--wp--preset--font-size--h-6);
	--rk-faq-q-lh: 1.5;
	padding-block: var(--wp--preset--spacing--80);
	/* Figma mobile: white → 60 % tint at 7 % → 90 % tint (≈ surface-2) at the bottom. */
	background: var(--wp--preset--color--base);
	background: linear-gradient(
		180deg,
		var(--wp--preset--color--base) 0%,
		color-mix(in srgb, var(--wp--preset--color--surface-2) 67%, var(--wp--preset--color--base)) 7%,
		var(--wp--preset--color--surface-2) 100%
	);
	color: var(--wp--preset--color--contrast);
}

.rk-faq-accordion__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--40));
	align-items: start;
}

/* ---------- Heading, text, CTA ---------- */

.rk-faq-accordion__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--50);
	min-width: 0;
}

.rk-faq-accordion__intro {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	inline-size: 100%;
}

.rk-faq-accordion .rk-faq-accordion__heading {
	margin: 0;
	overflow-wrap: break-word;
}

.rk-faq-accordion .rk-faq-accordion__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--rk-faq-line);
}

/* Mobile: full width; the ring sits outside the pill, so the pill leaves room for it. */
.rk-faq-accordion__head .rk-faq-accordion__cta {
	inline-size: calc(100% - 2 * (var(--wp--custom--button--ring-gap) + var(--wp--custom--button--ring-width)));
}

/* ---------- Items ---------- */

.rk-faq-accordion__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
}

.rk-faq-accordion__item {
	border-radius: var(--wp--custom--radius--input);
	background: var(--wp--preset--color--base);
}

.rk-faq-accordion__summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--rk-faq-gap);
	padding: var(--rk-faq-pad);
	border-radius: inherit;
	list-style: none;
	cursor: pointer;
}

.rk-faq-accordion__summary::-webkit-details-marker {
	display: none;
}

.rk-faq-accordion__summary::marker {
	content: "";
}

/* Open: the answer follows the question at the inner gap (Figma 16 desktop / 12 mobile). */
.rk-faq-accordion__item[open] > .rk-faq-accordion__summary {
	padding-block-end: var(--rk-faq-gap-open, var(--rk-faq-gap));
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.rk-faq-accordion__question {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--rk-faq-q-size);
	font-weight: 700;
	line-height: var(--rk-faq-q-lh);
	overflow-wrap: break-word;
}

.rk-faq-accordion__toggle {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: var(--rk-faq-toggle);
	block-size: var(--rk-faq-toggle);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
}

.rk-faq-accordion__toggle .rk-icon {
	inline-size: var(--rk-faq-icon);
	block-size: var(--rk-faq-icon);
}

/*
 * Open: the answer starts the open gap below the question text, not below the (taller)
 * circle: Figma 601:3221, one-line question 28 + 16 → answer, circle 34. Closed cards keep
 * the circle's height (82 = 24 + 34 + 24).
 */
.rk-faq-accordion__item[open] .rk-faq-accordion__toggle {
	margin-block-end: min(0px, var(--rk-faq-q-size) * var(--rk-faq-q-lh) - var(--rk-faq-toggle));
}

/* + while closed, − while open. */
.rk-faq-accordion__toggle .rk-faq-accordion__icon--close,
.rk-faq-accordion__item[open] .rk-faq-accordion__icon--open {
	display: none;
}

.rk-faq-accordion__item[open] .rk-faq-accordion__icon--close {
	display: inline-block;
}

/* Hover and keyboard focus (derived states, not drawn in Figma). */
.rk-faq-accordion__summary:hover .rk-faq-accordion__toggle {
	background: var(--wp--preset--color--primary);
}

.rk-faq-accordion__summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}

/* The answer keeps to the question's column: the toggle and its gap stay free on the right. */
.rk-faq-accordion .rk-faq-accordion__answer {
	padding: 0 calc(var(--rk-faq-pad) + var(--rk-faq-toggle) + var(--rk-faq-gap)) var(--rk-faq-pad) var(--rk-faq-pad);
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--rk-faq-line);
}

.rk-faq-accordion .rk-faq-accordion__answer :where(p, ul, ol) {
	margin: 0;
}

/* A blank line in the field = one empty line between blocks (601:3224). */
.rk-faq-accordion .rk-faq-accordion__answer > * + * {
	margin-block-start: calc(var(--rk-faq-line) * 1em);
}

.rk-faq-accordion .rk-faq-accordion__answer ul {
	padding-inline-start: 1.5em;
	list-style: disc;
}

/* A numbered list typed in the WYSIWYG answer (since 2026-10-09). */
.rk-faq-accordion .rk-faq-accordion__answer ol {
	padding-inline-start: 1.5em;
	list-style: decimal;
}

.rk-faq-accordion .rk-faq-accordion__answer li {
	margin: 0;
}

.rk-faq-accordion .rk-faq-accordion__answer a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.rk-faq-accordion .rk-faq-accordion__answer a:hover {
	color: var(--wp--preset--color--primary);
}

/* Smooth open and close where the browser can animate to height:auto; instant elsewhere. */
@supports (interpolate-size: allow-keywords) {
	.rk-faq-accordion__item {
		interpolate-size: allow-keywords;
	}

	.rk-faq-accordion__item::details-content {
		block-size: 0;
		overflow-y: clip;
		transition:
			block-size var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
			content-visibility var(--wp--custom--motion--duration) allow-discrete;
	}

	.rk-faq-accordion__item[open]::details-content {
		block-size: auto;
	}

	@media (prefers-reduced-motion: reduce) {
		.rk-faq-accordion__item::details-content {
			transition: none;
		}
	}
}

/* Separate rule: a selector list with ::details-content would drop the whole rule where it is unknown. */
@media (prefers-reduced-motion: reduce) {
	.rk-faq-accordion__toggle {
		transition: none;
	}
}

@media (forced-colors: active) {
	.rk-faq-accordion__toggle {
		border: 1px solid CanvasText;
	}
}

/* ---------- Editor placeholder ---------- */

.rk-faq-accordion__empty {
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	border: 1px dashed var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

/* ---------- Tablet and desktop ---------- */

@media (min-width: 768px) {
	.rk-faq-accordion {
		--rk-faq-pad: var(--wp--preset--spacing--50);
		--rk-faq-gap: var(--wp--preset--spacing--50);
		--rk-faq-gap-open: var(--wp--preset--spacing--40);
		--rk-faq-toggle: 34px;
		--rk-faq-icon: 18px;
		--rk-faq-line: 1.5;
		--rk-faq-q-size: var(--wp--preset--font-size--lg);
		--rk-faq-q-lh: 1.4;
		/* Figma desktop: white → 90 % tint at 56 %, then flat (≈ surface-2). */
		background: linear-gradient(180deg, var(--wp--preset--color--base) 0%, var(--wp--preset--color--surface-2) 56%);
	}

	.rk-faq-accordion__inner {
		gap: var(--wp--preset--spacing--70);
	}

	.rk-faq-accordion__head {
		gap: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--20));
	}

	.rk-faq-accordion__intro {
		gap: var(--wp--preset--spacing--50);
	}

	/* Pill 200 wide as in Figma (nav button width + 32). */
	.rk-faq-accordion__head .rk-faq-accordion__cta {
		inline-size: auto;
		min-inline-size: calc(var(--wp--custom--button--nav-width) + var(--wp--preset--spacing--60));
	}

	.rk-faq-accordion__item {
		border-radius: var(--wp--custom--radius--card);
	}
}

@media (min-width: 1024px) {
	/* 525 : 675 = the Figma columns in the 1296 content width with the 96 gap. */
	.rk-faq-accordion__inner {
		grid-template-columns: minmax(0, 525fr) minmax(0, 675fr);
		column-gap: var(--wp--preset--spacing--70);
	}

	.rk-faq-accordion--single .rk-faq-accordion__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 1200px) {
	.rk-faq-accordion__inner {
		column-gap: calc(3 * var(--wp--preset--spacing--60));
	}
}