/**
 * FAQ page ("Často kladené otázky") — page-casto-kladene-otazky.php.
 *
 * Off-mockup page styled from DESIGN-SYSTEM.md §7: recycled .namieru-head for the
 * page head, generic card conventions (white surface, 1px border, soft radius,
 * hover lift) for the accordion, .surface-soft info panel for the norm overview.
 *
 * @package Bozpo_Custom
 */

/* ============================== Layout ==================================== */
.faq__wrap {
	max-width: 860px;
	padding-top: var(--space-8);
	padding-bottom: var(--space-46);
}

/* ============================ Intro panel ================================= */
/* The fixed "Prehľad zmien v normách" reference text, rendered as a document. */
.faq-intro {
	margin-bottom: var(--space-34);
	padding: var(--space-24) var(--space-24) var(--space-8);
	background: var(--surface-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-16);
}

.faq-intro__body {
	font-family: var(--font-body);
	font-size: var(--text-15);
	line-height: var(--leading-165);
	color: var(--c-ink-body);
}

.faq-intro__body h1,
.faq-intro__body h2,
.faq-intro__body h3,
.faq-intro__body h4 {
	margin: var(--space-24) 0 var(--space-12);
	font-family: var(--font-display);
	font-weight: 700;
	line-height: var(--leading-116);
	color: var(--color-text);
}

.faq-intro__body h1 {
	font-size: var(--text-24);
}

.faq-intro__body h2 {
	font-size: var(--text-21);
}

.faq-intro__body h3,
.faq-intro__body h4 {
	font-size: var(--text-18);
}

.faq-intro__body > *:first-child {
	margin-top: 0;
}

.faq-intro__body p {
	margin: 0 0 var(--space-14);
}

.faq-intro__body strong,
.faq-intro__body b {
	color: var(--color-text);
	font-weight: 700;
}

.faq-intro__body ul,
.faq-intro__body ol {
	margin: 0 0 var(--space-14) var(--space-20);
	padding: 0;
}

.faq-intro__body li {
	margin-bottom: var(--space-6);
}

.faq-intro__body a {
	color: var(--color-primary);
	text-decoration: underline;
}

/* ============================ Accordion ================================== */
.faq-list__title {
	margin: 0 0 var(--space-24);
	font-family: var(--font-display);
	font-size: var(--text-25);
	font-weight: 700;
	line-height: var(--leading-112);
	color: var(--color-text);
}

.faq-accordion {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.faq-item {
	background: var(--surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-12);
	transition: box-shadow .15s ease, border-color .15s ease;
}

.faq-item:hover {
	box-shadow: var(--shadow);
}

.faq-item__q {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.faq-item__trigger {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-16);
	width: 100%;
	margin: 0;
	padding: var(--space-18) var(--space-20);
	background: none;
	border: 0;
	border-radius: var(--radius-12);
	font-family: var(--font-display);
	font-size: var(--text-17);
	font-weight: 700;
	line-height: var(--leading-snug);
	color: var(--color-text);
	text-align: left;
	cursor: pointer;
	transition: color .15s ease;
}

.faq-item__trigger:hover {
	color: var(--color-primary);
}

.faq-item__trigger:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.faq-item__trigger[aria-expanded="true"] {
	color: var(--color-primary);
}

.faq-item__label {
	flex: 1 1 auto;
}

.faq-item__chevron {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: var(--space-2);
	color: var(--color-muted);
	transition: transform .2s ease, color .15s ease;
}

.faq-item__trigger:hover .faq-item__chevron,
.faq-item__trigger[aria-expanded="true"] .faq-item__chevron {
	color: var(--color-primary);
}

.faq-item__trigger[aria-expanded="true"] .faq-item__chevron {
	transform: rotate(180deg);
}

.faq-item__a {
	padding: 0 var(--space-20);
}

.faq-item__a-inner {
	padding: var(--space-4) 0 var(--space-20);
	border-top: 1px solid var(--color-border);
	font-family: var(--font-body);
	font-size: var(--text-15);
	line-height: var(--leading-165);
	color: var(--c-ink-body);
}

.faq-item__a-inner > *:first-child {
	margin-top: var(--space-16);
}

.faq-item__a-inner p {
	margin: 0 0 var(--space-12);
}

.faq-item__a-inner > *:last-child {
	margin-bottom: 0;
}

.faq-item__a-inner strong,
.faq-item__a-inner b {
	color: var(--color-text);
	font-weight: 700;
}

.faq-item__a-inner h3,
.faq-item__a-inner h4 {
	margin: var(--space-18) 0 var(--space-8);
	font-family: var(--font-display);
	font-size: var(--text-16-5);
	font-weight: 700;
	color: var(--color-text);
}

.faq-item__a-inner ul,
.faq-item__a-inner ol {
	margin: 0 0 var(--space-12) var(--space-20);
	padding: 0;
}

.faq-item__a-inner li {
	margin-bottom: var(--space-6);
}

.faq-item__a-inner a {
	color: var(--color-primary);
	text-decoration: underline;
}

/* Source line ("Zdroj: …") set in muted small type via a helper class. */
.faq-item__a-inner .faq-source {
	margin-top: var(--space-14);
	font-size: var(--text-13);
	color: var(--color-muted);
}

/* ============================ Desktop ==================================== */
@media (min-width: 981px) {
	.faq-list__title {
		font-size: var(--text-30);
	}

	.faq-item__trigger {
		padding: var(--space-20) var(--space-24);
		font-size: var(--text-18);
	}

	.faq-item__a {
		padding: 0 var(--space-24);
	}

	.faq-intro {
		padding: var(--space-30) var(--space-30) var(--space-14);
	}
}

/* ========================= Reduced motion ================================ */
@media (prefers-reduced-motion: reduce) {
	.faq-item,
	.faq-item__trigger,
	.faq-item__chevron {
		transition: none;
	}
}