/* HDL Site Modules: Service FAQ
   Page-specific FAQ element for Bricks. Content is stored per element instance;
   layout and visual treatment stay consistent across service pages. */

.hdl-faq {
	width: 100%;
	background: var(--primary-trans-10, rgba(192, 181, 165, .1));
	color: inherit;
	padding-block: var(--section-space-m, 74px);
	padding-inline: 0;
}

.hdl-faq *,
.hdl-faq *::before,
.hdl-faq *::after { box-sizing: border-box; }

.hdl-faq__container {
	width: calc(100% - var(--section-padding-x, 40px) - var(--section-padding-x, 40px));
	max-width: var(--content-width, 1280px);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-xl, 48px);
	align-items: stretch;
}

.hdl-faq__intro {
	width: 100%;
	max-width: 68ch;
}

.hdl-faq__eyebrow,
.hdl-faq__heading,
.hdl-faq__supporting,
.hdl-faq__question-heading { margin: 0; }

/* PHP-generated markup needs the same typography bridge used by Testimonials,
   because Bricks can scope global classes to native Bricks elements. */
.hdl-faq .hdl-eyebrow {
	font-family: var(--text-font-family, Jost, sans-serif);
	font-size: 13px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: .24em;
	text-transform: uppercase;
	text-decoration: none;
}

.hdl-faq__eyebrow {
	margin-bottom: var(--space-m, 24px);
	color: var(--primary-dark-trans-80, rgba(75, 66, 52, .8));
}

.hdl-faq__heading {
	margin-bottom: var(--space-m, 24px);
	color: inherit;
	text-wrap: pretty;
}

.hdl-faq__supporting {
	margin-bottom: var(--space-l, 32px);
	max-width: 68ch;
	color: inherit;
}

.hdl-faq__supporting > :first-child,
.hdl-faq__answer-content > :first-child { margin-top: 0; }

.hdl-faq__supporting > :last-child,
.hdl-faq__answer-content > :last-child { margin-bottom: 0; }

.hdl-faq__supporting p {
	margin-top: 0;
	margin-bottom: 0;
}

.hdl-faq__supporting p + p {
	margin-top: 1.15em;
}

.hdl-faq__phone {
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

.hdl-faq__phone:hover,
.hdl-faq__phone:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .14em;
}

.hdl-faq__cta {
	text-decoration: none;
}

.hdl-faq__accordion {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--content-gap, 24px);
	align-items: start;
}

.hdl-faq__item {
	width: 100%;
	align-self: start;
	border: 1px solid var(--neutral-light, #dedbd5);
	border-radius: var(--radius-s, 0);
	overflow: hidden;
}

.hdl-faq__question {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: var(--space-m, 24px);
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--content-gap, 24px);
	font: inherit;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}

.hdl-faq__question-heading {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-align: left;
	color: inherit;
	text-wrap: pretty;
}

.hdl-faq__icon-wrapper {
	width: var(--text-xxl, 36px);
	height: var(--text-xxl, 36px);
	min-width: var(--text-xxl, 36px);
	min-height: var(--text-xxl, 36px);
	aspect-ratio: 1 / 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--neutral-trans-10, rgba(90, 84, 76, .1));
	border-radius: var(--radius-s, 0);
	flex: 0 0 auto;
}

.hdl-faq__icon {
	display: inline-block;
	font-size: var(--text-l, 24px);
	font-weight: 400;
	line-height: 1;
	transform: rotate(0deg);
	transition: transform .2s ease;
}

.hdl-faq__question[aria-expanded="true"] .hdl-faq__icon {
	transform: rotate(45deg);
}

.hdl-faq__question:focus-visible {
	outline: 2px solid var(--primary, currentColor);
	outline-offset: -2px;
}

.hdl-faq__answer {
	padding: 0 var(--space-m, 24px) var(--space-m, 24px);
}

.hdl-faq__answer[hidden] { display: none !important; }

.hdl-faq__answer-content {
	color: inherit;
}

.hdl-faq__answer-content p,
.hdl-faq__answer-content ul,
.hdl-faq__answer-content ol {
	margin-top: 0;
	margin-bottom: 1em;
}

.hdl-faq__answer-content ul,
.hdl-faq__answer-content ol {
	padding-left: 1.25em;
}

.hdl-faq__builder-notice {
	padding: 18px 20px;
	border: 1px dashed var(--primary-dark-trans-30, #b7aa98);
	background: var(--primary-ultra-light, #f5f3f0);
	color: inherit;
}

@media (max-width: 991px) {
	.hdl-faq .hdl-eyebrow { font-size: 12px; }
	.hdl-faq__accordion { grid-template-columns: minmax(0, 1fr); }
	.hdl-faq__intro { max-width: 100%; }
	.hdl-faq__question-heading { font-size: 19px; }
}

@media (max-width: 600px) {
	.hdl-faq__question { padding: var(--space-m, 20px); }
	.hdl-faq__answer { padding: 0 var(--space-m, 20px) var(--space-m, 20px); }
	.hdl-faq__question-heading { font-size: 18px; }
	.hdl-faq__cta { width: 100%; min-width: 0; max-width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.hdl-faq__icon { transition: none; }
}