/* Penzmosas-megelozesi ugyfel-tajekoztato (/hu/pmt) sajat stiluslapja.
   Generator, reszletek es indoklas: tools/make_pmt_notice_page.py
   (MEGJELENITES, NYOMTATAS).

   2026-09-30: a tulajdonos kerese ("valami jobb dizajnba kidolgozhatnad")
   nyoman a lap a jovahagyott testverlapok (#50 panaszkezeles, #46
   visszaeles-bejelentes) nyelvebol all: a panasz.css .pz-top lapfeje,
   .pz-rule vonala, .pz-wrap hasabja, .pz-way panele, .pz-dl sorai es .pz-box
   doboza. Ez a fajl csak ahhoz tesz hozza, amit a tajekoztato igenyel:
   1. a lapfej: a formalis cim a H1 alatt, a lead, a Nyomtatás gomb es a
      cimzett + valtozat halk sora;
   2. a torzs: tapado tartalomjegyzek | szoveghasab (>= 1024 px), egy hasab
      alatta;
   3. a szoveghasab tipografiaja, a 2. pont egyoszlopos panel-listaja, az
      5. pont szelesebb cimkeoszlopa, a 6. pont doboza, a Jogszabalyi hatter
      es a zaro sor.
   A nyomtatasi stilus NEM itt van, hanem a lap <head>-jeben
   (<style media="print">), hogy a nyomtatas ne fuggjon egy kulon asset
   betoltesetol.

   KASZKAD: a keret core.min.css-e, all.css-e KESOBB toltodik (a <nav>-ban,
   preloaddal), ezert minden szabaly .panasz.pmt (0,2,0) elotaggal all. A
   panasz.css .panasz .pz-wrap a:not(.button) linkszabalyat (0,3,1) a
   tartalomjegyzekben a .panasz.pmt .pmt-toc a (0,3,1) irja felul - ez a
   fajl a panasz.css UTAN toltodik.

   SZINEK - csak a core.min.css :root tokenjei, uj szin nincs
     grey-600 #282828  szoveg
     grey-500 #535353  halk szoveg (lead, meta, fejezetszam, jogi hatter)
     grey-200 #D9D9D9  vonal (tartalomjegyzek-sin, elvalaszto)
     grey-100 #F2F2F2  panel (a .pz-way / .pz-box sajat szine)
     orange-500 #FD9133 CSAK vonal: a hr.pz-rule (a keret hr.orange
                       szabalyabol).
     orange-600 #FF7700 CSAK vonal: a linkalahuzas es a tartalomjegyzek
                       aktualis pontjanak 2 px-es sava.
                       A narancs szoveg soha (#FF7700 feheren 2,66:1).
   NBSP-t nem hasznalunk (a Gotham NBSP-je 0 px): ahol valami nem torhet,
   ott .pz-nw (white-space: nowrap). */

/* ===== lapfej ============================================================ */

/* A bal oszlop: a rovid H1 es kozvetlenul alatta a formalis cim (a
   tajekoztato hivatalos neve, szo szerint). A formalis cim nem szelesitheti
   a H1 fole az oszlopot: 600 px-en, kiegyensulyozva ket sorba torik. */
.panasz.pmt .pz-top .title {
  gap: 16px;
}
.panasz.pmt .pz-top .pmt-formal {
  max-width: 600px;
  margin: 0;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 130%;
  color: var(--color-grey-600);
  text-wrap: balance;
}
.panasz.pmt .pz-top .description {
  gap: 24px;
}
.panasz.pmt .pz-top .pmt-lead {
  margin: 0;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 140%;
  color: var(--color-grey-500);
}
.panasz.pmt .pmt-meta p {
  margin: 0;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  color: var(--color-grey-500);
}
/* <button> a site .button osztalyaval (M: .pz-sbtn - 48 px, 16/40, radius 8):
   a bongeszo sajat gombstilusa helyett ugyanaz, mint az <a class="button">. */
.panasz.pmt .pmt-print {
  margin: 0;
  border: 0;
  color: var(--color-white);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* ===== torzs: tartalomjegyzek | szoveg ================================== */

.panasz.pmt .pmt-body {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0 64px;
  align-items: start;
}

/* ----- tartalomjegyzek (a fix navigacio ala tapad) */

.panasz.pmt .pmt-toc {
  position: sticky;
  top: 124px;
}
.panasz.pmt .pmt-toc-h {
  margin: 0 0 12px;
  padding: 0;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 140%;
  color: var(--color-grey-600);
}
.panasz.pmt .pmt-toc ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--color-grey-200);
}
.panasz.pmt .pmt-toc li {
  margin: 0;
  padding: 0;
}
.panasz.pmt .pmt-toc a {
  display: flex;
  gap: 4px;
  margin-left: -1px;
  padding: 8px 0 8px 16px;
  border-left: 2px solid transparent;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  color: var(--color-grey-500);
  text-decoration: none;
  cursor: pointer;
  overflow-wrap: normal;
}
.panasz.pmt .pmt-toc .pmt-n {
  flex: 0 0 20px;
}
.panasz.pmt .pmt-toc a:hover {
  color: var(--color-grey-600);
  text-decoration: underline;
  text-decoration-color: var(--color-grey-200);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.panasz.pmt .pmt-toc a[aria-current] {
  color: var(--color-grey-600);
  border-left-color: var(--color-orange-600);
}
/* A jogszabalyi hatter nem fejezet: kis terkoz valasztja el a hat ponttol. */
.panasz.pmt .pmt-toc .pmt-toc-basis {
  margin-top: 8px;
}

/* ----- szoveghasab */

.panasz.pmt .pmt-doc {
  max-width: 736px;
  container: pmtdoc / inline-size;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 140%;
  color: var(--color-grey-600);
}
.panasz.pmt .pmt-sec + .pmt-sec {
  margin-top: 64px;
}
.panasz.pmt .pmt-sec > h2 {
  margin: 0 0 24px;
  padding: 0;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 110%;
  letter-spacing: 0;
  color: var(--color-grey-600);
  text-wrap: balance;
}
/* A fejezetszam a cimsor szovegeben all (nyomtatva, masolva is megmarad),
   csak halkabb. */
.panasz.pmt .pmt-hn {
  color: var(--color-grey-500);
}
/* Melylink (#azonositas ... #kerdes): a cimsor ne a fix navigacio ala
   gorduljon. */
.panasz.pmt .pmt-doc h2[id] {
  scroll-margin-top: 124px;
}
.panasz.pmt .pmt-doc p {
  margin: 0 0 16px;
  text-wrap: pretty;
}
/* Sorhossz: a folyamatosan olvasando jogi szoveg sora legfeljebb ~76
   karakter (WCAG 1.4.8: <= 80). EM-ben, nem ch-ban: a ch a "0" szelessege,
   ami a Gothamban 0,71 em (18 px-en 12,87 px), mig egy atlagos karakter
   ~0,49 em - a 68ch 875 px lett volna, szelesebb a 736 px-es hasabnal, azaz
   hatastalan (merve 83-95 karakteres sorok). 37em = 18 px-en 666 px, 16 px-en
   592 px, a 14 px-es Jogszabalyi hatterben 518 px. A panelek es a dl-sorok
   (dt | dd racs) a hasab szelessegeben maradnak; csak a szoveg korlatos.
   Nyomtatasban a PRINT_CSS max-width: none-ja felulirja. */
.panasz.pmt .pmt-doc p,
.panasz.pmt .pmt-list,
.panasz.pmt .pmt-dl dd {
  max-width: 37em;
}
.panasz.pmt .pmt-sec > :last-child {
  margin-bottom: 0;
}
/* A listat bevezeto mondat ("Ennek része, hogy:", "... aki:") a listahoz tapad. */
.panasz.pmt .pmt-doc p.pmt-lead-in {
  margin-bottom: 12px;
}

/* Felsorolas: a site korongja, #282828 (a blog-post.css listaja #000 lenne). */
.panasz.pmt .pmt-list {
  display: block;
  margin: 0 0 16px;
  padding: 0 0 0 24px;
  list-style: disc;
  color: var(--color-grey-600);
}
.panasz.pmt .pmt-list > li {
  display: list-item;
  margin: 0;
  padding: 0 0 0 4px;
}
.panasz.pmt .pmt-list > li + li {
  margin-top: 8px;
}

/* ----- 2. pont: a cimkes tetelek szurke panelekben, EGY oszlopban. A panel
   a testverek .pz-way-e (#F2F2F2, radius 16, 28 px); itt a szoveg a hasab
   18 px-ese, nem a testverek 16 px-es panelszovege - ez jogi folyoszoveg. */

.panasz.pmt .pmt-items {
  display: grid;
  gap: 16px;
}
.panasz.pmt .pmt-item h3 {
  text-wrap: balance;
}
.panasz.pmt .pmt-doc .pmt-item p,
.panasz.pmt .pmt-doc .pmt-item li {
  font-size: 18px;
  line-height: 140%;
}
.panasz.pmt .pmt-doc .pmt-item p,
.panasz.pmt .pmt-doc .pmt-item .pmt-list {
  margin: 0;
}

/* ----- 5. pont: a testverek vonalas definicios listaja (.pz-dl). 180 px-en a
   cimkek harom sorra tortek; 240 px-en ketre. A 620 px-nel keskenyebb
   hasabban (1024-1100 px a tartalomjegyzek mellett) egy oszlop. */

.panasz.pmt .pmt-dl {
  margin: 0 0 16px;
}
.panasz.pmt .pmt-dl .pz-dl-row {
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 4px 32px;
  padding: 16px 0;
}
@container pmtdoc (max-width: 620px) {
  .panasz.pmt .pmt-dl .pz-dl-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ----- 6. pont: a kapcsolat a site szurke dobozaban (.pz-box). */

.panasz.pmt .pmt-doc .pmt-box p {
  margin: 0;
}

/* ----- Jogszabalyi hatter: a lap aljan, halkan (mint a testverek
   jogalap-sora); utana a zaro sor, a dokumentum legvegen. */

.panasz.pmt .pmt-basis {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--color-grey-200);
}
.panasz.pmt .pmt-doc h2.pmt-basis-h {
  margin: 0 0 4px;
  padding: 0;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 140%;
  color: var(--color-grey-600);
  scroll-margin-top: 124px;
}
.panasz.pmt .pmt-doc .pmt-basis p {
  margin: 0;
  max-width: 37em;
  font-size: 14px;
  line-height: 140%;
  color: var(--color-grey-500);
}
.panasz.pmt .pmt-doc p.pmt-sign {
  margin: 24px 0 0;
  font-size: 16px;
  color: var(--color-grey-500);
}

/* A kepernyoolvasonak szolo .pz-sr ("(új lapon nyílik)") vizualisan rejtett,
   de kijelolve a vagolapra kerulne (Chrome, Selection.toString: "...
   (mnb.hu(új lapon nyílik)) ..."). A kepernyoolvasot nem erinti. */
.panasz.pmt .pz-sr {
  -webkit-user-select: none;
  user-select: none;
}

/* ===== <= 1023 px: egy hasab, a tartalomjegyzek a lapfej alatt ========== */

@media (max-width: 1023px) {
  .panasz.pmt .pmt-body {
    display: block;
  }
  .panasz.pmt .pmt-toc {
    position: static;
    max-width: 736px;
    margin: 0 0 48px;
    padding: 20px 24px 12px;
    border-radius: 16px;
    background: var(--color-grey-100);
  }
  .panasz.pmt .pmt-toc-h {
    margin-bottom: 4px;
  }
  .panasz.pmt .pmt-toc ul {
    border-left: 0;
  }
  .panasz.pmt .pmt-toc a {
    margin-left: 0;
    padding: 10px 0;
    border-left: 0;
    color: var(--color-grey-600);
  }
  .panasz.pmt .pmt-toc li + li {
    border-top: 1px solid var(--color-grey-200);
  }
  .panasz.pmt .pmt-toc .pmt-toc-basis {
    margin-top: 0;
  }
  .panasz.pmt .pmt-toc .pmt-toc-basis a {
    color: var(--color-grey-500);
  }
}

/* ===== <= 769 px: telefon (a lapfej kozepre zar - panasz.css) ============ */

@media (max-width: 769px) {
  .panasz.pmt .pz-top .description {
    gap: 20px;
  }
  .panasz.pmt .pz-top .title {
    gap: 12px;
  }
  .panasz.pmt .pz-top .pmt-formal {
    font-size: 18px;
  }
  .panasz.pmt .pz-top .pmt-lead {
    font-size: 16px;
  }
  .panasz.pmt .pmt-meta p {
    font-size: 14px;
  }
  .panasz.pmt .pmt-toc {
    padding: 16px 20px 8px;
  }
  .panasz.pmt .pmt-doc {
    font-size: 16px;
  }
  .panasz.pmt .pmt-sec + .pmt-sec {
    margin-top: 48px;
  }
  .panasz.pmt .pmt-sec > h2 {
    margin-bottom: 20px;
    font-size: 24px;
  }
  .panasz.pmt .pmt-doc h2[id],
  .panasz.pmt .pmt-doc h2.pmt-basis-h {
    scroll-margin-top: 100px;
  }
  .panasz.pmt .pmt-list {
    padding-left: 20px;
  }
  .panasz.pmt .pmt-item h3 {
    font-size: 18px;
  }
  .panasz.pmt .pmt-doc .pmt-item p,
  .panasz.pmt .pmt-doc .pmt-item li {
    font-size: 16px;
  }
  .panasz.pmt .pmt-dl .pz-dl-row {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 0;
  }
  .panasz.pmt .pmt-doc p.pmt-sign {
    font-size: 14px;
  }
  .panasz.pmt .pmt-basis {
    margin-top: 40px;
  }
}

/* Horgonyra ugras (tartalomjegyzek, "Pmt."): sima gorgetes - de csak ha a
   latogato nem kert csokkentett mozgast. */
@media (prefers-reduced-motion: no-preference) {
  html:has(main.pmt) {
    scroll-behavior: smooth;
  }
}