/**
 * hostsnix/faq — frontend.
 *
 * Reproduces the React accordion exactly (measured from the homepage FAQ):
 * rounded-xl card, 20px/16px padding, 15px semibold question, 28px round
 * marker that rotates 45° when open, answer separated by a hairline rule.
 * No JavaScript: <details> does the work.
 */

.hsx-faq-grid { display: grid; gap: 40px; align-items: start; }

@media (min-width: 1024px) {
	.hsx-faq--split .hsx-faq-grid {
		grid-template-columns: 340px 1fr;
		gap: 56px;
	}
	.hsx-faq--split .hsx-faq-aside { position: sticky; top: 6rem; }
}

.hsx-faq-aside-desc {
	margin-top: 12px;
	font-size: 16px;
	line-height: 24px;
	color: hsl(var(--muted-foreground));
}

.hsx-faq-list { display: flex; flex-direction: column; gap: 12px; }

.hsx-faq-item {
	border: 1px solid hsl(var(--border) / 0.5);
	border-radius: 12px;
	background-color: hsl(var(--card) / 0.6);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.hsx-faq-item:hover { background-color: hsl(var(--card)); }

.hsx-faq-item[open] {
	border-color: hsl(var(--primary) / 0.2);
	background-color: hsl(var(--card));
	box-shadow: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
}

/* Suppress the native disclosure triangle — the round marker replaces it. */
.hsx-faq-q { list-style: none; cursor: pointer; }
.hsx-faq-q::-webkit-details-marker { display: none; }
.hsx-faq-q::marker { content: ""; }

.hsx-faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	text-align: left;
}

.hsx-faq-q-text {
	font-size: 15px;
	font-weight: 600;
	color: hsl(var(--foreground));
}

.hsx-faq-marker {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 9999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: hsl(var(--muted) / 0.6);
	transition: transform 0.3s ease, background-color 0.3s ease;
}

.hsx-faq-marker-icon {
	width: 16px;
	height: 16px;
	color: hsl(var(--muted-foreground));
}

.hsx-faq-item[open] .hsx-faq-marker {
	transform: rotate(45deg);
	background-color: hsl(var(--primary) / 0.1);
}
.hsx-faq-item[open] .hsx-faq-marker-icon { color: hsl(var(--primary)); }

.hsx-faq-a {
	padding: 12px 20px 16px;
	border-top: 1px solid hsl(var(--border) / 0.3);
}

.hsx-faq-a p {
	font-size: 14px;
	line-height: 1.625;
	color: hsl(var(--muted-foreground));
}

.hsx-faq-q:focus-visible {
	outline: 2px solid hsl(var(--ring));
	outline-offset: 2px;
	border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
	.hsx-faq-item, .hsx-faq-marker { transition: none; }
}

/* ── Aside illustration ──
   Hidden below lg, where the aside stacks above the list and the art would
   just push the questions off the first screen. */
.hsx-faq-art-wrap { display: none; margin-top: 32px; }
@media (min-width: 1024px) { .hsx-faq-art-wrap { display: block; } }

.hsx-faq-art { display: block; width: 100%; max-width: 260px; margin-inline: auto; }
.hsx-faq-art svg { display: block; width: 100%; height: auto; }

/* The FAQ heading's tracking is -0.02em on the live site, slightly looser than
   the -0.025em every other section heading uses. */
.hsx-faq-aside .hsx-heading { letter-spacing: -0.02em; }

/* ─────────── Centred layout ───────────
   Heading above a narrow single column, as on the Tools and AI Studio hubs.
   The container is narrowed to 48rem to match the live 768px measure. */
.hsx-faq--centered .hsx-container { max-width: 48rem; }
/* The grid's 40px gap is for the split layout's two columns. Here the heading
   and the list are two grid children stacked, so the gap was added on top of
   the heading's own 24px margin and pushed the list 40px down. */
.hsx-faq--centered .hsx-faq-grid { gap: 0; }

.hsx-faq-center-h2 {
	margin-bottom: 24px;
	font-size: 24px; line-height: 32px;
	font-weight: 700;
	text-align: center;
	color: #0f172a;
}

/* ─────────── Chevron skin ───────────
   The hub accordion: a tinted card with a flat chevron that rotates 90° when
   the answer opens, instead of the round plus marker that rotates 45°.
   Written as two classes so declaration order cannot defeat the skin. */
/* The live hub separates the FAQ band from the dark CTA above it with a
   hairline, which belongs to the section rather than to a question. */
.hsx-faq--skin-chevron { border-top: 1px solid rgba(226, 232, 240, 0.8); }

.hsx-faq--skin-chevron .hsx-faq-item {
	background-color: #eef4f3;
	border-color: rgba(226, 232, 240, 0.8);
}
.hsx-faq--skin-chevron .hsx-faq-item:hover { background-color: #eef4f3; border-color: hsl(var(--primary) / 0.3); }
.hsx-faq--skin-chevron .hsx-faq-item[open] { background-color: #eef4f3; box-shadow: none; }

.hsx-faq--skin-chevron .hsx-faq-q { padding: 20px; gap: 16px; }

.hsx-faq--skin-chevron .hsx-faq-q-text {
	font-size: 16px; line-height: 24px;
	color: #0f172a;
}

.hsx-faq-chevron {
	flex-shrink: 0;
	height: 20px; width: 20px;
	margin-left: 16px;
	color: #94a3b8;
	transition: transform 0.2s ease;
}
.hsx-faq--skin-chevron .hsx-faq-item[open] .hsx-faq-chevron { transform: rotate(90deg); }

/* No hairline rule between question and answer in this skin. */
.hsx-faq--skin-chevron .hsx-faq-a { padding: 0 20px 20px; border-top: 0; }
.hsx-faq--skin-chevron .hsx-faq-a p { color: #475569; }

@media (prefers-reduced-motion: reduce) {
	.hsx-faq-chevron { transition: none; }
}

/* ─────────── Stacked layout ───────────
   Heading above the list, left aligned, at the size the tool guide uses. */
.hsx-faq--stacked .hsx-faq-grid { gap: 0; }
.hsx-faq--stacked .hsx-faq-center-h2 {
	font-size: 20px; line-height: 1.25;
	text-align: left;
	color: hsl(var(--foreground));
}
/* sm:text-2xl brings the 24/32 pair, which is emitted after leading-tight. */
@media (min-width: 640px) { .hsx-faq--stacked .hsx-faq-center-h2 { font-size: 24px; line-height: 32px; } }

/* ─────────── Chevron on a card ───────────
   The tool guide's accordion: same chevron, but on the card surface with a
   hairline between question and answer. */
.hsx-faq--skin-chevron-card { border-top: 0; }
.hsx-faq--skin-chevron-card .hsx-faq-item {
	border-radius: 16px;
	border-color: hsl(var(--border) / 0.5);
	background-color: hsl(var(--card));
}
.hsx-faq--skin-chevron-card .hsx-faq-item:hover { background-color: hsl(var(--card)); border-color: hsl(var(--primary) / 0.3); }
.hsx-faq--skin-chevron-card .hsx-faq-item[open] { background-color: hsl(var(--card)); box-shadow: none; }
.hsx-faq--skin-chevron-card .hsx-faq-q { padding: 20px; gap: 16px; }
.hsx-faq--skin-chevron-card .hsx-faq-q-text { font-size: 14px; line-height: 20px; color: hsl(var(--foreground)); }
@media (min-width: 640px) { .hsx-faq--skin-chevron-card .hsx-faq-q-text { font-size: 16px; line-height: 24px; } }
.hsx-faq--skin-chevron-card .hsx-faq-chevron { color: hsl(var(--muted-foreground)); }
.hsx-faq--skin-chevron-card .hsx-faq-item[open] .hsx-faq-chevron { transform: rotate(90deg); }
.hsx-faq--skin-chevron-card .hsx-faq-a { padding: 0 20px 20px; border-top: 1px solid hsl(var(--border) / 0.3); }
.hsx-faq--skin-chevron-card .hsx-faq-a p { color: hsl(var(--muted-foreground)); }