/*
 * Alapok: doboz-modell, tipográfia, tartalomszélesség, fókusz.
 *
 * Csak az, ami MINDEN oldalon érvényes. A komponensek külön fájlokba jönnek.
 */

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

body {
	margin: 0;
	background: var(--surface-page);
	color: var(--text-body);
	font-family: var(--font-sans-ui);
	font-size: var(--text-md);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* Címsorok. A Playfair itt és csak itt. Csupa nagybetű sehol -- egyedül a kis
   méretű kategória-fülecske kivétel, az viszont Roboto. */
h1, h2, h3, h4 {
	margin: 0 0 var(--space-4);
	color: var(--text-body);
	text-transform: none;
	/* A címsor a lap legrövidebb szövege, és a legtöbbet nézik: hagyjuk, hogy a
	   böngésző kiegyensúlyozza a sorokat, ne maradjon egy szó a második sorban. */
	text-wrap: balance;
}

/* A méretet, a vastagságot és a sorközt is a terv type-tokenjei adják, egyben.
   Így ha a tervben változik egy címsor, itt EGY helyen követi. */
h1 { font: var(--type-h1); }
h2 { font: var(--type-h2); }
h3 { font: var(--type-h3); }
h4 { font: var(--type-h4); }

/* A Playfair erős kontrasztú betű: 16-18 px alatt elvékonyodik, és mobilon ez
   látszik a legjobban. A h5 és a h6 ilyen méretű, ezért ott a felületi betű
   megy -- ugyanezért Roboto a meta sor, a képaláírás, a morzsamenü és a
   kategória-fülecske is. */
h5, h6 {
	margin: 0 0 var(--space-2);
	font-family: var(--font-sans-ui);
	font-size: var(--text-sm);
	font-weight: 700;
	line-height: 1.4;
}

@media (min-width: 1024px) {
	h1 { font-size: var(--text-4xl); }
}

p {
	margin: 0 0 var(--space-4);
	/* Nem hagy egyetlen szót az utolsó sorban. */
	text-wrap: pretty;
}

a {
	color: var(--link);
	text-decoration-thickness: 1px;
	text-decoration-color: var(--teal-300);
	text-underline-offset: 2px;
	transition: var(--transition-control);
}

a:hover,
a:focus-visible {
	color: var(--link-hover);
	text-decoration-color: currentColor;
}

a:visited { color: var(--link-visited); }

/* Billentyűzetes navigációhoz látható fókusz kell. Az outline a felületen
   KÍVÜL ül, hogy sötét képen is látszódjon. */
:focus-visible {
	outline: 3px solid var(--accent-hover);
	outline-offset: 2px;
}

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

/* Kijelölés a márka színével, nem a böngésző kékjével. */
::selection {
	background: var(--teal-100);
	color: var(--ink-900);
}

/* A NYERS <iframe> KÜLÖN KELL. A responsive-embeds téma-támogatás csak a
   Gutenberg beágyazás-blokkjaira hat; a klasszikus szerkesztővel írt cikkekben
   a videó nyers iframe-ként ül a szövegben, saját width attribútummal, és
   szétnyomja a lapot. Mérve 2026-08-29-én a keresési találatoknál: egy 560 px
   széles iframe egy 342 px-es szülőben, 390 px-es képernyőn.
   A height szándékosan marad az attribútumon: a nulláz-e vagy torzul-e a
   képarány, az beágyazásonként más, azt nem itt döntjük el. */
iframe {
	max-width: 100%;
}

/* A tartalom vízszintes kerete. Egyetlen helyen definiálva, hogy a lapon soha
   ne legyen vízszintes görgetés. */
.ag-wrap {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	/* Mobilon a --gutter (24), asztalin 32. A terv Shell komponense ezt írja:
	   padding: m ? '0 24px' : '0 32px'. A 32-re nincs külön token, a Chrome2026
	   közvetlenül adja meg. */
	padding-inline: var(--gutter);

	/* A tartalom nem a mi kezünkben van: egy régi oldalszerkesztő beragadt
	   shortcode-ja, egy hosszú URL vagy egy base64 blokk tördeletlen szóként
	   viselkedik, és a KERETET feszíti szét, nem csak magát. Mérve 2026-08-29-én:
	   egy 2369 karakteres base64 részlet 23 099 px-re nyújtotta a lapot 390 px-es
	   képernyőn. A tördelés itt védelem, nem tipográfiai döntés. */
	overflow-wrap: break-word;
}

@media (min-width: 900px) {
	.ag-wrap { padding-inline: 32px; }
}

/* Olvasható sorhossz. A cikktörzs ezt kapja, a teljes szélességet nem. */
.ag-measure {
	max-width: var(--measure-article);
}

/* Képernyőolvasónak marad, szemnek nem. Nem display:none: az elvenné a
   képernyőolvasótól is. */
.ag-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Az első dolog, amit egy billentyűzetes olvasó elér. */
.ag-skip {
	position: absolute;
	left: var(--space-4);
	top: -100%;
	z-index: 100;
	padding: var(--space-2) var(--space-4);
	background: var(--surface-card);
	border-radius: var(--radius-card);
}

.ag-skip:focus { top: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* Csak felolvasónak. A WordPress sablonjai és a mi gombjaink is erre az OSZTÁLYNÉVRE
   számítanak, tehát nem nevezhetjük át. A display:none NEM jó helyette: azt a
   felolvasó sem mondja ki. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Billentyűzettel viszont LÁTSZÓDNIA kell, ha fókuszt kap. */
.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}