/**
 * Funkciók aloldal — Header (EYEBROW_HERO) + statikus mini-toc
 *
 * Page-hero kompakt változat: eyebrow + H1 + sub. A header alatt egy
 * statikus anchor-link sor (mini-toc) — NEM sticky, NEM JS, csak
 * flexbox + hover. Későbbi iteráció lehet sticky upgrade.
 *
 * Forrás:
 *   - docs/subpages/funkciok.md 1. szekció (Header + mini-toc)
 *   - SECTION_COMPOSITIONS.md 15.2 (EYEBROW_HERO + statikus anchor-link sor)
 *   - SECTION_COMPOSITIONS.md 15.7 (EYEBROW_HERO definíció)
 */

.funkciok-header {
	padding: var(--spacing-section-mobile) var(--container-padding-mobile) 0;
	background-color: var(--color-background);
}

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

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

.funkciok-header__container {
	max-width: var(--container-max-width);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	align-items: flex-start;
}

.funkciok-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;
}

.funkciok-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;
}

/* ==========================================================================
   Mini-toc — statikus anchor-link sor (flexbox, NEM sticky)
   ========================================================================== */

.funkciok-toc {
	margin-top: var(--spacing-sm);
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	padding: 16px;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

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

.funkciok-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;
}

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

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

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

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

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

.funkciok-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);
}

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

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