/* ────────────────────────────────────────────────────────────
   03-accordion-section.css — Accordion Section (FAQ)
   Class chain: core/group outer (bg via Style panel, alignfull)
                → gb element .accordion-section
   ──────────────────────────────────────────────────────────── */

/* ── Section wrapper ──────────────────────────────────────── */
/*being front-end specific because .accordion-section is used in editing interface */
.accordion-section.gb-element {
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding: var(--spacing-4xl) var(--spacing-5xl);
}

/* ── Heading ──────────────────────────────────────────────── */
/* GB text h2 — lacks .wp-block-heading so global dark inversion won't apply */
.accordion-section.gb-element h2 {
	text-align: center;
	margin-bottom: var(--spacing-sm);
}

/* ── Intro paragraph ──────────────────────────────────────── */
.accordion-section.gb-element > p {
	max-width: var(--content-max-prose);
	margin-inline: auto;
	font-size: var(--text-heading-sm);
	margin-bottom: 0;
}

/* ── Accordion block ──────────────────────────────────────── */
.accordion-section.gb-element .wp-block-accordion {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-block: 0;
	padding: 0 var(--spacing-xl);
	margin-top: var(--spacing-xl);
}

/* ── Accordion item ───────────────────────────────────────── */
.accordion-section.gb-element .wp-block-accordion-item {
	background-color: var(--color-white);
	border-bottom: 1px solid var(--color-gray-stroke);
	margin-block-start: 0;
}

/* Reset h3 heading wrapper — button handles all typography */
.accordion-section.gb-element .wp-block-accordion-heading {
	margin: 0;
	font-size: var(--text-heading-xl);
}

/* ── Toggle button ────────────────────────────────────────── */
.accordion-section.gb-element .wp-block-accordion-heading__toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	background: none;
	border: none;
	padding: var(--spacing-md) var(--spacing-sm);
	cursor: pointer;
	text-align: left;
	gap: var(--spacing-md);
	font-family: var(--font-primary);
	font-size: var(--text-heading-sm);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-heading);
	line-height: var(--line-height-snug);
}

/* ── Toggle icon ──────────────────────────────────────────── */
.accordion-section.gb-element .wp-block-accordion-heading__toggle-icon {
	font-family: var(--font-body);
	font-size: var(--text-heading-md);
	font-weight: var(--font-weight-regular);
	color: var(--color-blue-primary);
	flex-shrink: 0;
	line-height: 1;
}

/* ── Panel ────────────────────────────────────────────────── */
/* Padding lives on the <p>, not the panel itself — the panel gets
   hidden via the native `hidden` attribute (content-visibility: hidden),
   which zeroes out its children's rendered size but NOT the panel's own
   padding. Padding on the panel directly leaves a visible gap below every
   closed accordion item. Same bug and fix as habitat-arch's
   03-accordion-section.css (2026-08-22). */
.accordion-section.gb-element .wp-block-accordion-panel {
	margin-block-start: 0;
}

.accordion-section.gb-element .wp-block-accordion-panel p {
	margin-block-start: 0;
	margin-block-end: 0;
	padding: 0 var(--spacing-sm) var(--spacing-lg);
	line-height: var(--line-height-normal);
}

/* ── Dark-bg Medium-bg overrides ────────────────────────────────────── */
.is-style-bg-dark .accordion-section.gb-element .wp-block-accordion,
.is-style-bg-medium .accordion-section.gb-element .wp-block-accordion {
	gap: 3;
}

/* ── Dark-bg overrides ────────────────────────────────────── */
/* h2 is GB text — no .wp-block-heading, not caught by global inversion */
.is-style-bg-dark .accordion-section.gb-element h2 {
	color: var(--color-text-body-inverse);
}

/* Panel p is white via global .is-style-bg-dark p rule —
   re-override to dark since panel sits on a white card bg */
.is-style-bg-dark .accordion-section.gb-element .wp-block-accordion-panel p {
	color: var(--color-text-body);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
	.accordion-section.gb-element {
		padding: var(--spacing-xl) var(--spacing-sm);
	}
}

@media (max-width: 768px) {
	.accordion-section.gb-element .wp-block-accordion {
		padding: 0 var(--spacing-sm);
	}

	.accordion-section.gb-element .wp-block-accordion-heading__toggle {
		padding: var(--spacing-sm) var(--spacing-md);
	}

	.accordion-section.gb-element .wp-block-accordion-panel p {
		padding: 0 var(--spacing-md) var(--spacing-sm);
	}
}