/**
 * FAQ ("Before You Order") — pre-purchase reassurance accordion, sitting
 * near the bottom of the homepage. Plain <details>/<summary>, no JS.
 */

.zozia-faq {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-left: auto;
	margin-right: auto;
}

.zozia-faq__title {
	margin: 0 0 var(--wp--preset--spacing--sm);
	text-align: center;
}

.zozia-faq__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 720px;
	margin: 0 auto;
}

.zozia-faq__item {
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface);
	padding: 14px 18px;
}

.zozia-faq__item[open] {
	border-color: var(--wp--preset--color--primary);
}

.zozia-faq__question {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	list-style: none;
}

/* Custom chevron instead of the browser's default disclosure triangle,
   so it matches the icon-driven look of the rest of the site. */
.zozia-faq__question::-webkit-details-marker {
	display: none;
}

.zozia-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.zozia-faq__question::after {
	content: "+";
	flex-shrink: 0;
	font-size: 18px;
	font-weight: 400;
	color: var(--wp--preset--color--primary);
}

.zozia-faq__item[open] > .zozia-faq__question::after {
	content: "\2212"; /* minus sign */
}

.zozia-faq__answer {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.zozia-faq__answer p {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.zozia-faq__link {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.zozia-faq__link:hover {
	text-decoration: underline;
}

@media (max-width: 782px) {
	.zozia-faq {
		padding-left: 0;
		padding-right: 0;
	}
}