/**
 * HTPLaw FAQ widget.
 *
 * Measured from the 4x Figma export (design px, section top = 0 at y4705,
 * height 816): white band.
 *
 * Left: eyebrow centre 107.5; heading 43/50 (max 399px) at 141; note
 * Inter 17px −3% at 267; card at 341: 397×297, #0f2a3f, 6px radius,
 * padding 36/26, #f5f7f9 text: label Inter 16px uppercase, title Source
 * Serif 4 600 23/30 (+3%) 17px below, text Inter 16/22 6px below, button
 * 35px below.
 *
 * Right (596px, flush right): 2px #24597f rule at 108; questions Inter 600
 * 16/23 #0f2a3f; answers Inter 16/23 17px below the question; items padded
 * 20px (first 26px) and separated by 1px #cfcfcf. Figma's item spacing is
 * irregular (26/20/20/26 top, 24/17/17/17 bottom); uniform 20px reproduces
 * the total, so the first and last rules land on Figma's. Bottom padding 99.
 *
 * Not in Figma: the questions are accordion buttons (all open on load), the
 * optional ± icons, and the underlined phone link. Answers are the navy text
 * token (Figma #1e1e1e). Below 900px the columns stack.
 */

.htplaw-faq {
	--_bg: var(--htplaw-faq-bg, var(--htplaw-color-surface));
	--_card-bg: var(--htplaw-faq-card-bg, var(--htplaw-color-secondary));
	--_card-text: var(--htplaw-faq-card-text, var(--htplaw-color-on-dark));
	--_question: var(--htplaw-faq-question, var(--htplaw-color-secondary));
	--_top-rule: var(--htplaw-faq-top-rule, var(--htplaw-color-blue));
	--_rule: var(--htplaw-faq-rule, #cfcfcf);

	padding-top: var(--htplaw-faq-pad-top, 97px);
	padding-bottom: var(--htplaw-faq-pad-bottom, 99px);
	background: var(--_bg);
}

.htplaw-faq__inner {
	display: grid;
	grid-template-columns: minmax(0, 448px) minmax(0, 596px);
	justify-content: space-between;
	align-items: start;
	column-gap: 56px;
}

.htplaw-faq__eyebrow {
	margin-bottom: 23px;
	text-transform: uppercase;
}

.htplaw-faq__title {
	max-width: 399px;
}

.htplaw-faq__note {
	margin: 26px 0 0;
	color: var(--htplaw-color-text);
	font-family: var(--htplaw-font-body);
	font-size: 17px;
	letter-spacing: -.03em;
	line-height: 23px;
}

/* Contact card */
.htplaw-faq__card {
	max-width: 397px;
	min-height: 297px;
	margin-top: 51px;
	padding: 36px 26px;
	border-radius: var(--htplaw-radius);
	background: var(--_card-bg);
	color: var(--_card-text);
}

.htplaw-faq__card-label {
	margin: 0;
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	line-height: 21px;
	text-transform: uppercase;
}

.htplaw-faq__card-title {
	max-width: 285px; /* Figma's text box; sets the line break */
	margin: 17px 0 0;
	font-family: var(--htplaw-font-heading);
	font-size: 23px;
	font-weight: 600;
	letter-spacing: .03em;
	line-height: 30px;
}

.htplaw-faq__card-text {
	margin-top: 6px;
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	letter-spacing: .01em;
	line-height: 22px;
}

.htplaw-faq__card-text > * { margin: 0; }

.htplaw-faq__card-text a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.htplaw-faq__card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 35px;
}

/* Accordion */
.htplaw-faq__list {
	margin-top: 11px;
	border-top: 2px solid var(--_top-rule);
}

.htplaw-faq__item {
	padding: 20px 0;
	border-bottom: 1px solid var(--_rule);
}

.htplaw-faq__item:first-child {
	padding-top: 26px;
}

/* (0,2,0)+ beats the Elementor kit's heading rules. */
.htplaw-faq .htplaw-faq__heading {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.htplaw-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--_question);
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 23px;
	text-align: left;
	white-space: normal; /* Hello Elementor sets nowrap on all buttons */
	user-select: text;
	cursor: pointer;
}

.htplaw-faq__question-text {
	flex: 1;
	min-width: 0;
}

.htplaw-faq__question:hover,
.htplaw-faq__question:focus {
	background: none;
	color: var(--_question);
}

.htplaw-faq__question:hover .htplaw-faq__question-text {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.htplaw-faq__icon {
	display: none;
	flex: 0 0 24px;
	color: var(--htplaw-color-primary);
}

.htplaw-faq__icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

.htplaw-faq__question[aria-expanded="false"] .htplaw-faq__icon--plus,
.htplaw-faq__question[aria-expanded="true"] .htplaw-faq__icon--minus {
	display: block;
}

/* Icons are 24px tall; keep the row at the design's 23px line. */
.has-icons .htplaw-faq__question {
	margin-block: -.5px;
}

.htplaw-faq__answer {
	max-width: 591px; /* Figma's text box */
	padding-top: 17px;
	color: var(--htplaw-color-text);
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	line-height: 23px;
}

.htplaw-faq__answer > :first-child { margin-top: 0; }
.htplaw-faq__answer > :last-child { margin-bottom: 0; }

.htplaw-faq__answer a {
	color: var(--htplaw-color-accent-strong);
}

@media (max-width: 900px) {
	.htplaw-faq {
		padding-top: var(--htplaw-faq-pad-top, 56px);
		padding-bottom: var(--htplaw-faq-pad-bottom, 64px);
	}

	.htplaw-faq__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}

	.htplaw-faq__card {
		max-width: 560px;
		min-height: 0;
		margin-top: 32px;
	}

	.htplaw-faq__list {
		margin-top: 0;
	}
}

/* Mobile spacing: section padding is capped at the shared mobile token
   (variables.css), so large desktop values set in Elementor don't carry
   over to tablets and phones; smaller custom values are kept. */
@media (max-width: 900px) {
	.htplaw-faq {
		padding-top: min(var(--htplaw-faq-pad-top, var(--htplaw-space-section)), var(--htplaw-space-section));
		padding-bottom: min(var(--htplaw-faq-pad-bottom, var(--htplaw-space-section)), var(--htplaw-space-section));
	}
}