/* Questions and answers (patterns/home-faq.php), round 4. Loaded after home.css on the homepage and in the editor.
   Owner: FAQ and footer call-to-action (2026-10-26).

   The one idea: the questions are a numbered ledger, like the origin rows and the steps, not a stack of grey
   accordions. Left, on the content axis: the kicker, the title in the display face, one line, then the two ways to
   reach us on a hairline (the column stays put while the list scrolls). Right: seven rows on hairlines, each led by
   its index in the display face, the question in Saira Condensed uppercase, a thin plus in a circle on the right
   edge. Hovering a row draws a red line across its top; opening it turns the index red, the plus into a cross, and
   the answer arrives in Saira under the question, on the question's own axis.

   Details blocks, no script. Keyboard: Tab reaches each question (red ring), Enter or Space opens it. The numbers
   are CSS counters, so Hamid can add, remove or reorder questions in the editor without renumbering.

   White above and below the section matches the garages band's own padding, so the black band above, the white
   here and the footer's black row read as three even beats. New class names (.jkd-qa*): nothing in home.css's old
   .jkd-faq rules matches this markup. */

.jkd-sec.jkd-qa {
	--jkd-qa-pad: clamp(56px, 5.8vw, 120px);          /* white above and below: 83 at 1440, 111 at 1920 */
	--jkd-qa-h2: clamp(40px, 3vw + 12px, 72px);       /* 55 at 1440, 70 at 1920: the garages title's size */
	--jkd-qa-q: clamp(21px, .7vw + 12px, 28px);       /* question and index: 22 at 1440, 25 at 1920, 28 from 2290 */
	--jkd-qa-fs: clamp(16px, .3vw + 12.5px, 18px);    /* answers, the lead, the links */
	--jkd-qa-row: clamp(18px, 1.5vw, 28px);           /* a row's padding, top and bottom */
	--jkd-qa-index: clamp(44px, 3.4vw, 64px);         /* the index column */
	--jkd-qa-toggle: 44px;
	--jkd-qa-cell: clamp(12px, 1.2vw, 24px);          /* between the index, the question and the toggle */
	--jkd-qa-gap: clamp(32px, 5vw, 96px);             /* between the two columns */
	--jkd-qa-plus: var(--jkd-red);
	padding: 0 0 var(--jkd-qa-pad);
	counter-reset: jkd-qa;
}
/* The section's top: the same white as its bottom (home.css gives every section --jkd-gap; this one is the last on the page) */
.home .single-content > .jkd-sec.jkd-qa { margin-top: var(--jkd-qa-pad); }

/* ------------------------------------------------------------------ The two columns */
.jkd-qa .jkd-qa__cols { margin: 0; gap: var(--jkd-qa-gap); }
.jkd-qa .jkd-qa__intro,
.jkd-qa .jkd-qa__list { margin: 0; min-width: 0; }
/* The intro stays in view while the list scrolls (under the 60px sticky header) */
.jkd-qa .jkd-qa__intro { align-self: flex-start; position: sticky; top: 92px; }

/* ------------------------------------------------------------------ Intro: kicker, title, one line, the two links on a hairline */
.jkd-qa .jkd-qa__intro :is(h2, p) { margin: 0; }
.jkd-qa .jkd-qa__intro .jkd-kicker { margin-bottom: clamp(12px, 1.1vw, 20px); }
.jkd-qa .jkd-qa__intro h2 {
	max-width: 7em;
	font-size: var(--jkd-qa-h2);
	line-height: .94;
	letter-spacing: -.005em;
	text-transform: uppercase;
	color: var(--jkd-text);
	text-wrap: balance;
}
.jkd-qa .jkd-qa__intro .jkd-qa__lead {
	margin-top: clamp(16px, 1.4vw, 24px);
	max-width: 19em;
	font-size: var(--jkd-qa-fs);
	line-height: 1.5;
	color: var(--jkd-muted);
}
.jkd-qa .jkd-qa__intro .jkd-qa__call {
	margin-top: clamp(24px, 2.2vw, 36px);
	padding-top: clamp(14px, 1.2vw, 20px);
	border-top: 1px solid var(--jkd-line);
}
.jkd-qa .jkd-qa__intro .jkd-qa__go { margin-top: 2px; }
.jkd-qa .jkd-qa__intro :is(.jkd-qa__call, .jkd-qa__go) {
	font-size: var(--jkd-qa-fs);
	font-weight: 700;
	line-height: 1;
}
.jkd-qa .jkd-qa__intro :is(.jkd-qa__call, .jkd-qa__go) a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px; /* a 44px tap target, the text where it would be anyway */
	color: var(--jkd-text);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition: color .2s;
}
.jkd-qa .jkd-qa__intro :is(.jkd-qa__call, .jkd-qa__go) a:hover { color: var(--jkd-red); }
/* The phone's line icon (assets/chrome/, the header's) and the page's arrow (assets/home/) as masks, so they take the colour */
.jkd-qa .jkd-qa__intro .jkd-qa__call a::before {
	content: "";
	flex: none;
	width: 1.3em;
	height: 1.3em;
	background: var(--jkd-red);
	-webkit-mask: url(../chrome/phone.svg) center / contain no-repeat;
	mask: url(../chrome/phone.svg) center / contain no-repeat;
}
.jkd-qa .jkd-qa__intro .jkd-qa__go a::after {
	content: "";
	flex: none;
	width: 1.1em;
	height: 1.1em;
	background: var(--jkd-red);
	-webkit-mask: url(../home/icon-arrow.svg) center / contain no-repeat;
	mask: url(../home/icon-arrow.svg) center / contain no-repeat;
	transition: transform .25s var(--jkd-ease);
}
.jkd-qa .jkd-qa__intro .jkd-qa__go a:hover::after { transform: translateX(4px); }

/* ------------------------------------------------------------------ The ledger: one Details block per question */
.jkd-qa .jkd-qa__list { border-bottom: 1px solid var(--jkd-line); }
.jkd-qa .jkd-qa__item {
	position: relative;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--jkd-line);
	counter-increment: jkd-qa;
}
/* The red line across the row's top: drawn on hover, on keyboard focus and while the row is open */
.jkd-qa .jkd-qa__item::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 2px;
	background: var(--jkd-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s var(--jkd-ease);
}
.jkd-qa .jkd-qa__item:hover::before,
.jkd-qa .jkd-qa__item:focus-within::before,
.jkd-qa .jkd-qa__item[open]::before { transform: scaleX(1); }

/* The question row: index | question | toggle, centred on one line */
.jkd-qa .jkd-qa__item summary {
	display: grid;
	grid-template-columns: var(--jkd-qa-index) minmax(0, 1fr) var(--jkd-qa-toggle);
	align-items: center;
	column-gap: var(--jkd-qa-cell);
	min-height: 44px;
	padding: var(--jkd-qa-row) 0;
	list-style: none;
	cursor: pointer;
	font: 700 var(--jkd-qa-q)/1.1 var(--jkd-display);
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--jkd-text);
	text-wrap: pretty;
	transition: color .2s;
}
.jkd-qa .jkd-qa__item summary::-webkit-details-marker { display: none; }
.jkd-qa .jkd-qa__item summary::marker { content: ""; }
.jkd-qa .jkd-qa__item summary:hover { color: var(--jkd-red); }
.jkd-qa .jkd-qa__item summary:focus { outline: none; }
.jkd-qa .jkd-qa__item summary:focus-visible { outline: 2px solid var(--jkd-red); outline-offset: 4px; }
/* The index: 01 to 07, same face and size as the question, muted until the row is open */
.jkd-qa .jkd-qa__item summary::before {
	content: counter(jkd-qa, decimal-leading-zero);
	font: 700 var(--jkd-qa-q)/1 var(--jkd-display);
	letter-spacing: .03em;
	font-variant-numeric: tabular-nums;
	color: var(--jkd-muted);
	transition: color .2s;
}
.jkd-qa .jkd-qa__item[open] summary::before { color: var(--jkd-red); }
/* The toggle: a plus drawn with two strokes inside a hairline circle; open, it fills red and the plus turns into a cross */
.jkd-qa .jkd-qa__item summary::after {
	content: "";
	width: var(--jkd-qa-toggle);
	height: var(--jkd-qa-toggle);
	justify-self: end;
	border: 1px solid var(--jkd-line);
	border-radius: 50%;
	background:
		linear-gradient(var(--jkd-qa-plus), var(--jkd-qa-plus)) center / 16px 2px no-repeat,
		linear-gradient(var(--jkd-qa-plus), var(--jkd-qa-plus)) center / 2px 16px no-repeat;
	background-color: transparent;
	transition: transform .3s var(--jkd-ease), border-color .2s, background-color .2s;
}
.jkd-qa .jkd-qa__item summary:hover::after { border-color: var(--jkd-text); }
.jkd-qa .jkd-qa__item[open] summary::after {
	--jkd-qa-plus: #fff;
	border-color: var(--jkd-red);
	background-color: var(--jkd-red);
	transform: rotate(45deg);
}

/* The answer: Saira, on the question's axis, clear of the toggle column */
.jkd-qa .jkd-qa__item p {
	margin: 0 0 clamp(20px, 1.8vw, 32px);
	padding: 0 calc(var(--jkd-qa-toggle) + var(--jkd-qa-cell)) 0 calc(var(--jkd-qa-index) + var(--jkd-qa-cell));
	max-width: calc(40em + var(--jkd-qa-index) + var(--jkd-qa-toggle) + 2 * var(--jkd-qa-cell));
	font-size: var(--jkd-qa-fs);
	line-height: 1.55;
	color: var(--jkd-steel);
}
.jkd-qa .jkd-qa__item p a {
	color: var(--jkd-text);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	text-decoration-color: var(--jkd-red);
}
.jkd-qa .jkd-qa__item p a:hover { color: var(--jkd-red); }

/* ------------------------------------------------------------------ Motion: the answer slides in under the question. Nothing under prefers-reduced-motion: reduce. */
@media (prefers-reduced-motion: no-preference) {
	@keyframes jkd-qa-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
	.jkd-qa .jkd-qa__item[open] p { animation: jkd-qa-in .35s var(--jkd-ease) both; }
}
@media (prefers-reduced-motion: reduce) {
	.jkd-qa .jkd-qa__item::before,
	.jkd-qa .jkd-qa__item summary::after,
	.jkd-qa .jkd-qa__intro .jkd-qa__go a::after { transition: none; }
}

/* ------------------------------------------------------------------ Editor: the summary is typed into, not clicked */
.editor-styles-wrapper .jkd-qa .jkd-qa__item summary { cursor: text; }
.editor-styles-wrapper .jkd-qa .jkd-qa__intro { position: static; }

/* ------------------------------------------------------------------ Phones and small tablets: the intro on top, then the ledger */
@media (max-width: 781px) {
	.jkd-sec.jkd-qa {
		--jkd-qa-h2: clamp(36px, 9.8vw, 56px);
		--jkd-qa-q: 19px;
		--jkd-qa-row: 16px;
		--jkd-qa-index: 32px;
		--jkd-qa-toggle: 40px;
		--jkd-qa-cell: 12px;
	}
	.jkd-qa .jkd-qa__cols { gap: 32px; }
	.jkd-qa .jkd-qa__intro { position: static; }
	.jkd-qa .jkd-qa__intro h2 { max-width: none; }
	.jkd-qa .jkd-qa__intro .jkd-qa__lead { max-width: 30em; }
	.jkd-qa .jkd-qa__intro .jkd-qa__call { margin-top: 24px; padding-top: 12px; }
	.jkd-qa .jkd-qa__item p { padding-right: 0; max-width: none; }
}