/*
--------------------------------------
Page FAQ — hero
--------------------------------------
*/

.faq-page-hero { padding-block: 3rem 1rem; }

.faq-page-hero .script { color: var(--sunny); font-size: 1.4rem; margin: 0; }

.faq-page-hero h1 {
	font-family: var(--font-display);
	font-size: 2.25rem;
	color: var(--forest);
	margin: 0.25rem 0 0;
}

/*
--------------------------------------
FAQ — mêmes règles que .shop-faq* dans shop-listing.css / product-page.css
(catalogue et fiche produit), dupliquées ici : chaque page charge son
propre bundle CSS (voir inc/enqueue-scripts.php, $css_by_slug).
--------------------------------------
*/

.shop-faq { padding-block: 2rem 4rem; }

.shop-faq__grid { display: grid; gap: 2.5rem; }

.shop-faq__intro h2 { font-family: var(--font-display); font-size: 1.75rem; color: var(--forest); margin: 0.25rem 0 1rem; }
.shop-faq__intro p.script { color: var(--sunny); font-size: 1.4rem; margin: 0; }
.shop-faq__intro > p:not(.script) { font-size: 0.9rem; line-height: 1.6; color: color-mix(in oklch, var(--foreground) 75%, transparent); margin-bottom: 1.25rem; }

.shop-faq__list { display: flex; flex-direction: column; }

.shop-faq__item {
	border-top: 1px solid color-mix(in oklch, var(--forest) 15%, transparent);
	padding-block: 1rem;
}

.shop-faq__item:last-child { border-bottom: 1px solid color-mix(in oklch, var(--forest) 15%, transparent); }

.shop-faq__item summary {
	font-family: var(--font-display);
	font-size: 1.05rem;
	color: var(--forest);
	cursor: pointer;
	list-style: none;
}

.shop-faq__item summary::-webkit-details-marker { display: none; }

.shop-faq__item summary::after {
	content: '+';
	float: right;
	font-size: 1.2rem;
}

.shop-faq__item[open] summary::after { content: '–'; }

.shop-faq__item p {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: color-mix(in oklch, var(--foreground) 75%, transparent);
}

@media (min-width: 1024px) {
	.shop-faq__grid { grid-template-columns: 1fr 1.4fr; gap: 4rem; }
}