/**
 * "FAQ" page template — CSS-only accordion styling.
 * ---------------------------------------------------------------------------
 * Only loaded on pages using template-pages/template-faq.php. The accordion
 * itself is native <details>/<summary> so it works with zero JS; this file
 * just makes it look intentional (custom chevron instead of the default
 * marker, a rotate animation on open, and the active/hover states for the
 * category pills and CTA). faq-page.js only adds the optional
 * expand/collapse-all button and the live search/filter behaviour.
 */

/* A handful of one-off utilities this template needs (an in-between
   max-width, asymmetric input padding for the search icon, a dashed
   border, a focus ring, and disabling text selection on the accordion
   trigger) aren't present in the purged Tailwind build used by the rest
   of the theme, since that build only includes classes already scanned
   from existing templates. Rather than risk them silently doing nothing,
   they're plain CSS here instead. */
.openpress-faq-container {
	max-width: 900px;
}
.openpress-faq-search-input {
	padding-left: 2.75rem;
	padding-right: 1rem;
}
.openpress-faq-search-input:focus {
	outline: none;
	box-shadow: 0 0 0 3px hsl(var(--accent) / 0.15);
}
.openpress-faq-empty-box {
	border-style: dashed;
}
.openpress-faq-question {
	user-select: none;
}

/* Basic paragraph/link styling for the intro area, since the compiled
   Tailwind bundle doesn't include the typography plugin. */
.openpress-faq-intro p {
	margin-bottom: 1em;
}
.openpress-faq-intro a {
	color: hsl(var(--accent));
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Remove the default disclosure triangle across browsers. */
.openpress-faq-item > summary.openpress-faq-question {
	list-style: none;
}
.openpress-faq-item > summary.openpress-faq-question::-webkit-details-marker {
	display: none;
}

.openpress-faq-item {
	transition: border-color 0.15s ease;
}
.openpress-faq-item[open] {
	border-color: hsl(var(--accent) / 0.4);
}

.openpress-faq-question:hover {
	background: hsl(var(--secondary) / 0.5);
}

.openpress-faq-chevron {
	transition: transform 0.2s ease;
}
.openpress-faq-item[open] .openpress-faq-chevron {
	transform: rotate(180deg);
	color: hsl(var(--accent));
}

/* Answer fade/slide-in — details has no native transition, so this just
   softens the pop-in rather than trying to animate height. */
.openpress-faq-answer {
	animation: openpress-faq-answer-in 0.15s ease;
}
@keyframes openpress-faq-answer-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

.openpress-faq-answer a {
	color: hsl(var(--accent));
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Category pills */
.openpress-faq-filter-pill {
	background: hsl(var(--card));
	color: hsl(var(--muted-foreground));
	cursor: pointer;
	transition: all 0.15s ease;
}
.openpress-faq-filter-pill:hover {
	border-color: hsl(var(--accent));
	color: hsl(var(--foreground));
}
.openpress-faq-filter-pill.is-active {
	background: hsl(var(--accent));
	border-color: hsl(var(--accent));
	color: hsl(var(--accent-foreground));
}

/* JS toggles this on items that don't match the current search/category
   filter — kept in the CSS file (rather than relying on Tailwind's
   `hidden` utility, which may not exist in the purged build) so this
   template's filtering is self-contained. */
.openpress-faq-item.is-faq-hidden {
	display: none;
}