/*
 * Homepage FAQs
 *
 * Two-column layout measured from the Figma reference: roughly equal
 * left (intro) / right (accordion) columns with a generous gutter
 * (1fr 1fr grid, matching the container's own 96px page margin for
 * the gap, for visual consistency with the rest of the homepage
 * grid). Colors reuse existing tokens — no arbitrary values.
 *
 * State is driven entirely by the button's aria-expanded attribute
 * (set by assets/js/faq-accordion.js on click/tap/keyboard — works at
 * every width). Desktop additionally reveals the answer on :hover /
 * :focus-within without needing a click, per spec — that part is
 * CSS-only and gated to widths above the site's existing 1024px/768px
 * responsive breakpoints so touch devices aren't affected by hover
 * quirks.
 */

.qehs-faqs {
	padding-block: var(--qehs-space-2xl);
	background-color: var(--qehs-background-alt);
}

.qehs-faqs__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 96px;
}

.qehs-faqs__title {
	margin: 0 0 var(--qehs-space-sm);
	font-size: 2rem;
	font-weight: 700;
	color: var(--qehs-text);
}

.qehs-faqs__subtitle {
	margin: 0;
	font-size: 1rem;
	color: var(--qehs-text-muted);
}

.qehs-faqs__list {
	margin: 0 0 var(--qehs-space-lg);
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--qehs-space-sm);
}

.qehs-faqs__footer {
	display: flex;
	justify-content: flex-end;
}

/* Independent styling, not shared with .qehs-featured-documents__view-all
   or .qehs-resource-bundles__view-all — same visual treatment
   reproduced here rather than reusing/modifying those classes. */
.qehs-faqs__view-all {
	display: inline-flex;
	align-items: center;
	gap: var(--qehs-space-xs);
	font-weight: 600;
	color: var(--qehs-primary);
}

.qehs-faqs__view-all:hover,
.qehs-faqs__view-all:focus-visible {
	color: var(--qehs-secondary);
}

.qehs-faqs__view-all:focus-visible {
	outline: 2px solid var(--qehs-secondary);
	outline-offset: 2px;
}

/* --- FAQ item --- */

.qehs-faq-item {
	background-color: var(--qehs-background);
	border: 1px solid var(--qehs-border);
	border-radius: var(--qehs-radius-lg);
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.qehs-faq-item__heading {
	margin: 0;
}

.qehs-faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--qehs-space-md);
	width: 100%;
	padding: var(--qehs-space-md) var(--qehs-space-lg);
	background: none;
	border: none;
	font-family: inherit;
	font-size: 1rem;
	color: var(--qehs-text);
	text-align: left;
	cursor: pointer;
}

.qehs-faq-item__question:focus-visible {
	outline: 2px solid var(--qehs-secondary);
	outline-offset: -2px;
}

.qehs-faq-item__chevron {
	flex-shrink: 0;
	color: var(--qehs-text-muted);
	transition: transform 0.2s ease;
}

/* Chevron rotates to point down when open, at any width — driven by
   aria-expanded, not a separate hover-only state, so keyboard/touch
   users see the same visual feedback as a hovering mouse user. */
.qehs-faq-item__question[aria-expanded='true'] .qehs-faq-item__chevron {
	transform: rotate(90deg);
}

.qehs-faq-item__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.25s ease;
}

.qehs-faq-item__answer > p {
	margin: 0;
	overflow: hidden;
	padding: 0 var(--qehs-space-lg);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--qehs-text-muted);
}

.qehs-faq-item__question[aria-expanded='true'] + .qehs-faq-item__answer {
	grid-template-rows: 1fr;
}

.qehs-faq-item__question[aria-expanded='true'] + .qehs-faq-item__answer > p {
	padding-bottom: var(--qehs-space-md);
}

@media (prefers-reduced-motion: reduce) {
	.qehs-faq-item__answer,
	.qehs-faq-item__chevron {
		transition: none;
	}
}

/* --- Desktop: reveal the answer on hover/focus without requiring a
   click, per spec. Gated above the site's existing 1024px breakpoint
   (matching the point where FAQ's own two-column layout also
   collapses) so touch/tablet widths rely on tap only. --- */
@media (min-width: 1025px) {
	.qehs-faq-item:hover .qehs-faq-item__answer,
	.qehs-faq-item:focus-within .qehs-faq-item__answer {
		grid-template-rows: 1fr;
	}

	.qehs-faq-item:hover .qehs-faq-item__answer > p,
	.qehs-faq-item:focus-within .qehs-faq-item__answer > p {
		padding-bottom: var(--qehs-space-md);
	}

	.qehs-faq-item:hover .qehs-faq-item__chevron,
	.qehs-faq-item:focus-within .qehs-faq-item__chevron {
		transform: rotate(90deg);
	}
}

/* --- Tablet: stack the two columns, matching the site's existing
   1024px breakpoint. --- */
@media (max-width: 1024px) {
	.qehs-faqs__layout {
		grid-template-columns: 1fr;
		gap: var(--qehs-space-xl);
	}

	.qehs-faqs__title {
		font-size: 1.75rem;
	}
}

@media (max-width: 480px) {
	.qehs-faqs {
		padding-block: var(--qehs-space-xl);
	}

	.qehs-faqs__title {
		font-size: 1.5rem;
	}

	.qehs-faqs__footer {
		justify-content: center;
	}
}