/* =============================================================
   Elite Pearl Charter — FAQ page
   Layers on top of faq.css: the accordion items themselves are
   unchanged, this adds the grouping, the jump list and the
   closing ask block.
   ============================================================= */

.epc-faqp {
	background: var(--epc-black);
	color: var(--epc-silver);
	border-top: 1px solid var(--epc-line-soft);
}

.epc-faqp__inner {
	width: 100%;
	max-width: var(--epc-container);
	margin-inline: auto;
	padding: 3rem var(--epc-gutter) 4rem;
}

@media (min-width: 768px) {
	.epc-faqp__inner {
		padding-block: 4rem 5.5rem;
	}
}

/* --- Jump list ------------------------------------------------------- */

/*
 * Six plain anchors. They stick under the header on a tall screen so the topic
 * you are in stays visible while you scroll a long group; below that the bar
 * would eat too much of the viewport, so it scrolls away with the page.
 */
.epc-faqp__jump {
	margin-bottom: 2.5rem;
}

@media (min-width: 1200px) and (min-height: 720px) {
	.epc-faqp__jump {
		position: sticky;
		top: var(--epc-header-h);
		z-index: 5;
		padding-block: 0.75rem;
		background: var(--epc-black);
	}

	/*
	 * A sticky bar hides whatever the jump link scrolled to, so the group below
	 * has to clear it as well as the header. This is a static guess at the bar's
	 * height, good for the two rows of chips it wraps to at these widths; faq.js
	 * measures the real height and overwrites it. The guess is what keeps the
	 * jump links usable with JavaScript off.
	 */
	:root {
		--epc-faqp-jump: 6.5rem;
	}
}

.epc-faqp__jump ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.epc-faqp__jump a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.55rem 0.9rem;
	font-size: clamp(0.75rem, 1.7vw, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: var(--epc-nav-idle);
	background: var(--epc-ink-950);
	border: 1px solid var(--epc-line-soft);
	border-radius: 999px;
	transition: color 320ms var(--epc-ease-soft),
		border-color 320ms var(--epc-ease-soft),
		background-color 320ms var(--epc-ease-soft);
}

.epc-faqp__jump a:hover,
.epc-faqp__jump a:focus-visible {
	color: var(--epc-white);
	background: var(--epc-ink-850);
	border-color: rgb(255 255 255 / 38%);
}

/*
 * :target follows the anchor the reader last jumped to, so the chip and the
 * group heading agree about where they are. No JavaScript involved.
 */
.epc-faqp__group:target .epc-faqp__title {
	text-decoration: underline;
	text-decoration-color: rgb(255 255 255 / 30%);
	text-underline-offset: 0.35em;
}

.epc-faqp__count {
	min-width: 1.5rem;
	padding: 0.1rem 0.4rem;
	font-size: 0.6875rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--epc-grey);
	background: var(--epc-wash);
	border-radius: 999px;
}

.epc-faqp__jump a:hover .epc-faqp__count,
.epc-faqp__jump a:focus-visible .epc-faqp__count {
	color: var(--epc-white);
}

/* --- Groups ----------------------------------------------------------- */

.epc-faqp__group {
	/* Clears the sticky header, and the jump bar too where that is sticky. */
	scroll-margin-top: calc(var(--epc-header-h) + var(--epc-faqp-jump, 0px) + 1rem);
}

.epc-faqp__group + .epc-faqp__group {
	margin-top: 3rem;
}

@media (min-width: 768px) {
	.epc-faqp__group + .epc-faqp__group {
		margin-top: 4rem;
	}
}

/*
 * Matches the width of the list below it. The single-column list is capped at
 * 60rem and centred, so the heading is too; once the list goes two-up and fills
 * the container, the heading has to follow or it sits indented from the cards
 * it introduces.
 */
.epc-faqp__head {
	max-width: 60rem;
	margin: 0 auto 1.5rem;
}

@media (min-width: 900px) {
	.epc-faqp__head {
		max-width: none;
	}
}

.epc-faqp__title {
	margin: 0;
	font-family: var(--epc-font-serif);
	font-size: clamp(1.25rem, 3.2vw, 1.875rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}

.epc-faqp__rule {
	display: block;
	width: 56px;
	height: 1px;
	margin: 0.9rem 0 0.9rem;
	background: linear-gradient(to right, rgb(255 255 255 / 70%), transparent);
}

.epc-faqp__text {
	max-width: 62ch;
	margin: 0;
	font-size: clamp(0.8125rem, 1.9vw, 0.9375rem);
	line-height: 1.85;
	color: var(--epc-grey);
	text-wrap: pretty;
}

/*
 * Two columns once there is room. A grid, not CSS columns: an accordion in a
 * multi-column flow reflows everything below it each time an answer opens, and
 * the page jumps under the reader.
 */
@media (min-width: 900px) {
	.epc-faqp__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: 0.75rem 1.25rem;
		max-width: none;
	}
}

/* --- Answers with inline formatting ------------------------------------ */

.epc-faqp .epc-faq__a-inner p strong,
.epc-faq__a-inner p strong {
	font-weight: 600;
	color: var(--epc-white);
}

/*
 * A few answers are <br> separated lists. Give the breaks room so they read as
 * lines rather than as a wrapped paragraph.
 */
.epc-faq__a-inner p br {
	line-height: 2.4;
}

/* --- Closing ask -------------------------------------------------------- */

.epc-faqp__ask {
	margin-top: 3.5rem;
	padding: 2rem var(--epc-gutter);
	text-align: center;
	background: var(--epc-gradient-panel);
	border: 1px solid var(--epc-line);
	border-radius: 16px;
}

@media (min-width: 768px) {
	.epc-faqp__ask {
		margin-top: 4.5rem;
		padding: 2.75rem 2rem;
	}
}

.epc-faqp__ask-title {
	margin: 0;
	font-family: var(--epc-font-serif);
	font-size: clamp(1.25rem, 3.4vw, 1.875rem);
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--epc-white);
}

.epc-faqp__ask-text {
	max-width: 52ch;
	margin: 0.9rem auto 1.75rem;
	font-size: clamp(0.8125rem, 1.9vw, 0.9375rem);
	line-height: 1.85;
	color: var(--epc-silver);
	text-wrap: pretty;
}

.epc-faqp__ask-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

@media (max-width: 479.98px) {
	.epc-faqp__ask-actions .epc-btn {
		flex: 1 1 100%;
	}
}