/* ═══════════════════════════════════════════════════════════════════════════
   fpe-temak.css — FPE Ecosystem közös téma-réteg
   Létrehozva: 2026-07-26 (UI 1. kör — design-token egységesítés)
   Breznai András · breznaiandras.com

   MIT OLD MEG
   ───────────
   Korábban 22 oldal egy második, TELJES stíluslapot vitt magával
   (<style id="css-light" disabled>), ami nem csak a hátteret, hanem az egész
   accent-identitást is lecserélte kékről narancs-barnára. Ráadásul a `disabled`
   MARKUP-attribútumot a Chromium nem veszi figyelembe <style> elemen (csak az
   azonos nevű IDL-tulajdonságot), ezért az a lap mindig aktív volt: a 22 oldal
   nem szándékosan, hanem véletlenül nézett ki másik márkának.

   MOSTANTÓL
   ─────────
   Egy design-nyelv, két felületi mód. A mód az oldal TÍPUSÁBÓL következik, és
   egyetlen explicit kapcsoló állítja:

       <html lang="hu">                    → sötét (meggyőzés: index, HVCO-k, …)
       <html lang="hu" data-theme="light">  → világos (munka: kalkulátor, cikk, jogi)

   A világos mód UGYANAZT a kék+arany identitást viszi tovább, csak a világos
   háttérhez sötétítve — a háttér hűvös, kékes off-white (#f3f5fa), nem meleg
   krém, hogy a navy „világos testvérének" olvasódjon.

   BETÖLTÉSI SORREND
   ─────────────────
   Mindegy, hova kerül: a világos tokenek `html[data-theme="light"]`
   szelektoron ülnek (specificitás 0,1,1), ami erősebb, mint az oldalak saját
   `:root` blokkja (0,1,0). A specificitás dönt, nem a sorrend. A glass.css
   „utolsó szó" szerződése ezért sértetlen marad.

   VISSZAVONÁS
   ───────────
   Töröld a <link ... fpe-temak.css> sorokat és a data-theme attribútumokat —
   minden oldal visszaáll a saját, sötét :root blokkjára.

   Kapcsolódó: 35_UI_UX_Fejlesztesi_Terv_2026-07-26, 20_UI_Design_Iranyelvek_2026-07-23
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   1. MÓD-FÜGGETLEN TOKENEK
   Ezek mindkét módban azonosak — a közös mag része (terv 1.1).
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Szöveg/ikon TÖMÖR accent-felületen (kék gomb, badge, számkör).
     Mindkét módban fehér: a felület maga hordozza a színt, nem a lap.
     Korábban ezeken a helyeken var(--text-primary) állt — sötétben az fehér,
     világosban viszont majdnem fekete lett volna a kék gombon. */
  --on-accent: #ffffff;

  /* Lebegő Kapcsolat-widget (shared.css .qc-*) — sötét alapértékek */
  --qc-bg:            #1a1d2e;
  --qc-border:        rgba(52,152,219,0.30);
  --qc-shadow:        rgba(0,0,0,0.45);
  --qc-text:          #e8eaf0;
  --qc-title:         #ffffff;
  --qc-sub:           #8892a4;
  --qc-hover:         rgba(52,152,219,0.12);
  --qc-divider:       rgba(255,255,255,0.08);
  --qc-close-hover:   rgba(255,255,255,0.06);
  --qc-focus:         #75b8e7;

  /* Cookie/consent sáv (fpe-consent.js injektálja) — sötét alapértékek */
  --consent-bg:       #1a1d2e;
  --consent-border:   rgba(52,152,219,0.35);
  --consent-text:     #aeb4c9;
  --consent-link:     #75b8e7;
  /* A consent-sáv stílusát a fpe-consent.js DOMContentLoaded-kor szúrja be,
     tehát a `border` shorthandje később fut, mint ez a fájl — ott csak a
     változón keresztül tudjuk erősíteni a keretet, szelektorral nem. */
  --consent-ghost-bd: var(--border-strong);
  --consent-ghost-hv: rgba(255,255,255,0.06);
  --consent-ghost-tx: #ffffff;
  /* A sáv gombja MINDIG kék — az oldal saját accentje (koszonom = zöld,
     visszahivas = narancs) nem színezheti át a süti-sávot. */
  --consent-btn:      #2472a4;
  --consent-btn-hv:   #2980b9;
  --consent-btn-tx:   #ffffff;
  --consent-gold-tx:  #f3dfb0;   /* arany megerősítés-szöveg megnyomáskor */

  /* Lebegő „← Főmenü" pirula.
     A korábbi rgba(41,128,185,.92) a fehér felirattal csak 4,30:1 volt —
     mérve, 20 oldal-nézeten. Ez az árnyalat 5,68:1, és szemre alig tér el. */
  --navpill-bg:       rgba(36,114,164,0.94);
  --navpill-bg-hover: rgba(36,114,164,1);

  /* Halvány felület-, illetve elválasztó-tintek. Sötétben fehér alfa,
     világosban tinta-alfa — ezért nem lehet fix érték. */
  --tint-surface:     rgba(255,255,255,0.03);
  --tint-surface-2:   rgba(255,255,255,0.06);
  --tint-divider:     rgba(255,255,255,0.08);

  /* Áttetsző, elmosott navigációs sávok háttere */
  --nav-veil:         rgba(13,15,26,0.97);

  /* Interaktív vezérlő (gomb, űrlapmező) kerete. Ez NEM dísz, hanem maga az
     affordancia, ezért a WCAG 1.4.11 szerint ≥3:1 kell — a --border
     (1,35:1 sötétben, 1,37:1 világosban) erre kevés. A kártyák díszítő kerete
     marad a halványabb --border. Sötétben 3,20:1 a kártyán, 3,57:1 a lapon. */
  --border-strong:    rgba(120,170,215,0.58);
}


/* ───────────────────────────────────────────────────────────────────────────
   2. VILÁGOS MÓD — TOKENEK
   Ugyanaz a kék és ugyanaz az arany, a világos háttérhez sötétítve.
   Minden érték WCAG AA (≥4.5:1) a saját felületén — a mérés a
   38_UI_Kor1_Vegrehajtas_Log_2026-07-26.md-ben van dokumentálva.
   ─────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  /* Felületek — hűvös, kékes off-white; NEM meleg krém */
  --bg:              #f3f5fa;
  --bg-card:         #ffffff;
  --bg-card-hover:   #eef1f7;
  --bg-elevated:     #ffffff;
  --bg-input:        #ffffff;
  --bg-strip:        #eef1f7;
  --card:            #ffffff;
  --card2:           #eef1f7;
  --input-bg:        #ffffff;

  /* Szöveg — mind ≥5,4:1 a fehér kártyán és az off-white háttéren */
  --text:            #1c2033;   /* 14,77:1 a --bg-n */
  --text-primary:    #10131f;   /* 16,96:1 */
  --text-secondary:  #3b4356;   /*  9,07:1 */
  --text-muted:      #5a6273;   /*  5,61:1 */
  --muted:           #5a6273;

  /* Accent — UGYANAZ a kék, sötétítve. Nem narancs, nem másik márka. */
  --accent:          #1f6ba8;   /* 5,17:1 a --bg-n */
  --accent-blue:     #1f6ba8;
  --accent2:         #1f6ba8;
  --accent-btn:      #1a5f96;   /* fehér szöveggel 6,73:1 */
  --accent-dark:     #175a90;
  --accent-hover:    #175a90;
  --accent-text:     #175a90;   /* 6,64:1 */
  --accent-rgb:      31,107,168;

  /* Arany — UGYANAZ az arany, sötétítve.
     FIGYELEM: a tervjavaslat #a87520 volt, az csak 4,02:1 a fehéren → megbukik.
     #8a5e12 = 5,69:1 fehéren, 5,22:1 a --bg-n. Lásd log 3. szakasz. */
  --accent-gold:     #8a5e12;
  --gold-soft:       #b8912f;   /* csak dísz/keret, nem szöveg */

  /* Állapotszínek */
  --success:         #1a7a43;   /* 4,93:1 */
  --accent-green:    #1a7a43;
  --danger:          #b3261e;   /* 5,99:1 */
  --accent-red:      #b3261e;
  --warning:         #8a5e12;   /* 5,22:1 */
  --warn:            #8a5e12;
  --accent-gray:     #5a6273;

  /* Keretek. A 0,22-es alfa szándékos: a sötét mód kerete
     (rgba(41,128,185,.25) a #1a1d2e-n) 1,35:1 — ez 1,37:1, tehát AZONOS
     vizuális súly. A díszítő keret nem esik az 1.4.11 hatálya alá. */
  --border:          rgba(31,107,168,0.22);
  --border-subtle:   rgba(31,107,168,0.12);
  --shadow:          rgba(16,19,31,0.10);
  /* 3,38:1 a fehér kártyán, 3,10:1 az off-white lapon — mindkét szomszédos
     felületen átmegy, ezért tömör érték és nem alfa. */
  --border-strong:   #768ea8;

  /* Tinta-alfák a fehér-alfák helyett */
  --tint-surface:    rgba(16,19,31,0.035);
  --tint-surface-2:  rgba(16,19,31,0.055);
  --tint-divider:    rgba(16,19,31,0.10);
  --nav-veil:        rgba(243,245,250,0.94);

  /* Widget / sáv / pirula */
  --qc-bg:           #ffffff;
  --qc-border:       rgba(31,107,168,0.28);
  --qc-shadow:       rgba(16,19,31,0.18);
  --qc-text:         #1c2033;
  --qc-title:        #10131f;
  --qc-sub:          #5a6273;
  --qc-hover:        rgba(31,107,168,0.10);
  --qc-divider:      rgba(16,19,31,0.10);
  --qc-close-hover:  rgba(16,19,31,0.05);
  --qc-focus:        #175a90;

  --consent-bg:      #ffffff;
  --consent-border:  rgba(31,107,168,0.30);
  --consent-text:    #3b4356;
  --consent-link:    #175a90;
  --consent-ghost-bd: var(--border-strong);
  --consent-ghost-hv: rgba(16,19,31,0.05);
  --consent-ghost-tx: #10131f;
  --consent-btn:      #1a5f96;   /* fehér felirattal 6,73:1 */
  --consent-btn-hv:   #175a90;
  --consent-btn-tx:   #ffffff;
  --consent-gold-tx:  #8a5e12;   /* sötét arany a világos arany-tinten, 5,4:1 */

  /* Fehér szöveggel 6,0:1 az off-white fölött */
  --navpill-bg:       rgba(26,95,150,0.94);
  --navpill-bg-hover: rgba(23,90,144,1);

  color-scheme: light;
}

html[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .form-input {
  background: var(--bg-input);
  color: var(--text);
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #6b7385; }

/* Az interaktív vezérlők kerete mindkét módban a --border-strong-ot kapja
   (lásd az 1. szakasz indoklását). Csak a vezérlők — a kártyák, dobozok és
   táblázatok díszítő kerete marad a halványabb --border, hogy a felület ne
   legyen zajos. Mérve: a `PDF / Nyomtatás` gomb kerete korábban 1,37:1 volt
   a világos lapon, gyakorlatilag láthatatlan fehér-fehéren. */
/* `input[type]` (0,1,1) kell, mert az oldalak `input[type=number]` alakban
   írják — a csupasz `input` (0,0,1) alulmaradna a specificitásban.
   A jelölőnégyzet és a rádiógomb kimarad: azok natív vezérlők, saját
   keretrajzzal — a szín felülírása ott nem segít, csak zavart okozhat. */
input[type]:not([type="checkbox"]):not([type="radio"]),
input:not([type]), select, textarea,
.form-input, .print-btn, .pdf-btn, .nav-btn, .btn-opt, .fpe-ut {
  border-color: var(--border-strong);
}


/* ───────────────────────────────────────────────────────────────────────────
   3. VILÁGOS MÓD — A SÖTÉTET FELTÉTELEZŐ, BEDRÓTOZOTT SZABÁLYOK
   Ezek az oldalak saját <style> blokkjaiban élnek fix hexszel, tehát nem
   követik a változókat. Amíg nincsenek átírva a helyükön, itt kapják meg a
   világos párjukat. Mindegyik szelektor konkrét megfigyelésből származik
   (lásd log 4. szakasz), nem találgatás.
   ─────────────────────────────────────────────────────────────────────────── */

/* Elmosott, fixen ülő navigációs sávok — sötét fátyol volt bedrótozva */
html[data-theme="light"] .nav-bar,
html[data-theme="light"] .top-nav,
html[data-theme="light"] .nav-wrap {
  background: var(--nav-veil);
}

/* Halvány elválasztók és felületek: fehér alfa → tinta alfa */
html[data-theme="light"] .result-row,
html[data-theme="light"] .comp-item,
html[data-theme="light"] .gf-value-row { border-bottom-color: var(--tint-divider); }

html[data-theme="light"] .comp-box,
html[data-theme="light"] .loan-block,
html[data-theme="light"] .quiz-option,
html[data-theme="light"] .disclaimer { background: var(--tint-surface); }

html[data-theme="light"] .disclaimer { border-color: var(--tint-divider); }

html[data-theme="light"] .data-table tr:hover td,
html[data-theme="light"] .expand-header:hover { background: var(--tint-surface); }

/* A „hook" bevezető halvány kékesfehér szöveget kapott — világosban olvashatatlan */
html[data-theme="light"] .hook { color: var(--text); }

/* Nyomtatás: a világos mód eleve papír-barát, ne írja felül szürkére */
@media print {
  html[data-theme="light"] .card,
  html[data-theme="light"] .strat-card { background: #fff; border: 1px solid #ccc; }
}


/* ───────────────────────────────────────────────────────────────────────────
   4. KÖZÖS KOMPONENSEK — MINDKÉT MÓDBAN VÁLTOZÓBÓL
   A .qc-* szabályok a shared.css-ben ÉS 16 oldal inline <style> blokkjában is
   ott vannak, bedrótozott sötét hexszel. Egyenként átírni 17 helyen kockázatos
   és karbantarthatatlan; itt egy helyen, erősebb szelektorral (#quick-contact-wrap
   … = 1,1,0 > .qc-menu = 0,1,0) kapják meg a mód-követő értéket.
   A qc-menu NYITÁS/ZÁRÁS logikájához és a 2026-07-26-i
   `.qc-menu[hidden]{display:none}` javításhoz ez NEM nyúl hozzá.
   ─────────────────────────────────────────────────────────────────────────── */
#quick-contact-wrap .qc-menu {
  background: var(--qc-bg);
  border-color: var(--qc-border);
  box-shadow: 0 8px 28px var(--qc-shadow);
}
#quick-contact-wrap .qc-option { color: var(--qc-text); }
#quick-contact-wrap .qc-option:hover,
#quick-contact-wrap .qc-option:focus-visible { background: var(--qc-hover); }
#quick-contact-wrap .qc-text strong { color: var(--qc-title); }
#quick-contact-wrap .qc-text small { color: var(--qc-sub); }
#quick-contact-wrap .qc-close {
  border-top-color: var(--qc-divider);
  color: var(--qc-sub);
}
#quick-contact-wrap .qc-close:hover {
  background: var(--qc-close-hover);
  color: var(--qc-title);
}
#quick-contact-wrap .qc-close:focus-visible { outline-color: var(--qc-focus); }

/* 2026-07-26 (UI 2B kör, 39-es fájl 2.1) — TÖRÖLVE, NEM MÓDOSÍTVA.
   Itt korábban a világos mód kék gradiense ült a nyitó gombon:
       html[data-theme="light"] #quick-callback-btn {
         background: linear-gradient(135deg, #1a5f96, #145080);
       }
   A widget alapállapota azóta diszkrét: a kártyákkal azonos felület
   (--qc-bg) + halk keret, a hangsúlyt az arany megerősítés adja
   hoveren/tapre (fpe-ui2b.css 2. szakasz). Ez a szabály (1,0,1) erősebb
   volt a fpe-ui2b.css `#quick-callback-btn` szabályánál (1,0,0) ÉS később
   is töltött be — tehát világos módban visszaírta volna a kék pirulát.
   A --qc-* tokenek mindkét módban megvannak, külön gomb-szabály nem kell. */

/* A lebegő „← Főmenü" pirula 13 oldal inline <style> blokkjában van
   bedrótozva; `html #…` (1,0,1) erősebb, mint a `#…` (1,0,0), tehát innen
   kapja meg a mód-követő, kontrasztos értéket — mindkét módban. */
html #back-to-menu { background: var(--navpill-bg); color: var(--on-accent, #fff); }
html #back-to-menu:hover { background: var(--navpill-bg-hover); }


/* ───────────────────────────────────────────────────────────────────────────
   5. A LEBEGŐ FELSŐ VEZÉRLŐK ÜTKÖZÉSE  (terv 2.3, screenshot-bizonyíték:
   lakashitel-kalkulator__mobil.png)
   Két `position: fixed` vezérlő ül a lap tetején — `#back-to-menu` balra,
   `.print-btn` jobbra —, de semmi nem hagyott nekik helyet, ezért ráültek a
   badge-re és a hero-szövegre. Mérve: 7 oldal-nézeten volt valódi átfedés.
   ─────────────────────────────────────────────────────────────────────────── */

/* a) Ahol az oldalnak VAN saját, fixen ülő felső sávja, a pirula alá csúszik.
      (HVCO3, auto-kalkulator: a `.top-nav` 67 px magas.) */
html:has(.top-nav) #back-to-menu,
html:has(.nav-wrap) #back-to-menu { top: 76px; }

/* b) Ahol NINCS ilyen sáv, a törzsnek kell helyet hagynia. Asztali nézetben a
      tartalom középre zárt, a vezérlők a széleken elférnek mellette — ott csak
      a teljes szélességű elemeknek kell hely (lásd c pont). */
@media (max-width: 820px) {
  html:not(:has(.top-nav)):not(:has(.nav-wrap)):has(.print-btn) body,
  html:not(:has(.top-nav)):not(:has(.nav-wrap)):has(#back-to-menu) body {
    padding-top: 58px;
  }
}

/* c) HVCO6: a teljes szélességű átirányító-sáv a lap legtetején ül, ezért
      asztali nézetben is beleütközik mindkét vezérlőbe. */
.fpe-visszairanyito { margin-top: 58px; }
@media (max-width: 820px) { .fpe-visszairanyito { margin-top: 0; } }

/* Nyomtatásnál a lebegő vezérlők eltűnnek — a fenntartott sáv is felesleges. */
@media print {
  body { padding-top: 0 !important; }
  .fpe-visszairanyito { margin-top: 0; }
}
