/**
 * GYIK aloldal — kategória-accordion (ACCORDION_PANEL × 4)
 *
 * Egy kategória = egy szekció: H2 + accordion-elemek közös inner panel keretben.
 * 4 kategória egymás után, váltakozó háttérrel (Fehér / Halvány szürke / Fehér /
 * Halvány szürke). Kategóriák között nagy függőleges margin, nincs vízszintes
 * vonal — a tipográfia (H2) elég vizuális elválasztó.
 *
 * Csak egy accordion lehet nyitva egyszerre (a JS oldja meg, lásd
 * `gyik-category.js`).
 *
 * Forrás:
 *   - docs/subpages/gyik.md 2-5. szekció (copy)
 *   - SECTION_COMPOSITIONS.md 15.5 (kompozíciós tábla)
 *   - DESIGN_GUIDELINES.md chevron ikonok (Regular)
 */

/* ==========================================================================
   Wrapper + container
   ========================================================================== */

.gyik-category {
	padding: var(--spacing-section-mobile) var(--container-padding-mobile);
	background-color: var(--color-background);
}

@media (min-width: 768px) {
	.gyik-category {
		padding: var(--spacing-section-tablet) var(--container-padding-tablet);
	}
}

@media (min-width: 1200px) {
	.gyik-category {
		padding: var(--spacing-section-desktop) var(--container-padding-desktop);
	}
}

/* ---- Halvány szürke variáns (váltakozó háttérhez) ---- */
.gyik-category--alt {
	background-color: var(--color-background-alt);
}

.gyik-category__container {
	max-width: 820px;
	margin: 0 auto;
	scroll-margin-top: 96px; /* sticky header alatti landing margin az anchor-ugrásnál */
}

/* ==========================================================================
   Kategória-fejléc — H2 + opcionális sub
   ========================================================================== */

.gyik-category__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 32px;
}

@media (min-width: 1200px) {
	.gyik-category__header {
		margin-bottom: 40px;
	}
}

.gyik-category__title {
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	font-weight: var(--fw-black);
	color: var(--color-text);
	letter-spacing: -0.02em;
	margin: 0;
}

/* ==========================================================================
   Inner panel — közös kártya a kérdésekhez
   ========================================================================== */

.gyik-category__panel {
	background-color: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-panel);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

/* ==========================================================================
   Accordion item — natív <details>
   ========================================================================== */

.gyik-category__item {
	border-bottom: 1px solid var(--color-border);
}

.gyik-category__item:last-child {
	border-bottom: none;
}

.gyik-category__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	cursor: pointer;
	list-style: none;
	transition: background-color var(--transition-base);
}

@media (min-width: 768px) {
	.gyik-category__summary {
		padding: 24px 28px;
	}
}

/* Chrome/Safari alap marker eltüntetése */
.gyik-category__summary::-webkit-details-marker {
	display: none;
}

.gyik-category__summary:hover {
	background-color: var(--color-background-alt);
}

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

.gyik-category__question {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	flex: 1;
}

.gyik-category__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--color-primary-light);
	color: var(--color-text-muted);
	font-size: 14px;
	flex-shrink: 0;
	transition: transform var(--transition-base), background-color var(--transition-base), color var(--transition-base);
}

.gyik-category__item[open] .gyik-category__chevron {
	transform: rotate(180deg);
	background-color: var(--color-primary);
	color: #ffffff;
}

.gyik-category__answer {
	padding: 0 24px 24px;
	font-size: var(--fs-body-md);
	line-height: var(--lh-body-md);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	margin: 0;
}

@media (min-width: 768px) {
	.gyik-category__answer {
		padding: 0 28px 28px;
	}
}

.gyik-category__answer a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-base);
}

.gyik-category__answer a:hover {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

/* ==========================================================================
   GYIK aloldal header (EYEBROW_HERO) + záró CTA (CTA_CENTERED)
   — saját szekció-osztályok, mert csak ezen az aloldalon élnek
   ========================================================================== */

/* A header padding-bottom-ja csökkentett, hogy a TOC-szekció ne legyen túl
   messze a page title-tól. A „normal" --spacing-section-* csak a top-on
   marad — desktop 104px → 48px (--spacing-xl) bottom; tablet és mobil
   arányosan kisebb. A nav alatti gap (TOC → első kategória) az első
   kategória saját top padding-ja (--spacing-section-*) adja. */
.gyik-page-header {
	padding: var(--spacing-section-mobile) var(--container-padding-mobile) var(--spacing-lg);
	background-color: var(--color-background);
}

@media (min-width: 768px) {
	.gyik-page-header {
		padding: var(--spacing-section-tablet) var(--container-padding-tablet) var(--spacing-lg);
	}
}

@media (min-width: 1200px) {
	.gyik-page-header {
		padding: var(--spacing-section-desktop) var(--container-padding-desktop) var(--spacing-xl);
	}
}

.gyik-page-header__container {
	max-width: 720px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.gyik-page-header__title {
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	font-weight: var(--fw-black);
	color: var(--color-text);
	letter-spacing: -0.02em;
	margin: 0;
}

.gyik-page-header__subtitle {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	margin: 0;
	max-width: 60ch;
}

.gyik-page-header__subtitle a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-base);
}

.gyik-page-header__subtitle a:hover {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

/* ==========================================================================
   Mini-toc — saját szekció a header alatt (NEM sticky)
   Kompozíció-azonos a `funkciok-toc`-kal (subpage-konvenció), de itt külön
   szekcióban él, mert a header 720px-es container-jébe nem fér be 4 hosszú
   kategória-cím egy sorba. Itt a `--container-max-width` (1200px) érvényes,
   ahogyan a többi „normál" szekcióban is.
   ========================================================================== */

.gyik-toc-section {
	padding: 0 var(--container-padding-mobile);
	background-color: var(--color-background);
}

@media (min-width: 768px) {
	.gyik-toc-section {
		padding: 0 var(--container-padding-tablet);
	}
}

@media (min-width: 1200px) {
	.gyik-toc-section {
		padding: 0 var(--container-padding-desktop);
	}
}

.gyik-toc-section__container {
	max-width: var(--container-max-width);
	margin: 0 auto;
}

.gyik-toc {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 16px;
	padding: 16px 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

@media (min-width: 768px) {
	.gyik-toc {
		gap: 8px 24px;
		padding: 18px 0;
	}
}

.gyik-toc__label {
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	font-weight: var(--fw-bold);
	color: var(--color-text-muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-right: 8px;
	align-self: center;
}

.gyik-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px 16px;
}

@media (min-width: 768px) {
	.gyik-toc__list {
		gap: 4px 24px;
	}
}

.gyik-toc__item {
	display: inline-flex;
	align-items: center;
}

.gyik-toc__item + .gyik-toc__item::before {
	content: "·";
	color: var(--color-border);
	margin-right: 16px;
	font-weight: var(--fw-bold);
}

@media (min-width: 768px) {
	.gyik-toc__item + .gyik-toc__item::before {
		margin-right: 24px;
	}
}

.gyik-toc__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-body-md);
	line-height: var(--lh-body-md);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--transition-base);
}

.gyik-toc__link:hover,
.gyik-toc__link:focus-visible {
	color: var(--color-primary);
}

.gyik-toc__link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
	border-radius: 4px;
}

/* A korábbi `.gyik-page-cta` (CTA_CENTERED) szabályok eltávolítva 2026-04-28 —
   minden aloldal záró CTA-ja az egységes `subpage-cta` template-part-ot
   használja (PROMO_SPLIT_BLUE_FULLWIDTH banner). Lásd
   `template-parts/sections/subpage-cta.php` fejléc-kommentjét. */

/* A GYIK oldalon a 4. (utolsó) kategória `.gyik-category--alt` halvány szürke
   háttérrel megy, az utána következő `.subpage-cta` viszont fehér háttérrel.
   A `.subpage-cta` alapértelmezetten `padding-top: 0` (a previous szekció
   bottom-padding-je adná a teret), de itt a vizuális ritmushoz külön
   top-padding kell, hogy a kék banner ne ragadjon közvetlenül a szürke
   szekció aljához. Csak a GYIK aloldalra szelektív (más aloldalakon nincs
   `.gyik-category--alt` a TOC után). */
.gyik-category--alt + .subpage-cta {
	padding-top: var(--spacing-section-mobile);
}

@media (min-width: 768px) {
	.gyik-category--alt + .subpage-cta {
		padding-top: var(--spacing-section-tablet);
	}
}

@media (min-width: 1200px) {
	.gyik-category--alt + .subpage-cta {
		padding-top: var(--spacing-section-desktop);
	}
}