/*
 * core/details — the accordion.
 *
 * Loaded only on pages that contain a details block. Everything expressible as
 * a preset (border, colours, padding, typography) lives in theme.json under
 * styles.blocks.core/details; what is left here is the summary's flex layout,
 * the chevron, and the spacing between the content blocks inside.
 *
 * The rules target core's own class, not a theme class: an imported accordion
 * and one the editor adds from the inserter are the same block, and both should
 * look the same. Before this, a newly added accordion rendered as the browser's
 * bare triangle in the middle of an otherwise finished page.
 */

/* Two rem of gap between items rather than core's 1.5rem block gap. Across
 * twenty questions the difference is nearly 200px. */
.wp-block-details + .wp-block-details {
	margin-block-start: 1rem;
}

.wp-block-details > summary {
	display: flex;

	/* border-box is required: with content-box the padding makes the summary
	   wider than the details element, and overflow: hidden then clips the
	   chevron on the right edge. */
	box-sizing: border-box;
	inline-size: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.5rem;
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--large );

	/* The prose line height set on the block in theme.json is for the content;
	   the summary is a bar, not a paragraph, and keeps the body's 1.6. */
	line-height: 1.6;
	font-weight: 700;
	text-align: left;
	list-style: none;
	cursor: pointer;
	transition: background-color 200ms ease-out;
}

.wp-block-details > summary:hover {
	background-color: color-mix( in srgb, var( --wp--preset--color--primary-dark ) 90%, transparent );
}

/* The focus ring goes inside the bar, and it is the accent green.
 *
 * theme.json clips this block with overflow: hidden so the full width summary
 * bar stops at the border. That clipping also cut the ring, which sits 4px
 * outside the summary: a focused summary showed as two short vertical marks at
 * the edges of the bar and nothing along the top or bottom.
 *
 * Only the part that escaped the bar was ever visible, which hid the second
 * half of the problem: the default ring is brand green, and the bar is brand
 * green too, so inside the bar it is 1.00:1. The accent gives 7.30:1 there. */
.wp-block-details > summary:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: -2px;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary::marker {
	content: '';
}

/* The chevron matches the source SVG: 1.25rem, rotating 180 degrees when open.
   A background image rather than a mask, because the SVG carries no width or
   height attributes and a mask without mask-size renders nothing. */
.wp-block-details > summary::after {
	content: '';
	display: block;
	flex-shrink: 0;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 200ms ease-out;
}

.wp-block-details[open] > summary::after {
	transform: rotate(180deg);
}

/* The content area. Padding is horizontal here and vertical on the first and
   last block, so an item with one paragraph and one with three both sit
   1.5rem inside the border. */
.wp-block-details > *:not(summary) {
	margin-block: 0;
	padding-inline: 1.5rem;
}

.wp-block-details > summary + *:not(summary) {
	padding-block-start: 1.5rem;
}

.wp-block-details > *:not(summary):last-child {
	padding-block-end: 1.5rem;
}

.wp-block-details > *:not(summary) + *:not(summary) {
	margin-block-start: 1.25em;
}

/* Lists follow the prose rules: disc/decimal, indented 1.625em on top of the
   content padding, half-em between items. */
.wp-block-details > ul,
.wp-block-details > ol {
	padding-inline-start: calc( 1.5rem + 1.625em );
}

.wp-block-details > ul {
	list-style-type: disc;
}

.wp-block-details > ol {
	list-style-type: decimal;
}

.wp-block-details li {
	margin-block: 0.5em;
}