/* =========================================================================
   faq.css — /faq/.

   Grouped disclosures on the left, one way out on the right. Every answer is
   closed by default: an open accordion of twelve answers is a wall of text,
   and the headings are the index a visitor actually scans.
   ========================================================================= */

.bedi-faq__head { margin-block: var(--bedi-space-7) var(--bedi-space-6); }

.bedi-faq__title {
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-3xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 var(--bedi-space-2);
}

.bedi-faq__lede { color: var(--bedi-ink-muted); margin: 0; }

.bedi-faq__grid {
	align-items: start;
	display: grid;
	gap: var(--bedi-space-7);
	grid-template-columns: minmax(0, 1fr);
	margin-block-end: var(--bedi-space-10);
}

@media (min-width: 62em) {
	.bedi-faq__grid { grid-template-columns: minmax(0, 1fr) 320px; }
}

.bedi-faq__group { margin-block-end: var(--bedi-space-7); }
.bedi-faq__group:last-child { margin-block-end: 0; }

.bedi-faq__group-title {
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-xl);
	font-weight: 700;
	margin: 0 0 var(--bedi-space-4);
}

.bedi-faq__list {
	border-block-start: var(--bedi-border-width) solid var(--bedi-rule);
}

.bedi-faq__item {
	border-block-end: var(--bedi-border-width) solid var(--bedi-rule);
}

.bedi-faq__q {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: var(--bedi-text-lg);
	font-weight: 500;
	gap: var(--bedi-space-4);
	justify-content: space-between;
	/* The UA marker cannot be positioned, so it goes and the mark below
	   replaces it. */
	list-style: none;
	padding-block: var(--bedi-space-4);
}

.bedi-faq__q::-webkit-details-marker { display: none; }

.bedi-faq__q:hover { color: var(--bedi-accent-strong); }

.bedi-faq__q:focus-visible {
	outline: var(--bedi-focus-width) solid var(--bedi-accent);
	outline-offset: 2px;
}

/*
 * A plus that becomes a minus. Two pseudo-bars on one element rather than a
 * swapped glyph, so the change is a rotation the browser can animate instead of
 * a character substitution it cannot.
 */
.bedi-faq__mark {
	block-size: 16px;
	flex: none;
	inline-size: 16px;
	position: relative;
}

.bedi-faq__mark::before,
.bedi-faq__mark::after {
	background-color: currentColor;
	content: "";
	inset-block-start: 50%;
	inset-inline-start: 0;
	position: absolute;
	block-size: 2px;
	inline-size: 16px;
	transform: translateY(-50%);
	transition: transform var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-faq__mark::after { transform: translateY(-50%) rotate(90deg); }

.bedi-faq__item[open] .bedi-faq__mark::after { transform: translateY(-50%) rotate(0deg); }

.bedi-faq__a {
	color: var(--bedi-ink-muted);
	line-height: 1.6;
	padding-block-end: var(--bedi-space-5);
	max-inline-size: 60ch;
}

.bedi-faq__a p { margin: 0 0 var(--bedi-space-3); }
.bedi-faq__a p:last-child { margin-block-end: 0; }

.bedi-faq__a ul {
	margin: 0 0 var(--bedi-space-3);
	padding-inline-start: var(--bedi-space-5);
}

.bedi-faq__a li { margin-block-end: var(--bedi-space-1); }

/* -------------------------------------------------------------------------
   The way out
   ---------------------------------------------------------------------- */

.bedi-faq__card {
	background-color: var(--bedi-surface-2);
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-xl);
	padding: var(--bedi-space-5);
}

@media (min-width: 62em) {
	.bedi-faq__card {
		position: sticky;
		inset-block-start: calc(var(--bedi-header-bar-h, 90px) + var(--bedi-space-4));
	}
}

.bedi-faq__card-title {
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-lg);
	font-weight: 700;
	margin: 0 0 var(--bedi-space-2);
}

.bedi-faq__card-text {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	margin: 0 0 var(--bedi-space-4);
}

.bedi-faq__card-phone {
	color: var(--bedi-accent-strong);
	display: block;
	font-size: var(--bedi-text-lg);
	font-weight: 700;
	margin-block-end: var(--bedi-space-4);
	text-decoration: none;
}

.bedi-faq__card-phone:hover { text-decoration: underline; }

.bedi-faq__card-cta {
	align-items: center;
	background-color: var(--bedi-accent);
	border-radius: var(--bedi-radius-pill);
	color: #fff;
	display: flex;
	font-size: var(--bedi-text-base);
	font-weight: 700;
	justify-content: center;
	min-block-size: 46px;
	text-decoration: none;
	transition: background-color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-faq__card-cta:hover { background-color: var(--bedi-accent-strong); color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.bedi-faq__mark::before,
	.bedi-faq__mark::after { transition: none; }
}