/* ════════════════════════════════════════════════════════════════════════════
   fpe-ui4.css — 4. kör: compliance-lábléc + 3 vizuális hiba, 2026-08-01
   ────────────────────────────────────────────────────────────────────────────
   ADDITÍV RÉTEG. A korábbi körök fájljaihoz (fpe-temak.css, fpe-ui2b.*,
   fpe-ui2c.*, fpe-ui2d.*, fpe-ui3.*, fpe-arany.*, shared.css, glass.css,
   orbital-hvco-wheel.js) egyetlen karakterrel sem nyúl hozzá.
   A kör visszavonható ennek a fájlnak (és a fpe-ui4.js-nek) a <link>/<script>
   sorával együtt — a lábléc jogi szövege viszont HTML-ben van, tehát az a
   réteg nélkül is a helyén marad. Ez szándékos: jogi tartalom nem függhet
   attól, hogy betöltődik-e egy stíluslap.

   Betöltési sorrend: KÖZVETLENÜL a fpe-ui3.css UTÁN (utolsó CSS-réteg).

   MIT NEM CSINÁL: nem ír át jogi/compliance szöveget, nem nyúl számítási
   logikához, nem ad értéket a 9 nem deklarált globális változónak
   (--gold, --purple, --blue, --red, --text-dim, --radius-lg, --accent-glow,
   --tw-shadow-color), és NEM változtatja meg az arany értékét (#d9a544).
   ════════════════════════════════════════════════════════════════════════════ */


/* ══ 1. LÁBLÉC — JOGI ZÁRÓSÁV (A4) ══════════════════════════════════════════

   MÉRT KIINDULÁS (2026-08-01, mind a 40 oldal):
     · MNB-nyilvántartási szám hiányzott 14 oldalról
     · „minden jog fenntartva" / copyright: 0 oldalon
     · adatkezelési link a láblécből: sehol
     · 24 oldalon egyáltalán nem volt lábléc-elem

   A MEGLÉVŐ lábléc-szöveg egyetlen karaktere sem változott — a `.fpe-jogi`
   sáv KIEGÉSZÍTÉS, a meglévő tartalom alatt. A sáv semmit nem állít a
   jogállásról (se „független", se „nincs munkáltató"); a közvetítői
   tájékoztatást továbbra is a bizalmi blokk mondja el a maga helyén.       */

.fpe-jogi {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.16));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 2px 14px;
  font-size: 11.5px;
  line-height: 1.9;
  letter-spacing: .005em;
  color: var(--text-muted, #a3abb9);
  text-align: center;
}
.fpe-jogi-copy { flex-basis: 100%; }
.fpe-jogi a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.fpe-jogi a:hover,
.fpe-jogi a:focus-visible { color: var(--text-secondary, #e8ecf5); }

/* 🔴 MÉRT HIBA, AMIT EZ A SÁV KÜLÖNBEN 40 OLDALRA SOKSZOROZOTT VOLNA.
   Az adatkezelesi-tajekoztato.html láblécében ma egy „Vissza a főoldalra"
   link áll, `footer a { color: var(--accent-text) }` szerint. A lábléc
   viszont a C kör óta `.fpe-video-blokk`, tehát SÖTÉT — a világos mód
   akcentusa (#175a90) ezen 2,52:1 (kompozitált pixelmérés, igazi Chrome).
   Ugyanez történt volna minden új adatkezelési linkkel. A javítás a 3. kör
   1/b szakaszának módszere: a blokk hatókörében világos akcentus.
   ⚠️ Hatókör: CSAK a `footer.fpe-video-blokk` — ott, ahol a sötét
   képréteg tényleg jelen van. JS nélkül a lábléc világos marad, és ott a
   `--accent-text` a helyes érték; ezt a szabály nem érinti.

   ⚠️ AZ !important AZ EGYETLEN, AMI ITT MŰKÖDIK — és ez is mérés eredménye.
   Az első verzióm !important nélkül állt itt, és a mérés UGYANAZT a 2,54:1-et
   adta: az adatkezelesi-tajekoztato.html linkjén ugyanis INLINE stílus áll
   (`style="color: var(--accent-text, var(--accent));"`), amit stíluslapból
   csak !important előz meg. A link SZÖVEGE nem változik, csak a színe. */
footer.fpe-video-blokk a,
footer.fpe-video-blokk .fpe-jogi a { color: #9fcdf0 !important; }
footer.fpe-video-blokk .fpe-jogi { border-top-color: rgba(255, 255, 255, 0.20); }


/* ══ 2. LÁBLÉC — VIZUÁLIS ZÁRÁS (B3) ════════════════════════════════════════

   ANDRÁS PANASZA: „legalul van egy ilyen fura rész és a nevem odaírva,
   mintha valami ottmaradt volna."

   A MECHANIZMUS, amit a 49-es log 7.3 pontja nyitva hagyott: a lábléc
   `max-width: 760px; margin: 40px auto 0` (fpe-ui2b.css:481), a C kör
   viszont EGY EGÉSZ KÉPRÉTEGET tett mögé (`footer-asztal`, fpe-ui2c.js),
   amit a D kör textúrára mosott. Egy 760 px széles, a lap közepén lebegő,
   elmosott fotós doboz — ez a „fura rész". Nem félkész: félbehagyott
   döntés (49-es log 8.: „Teljes szélességű lábléc?").

   EZ A KÖR LEZÁRJA: a lábléc SÁVJA teljes szélességű lesz, a SZÖVEGE
   viszont marad a 760 px-es olvasási oszlopban. Így a képréteg egy valódi
   lapzáró sáv lesz, nem egy középen lebegő téglalap.

   Wrapper-elem NEM kell hozzá: a 760 px-es oszlopot padding adja ki
   (`max()`-szal, hogy szűk nézetben ne váljon negatívvá).
   VISSZAVONÁS: töröld ezt az egy szabályt — a lábléc visszaáll 760 px-esre. */
footer,
.footer {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: max(16px, calc((100% - 760px) / 2));
  padding-right: max(16px, calc((100% - 760px) / 2));
}
/* A 404.html saját, önhordó láblécet visz (nulla külső függőség), és ezt a
   réteget nem is tölti be — ott a jogi sáv inline stílust kapott. */


/* ══ 3. AZ ARANY KERET (B2) ═════════════════════════════════════════════════

   ANDRÁS KÉRÉSE: „legyen szélesebb, jobban távolodjon el a blokkoktól,
   és legyenek lekerekítve a sarkai."

   MÉRT KIINDULÁS (33 blokk, 1440×900, igazi Chrome):
     keret     1 px (cikk .cta-box, HVCO .section-card) vagy 2 px (.gf-form-card)
     radius    12 px (cikkek) / 16 px (a többi) / 0 px (index .bonus-right)
     padding   24–36 px, oldalanként más
     kontraszt VILÁGOS módban 1,40–1,53:1 · SÖTÉT módban 3,18–3,62:1

   HÁROM VÁLTOZÁS, EGY IRÁNYBAN:
     a) szélesebb keret:  1/2 px → 3 px, egységesen
     b) nagyobb belső és külső távolság: padding + margin-block
     c) lekerekített sarok: 20 px (mobilon 16 px)

   🔴 AZ ARANY ÉRTÉKE NEM VÁLTOZIK. A keret ma `rgba(217,165,68,.55)` —
   ugyanaz a #d9a544, 55%-os átlátszósággal. Itt CSAK az átlátszóság megy
   1,0-ra: a szín azonos, a keret viszont a saját színét mutatja, nem egy
   háttérrel kevert halványabb változatot. Ez pontosan a kért „szélesebb,
   erősebb keret", és a mérés is ezt igazolja:
     sötét mód   3,18–3,62:1  →  8,9:1   ✅ WCAG 1.4.11 fölött
     világos mód 1,40–1,53:1  →  2,07:1  ⚠️ javul, de 3:1 alatt marad
   A világos mód 3:1-je a #d9a544-gyel MATEMATIKAILAG elérhetetlen: az arany
   relatív luminanciája 0,458, egy fehér/krém felületé 0,92–1,00, tehát a
   legjobb elérhető érték 2,07:1. 3:1-hez a világos mód aranyát kellene
   sötétíteni (a lapokon már létezik ilyen token: `--accent-gold: #8a5e12`,
   fpe-temak.css:145, és a D kör kerete már ezt használja — fpe-ui2d.css:105,
   ott 5,47:1). EZT NEM DÖNTÖTTEM EL: 16 világos oldalon látható arculati
   változás lenne, és a feladat kifejezetten tiltja az arany értékének
   megváltoztatását. Lásd az 53-as log „Amit szándékosan nem csináltam" pontját.

   ⚠️ A 3× ismételt osztály a specificitás miatt kell: a fpe-ui2b.css:448
   `.gf-form-card.fpe-szint-3.fpe-szint-3` (0,3,0) különben nyerne a
   border-width-en.                                                          */
.fpe-szint-3.fpe-szint-3.fpe-szint-3 {
  border: 3px solid #d9a544;
  border-radius: 20px;
  padding: clamp(24px, 3.2vw, 36px);
  margin-block: clamp(20px, 3vw, 34px);
  box-shadow:
    0 0 0 1px rgba(217, 165, 68, .16),
    0 0 34px rgba(217, 165, 68, .15);
}

/* Az index bónusz-blokkja rács-cella (`.bonus-hvco > .bonus-right`): ott a
   függőleges margó elcsúsztatná a jobb oszlopot a bal mellett. A padding és
   a radius viszont pont ott hiányzott a legjobban — mérve 0 px / 0 px. */
.bonus-right.fpe-szint-3.fpe-szint-3.fpe-szint-3 { margin-block: 0; }

@media (max-width: 560px) {
  .fpe-szint-3.fpe-szint-3.fpe-szint-3 {
    padding: 20px 16px;
    border-radius: 16px;
    border-width: 2px;
  }
}
@media print {
  .fpe-szint-3.fpe-szint-3.fpe-szint-3 { box-shadow: none; border: 1px solid #999; }
}


/* ══ 4. INDEX — A KERÉK-FEJLÉC ÉS A KÁRTYÁK ÜTKÖZÉSE (B1) ═══════════════════

   ANDRÁS PANASZA: az „Ingyenes elemzőeszközök & e-könyv" / „Melyik a te
   helyzeted?" blokk ráül a kerék kártyáira, a felirat és az alcím
   egymásba csúszik.

   ── A MÉRT GYÖKÉROK (igazi Chrome, 6 szélesség × 5 görgetési állás) ──
   KÉT, EGYMÁSTÓL FÜGGETLEN OK, és mindkettő kell a tünethez:

   1) GEOMETRIA. A `.s3-head` `position: absolute; top: 20px` — tehát KIVAN
      a folyamból, semmi nem foglal neki helyet. A kerék helyzetét viszont
      a JS kizárólag a nézet ALJÁHOZ köti (`wheel.style.bottom =
      -(meret * 0.68)`), a `meret` pedig CSAK a szélességtől függ
      (`clamp(vw * 1.45, 500, 1400)`), tehát 966 px fölött konstans 1400 px.
      Ebből a fókuszban lévő kártya teteje:
          nézetmagasság − 0,32 × 1400 − 135   (= fél kártya)
      A fejléc alja viszont fix 203 px. Ütközés tehát AKKOR van, ha a
      nézet magassága 786 px alatt marad — vagyis az ablak 842 px alatt.
      MÉRVE:
          1024×768  → 73–74 px átfedés   (a leggyakoribb laptop-arány)
          1366×768  → 73–74 px átfedés
          1280×800  → 41–42 px átfedés
          1440×900  → nincs átfedés (58 px hézag)
          1920×1080 → nincs átfedés
      Ez magyarázza, miért nem látszott korábbi köröknél: a záró
      screenshot-kör 1440×900-on készül, ahol a hiba NINCS JELEN.

   2) FESTÉSI SORREND. A kártyák `z-index`-ét a JS adja
      (`(1 − fokusz) × 100`), a fókuszban lévő kártya tehát 100-at kap —
      a `.s3-head` viszont 20-at (index.html:855). Ahol a kettő találkozik,
      ott a KÁRTYA fest a FEJLÉC SZÖVEGE FÖLÉ. Ezért nem szoros, hanem
      olvashatatlan a találkozás.

   ── A JAVÍTÁS SORRENDJE (a feladat kötelező sorrendje szerint) ──
   1. LÉPÉS — ALAPÁLLAPOT, görgetés-effekt NÉLKÜL. A kerék annyival lejjebb
      ül, amennyi a fejléc-sávból hiányzik. `--oiw-fej` alapértéke 0, tehát
      ez az állapot érvényes JS nélkül, hibás JS esetén és minden régi
      böngészőn. A `.s3-head` egyben a kártyák FÖLÉ kerül (z-index 120 > 100),
      hogy ha bármi mégis összeérne, a SZÖVEG maradjon olvasható.
   2. LÉPÉS — KOREOGRÁFIA, erre RÁÉPÍTVE (fpe-ui4.js). Görgetésre a fejléc
      felcsúszik a nézet tetejére és elhalványul; ahogy elmegy, a kerék
      visszaúszik a saját, teljes helyére. Ha a JS nem fut le, `--oiw-fej`
      nincs beállítva → az 1. lépés állapota marad, ami önmagában is helyes.
   3. `prefers-reduced-motion: reduce` és NO-JS → a kerék be sem kapcsol
      (orbital-hvco-wheel.js), marad a sima kártyarács. Ezek a szabályok
      mind `.oiw-on` hatókörűek, tehát rács-módban nem is léteznek.

   A SZEKCIÓ-CÍM NEM VÉSZ EL: kerék-módban az alsó cím-sáv
   (`.oiw-caption`) mutatja, melyik kártya van fókuszban, és a `<h2>` a
   DOM-ban marad, `aria-labelledby="s3-cim"`-mel. Ez felülírja az
   index.html:1368 markup-kommentjének korábbi szándékát („a fejléc végig
   látszik") — András kérésére, és mert a kontextust az alsó sáv viszi. */

/* ⚠️ MÉRT SPECIFICITÁS-CSAPDA. Az index.html `.oiw-*` szabályai nem a
   <head>-ben, hanem egy <style> blokkban a <body>-n BELÜL állnak. Azonos
   specificitásnál (0,3,0) tehát a DOKUMENTUMSORREND dönt, és az mindig a
   lap saját blokkját hozza ki nyertesnek — a <link> a fejben van. Az első
   verzióm pontosan ezért nem érvényesült: a `transform` és a `z-index`
   változatlan maradt (mérve). A duplázott `.oiw-section` (0,4,0)-ra emeli
   a szelektort. Ugyanaz a technika, mint a fpe-ui2b.css:440
   `.fpe-szint-3.fpe-szint-3` alakja. */
.oiw-section.oiw-section.oiw-on {
  /* Fejléc-sáv = top(20px) + a fejléc magassága (mérve 183px) + 8px levegő.
     A fpe-ui4.js ezt a tényleges magassággal felülírja; ez a mért alapérték. */
  --oiw-fejsav: 211px;

  /* A kártya magassága (index.html:863). Alacsony nézetben lentebb kisebb. */
  --oiw-kartya: 270px;

  /* A kerék átmérője. A JS képlete: clamp(viewport.clientWidth × 1,45, 500, 1400).
     A `clientWidth` a görgetősáv nélküli lapszélesség, ezért a 15px levonás.
     A fpe-ui4.js a TÉNYLEGES mérettel felülírja — ez a JS nélküli közelítés. */
  --oiw-meret: clamp(500px, calc((100vw - 15px) * 1.45), 1400px);

  --oiw-nezet: calc(100vh - 56px);

  /* Hol van MA a fókuszban lévő kártya teteje a nézet tetejétől számítva.
     A JS a kört a nézet ALJÁHOZ köti (bottom: -(meret × 0,68)), tehát a
     kör közepe a nézet alja alatt 0,18 × meret-tel van, a 12 óra irányú
     kártya közepe pedig onnan egy sugárnyira feljebb:
       nézetmagasság - 0,32 × meret,  mínusz fél kártya. */
  --oiw-most: calc(var(--oiw-nezet) - 0.32 * var(--oiw-meret) - var(--oiw-kartya) / 2);

  /* Mennyi hiányzik ahhoz, hogy a kártya teteje a fejléc ALÁ kerüljön. */
  --oiw-tolas: max(0px, calc(var(--oiw-fejsav) + 8px - var(--oiw-most)));
}

/* ⚠️ ALACSONY NÉZET — MÉRT REGRESSZIÓ, AMIT AZ ELSŐ VERZIÓM OKOZOTT.
   A lejjebb tolt kerék alacsony nézetben az ALSÓ cím-sávot (.oiw-caption)
   nyomta le: 1024×768-on 9px, 1024×700-on 73px, 900×620-on 179px belelógás
   (mérve). Vagyis csak áthelyeztem az ütközést a fejléctől a cím-sávhoz.
   A valódi ok ugyanaz, mint az eredeti hibáé: a 270px-es kártya + a 203px-es
   fejléc + a cím-sáv EGYÜTT nem fér el 800px alatti nézetben. Ezért itt a
   KÁRTYA is kisebb lesz — nem csak elmozdul. 1440×900-on és fölötte ez a
   szabály nem lép be, tehát a referencia-nézet változatlan (mérve: 0px tolás). */
@media (max-height: 820px) {
  .oiw-section.oiw-section.oiw-on { --oiw-kartya: 230px; }
  .oiw-section.oiw-section.oiw-on .oiw-item { height: 230px; padding: 20px 18px; }
  .oiw-section.oiw-section.oiw-on .oiw-item-icon { width: 76px; height: 76px; }
}
@media (max-height: 730px) {
  .oiw-section.oiw-section.oiw-on { --oiw-kartya: 200px; }
  .oiw-section.oiw-section.oiw-on .oiw-item { height: 200px; padding: 16px 16px; gap: 10px; }
  .oiw-section.oiw-section.oiw-on .oiw-item-icon { width: 62px; height: 62px; }
}

.oiw-section.oiw-section.oiw-on .oiw-wheel {
  transform: translateX(-50%) translateY(calc(var(--oiw-tolas) * (1 - var(--oiw-fej, 0))));
}

.oiw-section.oiw-section.oiw-on .s3-head {
  z-index: 120;
  transform: translateY(calc(-1 * var(--oiw-fejsav) * var(--oiw-fej, 0)));
  opacity: calc(1 - var(--oiw-fej, 0));
  /* A fejlécben nincs interaktív elem; kerék-módban viszont a kártyák fölött
     lebeg, és alacsony nézetben ma elnyeli a kattintást a mögötte lévő
     kártyáról. Rács-módban (nincs .oiw-on) a szöveg jelölhető marad. */
  pointer-events: none;
  will-change: transform, opacity;
}


/* ══ 5. A KIVEZETETT OLVASÓSZÁMLÁLÓK HELYE (A3) ═════════════════════════════
   A `.reader-count` osztálynév marad (a 3. kör videóblokk-kontrasztja erre a
   névre van bemérve), de a tartalma már nem társadalmi bizonyíték, hanem
   ellenőrizhető állítás. A babavaro- és a HVCO4-változat CSS-ből tett elé egy
   👥 ikont — az az új szöveghez értelmetlen. */
.fpe-oldal-info::before { content: none !important; }


/* ══ 6. MOZGÁS ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .oiw-section.oiw-section.oiw-on .s3-head,
  .oiw-section.oiw-section.oiw-on .oiw-wheel { transition: none !important; animation: none !important; }
}