/* =============================================================================
   FAQ ACCORDION -- shared native details/summary component.
   Used by: service detail pages, blog posts. Question chrome from live;
   the plus/minus icon replaces Oxygen's expand-collapse icon.
   ============================================================================= */

.faq-singular {
	width: 100%;
}

.faq-singular:not(:last-of-type) {
	margin-bottom: var(--space-l);
}

/* Live relied on Oxygen's toggle flex layout; declared explicitly here. */
.faq-question {
	display:       flex;
	align-items:   center;
	padding:       var(--space-m) 20px;
	width:         100%;
	border-radius: var(--radius-s);
	border:        1px solid var(--color-border-subtle);
	cursor:        pointer;
	list-style:    none;
}

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

.faq-question__icon {
	position:    relative;
	width:       14px;
	height:      14px;
	margin-right: var(--space-m);
	flex-shrink: 0;
}

.faq-question__icon::before,
.faq-question__icon::after {
	content:          '';
	position:         absolute;
	top:              50%;
	left:             0;
	width:            100%;
	height:           2px;
	margin-top:       -1px;
	background-color: var(--color-text-primary);
	transition:       transform var(--duration-fast) ease;
}

.faq-question__icon::after {
	transform: rotate(90deg);
}

.faq-singular[open] .faq-question__icon::after {
	transform: rotate(0deg);
}

.faq-question h3 {
	font-size: var(--text-h5);
	font-weight: var(--weight-bold);
}

.faq-answer {
	padding: var(--space-m) var(--space-l);
}