/* pages/home/faq.css
   Home: the questions above the closing banner.

   The heading sits beside the list rather than above it, so the questions read as a
   column of their own. Each row carries a blue rail that grows out of nothing when the
   row opens - the same idea as the accent on a product card, turned on its side because
   a list reads down rather than across.

   Part of assets/css/. The load order lives in
   inc/setup.php - add new files there, not with @import. */

.faq-split {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: 64px;
	align-items: start;
}

.faq-aside {
	position: sticky;
	/* Clears the sticky header. */
	top: 120px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.faq-aside h2 { font-family: var(--serif); font-weight: 700; font-size: 38px; line-height: 1.15; }

.faq-aside .lede { max-width: 40ch; }

.faq-ask {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	align-self: flex-start;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--navy);
	border-bottom: 2px solid var(--line-2);
	padding-bottom: 7px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.faq-ask svg { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }

.faq-ask:hover,
.faq-ask:focus-visible { color: var(--red); border-color: var(--red); }

.faq-ask:hover svg { transform: translateX(5px); }

/* ---------- the list ---------- */
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }

.faq-item {
	position: relative;
	border-bottom: 1px solid var(--line);
	transition: background 0.3s ease;
}

.faq-item { --faq-accent: var(--blue); }

/* The rail. Scaled from the centre so it grows both ways as the row opens. */
.faq-item::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	background: var(--faq-accent);
	transform: scaleY(0);
	transform-origin: center;
	transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item[open] { background: var(--soft); }

.faq-item[open]::before { transform: scaleY(1); }

/* summary carries the click target, so the native marker goes and the padding comes here. */
.faq-q {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) 28px;
	align-items: start;
	gap: 16px;
	padding: 22px 22px 22px 20px;
	cursor: pointer;
	list-style: none;
}

.faq-q::-webkit-details-marker { display: none; }

.faq-q:focus-visible { outline: 2px solid var(--navy); outline-offset: -3px; }

.faq-num {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.9;
	color: var(--mute);
	transition: color 0.25s ease;
}

.faq-item[open] .faq-num { color: var(--faq-accent); }

.faq-qt {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ink);
	text-wrap: pretty;
	transition: color 0.2s ease;
}

.faq-q:hover .faq-qt { color: var(--navy); }

.faq-item[open] .faq-qt { color: var(--navy); }

/* A plus that becomes a minus: two bars, one of which rotates away. */
.faq-mark {
	position: relative;
	width: 22px;
	height: 22px;
	margin-top: 4px;
	justify-self: end;
	border: 1px solid var(--line-2);
	background: #fff;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.faq-mark::before,
.faq-mark::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 2px;
	background: var(--ink-3);
	transform: translate(-50%, -50%);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
}

.faq-mark::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq-q:hover .faq-mark { border-color: var(--navy); }

.faq-item[open] .faq-mark { border-color: var(--faq-accent); background: var(--faq-accent); }

.faq-item[open] .faq-mark::before,
.faq-item[open] .faq-mark::after { background: #fff; }

/* The bar that made it a plus rotates onto the other, leaving a minus. */
.faq-item[open] .faq-mark::after { transform: translate(-50%, -50%) rotate(0deg); }

/* The wrapper is what the script animates, so the answer keeps its own padding. */
.faq-wrap { overflow: hidden; }

.faq-a {
	padding: 0 24px 24px 70px;
	max-width: 68ch;
	font-size: 15.5px;
	line-height: 1.8;
	font-weight: 300;
	color: var(--ink-2);
}

@media (prefers-reduced-motion: reduce) {
	.faq-item,
		.faq-item::before,
		.faq-num,
		.faq-qt,
		.faq-mark,
		.faq-mark::before,
		.faq-mark::after,
		.faq-ask,
		.faq-ask svg { transition: none; }

	.faq-ask:hover svg { transform: none; }
}

@media (max-width: 980px) {
	.faq-split { grid-template-columns: 1fr; gap: 32px; }

	/* Nothing to stick to once it is a single column. */
	.faq-aside { position: static; }

	.faq-aside h2 { font-size: 30px; }
}

@media (max-width: 680px) {
	.faq-q {
		grid-template-columns: 26px minmax(0, 1fr) 24px;
		gap: 12px;
		padding: 18px 16px 18px 16px;
	}

	.faq-qt { font-size: 15.5px; }

	.faq-a { padding: 0 16px 20px 54px; font-size: 15px; }

	.faq-aside h2 { font-size: 26px; }
}