/**
 * FAQ page (page-templates/faq.php) and topic archives
 * (taxonomy-faq_topic.php).
 *
 * Figma: desktop/faq/1 1547:39642 and desktop/faq/2 1560:40918.
 * Everything sits in the 720 column. The page's blocks are 164px apart
 * (sections.css), except:
 *   - the hero is 64px under the nav, and its top area ends 32px below it,
 *     so the first block is 196px under the hero text;
 *   - on a topic page the list starts 76px under the title (32 + 44).
 * Hero: header/2XL title, body/M grey subtitle 8px apart, 16px to a 720px pill
 * search. Section headings are header/XL, 24px above what they head.
 * Topics: 2 columns of background-purple cards, 16px apart, radius 16, 20/16
 * padding, a 32px icon 8px above a header/2XS label.
 * Useful Articles: the compact card/blogpost in a row that scrolls, 16px
 * apart (the frame's slider dots are not built).
 * Mobile, from mobile/faq/1 1234:20964 and mobile/faq/2 1248:19978: blocks
 * 84px apart, the hero 16px under the nav with header/L and a body/XS
 * subtitle, 20px under the search, topic cards 12px apart, and a topic list
 * 24px after the hero.
 */

/* The FAQ frames space mobile blocks 84px apart, as Article Detail and
 * Insights do. Scoped here rather than changed site-wide (docs/05). */
.faq-page {
	--section-gap: 5.25rem; /* 84 */
}

/* 16px under the nav bar on mobile. The frame's 122px includes a 50px iPhone
 * status bar that a web page does not have. */
.sections.faq-page {
	padding-top: 1rem;
}

/* slider 1547:39869: 8px dots on 16px centres, 24px under the row. */
.scroll-dots {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
}

.scroll-dots[hidden] {
	display: none;
}

.scroll-dots__dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	cursor: pointer;
	background-color: var(--color-border-light);
	border: 0;
	border-radius: 50%;
}

.scroll-dots__dot[aria-current="true"] {
	background-color: var(--color-secondary);
}

.faq-page__column {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 45rem; /* 720 */
	margin-inline: auto;
}

.faq-page__heading {
	font: var(--type-header-l);
	color: var(--color-text-dark);
}

.faq-page__empty {
	font: var(--type-body-s);
	color: var(--color-text-grey);
}

/* ------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------- */

/* The grey top area runs from the top of the page, behind the absolutely
 * positioned header, to 20px under the hero (32 on desktop): pulled up through
 * the header and the sections' top padding, as hero_simple does. */
.faq-hero {
	padding-block: calc(var(--site-header-height) + 1rem) 1.25rem; /* 16 under the nav, 20 under the search */
	margin-top: calc(-1 * (var(--site-header-height) + 1rem));
	background-color: var(--color-background-grey);
}

.faq-hero__inner {
	gap: 1rem;
}

.faq-hero__text {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.faq-hero__title {
	font: var(--type-header-l);
	color: var(--color-text-dark);
}

.faq-hero__subtitle {
	font: var(--type-body-xs);
	color: var(--color-text-grey);
}

/* searchbox 1224:27684 on the Figma search-field pill. */
.faq-search {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	height: 2.75rem; /* 44 */
	padding-inline: 1rem;
	background-color: var(--color-background-grey);
	border: 1px solid var(--color-border-light);
	border-radius: 6.25rem;
}

.faq-search:focus-within {
	border-color: var(--color-primary);
}

.faq-search__icon,
.faq-search__clear {
	display: inline-flex;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	color: var(--color-text-grey);
}

.faq-search__clear {
	color: var(--color-text-dark);
}

.faq-search__icon svg,
.faq-search__clear svg {
	width: 100%;
	height: 100%;
}

.faq-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	font: var(--type-subtitle-l);
	color: var(--color-text-dark);
	background: none;
	border: 0;
	outline: none;
}

.faq-search__input::placeholder {
	color: var(--color-text-grey);
}

/* A topic page: the list follows the hero closely, 24px after its top area
 * (44px on desktop), instead of a full section gap. */
.faq-page--topic .faq-hero + .faq-topic-list {
	margin-top: 1.5rem;
}

/* ------------------------------------------------------------------
 * Topics
 * ---------------------------------------------------------------- */

.faq-topics__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem; /* 12 */
	padding: 0;
	margin: 0;
	list-style: none;
}

.faq-topic {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 1.25rem 1rem; /* 20 16 */
	color: var(--color-text-dark);
	text-align: center;
	text-decoration: none;
	background-color: var(--color-background-purple);
	border-radius: var(--radius-16);
	transition: box-shadow 0.15s ease;
}

/* Not in the design. An inset shadow, so the card stays 101 tall. */
.faq-topic:hover {
	box-shadow: inset 0 0 0 1px var(--color-dark-purple);
}

.faq-topic__icon {
	display: inline-flex;
	width: 2rem; /* 32 */
	height: 2rem;
	color: var(--color-primary);
}

.faq-topic__icon svg {
	width: 100%;
	height: 100%;
}

.faq-topic__name {
	font: var(--type-header-2xs);
}

/* ------------------------------------------------------------------
 * Useful Articles
 * ---------------------------------------------------------------- */

.faq-articles__row {
	display: flex;
	gap: 1rem;
	padding: 0 var(--gutter-mobile);
	margin: 0 calc(-1 * var(--gutter-mobile));
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.faq-articles__row::-webkit-scrollbar {
	display: none;
}

.faq-articles__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

@media (min-width: 64rem) {
	.faq-page {
		--section-gap: 10.25rem; /* 164 */
	}

	.sections.faq-page {
		padding-top: 2rem;
	}

	.faq-hero {
		padding-block: calc(var(--site-header-height) + 4rem) 2rem; /* 64 under the nav, 32 under the search */
		margin-top: calc(-1 * (var(--site-header-height) + 2rem));
	}

	.faq-page__heading {
		font: var(--type-header-xl);
	}

	.faq-hero__title {
		font: var(--type-header-2xl);
	}

	.faq-hero__subtitle {
		font: var(--type-body-m);
	}

	.faq-page--topic .faq-hero + .faq-topic-list {
		margin-top: 2.75rem; /* 44 */
	}

	.faq-topics__grid {
		gap: 1rem;
	}

	.faq-articles__row {
		padding: 0;
		margin: 0;
	}
}