@charset "utf-8";
/* ==========================================================
   Glenn Harrold FAQ accordion (2026)
   Native <details>/<summary> with smooth animation,
   search, expand-all, deep links and lazy Vimeo videos.
   Reusable on any FAQ page (e.g. technical.html).
   ========================================================== */

.gh-faq {
	--faq-accent: #5659D6;
	--faq-accent-dark: #3f42b8;
	--faq-tint: #f4f4fd;
	--faq-border: #e2e3f3;
	--faq-text: #2b2b33;
	--faq-muted: #6b6d80;
	interpolate-size: allow-keywords; /* lets height animate to "auto" in modern browsers */
	margin: 1.2em 0 2em;
}

/* ---------- Toolbar: search + expand all ---------- */
.gh-faq-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: .6em;
	align-items: center;
	margin-bottom: .3em;
}
.gh-faq-toolbar[hidden] { display: none; }

.gh-faq-search {
	position: relative;
	flex: 1 1 220px;
}
.gh-faq-search input {
	width: 100%;
	box-sizing: border-box;
	padding: .75em 1em .75em 2.7em;
	font-family: inherit;
	font-size: 1em;
	color: var(--faq-text);
	background: #fff;
	border: 1px solid var(--faq-border);
	border-radius: 999px;
	transition: border-color .2s, box-shadow .2s;
	-webkit-appearance: none;
	appearance: none;
}
.gh-faq-search input:focus {
	outline: none;
	border-color: var(--faq-accent);
	box-shadow: 0 0 0 4px rgba(86, 89, 214, .15);
}
/* style.css forces Verdana 12px on all placeholders – override here */
.gh-faq-search input::-webkit-input-placeholder { font-family: inherit; font-size: 1em; padding-left: 0; color: #9a9cad; }
.gh-faq-search input::placeholder { font-family: inherit; font-size: 1em; padding-left: 0; color: #9a9cad; }

.gh-faq-search svg {
	position: absolute;
	left: 1em;
	top: 50%;
	width: 1.1em;
	height: 1.1em;
	transform: translateY(-50%);
	color: var(--faq-muted);
	pointer-events: none;
}

.gh-faq-btn {
	font-family: inherit;
	font-size: .9em;
	font-weight: 700;
	padding: .75em 1.3em;
	color: var(--faq-accent);
	background: #fff;
	border: 1px solid var(--faq-accent);
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.gh-faq-btn:hover,
.gh-faq-btn:focus-visible {
	background: var(--faq-accent);
	color: #fff;
	outline: none;
}

.gh-faq-status {
	font-size: .85em;
	color: var(--faq-muted);
	min-height: 1.6em;
	margin: .2em 0 0 1.2em;
}

/* ---------- Group headings ---------- */
.gh-faq-group { margin-top: 1.6em; }
.gh-faq-group[hidden] { display: none; }

.gh-faq .gh-faq-group-title {
	display: flex;
	align-items: center;
	gap: .8em;
	margin: 0 0 .8em;
	font-family: 'Noto Sans', sans-serif;
	font-size: .78em;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--faq-accent);
}
.gh-faq .gh-faq-group-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--faq-border);
}

/* ---------- Question cards ---------- */
.gh-faq-item {
	position: relative;
	margin-bottom: .7em;
	background: linear-gradient(90deg, #f6f5fe 0%, #fbfbff 55%, #fff 100%);
	border: 1px solid #e4e2f6;
	border-radius: 12px;
	overflow: hidden;
	scroll-margin-top: 1em;
	transition: box-shadow .25s, border-color .25s;
}
.gh-faq-item[hidden] { display: none; }

/* accent bar down the left edge */
.gh-faq-item::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: #c9c7f0;
	transition: background .25s;
	z-index: 1;
}
.gh-faq-item:hover { background: #f3f2fd; border-color: #cfcdee; box-shadow: 0 4px 14px rgba(40, 42, 120, .07); }
.gh-faq-item[open] { background: #fff; border-color: #c9cbf0; box-shadow: 0 8px 24px rgba(40, 42, 120, .10); }
.gh-faq-item[open]::before { background: var(--faq-accent); }

.gh-faq-item > summary {
	display: flex;
	align-items: center;
	gap: .8em;
	padding: 1em 1.1em 1em 1.4em;
	font-weight: 700;
	line-height: 1.4;
	color: var(--faq-text);
	cursor: pointer;
	list-style: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: background .25s, color .25s;
}
.gh-faq-item > summary::-webkit-details-marker { display: none; }
.gh-faq-item > summary:hover { background: transparent; }
.gh-faq-item > summary:focus-visible {
	outline: 3px solid rgba(86, 89, 214, .45);
	outline-offset: -3px;
	border-radius: 12px;
}
.gh-faq-item[open] > summary { background: var(--faq-tint); color: var(--faq-accent-dark); }

.gh-faq-q { flex: 1; }
.gh-faq-q mark { background: #fff1a8; color: inherit; border-radius: 3px; padding: 0 .1em; }

.gh-faq-tag {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .25em .7em;
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--faq-accent);
	background: #ebebfb;
	border-radius: 999px;
}
.gh-faq-tag svg { width: .85em; height: .85em; }

.gh-faq-chev {
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(60, 62, 150, .12);
	transition: transform .3s ease, background .25s;
}
.gh-faq-chev::before {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--faq-accent);
	border-bottom: 2px solid var(--faq-accent);
	transform: translateY(-2px) rotate(45deg);
}
.gh-faq-item[open] .gh-faq-chev { transform: rotate(180deg); background: var(--faq-accent); }
.gh-faq-item[open] .gh-faq-chev::before { border-color: #fff; }

/* ---------- Answer ---------- */
.gh-faq-body {
	padding: .9em 1.4em 1.1em 1.6em;
	color: #333;
}
.gh-faq-item[open] .gh-faq-body { animation: ghFaqFade .4s ease; }
.gh-faq-body p { margin: 0 0 1em; }
.gh-faq-body a { color: var(--faq-accent-dark); font-weight: 700; }
.gh-faq-body a:hover { color: var(--faq-accent); }

.gh-faq-subhead {
	display: block;
	margin: 1.2em 0 .3em;
	color: var(--faq-accent);
	font-weight: 700;
}

/* Smooth open/close (Chrome/Edge 131+, others just snap open) */
@supports (interpolate-size: allow-keywords) {
	.gh-faq-item::details-content {
		block-size: 0;
		overflow-y: clip;
		transition: block-size .35s ease, content-visibility .35s allow-discrete;
	}
	.gh-faq-item[open]::details-content { block-size: auto; }
}

@keyframes ghFaqFade {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

/* Pulse when someone arrives via a shared link */
.gh-faq-item.is-flash { animation: ghFaqFlash 1.8s ease; }
@keyframes ghFaqFlash {
	0%, 100% { box-shadow: 0 8px 24px rgba(40, 42, 120, .10); }
	25%      { box-shadow: 0 0 0 5px rgba(86, 89, 214, .35); }
}

/* ---------- Callouts ---------- */
.gh-faq-note {
	margin: 0 0 1em;
	padding: .8em 1em;
	background: #fff8ec;
	border: 1px solid #f1d9a6;
	border-radius: 10px;
}
.gh-faq-note p:last-child { margin-bottom: 0; }

.gh-faq-quote {
	margin: 0 0 1em;
	padding: .9em 1.1em;
	background: var(--faq-tint);
	border-left: 3px solid var(--faq-accent);
	border-radius: 0 10px 10px 0;
	font-style: italic;
}
.gh-faq-quote cite {
	display: block;
	margin-top: .5em;
	font-style: normal;
	font-weight: 700;
	font-size: .9em;
	color: var(--faq-accent-dark);
}

/* ---------- App cards (Which app?) ---------- */
.gh-app-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: .8em;
	margin: 0 0 1em;
}
.gh-app-card {
	padding: 1em;
	border: 1px solid var(--faq-border);
	border-radius: 12px;
	background: linear-gradient(160deg, #fbfbff 0%, #f1f0fc 100%);
}
.gh-app-card strong { display: block; color: var(--faq-text); margin-bottom: .3em; }
.gh-app-card p { font-size: .92em; line-height: 1.5; margin-bottom: .8em; }
.gh-faq .gh-pill,
.gh-faq .gh-pill:visited {
	display: inline-block;
	margin: 0 .3em .3em 0;
	padding: .35em .9em;
	font-size: .85em;
	font-weight: 700;
	text-decoration: none;
	color: #fff;
	background: var(--faq-accent);
	border-radius: 999px;
	transition: background .2s;
}
.gh-faq .gh-pill:hover { background: var(--faq-accent-dark); color: #fff; }

/* ---------- Video (portrait 350x438 Vimeo embeds) ---------- */
.gh-video {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	max-width: 320px;
	aspect-ratio: 350 / 438;
	margin: .3em 0 1.2em;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(135deg, #9FAAF1 0%, #503579 100%);
	box-shadow: 0 6px 18px rgba(40, 42, 120, .18);
}
.gh-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.gh-video .gh-video-fallback,
.gh-video .gh-video-fallback:visited {
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	text-align: center;
	padding: 1em;
}
.gh-video.is-loaded .gh-video-fallback { display: none; }

/* ---------- Answer footer: copy link ---------- */
.gh-faq-foot {
	display: flex;
	justify-content: flex-end;
	margin-top: .4em;
	padding-top: .7em;
	border-top: 1px dashed var(--faq-border);
}
.gh-faq-copy {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .35em .6em;
	font-family: inherit;
	font-size: .82em;
	color: var(--faq-muted);
	background: none;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	transition: color .2s, background .2s;
}
.gh-faq-copy svg { width: 1em; height: 1em; }
.gh-faq-copy:hover { color: var(--faq-accent); background: var(--faq-tint); }
.gh-faq-copy.is-copied { color: #2e8b57; }

/* ---------- No results ---------- */
.gh-faq-empty {
	margin-top: 1em;
	padding: 1.5em;
	text-align: center;
	color: var(--faq-muted);
	border: 1px dashed var(--faq-border);
	border-radius: 12px;
}
.gh-faq-empty[hidden] { display: none; }

/* ---------- Small screens ---------- */
@media (max-width: 500px) {
	.gh-faq-item > summary { padding: .9em .9em .9em 1.2em; }
	.gh-faq-body { padding: .8em 1em 1em 1.2em; }
	.gh-video { max-width: 100%; margin-left: auto; margin-right: auto; }
	.gh-faq-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.gh-faq *,
	.gh-faq-item::details-content { transition: none !important; animation: none !important; }
}