/*
 * Elrendezés: fejléc, navigáció, közlemény sáv, tartalomváz, lábléc,
 * mobil menüfiók és alsó gyorssáv.
 */

/* ==========================================================================
   FELSŐ SEGÉDSÁV
   ========================================================================== */
.topbar {
	background: var(--navy-900);
	color: #C3CEE0;
	font-size: 13.5px;
}

.topbar .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 42px;
	flex-wrap: wrap;
}

.topbar__bal { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.topbar a { display: inline-flex; align-items: center; gap: 7px; transition: color .18s; }
.topbar a:hover { color: #fff; }
.topbar .pseg-ikon { width: 15px; height: 15px; opacity: .7; flex: none; }

.topbar__jobb { display: flex; align-items: center; gap: 6px; }
.topbar__jobb .valaszto { width: 1px; height: 16px; background: rgba(255, 255, 255, .16); margin: 0 8px; }
.topbar__jobb a { padding: 4px 9px; border-radius: 6px; }
.topbar__jobb a:hover { background: rgba(255, 255, 255, .08); }
.topbar__kreta { color: var(--gold-500); font-weight: 650; }

/* ==========================================================================
   FEJLÉC
   ========================================================================== */
.site-fejlec {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(1.6) blur(14px);
	-webkit-backdrop-filter: saturate(1.6) blur(14px);
	border-bottom: 1px solid var(--line);
}

/*
 * A fejléc szélesebb konténert kap, mint a tartalom.
 *
 * A tartalom olvashatósága miatt 1240 px-en marad, de a fejlécben kilenc
 * hosszú feliratú menüpont van — azoknak ennyi kevés. Széles képernyőn
 * ezért a fejléc kihasználja a rendelkezésre álló helyet.
 */
/*
 * KÖZVETLEN gyermek — a `>` itt nem stílus, hanem hibajavítás.
 *
 * Leszármazott-szelektorral ez a szabály a keresőréteg konténerére is
 * ráfutott, és a keresőűrlapot rugalmas ELEMMÉ tette: az űrlap a tartalma
 * köré zsugorodott (mérve 274 px a rendelkezésre álló 339 helyett), és
 * középre húzódott. A tervezett 640 px-es keresőmező soha nem valósult meg.
 */
.site-fejlec > .container {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 82px;
	max-width: 1560px;
}

/*
 * A márkasornak ZSUGORODNIA KELL — ez itt a lényeg, nem stílus kérdése.
 *
 * Korábban `flex: none` volt rajta, vagyis a rugalmas fejlécben mindig a
 * max-content szélességét kapta: 371 px-et. Egy 375 px-es telefonon ez a
 * fejléc gombjait (kereső + hamburger) a 413..507 tartományba tolta —
 * TELJESEN a képernyőn kívülre. És mivel az oldal ettől vízszintesen
 * görgethetővé vált, a fix alsó sáv is a görgethető szélességre feszült,
 * így annak „Menü” pontja is lecsúszott a képernyőről.
 *
 * Vagyis a látogatónak telefonon EGYETLEN menünyitója sem maradt.
 *
 * A `min-width: 0` ugyanilyen fontos: rugalmas elem alapértéke `auto`, ami
 * a tartalom min-content szélessége alatt megállítaná a zsugorodást.
 */
.brand { display: flex; align-items: center; gap: 13px; flex: 0 1 auto; min-width: 0; }
/*
 * A magasságot a CSS adja, nem inline stílus — így a töréspontok
 * (lásd az 1024 px-es blokkot) tényleg érvényesülni tudnak. A képarányt a
 * kép `width`/`height` attribútuma tartja, az elrendezés nem ugrik meg.
 */
.brand__cimer { height: 46px; width: auto; mix-blend-mode: multiply; }
.brand__szoveg { display: flex; flex-direction: column; line-height: 1.22; min-width: 0; }
.brand__nev {
	font-family: var(--serif);
	font-size: 16.5px;
	font-weight: 600;
	color: var(--navy-800);
	letter-spacing: -.01em;
	/* Az intézmény teljes neve hosszú; két sorban fér el kulturáltan. */
	max-width: 27ch;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.brand__alcim {
	font-size: 11.5px;
	color: var(--muted);
	letter-spacing: .035em;
	text-transform: uppercase;
	font-weight: 600;
}

/* --- Asztali főmenü ------------------------------------------------------ */
.fomenu { margin-left: auto; }
.fomenu > ul { display: flex; align-items: center; gap: 2px; list-style: none; }
.fomenu > ul > li { position: relative; }

.fomenu > ul > li > a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 10px 10px;
	border-radius: 9px;
	font-size: 14.8px;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
	transition: background .18s, color .18s;
}

.fomenu > ul > li > a:hover,
.fomenu > ul > li:hover > a,
.fomenu > ul > li:focus-within > a { background: var(--surface-2); color: var(--navy-700); }

.fomenu .current-menu-item > a,
.fomenu .current-menu-ancestor > a,
.fomenu .current_page_item > a { color: var(--navy-700); }

.fomenu .nyil { width: 11px; height: 11px; opacity: .5; transition: transform .2s; }
.fomenu > ul > li:hover .nyil,
.fomenu > ul > li:focus-within .nyil { transform: rotate(180deg); }

/*
 * Legördülő almenü.
 *
 * A JOBBRA IGAZÍTÁS nem esztétikai döntés. A zárt almenü `visibility: hidden`,
 * ami elrejti a szemtől, de az elrendezésben BENT MARAD — és a 264 px-es
 * dobozával a jobb szélső menüpontok alatt kilógott a képernyőről. Mérve
 * 1440 px-en: 129 px vízszintes csúszás minden oldalon, és a `.sub-menu`
 * elrejtése pontosan ennyit vett el, tehát ez volt az EGYETLEN okozó.
 *
 * A főmenü a fejléc jobb feléből indul (`margin-left: auto`), ezért a jobb
 * szélhez igazított almenü befelé nyílik, és semelyik menüpont alatt nem tud
 * kilógni — akkor sem, ha később új menüpont kerül be.
 */
.fomenu .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	left: auto;
	min-width: 264px;
	padding: 10px;
	margin: 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: all .18s ease;
	z-index: 5;
}

.fomenu li:hover > .sub-menu,
.fomenu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.fomenu .sub-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 14.8px;
	color: var(--body);
	transition: background .16s, color .16s;
}
.fomenu .sub-menu a:hover { background: var(--surface); color: var(--navy-700); }

/*
 * Harmadik szint: oldalra nyílik — a másodikkal AZONOS irányba (balra).
 * Ha jobbra nyílna, a jobb szélhez igazított második szint mellől azonnal
 * kilógna a képernyőről, és ugyanazt a vízszintes csúszást okozná.
 */
.fomenu .sub-menu .sub-menu { top: -10px; right: calc(100% + 6px); left: auto; }

.fejlec__akciok { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.fomenu + .fejlec__akciok { margin-left: 0; }

.ikon-gomb {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	/*
	 * Rugalmas konténerben a 42 px önmagában csak kívánság: a bezáró gomb a
	 * fiók fejlécében 14 px-re nyomódott össze a hosszú iskolanév mellett,
	 * 320 px-en pedig ki is lógott. Érintőfelületnek ez használhatatlan.
	 */
	flex: none;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--ink);
	cursor: pointer;
	transition: all .18s;
}
.ikon-gomb:hover { border-color: var(--navy-600); color: var(--navy-700); }
.ikon-gomb .pseg-ikon { width: 19px; height: 19px; }
.hamburger { display: none; }

/* --- Kereső réteg -------------------------------------------------------- */
.kereso-reteg {
	display: none;
	border-top: 1px solid var(--line);
	background: var(--surface);
	padding-block: 18px;
}
.kereso-reteg.nyitva { display: block; }
.kereso-reteg form { display: flex; gap: 10px; max-width: 640px; margin-inline: auto; }

/* ==========================================================================
   SZÜLŐI KÖZLEMÉNY
   ========================================================================== */
.kozlemeny {
	background: linear-gradient(90deg, #FBF6EA, #F7EFDC);
	border-bottom: 1px solid #EADCBE;
}
.kozlemeny .container { display: flex; align-items: flex-start; gap: 14px; padding-block: 14px; }
.kozlemeny__ikon {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--gold-500);
	color: var(--navy-900);
	display: grid;
	place-items: center;
}
.kozlemeny__ikon .pseg-ikon { width: 18px; height: 18px; }
.kozlemeny__szoveg { flex: 1; font-size: 15px; color: #5C4A22; }
.kozlemeny__szoveg strong { color: var(--ink); font-weight: 700; }
.kozlemeny__szoveg a {
	color: var(--gold-700);
	font-weight: 650;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.kozlemeny__bezar {
	flex: none;
	background: none;
	border: 0;
	cursor: pointer;
	color: #9A824F;
	padding: 4px;
	border-radius: 6px;
	line-height: 0;
}
.kozlemeny__bezar:hover { background: rgba(0, 0, 0, .06); }
.kozlemeny__bezar .pseg-ikon { width: 18px; height: 18px; }

/* ==========================================================================
   TARTALOMVÁZ
   ========================================================================== */
.oldal-fej {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	padding-block: 40px 44px;
}
.oldal-fej h1 { font-size: clamp(28px, 3.4vw, 42px); margin-top: 10px; }
.oldal-fej__leiras { margin-top: 12px; font-size: 17px; max-width: 68ch; }

.kenyermorzsa { font-size: 13.5px; color: var(--muted); }
.kenyermorzsa ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.kenyermorzsa li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
/*
 * A kenyérmorzsa linkjeinek saját színe. Korábban ezt a theme.json globális
 * `elements.link` szabálya adta — de az MINDEN linkre ráült, a sötét lábléc
 * linkjeit is sötétkékre festve (mérve 1,45:1). A globális szabály törölve,
 * a színt ott adjuk meg, ahol tényleg kell. A morzsa alapszíne `--muted`
 * (#78838F, 3,6:1) — az önmagában kevés lenne a linknek.
 */
.kenyermorzsa a { color: var(--navy-700); }
.kenyermorzsa a:hover { color: var(--navy-700); text-decoration: underline; }
.kenyermorzsa [aria-current] { color: var(--ink); font-weight: 600; }

.fo-terulet { padding-block: 56px 72px; }
/*
 * A `minmax(0, 1fr)` itt nem finomhangolas, hanem a tartalom megtartasa.
 *
 * Oszlopdefinicio nelkul a racs egyetlen implicit `auto` savot kap, ami a
 * tartalom max-content szelessegere no — a konteneren TULRA is. Egy 581 px
 * szeles, szelessegattributummal beillesztett kep (ilyen az importalt
 * tartalomban bosegesen van) igy 375 px-es telefonon 581 px-re feszitette a
 * savot: 225 px vizszintes csuszas, es a fix also menusav is lecsuszott a
 * kepernyorol. A `minmax(0, …)` also hatara engedi a savot a konteneren
 * belulre zsugorodni, es akkor az `img { max-width: 100% }` mar dolgozni tud.
 */
.fo-terulet .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.fo-terulet.van-oldalsav .container { grid-template-columns: minmax(0, 1fr) 320px; }

.bejegyzes-tartalom { max-width: var(--tartalom); font-size: 17px; }
.bejegyzes-tartalom > * + * { margin-top: 1.15em; }
.bejegyzes-tartalom h2 { font-size: 28px; margin-top: 1.8em; }
.bejegyzes-tartalom h3 { font-size: 22px; margin-top: 1.6em; }
/*
 * A `:not(.elementor-button)` nem díszítés: az Elementor gombja is <a>, és
 * ha ez a szabály ráül, a sötétkék felirat a sötétkék gombháttéren 1,18:1-re
 * esik — olvashatatlan. Az Elementor 4.x az előtéren egyetlen gombszínt sem
 * ad ki, tehát ezt a témának kell rendben tartania (lásd elementor.css).
 */
.bejegyzes-tartalom a:not(.elementor-button) { color: var(--navy-700); text-decoration: underline; text-underline-offset: 3px; }
.bejegyzes-tartalom a:not(.elementor-button):hover { color: var(--navy-600); }
.bejegyzes-tartalom ul, .bejegyzes-tartalom ol { padding-left: 1.3em; }
.bejegyzes-tartalom li + li { margin-top: .4em; }
.bejegyzes-tartalom blockquote {
	border-left: 3px solid var(--gold-500);
	padding-left: 20px;
	font-family: var(--serif);
	font-size: 19px;
	color: var(--ink);
}
.bejegyzes-tartalom img { border-radius: var(--r-md); }

/* Elementorral épített oldal: nem szorítjuk hasábba. */
/*
 * Az Elementor-oldalak teljes szelessege — de CSAK oldalsav nelkul.
 * Oldalsavos elrendezesben a container racs, es a belso margo nullazasa
 * a kepernyo szelere tapasztana az oldalsavot (merve: 1105..1425, nulla
 * margoval), mikozben a „teljes szelessegu” Elementor-konteneret a racs
 * elso oszlopaba szoritana. Ma lappango: a pseg-oldalsav widgetterulet ures.
 */
.pseg-teljes-szelesseg .fo-terulet:not(.van-oldalsav) .container { max-width: none; padding-inline: 0; }
.pseg-teljes-szelesseg .bejegyzes-tartalom { max-width: none; }

/* ==========================================================================
   OLDALSÁV
   ========================================================================== */
.oldalsav .widget + .widget { margin-top: 30px; }
.widget__cim { font-size: 17px; margin-bottom: 14px; }
.oldalsav ul { list-style: none; }
.oldalsav li + li { margin-top: 9px; }
.oldalsav a:hover { color: var(--navy-700); }

/* ==========================================================================
   LÁBLÉC
   ========================================================================== */
.site-lablec {
	background: var(--navy-900);
	color: var(--on-dark-lablec);
	padding-block: 64px 0;
	font-size: 14.6px;
}

.lablec__felso {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.05fr;
	gap: 48px;
	padding-bottom: 52px;
}

.lablec__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.lablec__brand img { width: 56px; height: 56px; border-radius: 50%; flex: none; }
.lablec__nev { font-family: var(--serif); font-size: 19px; color: #fff; font-weight: 600; line-height: 1.25; }
.lablec__alcim {
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--gold-500);
	font-weight: 650;
	margin-top: 3px;
}

.lablec__adatok { display: grid; gap: 11px; margin-top: 6px; }
.lablec__adatok > div { display: flex; gap: 11px; align-items: flex-start; }
.lablec__adatok .pseg-ikon { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--gold-600); }
.lablec__adatok a:hover { color: #fff; }
/* A --muted világos háttérre való; a lábléc sötétjén 4,02:1-et adott.
   A sötét háttér saját tokencsaládjából a címkeszín 6,06:1. */
.lablec__halvany { color: var(--on-dark-cimke); }

.site-lablec h2,
.lablec__cim {
	color: #fff;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.lablec__linkek { display: grid; gap: 11px; }
.lablec__linkek a { transition: color .18s, padding-left .18s; }
.lablec__linkek a:hover { color: #fff; padding-left: 4px; }

.lablec__social { display: flex; gap: 10px; margin-bottom: 22px; }
.lablec__social a {
	width: 42px;
	height: 42px;
	border-radius: 11px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .07);
	color: #C3CEE0;
	transition: all .2s;
}
.lablec__social a:hover { background: var(--gold-500); color: var(--navy-900); }
.lablec__social .pseg-ikon { width: 19px; height: 19px; }

.lablec__also {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-block: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	font-size: 13.4px;
}
.lablec__also ul { display: flex; gap: 22px; flex-wrap: wrap; list-style: none; }
.lablec__also a:hover { color: #fff; }

/* ==========================================================================
   MOBIL: MENÜFIÓK ÉS ALSÓ GYORSSÁV
   ========================================================================== */
.fiok-hatter {
	position: fixed;
	inset: 0;
	background: rgba(26, 36, 56, .55);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: .25s;
	z-index: 90;
}

.fiok {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(400px, 88vw);
	background: #fff;
	z-index: 100;
	transform: translateX(100%);
	/*
	 * A `visibility: hidden` nem diszites: enelkul a ZART fiok 75
	 * fokuszalhato eleme bent maradt a tabsorrendben. A billentyuzetes
	 * latogato a fejlecbol a semmibe tabolt: a fokusz egy lathatatlan,
	 * kepernyon kivuli menube kerult, ahol a kepernyoolvaso — az
	 * aria-hidden="true" miatt — semmit nem mondott. Ez a legrosszabb
	 * parositas: a fokusz ott van, ahol a segedtechnologia szerint nincs semmi.
	 *
	 * A `visibility` valtasat keslelteti a csuszo animacio vegeig, hogy a
	 * bezaras tovabbra is lathato legyen.
	 */
	visibility: hidden;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s .3s;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-lg);
}

body.menu-nyitva .fiok { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s; }
body.menu-nyitva .fiok-hatter { opacity: 1; visibility: visible; }
body.menu-nyitva { overflow: hidden; }

/*
 * A fiók fejlécében kisebb címer kell, mint az oldal fejlécében. Ezt korábban
 * a pseg_logo() inline stílusa adta — de az a fejléc töréspontszabályait is
 * legyőzte, ezért onnan kikerült. A méret így ide, a helyére került.
 */
.fiok__fej .brand__cimer { height: 38px; }

.fiok__fej {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--line);
}

.fiok__menu { flex: 1; overflow-y: auto; padding: 14px 12px 24px; list-style: none; }
.fiok__menu li { border-bottom: 1px solid var(--line-2); list-style: none; }
.fiok__menu > li:last-child { border-bottom: 0; }

.fiok__menu a,
.fiok__nyito {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 12px;
	font-family: var(--sans);
	font-size: 17px;
	font-weight: 650;
	color: var(--ink);
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
}

.fiok__nyito .pseg-ikon { width: 15px; height: 15px; opacity: .45; transition: transform .22s; }
.fiok__menu li.nyitva > .fiok__nyito .pseg-ikon { transform: rotate(180deg); }

/*
 * A csukott almenu 0 px magas, de a benne levo linkek fokuszalhatok
 * maradtak: a nyitott fiokban a Tab 68 lathatatlan vezerlon ment vegig,
 * mielott a kovetkezo lathato menupontra ert volna. A `visibility` ezt is
 * kiveszi a tabsorrendbol, a nyilo animacio megtartasa mellett.
 */
.fiok__menu .sub-menu {
	visibility: hidden;
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease;
	list-style: none;
	padding: 0;
}
.fiok__menu li.nyitva > .sub-menu { max-height: 1200px; visibility: visible; }
.fiok__menu .sub-menu li { border-bottom: 0; }
.fiok__menu .sub-menu a { padding: 11px 12px 11px 24px; font-size: 15px; font-weight: 500; color: var(--body); }
.fiok__menu .sub-menu .sub-menu a { padding-left: 38px; font-size: 14.4px; }

.fiok__lab { padding: 18px 20px 22px; border-top: 1px solid var(--line); display: grid; gap: 10px; }

.mobil-sav {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(14px);
	border-top: 1px solid var(--line);
	padding: 9px 8px calc(9px + env(safe-area-inset-bottom));
	box-shadow: 0 -4px 20px rgba(16, 23, 32, .08);
}

.mobil-sav ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; list-style: none; }
/* A „Menü” pont gomb, a többi link — a megjelenésük viszont azonos. */
.mobil-sav a,
.mobil-sav button {
	border: 0;
	background: none;
	font-family: inherit;
	cursor: pointer;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 7px 2px;
	font-size: 11px;
	font-weight: 650;
	color: var(--body);
	border-radius: 9px;
}
.mobil-sav a.kiemelt { color: var(--navy-800); }
.mobil-sav .pseg-ikon { width: 21px; height: 21px; }

/* ==========================================================================
   TÖRÉSPONTOK
   ========================================================================== */
/*
 * A menü és a fiók váltása.
 *
 * A valódi menü kilenc főpontból áll, hosszú magyar feliratokkal
 * („Tantárgyi oldalak”, „Hivatkozások”), és a márkasor is széles az
 * intézmény teljes nevével. Ennyi együtt csak széles képernyőn fér ki
 * kulturáltan — 1400 px alatt ezért a fiókmenü veszi át, ahol minden
 * pont és almenü kényelmesen elfér.
 *
 * A tipikus 1366 px-es laptop tudatosan a fiókos oldalra esik: ott a
 * kilenc pont már csak zsúfolva férne el.
 */
@media (max-width: 1560px) {
	/* A „Beiskolázás” gomb a menüben is szerepel, itt nem veszik el semmi. */
	.fejlec__akciok .gomb { display: none; }
}

/* Fejléc: a fiókmenü veszi át a főmenü helyét. */
@media (max-width: 1400px) {
	.fomenu,
	.fejlec__akciok .gomb { display: none; }
	.hamburger { display: grid; }
	.site-fejlec .container { min-height: 74px; justify-content: space-between; gap: 24px; }
	/* A fiók átveszi a menüt, így a márkasor kaphat több helyet. */
	.brand__nev { font-size: 17.5px; max-width: 40ch; }
}

/* Elrendezés: az oldalsáv és a lábléc külön, később törik. */
@media (max-width: 1024px) {
	.site-fejlec .container { min-height: 72px; }
	.brand__cimer { height: 40px; }
	.brand__nev { font-size: 16.5px; max-width: 26ch; }
	/* Ugyanaz az ok, mint fent: az `1fr` also hatara `auto`, ami tullohet. */
	.fo-terulet.van-oldalsav .container { grid-template-columns: minmax(0, 1fr); }
	.lablec__felso { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 720px) {
	body { font-size: 16px; }
	.container { padding-inline: 18px; }

	.topbar .container { min-height: 38px; font-size: 12.5px; }
	.topbar__bal { gap: 14px; }
	.topbar .rejtett-mobilon,
	.topbar__jobb .valaszto { display: none; }

	/*
	 * Az alcím („Kollégium, Általános Iskola és Alapfokú Művészeti Iskola”)
	 * 56 karakter: a max-content szélessége 322 px, és mivel rá — a névvel
	 * ellentétben — semmilyen szélességkorlát nem vonatkozott, EZ diktálta a
	 * márkasor 371 px-ét. A védelem a rossz elemre került.
	 *
	 * Telefonon elrejtjük: az intézmény teljes megnevezése a fiókmenüben és
	 * a láblécben is szerepel, tehát nem vész el. Elipszissel megtartva a
	 * névből veszne el két sor — az rosszabb csere.
	 */
	.brand__alcim { display: none; }
	/* A név így három sorban is teljesen kifér 320 px-en. */
	.brand__nev { font-size: 16px; max-width: none; -webkit-line-clamp: 3; }
	.site-fejlec .container { gap: 12px; }

	.kozlemeny .container { padding-block: 12px; gap: 11px; }
	.kozlemeny__szoveg { font-size: 14px; }
	/*
	 * A közlemény mobilon is TELJES EGÉSZÉBEN látszik.
	 *
	 * Korábban két sorra volt vágva — a komment „a teljes szöveg linken”-t
	 * ígért, de ilyen link soha nem készült el. Mérve: 92 px tartalom egy
	 * 46 px-es dobozban, vagyis a szülőknek szóló tájékoztatás PONTOSAN FELE
	 * néma módon eltűnt, és semmilyen módon nem lehetett megnyitni.
	 *
	 * Egy iskolai közlemény attól közlemény, hogy elolvasható. A sáv
	 * bezárható, és a szövegét az iskola írja — a hossza kézben tartható.
	 */
	.kozlemeny__rovid { margin: 2px 0 3px; }

	.oldal-fej { padding-block: 28px 32px; }
	.fo-terulet { padding-block: 40px 56px; }
	.fo-terulet .container { gap: 40px; }
	/*
	 * A régi tartalomban 340 sorkizárt blokk van. Széles hasábon ez rendben
	 * van, de 340 px-es sorhosszon a szóközök szakadékká nyílnak, és a szöveg
	 * nehezen olvashatóvá válik. Az `!important` itt elkerülhetetlen: a
	 * sorkizárás beégetett inline stílusból jön, azt szelektorral nem lehet
	 * legyőzni.
	 */
	.bejegyzes-tartalom [style*="justify"] { text-align: left !important; }

	.bejegyzes-tartalom { font-size: 16.4px; }
	.bejegyzes-tartalom h2 { font-size: 24px; }
	.bejegyzes-tartalom h3 { font-size: 20px; }

	/*
	 * Az alsó margónak a fix gyorssáv TELJES magasságát fednie kell.
	 * A sáv 76 px (57 px tartalom + 2×9 px belső margó + keret), a korábbi
	 * 64 px tehát 12 px-szel kevesebb volt: a lap legalján a lábléc
	 * telefonszáma és e-mail címe a sáv alá került, és semmivel nem lehetett
	 * előhozni. iPhone-on ehhez jön még a képernyő alján lévő biztonsági sáv.
	 */
	.site-lablec { padding-top: 48px; padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
	.lablec__felso { grid-template-columns: 1fr; gap: 34px; padding-bottom: 36px; }
	.lablec__also { flex-direction: column; align-items: flex-start; gap: 14px; }
	.lablec__also ul { gap: 14px; }

	.mobil-sav { display: block; }
}