/* =====================================================================
   MAGMA — TIPOGRÁFIAI RENDSZER
   Készült: 2026-08-19

   MI EZ: a betűrendszer egy helyen. Két betűtípus, világos szereposztással:

     CÍMSOROK   →  Space Grotesk
     SZÖVEG,
     KEZELŐELEM →  Inter

   Mindkettő ITT van kiszolgálva (assets/fonts/), külső kérés nincs.

   2026-08-20: egy körben a Clash Display + Satoshi páros volt beállítva;
   a user kérésére visszatértünk az eredetire. A két fájl megmaradt az
   assets/fonts mappában, de nem hivatkozik rájuk semmi.

   HOGYAN HAT: ez a fájl NEM a betűtípust osztja ki (azt a lapok saját
   <style> blokkjai teszik, több száz helyen), hanem azt, ami RENDSZERRÉ
   teszi: a vastagságot, a sorközt, a betűközt és a levegőt.

   MIÉRT `:where(...)` A TÉRKÖZÖKNÉL: a `:where()` fajsúlya NULLA, tehát
   bármelyik laponkénti szabály felülírja. Így ezek a térközök CSAK ott
   érvényesülnek, ahol a lap nem rendelkezett róluk — vagyis javítanak,
   de soha nem borítanak fel egy gondosan behangolt elrendezést.
   ===================================================================== */

:root{
  /* 2026-08-20: VISSZAALLITVA az eredeti ket betutipusra (a user kerese).
     Egy koron at itt a Clash Display es a Satoshi allt — azok fajljai
     megmaradtak az assets/fonts mappaban, de most nincsenek hasznalatban.
     Ez a fajl tovabbra is a RENDSZERT adja: sorkoz, vastagsag, betukoz,
     terkozok. A betutipus maga az eredeti. */
  --mg-cim:    'Space Grotesk',system-ui,sans-serif;
  --mg-szoveg: 'Inter',system-ui,-apple-system,sans-serif;

  /* Sorköz. A brief 1,6–1,7 közöttit kér: ettől lesz a szöveg svájcias és
     szellős. A címsoroknál ennek az ellentéte kell — ott a szoros sorköz
     ad tömör, építészeti hatást. */
  --mg-sorkoz-szoveg: 1.65;
  --mg-sorkoz-cim:    1.14;

  /* Betűköz. Nagy címnél negatív (összehúz, magabiztos), a kiemelő
     szemöldök-szövegnél erősen pozitív (szerkesztőségi, exkluzív). */
  --mg-koz-cim-nagy: -.035em;
  --mg-koz-cim:      -.02em;
  --mg-koz-szemoldok: .22em;

  /* Vastagságok */
  --mg-vastag-cim:    700;
  --mg-vastag-cim-kis:600;
  --mg-vastag-szoveg: 400;
  --mg-vastag-halk:   300;   /* csak nagyon nagy bevezető bekezdéshez */
  --mg-vastag-ui:     500;   /* gomb, menü, apró felirat */
}

/* ---------------------------------------------------------------------
   1. SZÖVEGTÖRZS

   A `line-height` itt szándékosan sima elemszelektorral megy: ezt AKARJUK
   érvényesíteni a lapok korábbi, szűkebb (1,45–1,55) értékei helyett —
   ez a brief lényege. A méretekhez viszont NEM nyúlunk: azok laponként
   gondosan be vannak állítva, és egy általános felülírás elrontaná őket.
   --------------------------------------------------------------------- */
p, dd, dt, blockquote, figcaption,
td, th, .sub, .psub, .lead {
  line-height: var(--mg-sorkoz-szoveg);
  font-weight: var(--mg-vastag-szoveg);
}

/* A LISTAELEM CSAK A SZÖVEGTÖRZSBEN kap bő sorközt — a menükben NEM.
   MIÉRT: a menüsávok is <li> elemekből állnak. Amikor a szabály rájuk is
   vonatkozott, a főoldal felső menüsávja 82 képpontról 111,7-re hízott —
   ez volt a „megvastagodott menüsáv”. Kimérve, nem becsülve.
   A régi böngészők, amelyek nem értik ezt a szelektort, egyszerűen
   figyelmen kívül hagyják a szabályt — ott a lap saját beállítása marad,
   ami szintén rendben van. */
li:not(nav li):not(header li):not(footer li):not(.mmenu li):not(.menudrop li) {
  line-height: var(--mg-sorkoz-szoveg);
  font-weight: var(--mg-vastag-szoveg);
}

/* Nagyon nagy bevezető bekezdés: vékonyabb vonal, több levegő.
   Csak 20 képpont FÖLÖTT — a normál szövegnél a Light már gyenge lenne
   sötét háttéren (a világos betű sötéten amúgy is vastagabbnak látszik). */
@media (min-width: 768px){
  .lead, .hero-sub, .intro {
    font-weight: var(--mg-vastag-halk);
    line-height: 1.6;
  }
}

/* ---------------------------------------------------------------------
   2. CÍMSOROK

   „Confident and architectural": tömör sorköz, enyhén összehúzott
   betűköz, félkövér/kövér vastagság. A méret marad, amit a lap mond.

   A `text-wrap: balance` a sortöréseket osztja el egyenletesen, hogy ne
   maradjon egyetlen árva szó az utolsó sorban. Ahol a böngésző még nem
   ismeri, egyszerűen figyelmen kívül hagyja — nincs következménye.
   --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--mg-cim);
  line-height: var(--mg-sorkoz-cim);
  letter-spacing: var(--mg-koz-cim);
  text-wrap: balance;
  font-optical-sizing: auto;
}
h1, h2 { font-weight: var(--mg-vastag-cim); }
h3, h4, h5, h6 { font-weight: var(--mg-vastag-cim-kis); line-height: 1.25; }

/* A NAGYON nagy címeknél szorosabb betűköz kell: minél nagyobb a betű,
   annál nagyobbnak LÁTSZIK a betűk közti hézag. Ez optikai kiegyenlítés,
   nem ízlés kérdése. */
.stitle, .hero-title, .bento-title, .qtxt {
  letter-spacing: var(--mg-koz-cim-nagy);
  text-wrap: balance;
}

/* ---------------------------------------------------------------------
   3. KEZELŐELEMEK ÉS APRÓ FELIRATOK

   Gomb, menü, címke: a szövegtörzs betűje, közepes vastagsággal. A közepes
   elég erős ahhoz, hogy kattinthatónak hasson, de nem hangosabb a
   címsornál.
   --------------------------------------------------------------------- */
button, .go, .btn, .cta, nav a, .menuitem, .mmenu a, label {
  font-family: var(--mg-szoveg);
  font-weight: var(--mg-vastag-ui);
}
input, textarea, select { font-family: var(--mg-szoveg); }

/* A „szemöldök” — a főcím fölötti apró felirat. Csupa nagybetű, tág
   betűközzel: ez adja a magazinos, exkluzív hatást. */
.eyebrow, .vzeyebrow, .modal-eyebrow, .kicker, .press-date, .hheadline {
  font-family: var(--mg-szoveg);
  font-weight: var(--mg-vastag-ui);
  text-transform: uppercase;
  letter-spacing: var(--mg-koz-szemoldok);
  line-height: 1.4;
}
/* A főoldal fő szemöldöke a CÍMSOR betűjével erősebb — ott nagy méretben
   fut, és a címsor-betű nagybetűi ott mutatnak igazán. */
.hheadline { font-family: var(--mg-cim); font-weight: var(--mg-vastag-cim); }

/* ---------------------------------------------------------------------
   4. LEVEGŐ

   MIND `:where(...)`-BEN, tehát NULLA fajsúllyal: ezek csak ott hatnak,
   ahol a lap nem mondott semmit. Így a szöveg ott kap levegőt, ahol eddig
   összetapadt, de sehol nem tolunk el egy kész elrendezést.
   --------------------------------------------------------------------- */
:where(h1, h2)      { margin-block-end: .6em; }
:where(h3, h4)      { margin-block-end: .45em; }
:where(h2, h3, h4)  { margin-block-start: 1.6em; }
:where(p)           { margin-block-end: 1.15em; }
/* A LISTÁK — ÉS BENNÜK A LISTAELEMEK — csak a szövegtörzsben kapnak
   térközt, a menükben NEM. A menüsávok ugyanis <ul>/<li> elemekből
   állnak: amikor ez a szabály rájuk is vonatkozott, a főoldal felső
   sávja 82 képpontról 111,7-re hízott (ebből 20,7 volt a lista alatti
   térköz, 9 a listaelemeké). Kimérve, nem becsülve. */
:where(ul:not(nav ul):not(header ul):not(footer ul):not(.mmenu ul):not(.menudrop ul),
       ol:not(nav ol):not(header ol):not(footer ol)) { margin-block-end: 1.15em; }
:where(li:not(nav li):not(header li):not(footer li):not(.mmenu li):not(.menudrop li)) { margin-block-end: .5em; }
:where(.eyebrow, .kicker) { margin-block-end: .9em; }

/* A hosszú szövegsor fárasztó olvasni. A kényelmes hossz 60–75 karakter;
   ezt a `ch` egység pontosan ki tudja fejezni. Szintén nulla fajsúllyal. */
:where(.cikk p, .szoveg p, article p) { max-width: 68ch; }

/* ---------------------------------------------------------------------
   5. FINOMHANGOLÁS

   A sötét háttéren világos betű optikailag VASTAGABBNAK látszik, mint
   fordítva. A simítás ezt húzza vissza — enélkül a szöveg elmosódottnak
   és kicsit hízottnak hat.
   --------------------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Számoknál táblázatos számjegy: így az összegek és a dátumok oszlopban
   pontosan egymás alá esnek, nem ugrálnak soronként. */
td, th, .szam, .osszeg, .vzdata .v, .count {
  font-variant-numeric: tabular-nums;
}
