/* =========================================================
 * Smart Punch - FAQ page
 * ========================================================= */

.faq-hero{
	padding:50px 20px 20px;
}

.faq-hero .section-heading{
	margin-bottom:0;
}

.faq-section{
	padding-top:30px;
}

.faq-section .section-inner{
	max-width:900px;
}

.faq-group + .faq-group{
	margin-top:64px;
}

.faq-group-title{
	margin:0 0 20px;
	color:var(--text);
	font-size:24px;
	font-weight:900;
}

.faq-list{
	display:grid;
	gap:14px;
}

/* Accordion */
.faq-item{
	overflow:hidden;
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--radius-medium);
	box-shadow:var(--shadow-small);
	transition:
		border-color .18s ease,
		box-shadow .18s ease;
}

.faq-item[open]{
	border-color:color-mix(in srgb,var(--brand) 24%,var(--line));
	box-shadow:var(--shadow-medium);
}

.faq-item summary{
	display:grid;
	min-height:78px;
	padding:18px 22px;
	grid-template-columns:38px minmax(0,1fr) 28px;
	gap:14px;
	align-items:center;
	cursor:pointer;
	list-style:none;
}

.faq-item summary::-webkit-details-marker{
	display:none;
}

.faq-q,
.faq-a{
	display:flex;
	width:34px;
	height:34px;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	font-size:15px;
	font-weight:900;
}

.faq-q{
	background:var(--brand);
	color:#fff;
}

.faq-a{
	flex:0 0 34px;
	background:color-mix(in srgb,var(--accent) 12%,#fff);
	color:var(--accent-dark);
}

.faq-question{
	color:var(--text);
	font-size:17px;
	font-weight:800;
	line-height:1.6;
}

.faq-toggle{
	color:var(--brand);
	font-size:20px;
	text-align:center;
	transition:transform .2s ease;
}

.faq-item[open] .faq-toggle{
	transform:rotate(45deg);
}

/* Answers */
.faq-answer{
	display:flex;
	padding:0 22px 22px 74px;
	gap:14px;
	align-items:flex-start;
}

.faq-answer p{
	margin:4px 0 0;
	color:var(--muted);
	font-size:15px;
	line-height:1.9;
}

.faq-answer a{
	color:var(--brand);
	font-weight:800;
	text-decoration:underline;
	text-underline-offset:3px;
}

@media(max-width:640px){
	.faq-group + .faq-group{
		margin-top:48px;
	}

	.faq-group-title{
		font-size:21px;
	}

	.faq-item summary{
		min-height:70px;
		padding:16px;
		grid-template-columns:34px minmax(0,1fr) 24px;
		gap:10px;
	}

	.faq-q,
	.faq-a{
		width:32px;
		height:32px;
		flex-basis:32px;
	}

	.faq-question{
		font-size:15px;
	}

	.faq-answer{
		padding:0 16px 18px 60px;
		gap:10px;
	}

	.faq-answer p{
		font-size:14px;
	}
}