/* @doxallia/design — Details/accordion composition
 * Wraps a <details> element with card styling and a + chevron toggle.
 * Usage:
 *   <details class="details-toggle">
 *     <summary>Question</summary>
 *     <div class="details-toggle__body">Answer</div>
 *   </details>
 */

.details-toggle {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.details-toggle > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--s-4);
	font-weight: var(--fw-medium);
	cursor: pointer;
	user-select: none;
	list-style: none;
	transition: background var(--transition);
}

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

.details-toggle > summary::after {
	content: "+";
	flex-shrink: 0;
	font-size: 1.25rem;
	color: var(--color-text-muted);
	transition: transform var(--transition);
	margin-left: var(--s-3);
}

.details-toggle[open] > summary::after {
	transform: rotate(45deg);
}

.details-toggle > summary:hover {
	background: var(--color-surface-muted);
}

.details-toggle[open] > summary {
	border-bottom: var(--border-width) solid var(--color-border);
}

/* Use .details-toggle__body for new accordion content.
 * Note: existing .faq-item uses .faq-answer instead (portail-specific.css). */
.details-toggle__body {
	padding: var(--s-4);
	color: var(--color-text-subtle);
	line-height: var(--lh-relaxed, 1.7);
}

/* ── .accordion-group ─────────────────────────────────────────────────────── */

.accordion-group {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	margin: var(--s-6) 0;
}

/* ── .details-toggle--lg — large overview variant ─────────────────────────── */

.details-toggle--lg > summary {
	padding: var(--s-5) var(--s-6);
	font-size: var(--text-lg);
	font-weight: var(--fw-semibold);
	justify-content: flex-start;
	gap: var(--s-3);
}

.details-toggle--lg > summary::before {
	content: "▶";
	flex-shrink: 0;
	font-size: 0.7em;
	color: var(--color-text-muted);
	transition: transform var(--transition);
}

.details-toggle--lg[open] > summary::before {
	transform: rotate(90deg);
}

/* Disable the base + sign for the large variant */
.details-toggle--lg > summary::after {
	content: none;
}

.details-toggle--lg .details-toggle__body {
	padding: var(--s-5) var(--s-6);
}