/*
 * Container, header, title band, footer.
 *
 * Breakpoints follow the original kit: 1024px is where the desktop header gives
 * way to the burger, 480px is the narrow-phone step.
 */

/* ---------------------------------------------------------------- container */

.br-container {
	width: 100%;
	max-width: var(--br-container);
	margin-inline: auto;
	padding-inline: var(--br-gutter);
}

/*
 * ── EGYETLEN RÁCS MINDEN LAPON ───────────────────────────────────────────
 *
 * Itt korábban a kezdőlap konténere `padding-inline: 0`-t kapott, mert az
 * EREDETI oldal is így működött: a logó és a törzsszöveg ott 10 képponttal
 * balrább ült, mint a többi lapon. Hűen reprodukáltuk — és épp ezért volt
 * rossz: lapváltáskor a fejléc MEGUGRIK.
 *
 * Mérve (1440 képpontos ablak, a logó bal széle):
 *     kezdőlap  150 px
 *     minden más lap  160 px
 *
 * A megrendelő kérése, hogy ez ne legyen. A kivétel megszűnt: minden lap
 * ugyanazon a rácson ül, és a logó ugyanoda esik, mint a lap szövege.
 *
 * A hőskép a kivétel — az továbbra is a rács teljes szélességét kapja, mert
 * nála a behúzás levágná a magenta keretet. Ez viszont a HŐSKÉPRE szól, nem
 * az egész lapra, tehát nem hat a fejlécre és a szövegre.
 */
.br-front .br-hero .br-container {
	padding-inline: 0;
}

@media (max-width: 1024px) {
	.br-container {
		max-width: 100%;
	}
}

/* ------------------------------------------------------------------- header */

.br-header {
	position: sticky;
	top: 0;
	z-index: 99;
	background: var(--br-white);
	box-shadow: 0 0 10px rgb(0 0 0 / 50%);
}

/*
 * The header sits on the 1140px grid but does not take the 10px column padding:
 * on the original the logo picked it up (150px on the homepage, 160px elsewhere)
 * while the menu did not, and instead overhung the grid slightly on the right.
 */
.br-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--br-header-h);
	/*
	 * A fejléc NEM veszi a konténer behúzását: a menü szándékosan túllóg a
	 * rácson jobbra (`.br-nav { margin-inline-end: -21px }`), és a behúzás ezt
	 * elrontaná. A logó helyét ezért a `.br-header__brand` margója adja — az
	 * pedig UGYANABBÓL a `--br-gutter` változóból olvas, mint a konténer
	 * behúzása, tehát a kettő nem tud elcsúszni egymástól.
	 */
	padding-inline: 0;
}

.br-header__brand {
	display: flex;
	align-items: center;
	margin-inline-start: var(--br-gutter);
}

/*
 * A `.br-front .br-header__brand { margin-inline-start: 0 }` INNEN ELTŰNT.
 * Ez adta a fenti 10 képpontos ugrást a fejlécben: a kezdőlap logója a
 * konténer széléhez tapadt, a többi lapé a szöveg vonalához igazodott.
 * Mostantól mindegyik a szöveg vonalán van.
 */

.br-nav {
	margin-inline-end: -21px;
}

.br-header__logo {
	display: block;
	line-height: 0;
}

.br-header__logo-img {
	display: block;
	width: 100px;
	height: auto;
	transition: opacity var(--br-ki-mikro) var(--br-gorbe-be);
}

.br-header__logo:hover .br-header__logo-img {
	opacity: 0.8;
	transition: opacity var(--br-be-mikro) var(--br-gorbe-be);
}

/* burger is desktop-hidden */
.br-burger {
	display: none;
}

@media (max-width: 1024px) {
	/*
	 * A logó FÜGGŐLEGESEN KÖZÉPEN áll, nem a tetőhöz tapadva.
	 *
	 * Eddig `align-items: flex-start` + 12 képpont felső behúzás volt, amitől a
	 * hely fölötte és alatta nem egyezett: mérve 12 fent, 24 lent. A középre
	 * igazítás a szimmetriát a szerkezetből adja, nem kézzel beállított
	 * értékekből — ha a fejléc magassága változik, a logó vele marad középen.
	 */
	.br-header__inner {
		position: relative;
		justify-content: center;
		align-items: center;
		padding-inline: 16px;
	}

	/* the logo centres on the viewport, so the desktop gutter is dropped here */
	.br-header__brand {
		margin-inline-start: 0;
	}

	.br-header__logo-img {
		width: auto;
		height: 64px;
	}

	.br-nav {
		display: none;
	}

	.br-burger {
		display: block;
		position: absolute;
		inset-inline-end: 16px;
		top: 50%;
		transform: translateY(-50%);
		width: 45px;
		height: 33px;
		color: var(--br-primary);
	}

	.br-burger__bars,
	.br-burger__bars::before,
	.br-burger__bars::after {
		position: absolute;
		inset-inline: 6px;
		height: 4px;
		background: currentcolor;
		border-radius: 1px;
		content: '';
	}

	.br-burger__bars {
		top: 14px;
	}

	.br-burger__bars::before {
		top: -9px;
	}

	.br-burger__bars::after {
		top: 9px;
	}
}

/*
 * A 480 px alatti fejléc-blokk ELTŰNT INNEN.
 *
 * Két maradványt tartalmazott a 108 képpontos, eredeti mobil fejléc idejéből:
 * a `--br-header-h: 108px`-t (amit a responsive.css 88-ra, illetve 76-ra ír át,
 * tehát már halott érték volt) és egy `padding-bottom: 10px`-t a fejlécen.
 *
 * Ez utóbbi okozta, hogy a logó alatt 10 képponttal több hely maradt, mint
 * fölötte: a logó a BELSŐ dobozban ül középen, a behúzás viszont a KÜLSŐN volt,
 * tehát a középre igazítás nem tudott róla. Mérve 430 px-en: 16 fent, 26 lent.
 */

/* -------------------------------------------------------------- title band */

.br-title-band {
	/* per-page override: some titles were shrunk by hand on the original */
	--br-title-size: 33px;
	margin: 47px 0;
	background-image: var(--br-title-frame);
	background-position: 50% 50%;
	background-size: contain;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	min-height: 87px;
}

.br-title-band .br-container {
	padding-inline: 27px;
}

.br-title-band__title {
	margin: 0;
	font-family: var(--br-font-display);
	font-size: var(--br-title-size);
	line-height: var(--br-title-size);
	font-weight: 900;
	color: var(--br-primary);
	text-align: center;
	text-transform: none;
}

/* the two longest titles were shrunk again on phones */
@media (max-width: 480px) {
	.br-title-band__title {
		font-size: var(--br-title-size-sm, var(--br-title-size));
		line-height: var(--br-title-size-sm, var(--br-title-size));
	}
}

/* ------------------------------------------------------------------- main */

.br-main {
	display: block;
}

.br-section {
	margin-block: 0;
}

/* ----------------------------------------------------------------- footer */

.br-footer__bar {
	background: var(--br-primary);
	color: var(--br-white);
	padding-block: 20px;
}

.br-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.br-footer__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 20px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
}

/* the homepage ran without the 10px column padding — see .br-container above */
.br-front .br-footer__list {
	padding: 0;
}

/*
 * The old Font Awesome <i> occupied 1.25em even though the glyph inside was
 * narrower, so the inline SVG gets the same footprint: 0.89em of drawing plus
 * the rest as margin.
 */
.br-footer__list .br-svg {
	width: 0.89em;
	height: 0.89em;
	margin-inline-end: 0.36em;
}

.br-footer__list a {
	display: inline-flex;
	align-items: center;
	color: var(--br-white);
	font-family: var(--br-font-body);
	font-size: 14px;
	line-height: 21px;
	transition: color var(--br-ki-mikro) var(--br-gorbe-be);
}

.br-footer__list a .br-svg {
	transition: fill var(--br-ki-mikro) var(--br-gorbe-be);
}

/* the original faded these to the light grey, it did not underline them */
.br-footer__list a:hover,
.br-footer__list a:focus-visible {
	color: var(--br-secondary);
	transition: color var(--br-be-mikro) var(--br-gorbe-be);
}

.br-footer__list a:hover .br-svg,
.br-footer__list a:focus-visible .br-svg {
	fill: var(--br-secondary);
	transition: fill var(--br-be-mikro) var(--br-gorbe-be);
}

.br-footer__list a span {
	padding-inline-start: 5px;
}

.br-footer__list--contact {
	justify-content: flex-end;
}

.br-footer__list--contact a {
	text-align: end;
}

.br-footer__meta {
	background: var(--br-white);
	color: var(--br-text);
}

/* the bottom row spans the full grid: copyright flush left, credit flush right */
.br-footer__meta .br-footer__inner {
	padding-block: 7px;
	padding-inline: 0;
}

.br-footer__copyright,
.br-footer__credit {
	margin: 0;
	font-family: var(--br-font-body);
	font-size: 12.8px;
	line-height: 19.2px;
}

/* Wide layout joins the two copyright spans with " - "; narrow stacks them. */
.br-footer__copyright-rights::before {
	content: ' - ';
	white-space: pre;
}

.br-footer__credit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.br-footer__credit-logo {
	display: inline-block;
	line-height: 0;
}

/*
 * A kredit-logó mérete.
 *
 * A korábbi 100 / 58 / 80 képpontos értékek a RÉGI (weberna) logóhoz voltak
 * mérve, aminek más volt az oldalaránya — az új, 200×112-es asseten ugyanezek
 * csak felnagyítanák. Az 50×28 a natív méret negyede, és ez az a megjelenítés,
 * amit a többi ügyféloldal lábléce is használ. A 41 képpont egy lépcsővel az
 * alatt van: a kredit így halkabb, de olvasható marad — a natív 164×92-es
 * asset negyede, tehát nem nyúlik.
 */
.br-footer__credit-img {
	display: block;
	width: 41px;
	height: auto;
}

/*
 * Narrow layout: everything centres and stacks, and the two footer groups are
 * separated by a hairline — the original did this with a divider widget.
 */
@media (max-width: 1024px) {
	.br-footer__bar {
		padding-block: 0;
	}

	.br-footer__bar .br-footer__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-inline: var(--br-gutter);
	}

	.br-footer__list {
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding-block: 19.5px;
	}

	.br-footer__list--contact {
		order: 1;
		justify-content: center;
	}

	/*
	 * The narrow layout listed these the other way round from the desktop one
	 * (Adatkezelési first, then Sütik). Reversing here keeps one markup tree.
	 */
	.br-footer__list--legal {
		order: 2;
		flex-direction: column-reverse;
		border-top: 1px solid var(--br-secondary);
	}

	.br-footer__meta .br-footer__inner {
		flex-direction: column;
		gap: 18px;
		padding-block: 10px;
		text-align: center;
	}

	.br-footer__copyright {
		display: flex;
		flex-direction: column;
	}

	.br-footer__copyright-rights::before {
		content: none;
	}

	.br-footer__credit {
		flex-direction: column;
		gap: 6px;
	}

	.br-footer__credit-img {
		width: 41px;
	}
}

@media (max-width: 480px) {
	.br-footer__meta .br-footer__inner {
		padding-block: 22px;
	}

	.br-footer__copyright,
	.br-footer__credit {
		font-size: 12px;
		line-height: 18px;
	}

	.br-footer__credit-img {
		width: 41px;
	}
}