/* A jogi oldalak közös stílusa.
 *
 * Külön, egyszerű lap — szándékosan NEM az SPA része: egy adatkezelési tájékoztatónak
 * akkor is olvashatónak kell lennie, ha a kereső JavaScriptje hibázik, és a hatósági
 * vagy bírósági hivatkozhatóság miatt is jobb, ha minden dokumentum önálló, nyomtatható
 * címen él.
 *
 * A színek a kereső palettáját követik, és ugyanazt a `theme-mode` kulcsot olvassák a
 * localStorage-ból, hogy a látogató témaválasztása itt is érvényes legyen.
 */
/* A saját kiszolgálású betűk. Enélkül a jogi oldalak rendszerbetűvel jelennének meg,
   miközben a kereső IBM Plex Sansszal — az @import egy kérés, és a fájl a kereső
   látogatása után már a gyorsítótárban van. */
@import url('/fonts/fonts.css');

:root{
  /* A böngésző saját felületei (görgetősáv, űrlapelemek, kijelölés) is kövessék a
     témát. Enélkül sötét lapon világos görgetősáv jelenik meg. */
  color-scheme: light dark;
  --bg: #F6F2EA;
  --surface: #FFFFFF;
  --text: #1C1A17;
  --text-muted: #706A5F;
  --coral: #FF6B4A;
  --border: rgba(28,26,23,0.12);
  --figyelem-bg: #FFF4CC;
  --figyelem-border: #E0B400;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

/* Sötét téma. Két úton kapcsolódhat be: a látogató kifejezett választásából (a kereső
   a html elemre teszi a .dark-mode osztályt), vagy a rendszerbeállításból. */
html.dark-mode{
  --bg: #101014;
  --surface: #1B1B20;
  --text: #F3F1EC;
  --text-muted: #9B98A3;
  --border: rgba(243,241,236,0.12);
  --figyelem-bg: #3A3116;
  --figyelem-border: #A98A1E;
}
@media (prefers-color-scheme: dark){
  html:not(.light-mode){
    --bg: #101014;
    --surface: #1B1B20;
    --text: #F3F1EC;
    --text-muted: #9B98A3;
    --border: rgba(243,241,236,0.12);
    --figyelem-bg: #3A3116;
    --figyelem-border: #A98A1E;
  }
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  /* iOS Safari fekvő tájolásban magától felnagyítja a szöveget. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* A jogi szövegek tele vannak hosszú, törhetetlen elemekkel: e-mail címek, URL-ek,
     jogszabályi hivatkozások. Ezek keskeny kijelzőn kilógnának, és VÍZSZINTES
     GÖRGETÉST okoznának az egész lapon. */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Biztonságos sávok (iPhone notch, Android gesztussáv). Régi böngészőben az env()
   ismeretlen, ilyenkor a 0px tartalék érvényesül. A fekvő tájolás a lényeges eset:
   ott a bevágás OLDALT van, és a szöveg belelógna. */
:root{
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

.jogi-fejlec{
  border-bottom: 1px solid var(--border);
  padding: 18px calc(24px + var(--safe-r)) 18px calc(24px + var(--safe-l));
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.jogi-fejlec a.vissza{
  color: var(--text); text-decoration:none; font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
}
.jogi-fejlec a.vissza:hover{ color: var(--coral); }
.jogi-fejlec .cimke{ color: var(--text-muted); font-size: 14px; }

main{
  /* 72ch: a hosszú jogi szöveg olvashatóságának határa. Ennél szélesebb hasábban a szem
     elveszti a sor elejét, és pont ezeket a dokumentumokat nem olvassa el senki. */
  max-width: 72ch;
  margin: 0 auto;
  padding: 40px calc(24px + var(--safe-r)) calc(96px + var(--safe-b)) calc(24px + var(--safe-l));
}

/* A címek mérete keskeny kijelzőn arányosan csökken. A clamp() minden mai böngészőben
   megvan; a tartalék a régieknek a fix méret marad (lásd a @supports nélküli sorrendet). */
h1{ font-size: 30px; font-size: clamp(24px, 5.5vw, 30px); line-height:1.25; margin: 0 0 8px; }
h2{ font-size: 21px; line-height:1.3; margin: 40px 0 12px; padding-top: 8px; }
h3{ font-size: 17px; margin: 28px 0 8px; }
p{ margin: 0 0 14px; }
ul, ol{ margin: 0 0 16px; padding-left: 22px; }
li{ margin-bottom: 7px; }
a{ color: var(--coral); }

.bevezeto{ color: var(--text-muted); margin-bottom: 28px; }

.meta{
  color: var(--text-muted); font-size: 14px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 20px; margin-bottom: 8px;
}

/* Adattábla — a kezelt adatok, sütik, megőrzési idők átlátható felsorolásához.
   Keskeny kijelzőn a táblázat vízszintesen görgethető: a jogi táblázatokat NEM lehet
   értelmesen egymás alá tördelni, mert a sorok összetartozása hordozza a jelentést. */
.tabla-gorgo{
  overflow-x: auto;
  margin: 0 0 20px;
  -webkit-overflow-scrolling: touch;
  /* A táblázat vízszintes görgetése ne "folyjon tovább" a lapra, illetve iOS-en a
     böngésző vissza-gesztusára. */
  overscroll-behavior-x: contain;
}
table{ border-collapse: collapse; width:100%; min-width: 520px; font-size: 14.5px; }
th, td{ text-align:left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--border); }
th{ font-weight:600; color: var(--text-muted); white-space: nowrap; }

/* Kiemelt doboz: amit az olvasó akkor is lásson, ha csak átfutja a lapot. */
.kiemel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--coral);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 22px;
}
.kiemel p:last-child{ margin-bottom:0; }

/* Kitöltetlen üzemeltetői adat. Feltűnőnek KELL lennie. */
.uz-hianyzik{
  background: var(--figyelem-bg);
  border-bottom: 2px solid var(--figyelem-border);
  color: var(--text);
  font-weight: 600;
  padding: 0 4px;
}

/* Kódrészletek (robots.txt példák). A pre nem tördel, ezért saját görgetősávot kap —
   enélkül a hosszú sor az egész lapot oldalra tolná. */
pre{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 18px;
}
code{ font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 0.92em; }
pre code{ font-size: inherit; }

.dokumentum-lista{ list-style:none; padding:0; }
.dokumentum-lista li{
  border-bottom: 1px solid var(--border);
  padding: 14px 0; margin:0;
}
.dokumentum-lista a{ font-weight:600; font-size: 17px; text-decoration:none; }
.dokumentum-lista a:hover{ text-decoration:underline; }
.dokumentum-lista .leiras{ color: var(--text-muted); font-size: 14.5px; margin-top:3px; }

.jogi-lablec{
  border-top: 1px solid var(--border);
  margin-top: 56px; padding-top: 20px;
  color: var(--text-muted); font-size: 14px;
}

button.gomb{
  font: inherit; font-weight:600; cursor:pointer;
  background: var(--coral); color:#171012;
  border:0; border-radius: 999px; padding: 11px 20px;
}
button.gomb:hover{ filter: brightness(1.06); }

@media print{
  .jogi-fejlec, .jogi-lablec{ display:none; }
  body{ background:#fff; color:#000; }
  main{ max-width:none; padding:0; }
}
