/**
 * core/accordion block skin — matches the native-<details> LFBC accordion
 * pattern (assets/css/patterns/accordion.css) visually, applied to WordPress
 * core's Interactivity-API accordion (.wp-block-accordion / -item / -heading /
 * -panel).
 *
 * Differences from the pattern that drove this file:
 *   - The marker is core's real `.wp-block-accordion-heading__toggle-icon`
 *     span (containing a literal "+"), not a summary::before. We hide the "+"
 *     and skin the span as the same 28×28 white pill + poppy chevron, then
 *     override core's 45° open rotation (style.css ships rotate(45deg)) with a
 *     180° chevron flip.
 *   - Open/close visibility is core's own `.wp-block-accordion-panel[inert]
 *     { display:none }` — we don't touch it.
 *   - The heading is an <h3>, so typography.css's `h3` display size leaks into
 *     core's `font-size: inherit` toggle button; we reset it back to the
 *     pattern's 18px/600.
 *
 * Enqueued frontend + editor in functions.php (handle: lfbc-core-accordion).
 */

/* Stack: flex column with a 12px gap, centered, fills its content container. */
.wp-block-accordion {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-inline: auto;
}

/* The flex gap owns vertical rhythm — drop core flow-layout block margins. */
.wp-block-accordion > * {
	margin-block: 0;
}

/* Item: oatmeal card, rounded 8px. */
.wp-block-accordion-item {
	background-color: var(--wp--preset--color--oatmeal-500);
	border-radius: 8px;
	padding: 20px;
	border: 0;
}

/* Open state: extra room on the bottom-right (per Figma / pattern). */
.wp-block-accordion-item.is-open {
	padding-right: 40px;
	padding-bottom: 40px;
}

/* Hover only on closed items — open cards keep their oatmeal fill. */
.wp-block-accordion-item:not(.is-open):hover {
	background-color: #ede9e0;
}

/* Heading row + toggle button: chevron pill + title, 18px/600 soft-black.
 * The button inherits font from the <h3>, so reset both. */
.wp-block-accordion-heading,
.wp-block-accordion-heading .wp-block-accordion-heading__toggle {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--soft-black-500);
}

/* Make the heading itself a flex box so its single child (the toggle button)
 * fills it — otherwise the <h3>'s line-box strut leaves empty space above the
 * block-level button and the button drops to the bottom. */
.wp-block-accordion-heading {
	display: flex;
}

.wp-block-accordion-heading .wp-block-accordion-heading__toggle {
	align-items: center;
	gap: 20px;
	padding: 0;
	text-align: left;
}

/* Pattern summary has no hover underline — kill core's. */
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

/* Chevron marker: white pill (28×28) with a centered poppy chevron-down SVG.
 * SVG is inlined so the icon color stays in CSS — no asset file to manage.
 * `font-size: 0` + transparent color hide core's literal "+" glyph. */
.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23e8506f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 8 10 12.5 14 8'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	font-size: 0;
	color: transparent;
	transition: transform 0.2s ease;
}

/* Override core's rotate(45deg) open state with the pattern's 180° flip. */
.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	transform: rotate(180deg);
}

/* Panel: indent 28px so body text sits under the title (mirrors the pattern's
 * padding-inline-start: 28px), 20px below the heading. */
.wp-block-accordion-panel {
	padding-inline-start: 28px;
	margin-top: 20px;
}

/* 20px between body blocks; flatten their default margins first. */
.wp-block-accordion-panel > * {
	margin-block: 0;
}

.wp-block-accordion-panel > * + * {
	margin-top: 20px;
}

/* Body typography — 16px soft-black-400 for paragraphs and list items. */
.wp-block-accordion-panel p,
.wp-block-accordion-panel li {
	font-size: 16px;
	line-height: 1.5;
	color: var(--wp--preset--color--soft-black-400);
}

/* Sub-headings inside the panel (e.g. "Grant Cycle", "Open To"). */
.wp-block-accordion-panel h4 {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--soft-black-500);
}

.wp-block-accordion-panel ul {
	margin: 0;
	padding-inline-start: 1.25em;
}

.wp-block-accordion-panel a {
	color: var(--wp--preset--color--poppy-900);
}