/**
 * TPJC FAQs page -- extends tpjc-homepage.css (see the note at the top
 * of tpjc-availability.css). Adds the grouped, collapsible accordion
 * layout on top of the shared .tpjc-faq q/a type rules already defined
 * there (re-used inside each <details> here).
 */

.tpjc-faqpage {
	margin-top: 40px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.tpjc-faqgroup__title {
	font-size: 24px;
	font-weight: 400;
	margin-bottom: 4px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}

.tpjc-faqacc { display: flex; flex-direction: column; }

.tpjc-faqacc__item {
	border-bottom: 1px solid var(--line-soft);
	padding: 4px 0;
}

.tpjc-faqacc__item summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 0;
	cursor: pointer;
}
.tpjc-faqacc__item summary::-webkit-details-marker { display: none; }

.tpjc-faqacc__item summary .q {
	font-family: var(--disp);
	font-size: 17px;
	font-weight: 400;
	color: var(--ink);
}

.tpjc-faqacc__icon {
	flex: none;
	position: relative;
	width: 18px;
	height: 18px;
}
.tpjc-faqacc__icon::before,
.tpjc-faqacc__icon::after {
	content: "";
	position: absolute;
	background: var(--bronze);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.tpjc-faqacc__icon::before { width: 14px; height: 2px; }
.tpjc-faqacc__icon::after { width: 2px; height: 14px; transition: transform .15s ease; }
.tpjc-faqacc__item[open] .tpjc-faqacc__icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }

.tpjc-faqacc__item .a {
	padding-bottom: 18px;
	max-width: 640px;
}