/**
 * Rozbaľovací zoznam častých otázok.
 *
 * Vlastný súbor, nie súčasť category.css: ten istý accordion sa vykresľuje
 * na kategóriách produktov aj na výpisoch služieb a tie dve stránky
 * načítavajú iné štýly. Pravidlá tu preto stoja raz a oba enqueue
 * si ich pýtajú pod rovnakým handle.
 *
 * Premenné sú tie isté, aké definuje category.css, ale s vlastnou náhradou:
 * na stránke služby sa category.css nenačíta a bez nej by orámovanie
 * aj farba otázky zostali prázdne.
 */

.hgl-faq {
	--hgl-faq-heading: var(--hgl-heading, var(--ast-global-color-0, #173f22));
	--hgl-faq-accent: var(--hgl-accent, var(--ast-global-color-1, #3e8e54));
	--hgl-faq-line: var(--hgl-line, rgba(23, 63, 34, 0.12));

	border-top: 1px solid var(--hgl-faq-line);
}

.hgl-faq__item {
	border-bottom: 1px solid var(--hgl-faq-line);
}

.hgl-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 0;
	color: var(--hgl-faq-heading);
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

.hgl-faq__question::-webkit-details-marker {
	display: none;
}

.hgl-faq__question::after {
	content: "";
	flex: 0 0 auto;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-0.15em, -0.15em);
	transition: transform 0.2s ease;
}

.hgl-faq__item[open] .hgl-faq__question::after {
	transform: rotate(-135deg) translate(-0.15em, -0.15em);
}

.hgl-faq__question:focus-visible {
	outline: 2px solid var(--hgl-faq-accent);
	outline-offset: 2px;
}

.hgl-faq__answer {
	padding-bottom: 1.25rem;
	line-height: 1.7;
}

.hgl-faq__answer > :last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.hgl-faq__question::after {
		transition: none;
	}
}