/* AVELOR — FAQ page (Поширені питання)
 * Extension styles. Loaded AFTER avelor-shipping.css. Reuses every .sh-*
 * class for hero / TOC / numbered blocks; this file adds the custom
 * accordion grammar (.faq-list / .faq-item / .faq-row / .faq-body) plus
 * the inline link, meta-note, section subhead, and closing CTA card.
 *
 * Accordion is built on HTML5 <details name="faq-X"> for the exclusive
 * one-open-per-section behavior, so animation + a11y come from the browser.
 * `<summary>` is .faq-row; chevron rotates via [open] selector.
 */

.faq-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--avelor-line);
}

.faq-item {
	border-bottom: 1px solid var(--avelor-line);
}

.faq-item details {
	margin: 0;
}

.faq-row {
	cursor: pointer;
	display: grid;
	grid-template-columns: 36px 1fr 22px;
	gap: 24px;
	align-items: baseline;
	padding: 22px 0;
	color: var(--fg-primary);
	transition: color var(--dur-base) var(--ease-out);
	list-style: none;
}

.faq-row::-webkit-details-marker { display: none; }
.faq-row::marker { content: ''; }

.faq-row:hover { color: var(--avelor-deep-green); }
.faq-row:hover .faq-num { color: var(--avelor-deep-green); }

.faq-num {
	font-size: 11px;
	letter-spacing: 0.18em;
	font-weight: 600;
	color: var(--fg-muted);
	font-variant-numeric: tabular-nums;
	transition: color var(--dur-base) var(--ease-out);
}

.faq-q {
	font-size: 17px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: inherit;
	text-wrap: balance;
}

.faq-chev {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--fg-muted);
	transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.faq-chev svg {
	width: 18px;
	height: 18px;
}

.faq-item details[open] .faq-chev {
	transform: rotate(180deg);
	color: var(--avelor-deep-green);
}

.faq-item details[open] .faq-row { color: var(--avelor-graphite); }
.faq-item details[open] .faq-num { color: var(--avelor-deep-green); }

.faq-body {
	display: grid;
	grid-template-columns: 36px 1fr 22px;
	gap: 24px;
	padding: 0 0 28px;
}

.faq-body-content {
	grid-column: 2;
	max-width: 56ch;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.faq-body-content p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--fg-secondary);
	margin: 0;
	text-wrap: pretty;
}

.faq-body-content p strong {
	color: var(--avelor-graphite);
	font-weight: 500;
}

/* Inline link inside an answer */
.faq-inline {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	color: var(--avelor-graphite);
	text-decoration: none;
	border-bottom: 1px solid var(--avelor-line);
	padding-bottom: 1px;
	transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.faq-inline:hover {
	color: var(--avelor-deep-green);
	border-bottom-color: var(--avelor-deep-green);
}

.faq-inline .arr {
	font-size: 12px;
	letter-spacing: 0.04em;
}

/* Tiny key/value note row at the bottom of an answer */
.faq-meta {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 4px;
	font-size: 12px;
	color: var(--fg-muted);
	letter-spacing: 0.02em;
}

.faq-meta .k {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--avelor-deep-green);
}

/* Section subheader sits inside an article block (between .sh-block-head and the accordion) */
.faq-block-sub {
	font-size: 14px;
	line-height: 1.6;
	color: var(--fg-muted);
	margin: -8px 0 8px;
}

/* «Не знайшли відповідь» closing card */
.faq-closer {
	margin-top: 24px;
	padding: 32px;
	background: var(--avelor-white);
	border: 1px solid var(--avelor-line);
	border-radius: var(--radius-lg);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: center;
}

.faq-closer-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.faq-closer-eyebrow {
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--avelor-deep-green);
}

.faq-closer h3 {
	font-family: var(--font-display, var(--font-body));
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	font-weight: 500;
	color: var(--avelor-graphite);
	margin: 0;
	max-width: 28ch;
}

.faq-closer-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 22px;
	background: var(--avelor-deep-green);
	color: var(--avelor-white);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.01em;
	border-radius: var(--radius-lg);
	transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.faq-closer-cta:hover { background: var(--avelor-green-hover, #294B41); color: var(--avelor-white); }
.faq-closer-cta:active { transform: scale(0.985); }
.faq-closer-cta svg { width: 16px; height: 16px; }

@media (max-width: 1024px) {
	.faq-row {
		grid-template-columns: 28px 1fr 20px;
		gap: 14px;
		padding: 18px 0;
	}

	.faq-q { font-size: 15px; }

	.faq-body {
		grid-template-columns: 28px 1fr 20px;
		gap: 14px;
		padding-bottom: 22px;
	}

	.faq-body-content p { font-size: 14px; }

	.faq-closer {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 24px;
	}

	.faq-closer-cta { justify-self: start; }
}