/**
 * Symbiotic Peptides FAQ accordion section.
 */

.sp-faq {
	position: relative;
	background-color: #ffffff;
	padding: clamp( 4rem, 7vw, 6.5rem ) var( --global-content-edge-padding, 1.5rem );
	width: 100%;
}

.sp-faq__inner {
	width: 100%;
	max-width: 860px;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.sp-faq__header {
	text-align: center;
	margin-bottom: clamp( 2.5rem, 5vw, 4rem );
}

.sp-faq__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	margin: 0 0 1rem;
	color: var( --global-palette1, #e8620a );
	font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
}

.sp-faq__dot {
	display: block;
	width: 6px;
	height: 6px;
	flex: 0 0 auto;
	background: var( --global-palette1, #e8620a );
	border-radius: 50%;
}

.sp-faq__title {
	margin: 0;
	color: var( --global-palette3, #000000 );
	font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: clamp( 2.25rem, 4.5vw, 3.5rem );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.12;
}

/* --------------------------------------------------------------------------
   Accordion List
   -------------------------------------------------------------------------- */

.sp-faq__list {
	border-top: 1px solid #ebe7e2;
}

.sp-faq__item {
	border-bottom: 1px solid #ebe7e2;
}

.sp-faq__toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 1.625rem 0;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-align: left;
	cursor: pointer;
	color: var( --global-palette3, #000000 );
	font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: clamp( 1rem, 1.3vw, 1.1875rem );
	font-weight: 700;
	line-height: 1.35;
	transition: color 0.2s ease;
}

.sp-faq__toggle:hover,
.sp-faq__toggle:focus,
.sp-faq__toggle:focus-visible,
.sp-faq__toggle:active {
	background: transparent !important;
	color: var( --global-palette1, #e8620a ) !important;
	box-shadow: none !important;
	outline: none !important;
}

.sp-faq__question {
	flex: 1 1 auto;
}

.sp-faq__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-left: 1.5rem;
	color: var( --global-palette3, #000000 );
	transition: transform 0.25s ease, color 0.2s ease;
}

.sp-faq__icon .sp-icon {
	width: 22px;
	height: 22px;
}

.sp-faq__toggle[aria-expanded="true"] .sp-faq__icon {
	transform: rotate( 45deg );
	color: var( --global-palette1, #e8620a );
}

.sp-faq__content {
	display: block;
}

.sp-faq__content[hidden] {
	display: none;
}

.sp-faq__answer {
	padding-bottom: 1.625rem;
	color: var( --global-palette6, #6b6b6b );
	font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 1rem;
	line-height: 1.65;
}

.sp-faq__answer p {
	margin: 0;
}