/*
 * Fibreglaze FAQ accordion.
 *
 * These selectors match the established Service Content presentation so the
 * same shortcode markup renders consistently on Pages, Services, Pool Issues
 * and Projects.
 */

.fibreglaze-faq-accordion {
	width: 100%;
}

.fibreglaze-faq-item {
	border-bottom: 1px solid rgba(32, 48, 61, 0.18);
}

.fibreglaze-faq-question {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
	padding: 24px 16px;
	color: var(--e-global-color-primary, #184f9e);
	font-family: var(--e-global-typography-secondary-font-family);
	font-size: var(--e-global-typography-secondary-font-size);
	font-weight: var(--e-global-typography-secondary-font-weight);
	line-height: var(--e-global-typography-secondary-line-height);
	letter-spacing: var(--e-global-typography-secondary-letter-spacing);
	text-transform: var(--e-global-typography-secondary-text-transform);
	font-style: var(--e-global-typography-secondary-font-style);
	text-decoration: var(--e-global-typography-secondary-text-decoration);
	cursor: pointer;
	list-style: none;
}

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

.fibreglaze-faq-question:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #184f9e);
	outline-offset: -2px;
}

.fibreglaze-faq-icon {
	order: -1;
	flex: 0 0 11px;
	width: 11px;
	height: 11px;
	border-right: 3px solid currentColor;
	border-bottom: 3px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}

.fibreglaze-faq-item[open] .fibreglaze-faq-icon {
	transform: rotate(45deg);
}

.fibreglaze-faq-answer {
	max-width: 100%;
	padding: 0 16px 28px 50px;
	color: var(--e-global-color-text, #20303d);
	font-family: var(--e-global-typography-text-font-family);
	font-size: var(--e-global-typography-text-font-size);
	font-weight: var(--e-global-typography-text-font-weight);
	line-height: var(--e-global-typography-text-line-height);
	letter-spacing: var(--e-global-typography-text-letter-spacing);
	text-transform: var(--e-global-typography-text-text-transform);
	font-style: var(--e-global-typography-text-font-style);
	text-decoration: var(--e-global-typography-text-text-decoration);
}

.fibreglaze-faq-answer > :first-child {
	margin-top: 0;
}

.fibreglaze-faq-answer > :last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.fibreglaze-faq-question {
		gap: 16px;
		padding: 20px 8px;
	}

	.fibreglaze-faq-answer {
		padding: 0 8px 24px 35px;
	}
}