/**
 * pchs/faq-accordion
 *
 * The whole component is <details>/<summary>; nothing here is required for it
 * to open and close. The chevron is the shared .pchs-chevron mask (app.css).
 */

/*
 * The block renders no inner wrapper, so the block root is the container. Every
 * sibling section lands its content on the same 1200px measure; without this
 * the accordion ran to the viewport edge while its own heading sat centred over
 * the container width.
 */
.pchs-faq-accordion {
	--pchs-pad-x: var(--wp--preset--spacing--50);

	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--custom--section--y) var(--pchs-pad-x);
	box-sizing: border-box;
}

/*
 * Surface: a surface section ground, for a page where the FAQ would otherwise
 * sit white on white against its neighbour. The items keep their white tiles.
 * The root is capped at the wide size, so the ground is painted out to the
 * viewport edges with a spread shadow, clipped to the block's own height.
 */
.pchs-faq-accordion--surface {
	background: var(--wp--preset--color--surface);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--surface);
	clip-path: inset( 0 -100vmax );
}

@media (min-width: 48em) {
	.pchs-faq-accordion {
		--pchs-pad-x: var(--wp--preset--spacing--70);
	}
}

/*
 * Section headings are sized by role, not by tag: the heading level is an
 * author choice per block, so an h3 section title must still read as a
 * section title.
 *
 * Left, not centred: the grid underneath it is left-aligned, and a section
 * header that does not share an edge with its own content reads as unrelated.
 */
.pchs-faq-accordion__heading {
	margin: 0 0 var(--wp--preset--spacing--50);
	text-align: start;
	text-wrap: balance;
}

.pchs-faq-accordion__grid {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	/*
	 * Cards in a row share one height, open or closed (client, 2026-09-30:
	 * "make the containers the same size when they drop down"). This used to be
	 * align-items: start, so an open card grew alone and left a short card and a
	 * gap beside it, and closed cards were ragged wherever a question wrapped.
	 * Stretch (the grid default) is the whole fix: the neighbour grows with the
	 * row while view.js animates the open panel, its question stays at the top,
	 * and with one column on a phone there is no neighbour to match.
	 */
	align-items: stretch;
}

@media (min-width: 48em) {

	.pchs-faq-accordion__grid[data-columns="2"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pchs-faq-accordion__grid[data-columns="3"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.pchs-faq-accordion__item {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
}

/*
 * A closed card stretched to its open neighbour's height used to leave its
 * question stuck at the top over an empty card (owner, 2026-09-30). Closed,
 * the card is a column and the question row fills it, so the question sits in
 * the middle. Open, the card is its normal block and the question stays at the
 * top above its answer.
 */
.pchs-faq-accordion__item:not([open]) {
	display: flex;
	flex-direction: column;
}

.pchs-faq-accordion__item:not([open]) > .pchs-faq-accordion__question {
	flex: 1 0 auto;
}

/* The question text is the .pchs-card-title role. The chevron is centred on
   it, open or closed, so it sits in the same place relative to the question
   in both states. */
.pchs-faq-accordion__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	cursor: pointer;
	/* Suppress the UA triangle in every engine. */
	list-style: none;
}

.pchs-faq-accordion__question::-webkit-details-marker {
	display: none;
}

.pchs-faq-accordion__question::marker {
	content: "";
}

/*
 * <summary> is display:flex here, so the hit area is already the whole row —
 * padding included, chevron included, the dead space between the two included.
 * Measured 373x56 at 1440px and 358x77 at 390px. Nothing to fix; noted so the
 * next person does not go looking.
 */

.pchs-faq-accordion__question:hover {
	background: var(--wp--preset--color--surface);
}

/*
 * The one place on the site where the ring reads inward instead of outward.
 * These rows fill a bordered card edge to edge, and an outset ring on the
 * first or last row is clipped by the card's own border-radius. Same two
 * tones, same widths, drawn inside the row.
 */
.pchs-faq-accordion__question:focus-visible {
	outline: var(--pchs-focus-width) solid var(--pchs-focus-color);
	outline-offset: calc( -1 * ( var(--pchs-focus-width) + var(--pchs-focus-gap) ) );
	box-shadow: inset 0 0 0 var(--pchs-focus-gap) var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--sm);
}

/* The shared .pchs-chevron (app.css) turns itself over when the item opens;
   it paints in currentColor. */
.pchs-faq-accordion__marker {
	flex-shrink: 0;
	color: var(--wp--preset--color--green);
}

/* The answer panel is the element view.js animates, so it clips its own
   overflow whether or not the script ran. */
.pchs-faq-accordion__answer {
	overflow: hidden;
}

.pchs-faq-accordion__answer-inner {
	padding: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
}

.pchs-faq-accordion__answer-inner > :first-child {
	margin-top: 0;
}

.pchs-faq-accordion__answer-inner > :last-child {
	margin-bottom: 0;
}

/*
 * The panel height itself is animated by view.js (Element.animate, at
 * --pchs-duration-slow), which is the only way to animate a <details> open.
 * The chevron turns at --pchs-duration, a shade quicker, so the arrow has
 * finished turning by the time the answer finishes arriving.
 */
@media ( prefers-reduced-motion: no-preference ) {
	.pchs-faq-accordion__question {
		transition: background-color var(--pchs-duration-fast) var(--pchs-ease);
	}
}