/*
 * Camp FAQ.
 *
 * Colors and type come from the theme's page kit tokens (--ca-kit-*), like
 * the schedule, so a page palette recolors the FAQ. Each has a fallback.
 * Questions are plain <details>, so they open and close without any script.
 */

.camp-faq {
	--cf-ink: var(--ca-kit-ink, #2a1f16);
	--cf-muted: var(--ca-kit-ink-muted, #5c3d28);
	--cf-heading: var(--ca-kit-heading, #1a4a2e);
	--cf-accent: var(--ca-kit-btn-secondary, #2f4f3a);
	--cf-on-accent: var(--ca-kit-on-btn-secondary, #ffffff);
	--cf-card: var(--ca-kit-card, #ffffff);
	--cf-border: var(--ca-kit-border, #d5d8dc);
	--cf-chip-border: var(--ca-kit-border-strong, #b8ae9e);
	--cf-focus: var(--ca-focus-on-light, #1a4a2e);
	--cf-heading-font: "Roboto Slab", Georgia, serif;

	color: var(--cf-ink);
	font-size: 16px;
	line-height: 1.5;
}

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

.camp-faq :focus-visible {
	outline: 3px solid var(--cf-focus);
	outline-offset: 2px;
}

.cf-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.camp-faq .cf-title {
	margin: 0 0 16px;
	color: var(--cf-heading);
	font-family: var(--cf-heading-font);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	line-height: 1.2;
}

/* Search and chips */
.cf-tools {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 12px;
}

.cf-search input {
	width: 100%;
	max-width: 520px;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid var(--cf-chip-border);
	border-radius: 8px;
	background: var(--cf-card);
	color: var(--cf-ink);
	font: inherit;
}

.cf-search input:focus {
	border-color: var(--cf-focus);
	outline: 2px solid var(--cf-focus);
	outline-offset: 0;
}

.cf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.camp-faq .cf-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--cf-chip-border);
	border-radius: 999px;
	background: var(--cf-card);
	color: var(--cf-ink);
	font: inherit;
	font-size: 0.9rem;
	line-height: 1.2;
	cursor: pointer;
}

.camp-faq .cf-chip:hover {
	border-color: var(--cf-accent);
}

.camp-faq .cf-chip[aria-pressed="true"] {
	border-color: var(--cf-accent);
	background: var(--cf-accent);
	color: var(--cf-on-accent);
}

.camp-faq .cf-chip[hidden] {
	display: none;
}

.cf-count {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	opacity: 0.8;
}

.cf-status {
	margin: 0 0 8px;
	color: var(--cf-muted);
	font-size: 0.9rem;
}

/*
 * On a phone the topics are one row that scrolls sideways, so the first question isn't pushed
 * below the screen. faq.js sets data-fade to start, end or both, and that edge fades out to show
 * there's more. Programs stay wrapped: there are only a few.
 */
@media (max-width: 600px) {
	.camp-faq .cf-chips--topics {
		flex-wrap: nowrap;
		/* Room for the focus outline inside the scrolling row. */
		margin: -6px;
		padding: 6px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-padding-inline: 48px;
		scrollbar-width: thin;
	}

	.camp-faq .cf-chips--topics .cf-chip {
		flex: none;
		white-space: nowrap;
	}

	.camp-faq .cf-chips--topics[data-fade="end"] {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
	}

	.camp-faq .cf-chips--topics[data-fade="start"] {
		-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
		mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
	}

	.camp-faq .cf-chips--topics[data-fade="both"] {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
		mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
	}
}

@media (max-width: 600px) and (pointer: coarse) {
	.camp-faq .cf-chips--topics {
		scrollbar-width: none;
	}

	.camp-faq .cf-chips--topics::-webkit-scrollbar {
		display: none;
	}
}

/* Questions */
.cf-list {
	border-top: 1px solid var(--cf-border);
}

.cf-item {
	border-bottom: 1px solid var(--cf-border);
}

.cf-item[hidden] {
	display: none;
}

.camp-faq .cf-q {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	justify-content: space-between;
	padding: 14px 4px;
	color: var(--cf-ink);
	font-weight: 500;
	list-style: none;
	cursor: pointer;
	scroll-margin-top: 96px;
}

.camp-faq .cf-q::-webkit-details-marker {
	display: none;
}

/* A plus that turns into a minus. */
.camp-faq .cf-q::after {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	margin-top: 5px;
	background:
		linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
	color: var(--cf-accent);
}

.cf-item[open] > .cf-q::after {
	background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat;
}

.camp-faq .cf-q:hover {
	color: var(--cf-heading);
}

.cf-item {
	scroll-margin-top: 96px;
}

.cf-a {
	padding: 0 4px 16px;
	max-width: 72ch;
}

.cf-a > :first-child {
	margin-top: 0;
}

.cf-a p,
.cf-a ul,
.cf-a ol {
	margin: 0 0 12px;
}

.cf-a a {
	color: var(--cf-heading);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.camp-faq .cf-link {
	margin: 4px 0 0;
	font-size: 0.85rem;
}

.camp-faq .cf-link a {
	color: var(--cf-muted);
}

.cf-empty {
	margin: 16px 0;
	color: var(--cf-muted);
}

.cf-elsewhere {
	margin: 0 0 12px;
}

.cf-elsewhere[hidden] {
	display: none;
}

/* Looks like a chip, so it reads as the same kind of control as All programs. */
.camp-faq .cf-show-all {
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--cf-chip-border);
	border-radius: 999px;
	background: var(--cf-card);
	color: var(--cf-ink);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.camp-faq .cf-show-all:hover {
	border-color: var(--cf-accent);
}

.cf-empty[hidden] {
	display: none;
}

@media print {
	.cf-tools,
	.cf-status,
	.cf-elsewhere,
	.cf-link {
		display: none;
	}

	.cf-item[hidden] {
		display: none;
	}
}