/*
 * AH FAQ: accordion of <details> and a sticky "ask me" card. One column on tablets.
 * The answer wrapper (.ah-faq__a) is what faq.js animates; without JS details open natively.
 */
.ah-faq {
	--ah-faq-ask: 300px;
	--ah-faq-rule: var(--ah-ink);
	--ah-faq-line: var(--ah-line);
	--ah-faq-accent: var(--ah-ink-gold);
	--ah-faq-muted: var(--ah-muted);
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--ah-faq-ask);
	align-items: start;
	gap: 56px;
	font-family: var(--ah-f-body);
	font-size: 17px;
	line-height: 1.75;
	color: var(--ah-ink);
}
.ah-faq.ah-faq--solo { grid-template-columns: minmax(0, 1fr); }
.ah-faq.ah-on-dark {
	--ah-faq-rule: var(--ah-on-navy);
	--ah-faq-line: var(--ah-line-navy);
	--ah-faq-accent: var(--ah-gold-hi);
	--ah-faq-muted: var(--ah-on-navy-muted);
	color: var(--ah-on-navy);
}

/* questions */
.ah-faq .ah-faq__list { min-width: 0; border-top: 1px solid var(--ah-faq-rule); }
.ah-faq .ah-faq__item { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--ah-faq-line); }
.ah-faq .ah-faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 20px 0;
	list-style: none;
	cursor: pointer;
	font-family: var(--ah-f-display);
	font-weight: 600;
	font-size: 1.12rem;
	line-height: 1.55;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
	transition: color .3s;
}
.ah-faq .ah-faq__q::-webkit-details-marker { display: none; }
.ah-faq .ah-faq__q::marker { content: ""; }
.ah-faq .ah-faq__q .ah-faq__qt {
	display: block;
	margin: 0;
	font: inherit;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
}
.ah-faq .ah-faq__q:hover { color: var(--ah-faq-accent); }
.ah-faq .ah-faq__q:focus { outline: none; }
.ah-faq .ah-faq__q:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: 3px; border-radius: 6px; }

/* plus that turns into a cross */
.ah-faq .ah-faq__ic {
	position: relative;
	flex: none;
	width: 30px;
	height: 30px;
	border: 1px solid var(--ah-faq-line);
	border-radius: 50%;
	transition: transform .4s var(--ah-spring), border-color .3s, background-color .3s;
}
.ah-faq .ah-faq__ic::before,
.ah-faq .ah-faq__ic::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1.6px;
	margin: -.8px 0 0 -6px;
	border-radius: 1px;
	background: var(--ah-faq-accent);
}
.ah-faq .ah-faq__ic::after { transform: rotate(90deg); }
.ah-faq .ah-faq__q:hover .ah-faq__ic { border-color: var(--ah-faq-accent); }
.ah-faq .ah-faq__item[open]:not(.is-closing) .ah-faq__ic { transform: rotate(135deg); border-color: var(--ah-faq-accent); background: rgba(197, 165, 114, .12); }

/* answer */
.ah-faq .ah-faq__a { overflow: hidden; }
.ah-faq .ah-faq__ai { max-width: 72ch; padding: 0 0 22px; color: var(--ah-faq-muted); }
.ah-faq .ah-faq__ai > :first-child { margin-top: 0; }
.ah-faq .ah-faq__ai > :last-child { margin-bottom: 0; }
.ah-faq .ah-faq__ai p { margin: 0 0 .8em; font-size: 1rem; line-height: 1.8; color: inherit; }
.ah-faq .ah-faq__ai a { color: var(--ah-faq-accent); text-decoration: underline; text-underline-offset: 3px; }
.ah-faq .ah-faq__empty { margin: 0; padding: 20px 0; font-size: .9rem; color: var(--ah-faq-muted); }

/* the questions rise one by one when the list comes into view */
.ah-motion .ah-faq .ah-faq__list.ah-rv .ah-faq__item { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ah-ease), transform .7s var(--ah-ease); transition-delay: calc(var(--i, 0) * 50ms); }
.ah-motion .ah-faq .ah-faq__list.ah-rv.seen .ah-faq__item { opacity: 1; transform: none; }

/* ask card */
.ah-faq .ah-faq__ask {
	position: sticky;
	top: 110px;
	display: grid;
	justify-items: start;
	gap: 10px;
	padding: 22px;
	border: 1px solid var(--ah-line);
	border-radius: 10px;
	background: var(--ah-paper);
	color: var(--ah-ink);
}
.ah-faq.ah-on-dark .ah-faq__ask { border-color: var(--ah-line-navy); background: rgba(255, 255, 255, .04); color: var(--ah-on-navy); }
.admin-bar .ah-faq .ah-faq__ask { top: 142px; }
.ah-faq .ah-faq__img {
	display: block;
	width: 76px;
	height: 76px;
	max-width: none;
	border: 2px solid var(--ah-gold);
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 20%;
	background: var(--ah-sand);
}
.ah-faq .ah-faq__note { display: block; }
.ah-faq .ah-faq__text { margin: 0; font-size: .92rem; line-height: 1.7; color: var(--ah-faq-muted); }
.ah-faq .ah-faq__btn { margin-top: 4px; }
.ah-faq .ah-faq__btn:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.ah-faq .ah-faq__q,
	.ah-faq .ah-faq__ic { transition: none; }
	.ah-motion .ah-faq .ah-faq__list.ah-rv .ah-faq__item { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1024px) {
	.ah-faq { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.ah-faq .ah-faq__ask { position: static; }
}
@media (max-width: 767px) {
	.ah-faq { font-size: 16.5px; }
	.ah-faq .ah-faq__q { padding: 18px 0; font-size: 1.04rem; }
	.ah-faq .ah-faq__ic { width: 28px; height: 28px; }
	.ah-faq .ah-faq__ask { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; }
	.ah-faq .ah-faq__img { width: 60px; height: 60px; }
	.ah-faq .ah-faq__text,
	.ah-faq .ah-faq__btn { grid-column: 1 / -1; }
	.ah-faq .ah-faq__btn { justify-self: stretch; justify-content: center; }
}