html {
	scroll-padding-top: calc(var(--navbar-height, 56px) + 0.3rem);
}

.nowrap { white-space: nowrap; }

#about-layout-centered {
  display: flex;
  justify-content: center;  /* centers children horizontally */
  align-items: center;      /* centers children vertically if needed */
  text-align: center;       /* fallback for text nodes inside flex items */
  margin: 30px auto 20px auto; /* same top margin as heading-common's old 30px */
}

#about-top {
    margin-top: 20px;
}

#about-top .about-h3 {
	font-size: 1.3125rem;
	margin: 0;
}
#about-top .about-h4 {
	font-size: 1.1875rem;
	margin: 0;
}

.about-h3 .subheading {
    display: block;
	text-align: left;
	margin: 0.70rem 0 0.35rem 0;
    font-size: inherit;
    font-weight: 500;
    color: #333;
	font-style: italic;
}

.about-h4 .subheading {
	display: block;
	text-align: left;
	margin: 0.45rem 0 0.25rem 0;
	font-size: inherit;
	font-weight: 500;
	color: #211542;
	font-style: italic;
}

/* smaller date inside subheading */
.subheading .subheading-meta {
	font-size: 0.85em;
	font-weight: 500;
	font-style: normal;
	color: inherit;
	margin-left: 0.45rem;
	white-space: nowrap;
}

#about-top .szotartitle {
	text-align: left;
	font-size: 1.4375rem;
	font-weight: 700;
	line-height: 1.35;
	margin: 0.90rem 0 0.45rem 0;
}

/* About page spacing + anchor offsets */
.page-about #navbar .navbar-brand > small > a.active {
  color: #fff;              /* active highlight */
  background: transparent;  /* no black block */
  font-weight: inherit;     /* no “fatter” look */
  text-decoration: none;
}

/* About page spacing + anchor offsets */
.about-section {
	margin: 1.75rem 0 2.25rem 0;
}

.page-about #about-top .about-row > .col-12.col-md {
	padding-right: 0.75rem;
}

.about-section p:not(.about-cookie-intro),
.about-section li,
.about-section figcaption,
.cookie-banner__text p {
	text-align: justify;
	hyphens: auto;
	overflow-wrap: anywhere;
}

.about-section:first-of-type {
	margin-top: 0;
}

.about-section .about-bullets {
	margin: 0.15rem 0 1rem 0;
	padding-left: 1.15rem;
}
.about-section .about-bullets li {
	margin: 0.15rem 0;
}

.about-section .about-bullets.about-bullets--dash {
    list-style: none;
    padding-left: 0.75rem;
}
.about-section .about-bullets.about-bullets--dash > li {
    position: relative;
    padding-left: 0.65rem;
}
.about-section .about-bullets.about-bullets--dash > li::before {
    content: "–";
    position: absolute;
    left: 0;
}

.about-section .about-list-lead {
	margin-top: 0.35rem;
	margin-left: 0;
	padding-left: 1.40rem;
	padding-right: 1.40rem;
	border-left: 0.18rem solid rgba(0, 0, 0, 0.12);
}

.about-section .about-list-lead + .about-bullets {
	margin-left: 0;
	padding-left: 1.90rem;
	padding-right: 1.90rem;
}

.about-section .about-h3-body {
  margin-top: 0.25rem;
  margin-left: 0;
  padding-left: 1.40rem;
  padding-right: 1.40rem;
}

.about-section .about-h3-body p {
  margin: 0.6rem 0;
}

.about-section .about-h3-body .about-bullets {
  margin: 0.20rem 0 0.65rem 0;
}

.about-section .about-h3-body .about-bullets li {
  margin: 0.10rem 0;
}

.about-section h4 {
	margin-top: 1.6rem;
	margin-bottom: 0.45rem;
}

.about-section .about-h4-body {
	position: relative;

	margin-top: 0.20rem;
	margin-left: 0;
	padding-left: 1.60rem;
	padding-right: 1.60rem;

	color: #333;
	border-left: 0;

	font-size: inherit;
	line-height: inherit;

}

.about-section .about-h4-body::before {
	content: "";
	position: absolute;

	left: 0.15rem;
	top: -0.15rem;

	width: 1.25rem;
	height: 1.35em;

	border-left: 2px solid #2a85df;
	border-top: 2px solid #2a85df;
	
	border-top-left-radius: 0.45rem;

	box-sizing: border-box;
}

/* Improved paragraph rhythm inside h4 body */
.about-section .about-h4-body p {
	margin: 0.6rem 0;
}

.about-section .about-h4-body .about-bullets {
	margin: 0.20rem 0 0.65rem 0;
}

.about-section .about-h4-body .about-bullets li {
	margin: 0.10rem 0;
}

#about-top #adatok-szotarak ~ p.about-list-lead a,
#about-top #adatok-szotarak ~ ul.about-bullets a,
#about-top #adatok-szotarak ~ p.about-list-lead a:visited,
#about-top #adatok-szotarak ~ ul.about-bullets a:visited,
#about-top #adatok-szotarak ~ p.about-list-lead a:hover,
#about-top #adatok-szotarak ~ p.about-list-lead a:focus,
#about-top #adatok-szotarak ~ ul.about-bullets a:hover,
#about-top #adatok-szotarak ~ ul.about-bullets a:focus {
	color: inherit;
	text-decoration: underline;
}

.about-stats {
	margin: 0.25rem auto 1.05rem auto;
	max-width: 650px;
	display: flex;
	justify-content: center;
	overflow-x: auto;
}

.about-stats__table {
	flex: 0 0 auto;
	width: max-content;
	max-width: 100%;
	display: inline-table;

	border-collapse: separate;
	border-spacing: 0;

	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 0.6rem;
	overflow: hidden;
	background: #fff;
}

.about-stats__table caption.about-stats__caption {
	caption-side: top;
	padding-bottom: 0.5rem;
	text-align: center;
	font-weight: 600;
	margin: 0;

	font-size: 18px;
	line-height: 1.35;
	color: #0c3359;
}


.about-stats__table thead th {
	font-weight: 700;
	background: rgba(0,0,0,0.04);
	color: #0b2239;
	vertical-align: middle;
	text-align: left; 
}

.about-stats__table th,
.about-stats__table td {
	padding: 0.30rem 0.55rem;
	vertical-align: top;
	border-bottom: 1px solid rgba(0,0,0,0.10);
	text-align: left;
}

.about-stats__table td.num {
	text-align: right;
	white-space: nowrap;
}

.about-stats__table thead th.num {
	text-align: right;
	white-space: normal;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.about-stats__table tbody:not(.about-stats__summary) tr:nth-child(even) td {
	background: rgba(0,0,0,0.02);
}

.about-stats__table tbody:not(.about-stats__summary) tr:hover td {
	background: rgba(0,0,0,0.05);
}

.about-stats__table .num {
	text-align: left;
	white-space: nowrap;
}

.about-stats__table tbody.about-stats__summary tr:first-child th,
.about-stats__table tbody.about-stats__summary tr:first-child td {
	border-top: 2px solid rgba(0,0,0,0.14);
}

.about-stats__table tbody.about-stats__summary .about-stats__total th,
.about-stats__table tbody.about-stats__summary .about-stats__total td {
	border-bottom: 0;
	padding-top: 0;
	background: rgba(0,0,0,0.015);
}

.about-stats__table tbody.about-stats__summary .about-stats__total:first-of-type th,
.about-stats__table tbody.about-stats__summary .about-stats__total:first-of-type td {
	padding-top: 0.30rem;
}

.about-stats__table tbody.about-stats__summary th,
.about-stats__table tbody.about-stats__summary td {
	padding: 0.20rem 0.55rem;
}

.about-stats__table tbody.about-stats__summary .about-stats__notes-row td {
	border-top: 1px solid rgba(0,0,0,0.12);
	border-bottom: 0;
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
	color: rgba(0, 0, 0, 0.62);
	background: rgba(0,0,0,0.015);
}


.about-stats__table tbody.about-stats__summary .about-stats__notes-row small {
	font-size: 12px;
	line-height: 1.25;
	display: inline-block;
}

#about-top h2[id],
#about-top h3[id],
#about-top h4[id] {
	scroll-margin-top: 0;
}

.about-figure {
	margin: 1rem 0 1.5rem 0;
}

/* Hero image under H1 */
.page-about #about-top.container,
.page-about .about-hero.container {
	max-width: 1100px;
}

/* Hero image under H1 */
.about-hero {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}
.about-hero-figure {
	margin: 0 auto 1rem auto;
	max-width: none;
	min-width: 0;
}
.about-hero-img {
	width: 100%;
	height: auto;
	max-height: 360px;
	object-fit: contain;
}

.about-privacy-figure {
	margin-left: auto;
	margin-right: auto;

	display: table;
	max-width: 100%;
}

.about-privacy-img {
	display: block;
	margin: 0 auto;
	height: auto;
	width: auto;
	max-width: 100%;
	max-height: 460px;
	object-fit: contain;
	border-radius: 0.85rem;
}

.about-privacy-figure figcaption {
	display: table-caption;
	caption-side: bottom;

	margin-top: 0.75rem;
	padding: 0.15rem 0.35rem 0;
	font-size: 0.90rem;

	text-align: justify;
	text-align-last: center;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.cookie-banner-wrap {
	padding-left: 1.35rem;
	padding-right: 1.35rem;
	overflow-x: clip;
}

.about-cookie-intro {
	margin: 0.45rem 0 0.35rem;

	text-align: center;

	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.45;

	color: #444;

	white-space: normal;
	word-break: normal;
}

/* Cookie consent banner (placeholder, no JS) */
.cookie-banner {
	position: relative;
	margin: 0.65rem 0 2.6rem 0;
	padding: 1.15rem 1.25rem;
	border-radius: 1.1rem;
	background: linear-gradient(180deg, #8fbbe6 0%, #6fa7dd 100%); /* gentle blue-grey */
	border: 1px solid rgba(0, 0, 0, 0.10);
	box-shadow: 0 0.35rem 0.85rem rgba(0, 0, 0, 0.18);
	overflow: visible;
	color: rgba(255, 255, 255, 0.94);
}

.cookie-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(0, 0, 0, 0.10);
	z-index: 0;
	pointer-events: none;
}


.cookie-banner__title {
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	gap: 0;
	position: relative;
	z-index: 1;
}

/* Inline cookie at end of title */
.cookie-bite--title {
	width: 48px;
	height: 48px;
	display: inline-block;
	vertical-align: middle;

	transform: scaleX(-1) rotate(40deg) translateX(-0.34rem);

	filter: drop-shadow(0 6px 1px rgba(0,0,0,0.12));
	margin-left: -0.85rem;
	
	position: relative;
	z-index: 0;
	pointer-events: none;
}

/* Background cookie behind content (decorative) */
.cookie-bg {
	position: absolute;
	inset: auto;
	right: auto;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(-12deg);

	width: 240px;
	height: 240px;

	opacity: 0.22;
	filter: blur(0.2px);
	pointer-events: none;

	z-index: 1;
}

.cookie-banner__content {
	position: relative;
	z-index: 2;
}

.cookie-banner__icons {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.cookie-banner__text {
	color: rgba(255, 255, 255, 0.94);
}

.cookie-banner__text a {
	color: #fff;
	text-decoration: underline;
}

/* Buttons should look like buttons but not act like buttons */
.cookie-banner__actions {
	display: flex;
	justify-content: center;
	gap: 1.1rem;
	margin-top: 0.65rem;
	flex-wrap: wrap;
}
.cookie-banner__actions .btn {
	pointer-events: none;
	cursor: default;
	border-radius: 0.95rem;
	padding: 0.65rem 1.35rem;
	min-width: 10.5rem;
	font-weight: 700;
}

/* Freeze button visuals (no hover/focus changes) */
.cookie-banner__actions .btn-primary,
.cookie-banner__actions .btn-primary:hover,
.cookie-banner__actions .btn-primary:focus {
	background-color: #0d6efd;
	border-color: #0d6efd;
	box-shadow: none;
}
.cookie-banner__actions .btn-outline-primary,
.cookie-banner__actions .btn-outline-primary:hover,
.cookie-banner__actions .btn-outline-primary:focus {
	background-color: #ffffff;
	border-color: rgba(0, 0, 0, 0.18);
	color: #0d6efd;
	box-shadow: none;
}

/* === Large bitten cookies (filled) === */
.cookie-banner__icons .cookie-bite {
	position: absolute;
	width: 54px;
	height: 54px;

	filter: drop-shadow(0 10px 2px rgba(0,0,0,0.14));
}

/* Placement + rotations */
.cookie-bite--2 { 
	bottom: -1.35rem; 
	left: -0.95rem; 
	top: auto; 
	right: auto; 
	transform: rotate(18deg) scale(1.12); 
}

.cookie-bite--3 { 
	top: -1.35rem; 
	right: -0.85rem; 
	bottom: auto; 
	left: auto; 
	transform: rotate(-28deg); 
}

.page-about {
	--about-max-width: 1100px;
	--about-toc-pad-x: 0.85rem;
	
	--about-toc-indent-base: 0.35rem;
	--about-toc-indent-step: 0.35rem;
	
	--about-scroll-duration-ms: 1200;
}
.page-about #about-top.container,
.page-about .about-hero.container {
	max-width: var(--about-max-width);
}

/* Thin right-side TOC (SSR-first, no JS required) */
.about-row {
	align-items: flex-start;
}
.about-row > .col {
	min-width: 0;
}

/* TOC sizing: thinner overall; shrinks on small screens (still stays on the right) */
.about-toc {
	font-size: 1.00rem;
	width: clamp(9rem, 18vw, 14rem);
	max-width: 14rem;
	min-width: 9rem;
	margin-left: auto;
	margin-right: 0;
}

.about-toc-shell { 
	background: #f9f9f9;
	border-radius: 0.9rem;
	box-shadow:
		-0.85rem -0.85rem 2.0rem rgba(255, 255, 255, 0.98),
		0.85rem 0.85rem 2.00rem rgba(0, 0, 0, 0.22);
		
	--about-toc-hover: #000; 
		
	color: #595959;
	overflow: hidden;
}

.page-about .about-toc-shell__summary[role="button"] {
	cursor: pointer;
	position: relative;
}

/* Chevron indicator based on aria-expanded */
.page-about .about-toc-shell__summary[role="button"]::after {
	content: "▾";
	margin-left: auto;
	opacity: 0.75;
	transform: translateY(-1px);
}
.page-about .about-toc-shell__summary[role="button"][aria-expanded="false"]::after {
	content: "▸";
}

/* Animated collapse (JS sets max-height to 0/px/none) */
.page-about .about-toc__inner {
	overflow: hidden;
	max-height: none;

	opacity: 1;
	transform: translateY(0);

	transition:
		max-height 520ms cubic-bezier(0.2, 0, 0, 1),
		opacity 320ms ease,
		transform 520ms cubic-bezier(0.2, 0, 0, 1);
}

.page-about .about-toc.is-collapsed .about-toc__inner {
	max-height: 0px;
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;

	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.page-about .about-toc a.is-active:not(.about-toc__jump),
.page-about .about-toc details > summary.is-active-section {
	color: var(--about-toc-hover);
	text-decoration: none;
	
	font-style: italic;

	background: transparent;
	box-shadow: none;
}

.about-toc details > summary::-webkit-details-marker,
.about-toc details > summary::marker { display: none; }

.about-toc :is(details > summary, a, .about-toc-shell__summary):is(:hover, :focus, :focus-within) {
	color: var(--about-toc-hover);
	text-decoration: none;
	background: transparent;
	text-shadow: none;
	-webkit-text-stroke: 0 transparent;
}

.about-toc__inner {
	padding: 0 var(--about-toc-pad-x) 0.35rem;
	color: inherit;
	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	overflow-x: hidden;
}

.about-toc__inner ul {
	list-style: none;
	margin: 0.10rem 0 0.30rem 0;
	padding-left: 0;
}

.about-toc__inner ul ul {
	margin: 0.06rem 0 0.22rem 0;
	padding-left: var(--about-toc-indent-step);
	font-size: 0.95em;
}

.about-toc__inner li {
	margin: 0.05rem 0;
}

.about-toc__inner ul a {
	font-weight: 500;
	white-space: normal;
	overflow-wrap: anywhere;
	hyphens: auto;
	
	display: block;
	box-sizing: border-box;
	padding: 0.10rem 0 0.10rem calc(
		var(--about-toc-indent-base) + var(--about-toc-indent-step)
	);
}

/* Clean details marker (exclude TOC shell summary so padding isn’t clobbered) */
.about-toc details:not(.about-toc-shell) > summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem;
	padding: 0.10rem 0 0.10rem var(--about-toc-indent-base);

	min-width: 0;
	color: inherit;
}

.about-toc-shell > .about-toc__inner > details:first-of-type > summary {
	padding-top: 0;
}

.about-toc__section-title {
	font-weight: 800;
	font-size: 1.0rem;
	color: inherit;

	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
	hyphens: auto;
}
.about-toc a,
.about-toc a:visited {
	color: inherit;
	text-decoration: none;
}

.about-backlink {
	display: none;
	margin-left: 0.4rem;
	font-weight: 800;
	font-style: normal;
	text-decoration: none;
	color: inherit;
	opacity: 0.85;
}

.about-backlink:hover,
.about-backlink:focus {
	color: #0d6efd;
	text-decoration: none;
	background: transparent;
	opacity: 1;
}

@media (max-width: 767.98px) {
	.about-backlink {
		display: inline;
	}

	.about-toc {
		width: 100%;
		max-width: min(32rem, 100%);
		min-width: min(18rem, 100%);
		margin-left: auto;
		margin-right: auto;
	}
}

/* Sticky + scrollable TOC on desktop */
@media (min-width: 768px) {

	.about-toc__jump {
		display: inline-flex;
		align-items: center;
		line-height: 1;
		position: relative;
		width: 1.2em;
		justify-content: center;
		text-indent: -9999px;
		overflow: hidden;
		white-space: nowrap;
	}

	.about-toc__jump::before {
		content: "↩";
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		text-indent: 0;
	}

	.about-row {
		flex-wrap: nowrap;
	}

	.about-row > aside {
		position: sticky;
		top: calc(var(--navbar-height) + 1rem);
		align-self: flex-start;
	}

	.about-toc {
		position: static;
		top: auto;
	}

	.about-toc__inner {
		max-height: calc(100vh - var(--navbar-height) - 2rem);
		max-height: calc(100dvh - var(--navbar-height) - 2rem);
		overflow-y: auto;
		overflow-x: hidden;
	}
}

.about-toc-shell__summary {
	list-style: none;
	margin: 0;
	padding: 0.25rem var(--about-toc-pad-x);
	line-height: 1.2;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	width: 100%;
	box-sizing: border-box;

	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 0;

	color: inherit;

	font-weight: 800;
	font-size: 1.05rem;

	cursor: default;
	user-select: none;
}

.about-toc-shell__title {
	flex: 1 1 auto;
	min-width: 0;
}

.about-toc-toggle {
	appearance: none;
	border: 0;
	background: rgba(0, 0, 0, 0.04);
	color: inherit;

	min-width: 0;
	min-height: 0;
	padding: 0.10rem 0.40rem;
	border-radius: 0.55rem;
	
	cursor: pointer;
	opacity: 0.9;

	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.about-toc-toggle:hover,
.about-toc-toggle:focus,
.about-toc-toggle:active {
	opacity: 1;
	background: rgba(0, 0, 0, 0.07);
}

.about-toc-toggle::before {
	content: "▼";
	line-height: 1;
	font-size: 1em;

	transform: rotate(180deg);
	transition: transform 420ms cubic-bezier(0.2, 0, 0, 1);
}

.about-toc-toggle[aria-expanded="false"]::before {
	transform: rotate(0deg); 
}

/* SYNC: about.css step-11-őne */