/*
 * Sizes are in em, not rem: the storefront theme sets the root font-size to 91.2% (14.6px), which made a
 * rem-sized question read smaller than its own 16px answer. Everything here scales from .pnp-faq's base,
 * which is `medium` — the visitor's own default text size — so a larger browser setting is honoured.
 *
 * PNP FAQ — gold on near-black, the same tokens as the COA Library (storefront: Astra, #000 page,
 * #fff text, #BB965F accent). Every colour is a token on .pnp-faq so the component keeps its own
 * contrast if the theme palette moves; tests/test-offline.php computes the contrast of every
 * foreground/background pair below (text >= 4.5:1, interface >= 3:1).
 *
 * Accessibility: native <details>/<summary>, visible keyboard focus on everything focusable, 48px
 * touch targets, links underlined (never colour alone), no motion beyond a 150ms icon change that
 * prefers-reduced-motion removes, forced-colors safe, readable at 200% zoom and 320px.
 */

.pnp-faq {
	--faq-gold: #bb965f;
	--faq-gold-dim: #8a6a2f;
	--faq-gold-lift: #d8bc92;
	--faq-ink: #f4f1ec;
	--faq-ink-soft: #a8a29a;
	--faq-surface: #0d0d0d;
	--faq-surface-lift: #171717;
	--faq-line: #2a2620;
	--faq-on-gold: #0d0d0d;

	max-width: 1180px;
	margin: 0 auto;
	padding: 2.5em 1.25em 4em;
	color: var(--faq-ink);
	font-size: medium; /* the visitor's own default size (16px unless they changed it) — not a fixed px, not the theme's 91.2% root */
	line-height: 1.65;
}

.pnp-faq *,
.pnp-faq *::before,
.pnp-faq *::after { box-sizing: border-box; }

.pnp-faq__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── intro ─────────────────────────────────────────────────────────────── */

.pnp-faq__intro { max-width: 62ch; margin: 0 0 2em; }

.pnp-faq__eyebrow {
	margin: 0 0 .6em;
	font-size: .7em;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--faq-gold);
}

.pnp-faq__lede { margin: 0 0 1.1em; font-size: 1.05em; color: var(--faq-ink); }
.pnp-faq__cta { margin: 0; }

.pnp-faq .pnp-faq__btn {
	display: inline-block;
	padding: .7em 1.4em;
	background: var(--faq-gold);
	border: 2px solid var(--faq-gold);
	border-radius: 4px;
	color: var(--faq-on-gold);
	font-size: .95em;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}
.pnp-faq .pnp-faq__btn:hover {
	background: var(--faq-gold-lift);
	border-color: var(--faq-gold-lift);
	color: var(--faq-on-gold);
}

/* ── tools (shown by the script) ───────────────────────────────────────── */

.pnp-faq__tools {
	display: flex;
	flex-wrap: wrap;
	gap: .75em 1em;
	align-items: center;
	max-width: 820px;
	margin: 0 0 1.25em;
	padding-bottom: 1.25em;
	border-bottom: 1px solid var(--faq-line);
}
.pnp-faq__tools[hidden] { display: none; }

.pnp-faq__search { flex: 1 1 280px; min-width: 0; }

.pnp-faq .pnp-faq__search input[type="search"] {
	width: 100%;
	min-height: 3em;
	padding: .7em .95em;
	background: var(--faq-surface);
	border: 1px solid var(--faq-gold-dim);
	border-radius: 4px;
	color: var(--faq-ink);
	font: inherit;
	font-size: 1em;
}
.pnp-faq .pnp-faq__search input[type="search"]::placeholder { color: var(--faq-ink-soft); opacity: 1; }

.pnp-faq .pnp-faq__toggle {
	min-height: 3em;
	padding: .65em 1.1em;
	background: transparent;
	border: 1px solid var(--faq-gold-dim);
	border-radius: 4px;
	color: var(--faq-ink);
	font: inherit;
	font-size: .92em;
	line-height: 1.2;
	cursor: pointer;
}
.pnp-faq .pnp-faq__toggle:hover { border-color: var(--faq-gold); color: var(--faq-gold-lift); background: transparent; }

.pnp-faq__count { flex: 1 0 100%; min-height: 1.3em; margin: 0; font-size: .85em; color: var(--faq-ink-soft); }

/* ── topic chips ───────────────────────────────────────────────────────── */

.pnp-faq__jump { max-width: 820px; margin: 0 0 2.25em; }
.pnp-faq__jump ul { display: flex; flex-wrap: wrap; gap: .5em; margin: 0; padding: 0; list-style: none; }
.pnp-faq__jump li { margin: 0; padding: 0; }

.pnp-faq .pnp-faq__jump a {
	display: inline-block;
	padding: .55em .95em;
	border: 1px solid var(--faq-gold-dim);
	border-radius: 999px;
	color: var(--faq-ink);
	font-size: .88em;
	line-height: 1.3;
	text-decoration: none;
}
.pnp-faq .pnp-faq__jump a:hover { border-color: var(--faq-gold); color: var(--faq-gold-lift); }

/* ── groups + questions ────────────────────────────────────────────────── */

.pnp-faq__group { max-width: 820px; margin: 0 0 2.5em; scroll-margin-top: 96px; }

.pnp-faq__h {
	margin: 0 0 1em;
	font-size: clamp(1.25em, 2.6vw, 1.55em);
	font-weight: 600;
	line-height: 1.25;
	color: var(--faq-ink);
}

.pnp-faq__item {
	margin: 0 0 .5em;
	background: var(--faq-surface);
	border: 1px solid var(--faq-line);
	border-radius: 4px;
	scroll-margin-top: 96px;
}
.pnp-faq__item[open] { border-color: var(--faq-gold-dim); }

.pnp-faq .pnp-faq__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	min-height: 3.25em;
	padding: 1em 1.1em;
	color: var(--faq-ink);
	font-size: 1.02em;
	font-weight: 500;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}
.pnp-faq__summary::-webkit-details-marker { display: none; }
.pnp-faq__summary::marker { content: ''; }
.pnp-faq__summary:hover { background: var(--faq-surface-lift); }

.pnp-faq__icon { position: relative; flex: none; width: 14px; height: 14px; }
.pnp-faq__icon::before,
.pnp-faq__icon::after { content: ''; position: absolute; background: var(--faq-gold); border-radius: 1px; }
.pnp-faq__icon::before { left: 0; right: 0; top: 6px; height: 2px; }
.pnp-faq__icon::after { top: 0; bottom: 0; left: 6px; width: 2px; transition: transform .15s ease; }
.pnp-faq__item[open] .pnp-faq__icon::after { transform: scaleY(0); }

.pnp-faq__a { max-width: 68ch; padding: 0 1.1em 1.15em; color: var(--faq-ink); }
.pnp-faq__a p { margin: 0 0 .8em; }
.pnp-faq__a p:last-child { margin-bottom: 0; }
.pnp-faq__a strong { font-weight: 600; }

/* links: underlined — never colour alone */
.pnp-faq .pnp-faq__a a,
.pnp-faq .pnp-faq__foot a,
.pnp-faq .pnp-faq__empty a {
	color: var(--faq-gold-lift);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.pnp-faq .pnp-faq__a a:hover,
.pnp-faq .pnp-faq__foot a:hover,
.pnp-faq .pnp-faq__empty a:hover { color: #fff; }

/* a visible focus indicator on everything that takes focus (the storefront theme removes its own) */
.pnp-faq a:focus-visible,
.pnp-faq button:focus-visible,
.pnp-faq input:focus-visible,
.pnp-faq summary:focus-visible {
	outline: 2px solid var(--faq-gold-lift);
	outline-offset: 2px;
}

.pnp-faq__empty { max-width: 820px; margin: 0 0 2em; color: var(--faq-ink); }
.pnp-faq__empty[hidden] { display: none; }

.pnp-faq__foot {
	max-width: 820px;
	margin-top: 2.5em;
	padding-top: 1.5em;
	border-top: 1px solid var(--faq-line);
	color: var(--faq-ink-soft);
	font-size: .92em;
}
.pnp-faq__foot p { margin: 0 0 .4em; }
.pnp-faq__ruo { font-size: .82em; letter-spacing: .04em; }

/* ── small screens ─────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.pnp-faq { padding: 1.75em 1em 3em; }
	.pnp-faq .pnp-faq__summary { padding: .95em .9em; font-size: 1em; }
	.pnp-faq__a { padding: 0 .9em 1em; }
	.pnp-faq__search { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.pnp-faq__icon::after { transition: none; }
}

@media (forced-colors: active) {
	.pnp-faq__icon::before,
	.pnp-faq__icon::after { background: CanvasText; }
	.pnp-faq__item,
	.pnp-faq .pnp-faq__jump a,
	.pnp-faq .pnp-faq__toggle,
	.pnp-faq .pnp-faq__search input[type="search"] { border-color: CanvasText; }
}

@media print {
	.pnp-faq { color: #000; padding: 0; }
	.pnp-faq__tools, .pnp-faq__jump, .pnp-faq__cta, .pnp-faq__icon { display: none !important; }
	.pnp-faq__item, .pnp-faq__foot { background: #fff; border-color: #999; color: #000; }
	.pnp-faq .pnp-faq__summary, .pnp-faq__a, .pnp-faq__h, .pnp-faq__lede { color: #000; }
	.pnp-faq .pnp-faq__a a, .pnp-faq .pnp-faq__foot a { color: #000; }
}