/* ==========================================================================
   The questions accordion on the category pages
   (template-parts/categories/faqs.php, wording in inc/category-faqs.php).
   These are the same rules the Yoga Teacher Training page carries in
   assets/css/pages/categories/category-yoga-teacher-training.css, so every
   category page's accordion looks and behaves identically. Change both
   together.
   ========================================================================== */

/* Native <details>/<summary>, no JS needed. */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; }
.faq-item {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0 22px;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.faq-item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 18px 0; cursor: pointer; list-style: none;
	font-weight: 600; color: var(--color-primary-dark);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
	flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
	background: var(--color-bg-alt); display: flex; align-items: center; justify-content: center;
	font-size: 1.1rem; line-height: 1; color: var(--color-secondary);
	transition: transform var(--transition), background var(--transition), color var(--transition);
}
/* Hover/open feedback lives on the row people actually interact with
   (the summary), not the whole card — the icon flips and tints, the
   card border warms slightly. Kept subtle since an accordion is used
   repeatedly on the page; a loud hover here would get tiring fast. */
.faq-item:hover { border-color: var(--color-secondary); }
.faq-item summary:hover .faq-icon,
.faq-item summary:focus-visible .faq-icon { background: var(--color-secondary); color: #fff; }
.faq-item summary:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 4px; border-radius: var(--radius-sm); }
.faq-item[open] .faq-icon { transform: rotate(45deg); background: var(--color-secondary); color: #fff; }
.faq-item p { color: var(--color-text-light); padding-bottom: 20px; margin: 0; }
.faq-item p:has(+ .faq-points) { padding-bottom: 12px; }

/* The points inside an answer. A document writes these one per line, so
   they are shown as a list rather than run together into a sentence. Two
   columns once there is room, because some answers list a dozen topics. */
.faq-points {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px 24px;
}
/* A long list of single words reads better in two columns; a short list of
   full sentences does not, so only the long ones are split. */
.faq-points--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faq-points li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--color-text-light);
	font-size: 0.96rem;
	line-height: 1.5;
}
.faq-points svg {
	width: 17px; height: 17px; flex-shrink: 0;
	color: var(--color-secondary); margin-top: 3px;
}
@media (max-width: 640px) {
	.faq-points--split { grid-template-columns: 1fr; }
}