/*
 * FAQ Section Styles
 */

.hp-faq {
	padding: var(--h-space-12) 0;
	background-color: var(--h-color-bg);
	width: 100%;
	max-width: 100%;
	overflow: hidden; /* Fallback for unexpected global overflow, but not overflow-x */
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.hp-faq {
		padding: var(--h-space-16) 0;
	}
}

@media (min-width: 1024px) {
	.hp-faq {
		padding: var(--h-space-24) 0;
	}
}

.hp-faq__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--h-space-10);
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.hp-faq__layout {
		gap: var(--h-space-16);
	}
}

@media (min-width: 1024px) {
	.hp-faq__layout {
		grid-template-columns: 1fr 1.5fr;
		gap: var(--h-space-20);
		align-items: start;
	}
}

/* Header */
.hp-faq__header {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

@media (min-width: 1024px) {
	.hp-faq__header {
		max-width: 500px;
	}
}

.hp-faq__eyebrow {
	display: inline-block;
	font-size: var(--h-text-sm);
	font-weight: var(--h-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--h-color-primary);
	margin-bottom: var(--h-space-4);
}

.hp-faq__title {
	font-size: var(--h-text-3xl);
	font-weight: var(--h-weight-bold);
	line-height: var(--h-line-height-tight);
	color: var(--h-color-text);
	margin-bottom: var(--h-space-4);
	letter-spacing: -0.02em;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

@media (max-width: 767px) {
	.hp-faq__title {
		font-size: var(--h-text-2xl);
	}
}

@media (max-width: 414px) {
	.hp-faq__title {
		font-size: var(--h-text-xl);
	}
}

.hp-faq__desc {
	font-size: var(--h-text-lg);
	color: var(--h-color-text-secondary);
	line-height: var(--h-line-height-relaxed);
}

@media (max-width: 767px) {
	.hp-faq__desc {
		font-size: var(--h-text-base);
	}
}

.hp-faq__link {
	color: var(--h-color-primary);
	text-decoration: none;
	font-weight: var(--h-weight-medium);
	transition: color var(--h-transition-fast);
}

.hp-faq__link:hover {
	color: var(--h-color-primary-hover);
	text-decoration: underline;
}

/* FAQ List */
.hp-faq__list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--h-color-border);
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.hp-faq__item {
	border-bottom: 1px solid var(--h-color-border);
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.hp-faq__trigger {
	display: flex;
	align-items: flex-start; /* Better alignment for wrapping text */
	width: 100%;
	max-width: 100%;
	text-align: left;
	background: transparent;
	border: none;
	padding: var(--h-space-6) 0;
	cursor: pointer;
	color: var(--h-color-text);
	transition: color var(--h-transition-fast), background-color var(--h-transition-fast);
	box-sizing: border-box;
	white-space: normal; /* CRITICAL: force wrapping inside buttons */
}

@media (max-width: 767px) {
	.hp-faq__trigger {
		padding: var(--h-space-4) 0;
	}
}

.hp-faq__trigger:hover {
	color: var(--h-color-primary) !important;
	background-color: transparent !important;
}

.hp-faq__trigger:focus-visible {
	outline: none;
}
.hp-faq__trigger:focus-visible .hp-faq__question {
	outline: 2px solid var(--h-color-primary);
	outline-offset: 4px;
	border-radius: 4px;
}

.hp-faq__number {
	font-family: var(--h-font-mono);
	font-size: var(--h-text-sm);
	font-weight: var(--h-weight-medium);
	color: var(--h-color-text-muted);
	margin-right: var(--h-space-6);
	margin-top: 4px; /* Align with first line of wrapped text */
	flex-shrink: 0;
}

@media (max-width: 767px) {
	.hp-faq__number {
		display: none;
	}
}

.hp-faq__question {
	flex: 1;
	min-width: 0; /* Prevents flexbox horizontal overflow bug */
	width: 100%;
	font-size: var(--h-text-lg);
	font-weight: var(--h-weight-medium);
	line-height: var(--h-line-height-snug);
	margin: 0;
	white-space: normal; /* Force wrap */
	word-break: break-word; /* Ensure extremely long words break */
	overflow-wrap: break-word;
	hyphens: auto;
}

@media (max-width: 767px) {
	.hp-faq__question {
		font-size: var(--h-text-base);
	}
}

.hp-faq__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: var(--h-space-4);
	color: var(--h-color-text-muted);
	transition: transform var(--h-transition-normal) cubic-bezier(0.4, 0, 0.2, 1), color var(--h-transition-fast);
	flex-shrink: 0;
	margin-top: 2px;
}

.hp-faq__trigger[aria-expanded="true"] {
	color: var(--h-color-primary);
}

.hp-faq__trigger[aria-expanded="true"] .hp-faq__icon {
	transform: rotate(45deg) scale(1.1);
	color: var(--h-color-primary);
}

/* Content */
.hp-faq__content {
	/* Height transition is handled via JS */
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.hp-faq__inner {
	padding-bottom: var(--h-space-6);
	padding-left: calc(var(--h-space-6) + 2ch); /* Align with question text on desktop */
	padding-right: var(--h-space-4);
	color: var(--h-color-text-secondary);
	font-size: var(--h-text-base);
	line-height: var(--h-line-height-relaxed);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

@media (max-width: 767px) {
	.hp-faq__inner {
		padding-left: 0;
		padding-bottom: var(--h-space-4);
		font-size: var(--h-text-sm);
	}
}

.hp-faq__inner p:last-child {
	margin-bottom: 0;
}