/*
 * Alapok: reset, tipográfia, gombok, űrlapok, segédosztályok.
 */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background: var(--white);
	color: var(--body);
	font-family: var(--sans);
	font-size: 16.5px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/*
 * A hosszú magyar összetett szavak („intézményegységei”,
 * „Továbbtanulási”) 320 px-en és 200%-os szövegnagyításnál kitörtek a
 * dobozukból, mert a témában sehol nem volt tördelési szabály. Ez öröklődik,
 * tehát egy helyen elég kimondani.
 */
body { overflow-wrap: break-word; }

img, svg, video { max-width: 100%; }
img, video { height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--serif);
	color: var(--ink);
	margin: 0;
	line-height: 1.18;
	font-weight: 600;
	letter-spacing: -.011em;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
ul.nincs-pont, .menu, .lablec__linkek { list-style: none; }

/* --- Fókuszgyűrű -------------------------------------------------------
 * Világos háttéren navy (11,9:1), sötét szekciókban arany (6,5:1).
 * A WCAG 2.2 SC 1.4.11 nem-szöveg kontrasztra 3:1-et kér — az arany
 * fehéren csak 2,13:1, ezért nem lehet globális.
 */
:focus-visible {
	outline: 3px solid var(--navy-700);
	outline-offset: 3px;
	border-radius: 4px;
}

.topbar :focus-visible,
.hero :focus-visible,
.statok :focus-visible,
.beiskolazas :focus-visible,
.tamogatas :focus-visible,
.site-lablec :focus-visible { outline-color: var(--gold-500); }

/* --- Képernyőolvasónak ------------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background: var(--white);
	clip-path: none;
	color: var(--navy-800);
	display: block;
	font-size: 15px;
	font-weight: 700;
	height: auto;
	left: 16px;
	line-height: normal;
	padding: 14px 22px;
	top: 16px;
	width: auto;
	z-index: 100000;
	border-radius: var(--r-sm);
	box-shadow: var(--shadow-lg);
}

/* --- Konténerek --------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 24px;
}

.hasab { max-width: var(--tartalom); }

/* --- Tipográfiai segédosztályok ----------------------------------------- */
.felcim {
	font-family: var(--sans);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-700);
}

.felcim--sotet { color: var(--gold-400); }

.szekcio-fej { max-width: 660px; margin-bottom: 38px; }
.szekcio-fej h2 { font-size: clamp(28px, 3.1vw, 40px); margin: 12px 0 14px; }
.szekcio-fej p { font-size: 17px; color: var(--body); }

/*
 * --- Gombok ---------------------------------------------------------------
 *
 * A téma gombjai KIZÁRÓLAG osztályra hallgatnak (`.gomb`), csupasz `button`
 * elem-szelektor nincs sehol a témában. Ez nem véletlen: az Elementor saját
 * gombja (`.elementor-button`) így érintetlen marad, és a szerkesztő azt
 * kapja, amit a szerkesztőben beállított.
 *
 * Ide tehát ne kerüljön `button { … }` szabály — az azonnal átfestené az
 * Elementor gombjait is, és a kettő stílusa összecsúszna.
 */
.gomb {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	justify-content: center;
	padding: 14px 24px;
	border-radius: 10px;
	border: 1.5px solid transparent;
	font-family: var(--sans);
	font-size: 15.5px;
	font-weight: 650;
	letter-spacing: .005em;
	cursor: pointer;
	transition: transform .16s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
	white-space: nowrap;
}

.gomb:hover { transform: translateY(-1px); }
.gomb .pseg-ikon { width: 18px; height: 18px; flex: none; }

.gomb--arany {
	background: var(--gold-500);
	color: var(--navy-900);
	box-shadow: 0 4px 14px rgba(200, 175, 118, .4);
}
.gomb--arany:hover { background: var(--gold-400); box-shadow: 0 8px 22px rgba(200, 175, 118, .5); }

.gomb--navy { background: var(--navy-800); color: #fff; }
.gomb--navy:hover { background: var(--navy-700); }

.gomb--attetszo {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .42);
}
.gomb--attetszo:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .75); }

.gomb--keret {
	background: #fff;
	color: var(--navy-800);
	border-color: var(--line);
}
.gomb--keret:hover { border-color: var(--navy-600); color: var(--navy-700); }

.gomb--kicsi { padding: 10px 17px; font-size: 14px; border-radius: 8px; }

.link-nyil {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 650;
	font-size: 15px;
	color: var(--navy-700);
}
.link-nyil .pseg-ikon { width: 16px; height: 16px; transition: transform .2s ease; }
.link-nyil:hover .pseg-ikon { transform: translateX(4px); }

/* --- Űrlapok ------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
textarea,
select {
	width: 100%;
	padding: 12px 15px;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	font-family: inherit;
	/*
	 * A 16 px NEM eszteikai valasztas: az iOS Safari automatikusan
	 * RANAGYIT az oldalra, ha egy beviteli mezo betumerete 16 px alatt van.
	 * A latogato ilyenkor fokuszkor elveszti a helyet az oldalon, es kezzel
	 * kell visszazoomolnia. Korabban 15,5 px volt — fel pixelen mult.
	 */
	font-size: 16px;
	color: var(--ink);
	background: var(--white);
	transition: border-color .18s ease;
}

input:focus, textarea:focus, select:focus { border-color: var(--navy-600); }

label { font-weight: 650; color: var(--ink); font-size: 14.5px; }

/* --- Táblázat és kód a tartalomban ------------------------------------- */
.bejegyzes-tartalom table {
	width: 100%;
	border-collapse: collapse;
	margin: 22px 0;
	font-size: 15px;
}
.bejegyzes-tartalom th,
.bejegyzes-tartalom td {
	border: 1px solid var(--line);
	padding: 10px 13px;
	text-align: left;
}
.bejegyzes-tartalom th { background: var(--surface-2); font-weight: 650; color: var(--ink); }

/*
 * Széles tartalom sose tolja szét a lapot.
 *
 * A `.tabla-gorgeto` burkolatot a nav.js teszi a táblázatok köré — de a
 * tartalomban 23 táblázat van, és ha a szkript nem fut le (hiba, lassú
 * kapcsolat, kikapcsolt JS), mindegyik szétfeszíti a lapot. Elrendezés nem
 * függhet szkripttől, ezért a táblázat CSS-ből is önmaga görgetője lesz;
 * ha a burkolat mégis megérkezik, a táblázat visszakapja a rendes
 * megjelenítését.
 */
.bejegyzes-tartalom table { display: block; max-width: 100%; overflow-x: auto; }
.bejegyzes-tartalom .tabla-gorgeto { overflow-x: auto; }
.bejegyzes-tartalom .tabla-gorgeto table { display: table; overflow-x: visible; }

/*
 * Beágyazott tartalom (19 db a tartalomban: YouTube, Google Térkép).
 * A beágyazókód fix `width="600"`-at ad, amire eddig semmilyen szabály nem
 * vonatkozott: 375 px-es telefonon ez 243 px vízszintes csúszást okozott.
 * Az `img`-hez hasonlóan az iframe-nek is le kell tudnia zsugorodni.
 */
iframe, embed, object { max-width: 100%; }

.bejegyzes-tartalom pre {
	background: var(--surface-2);
	padding: 16px 18px;
	border-radius: var(--r-md);
	overflow-x: auto;
	font-family: var(--mono);
	font-size: 14px;
}