/* ==========================================================================
   study.css — Tanulmány-aloldalak
   A fordítási csomag (forditasok/*.html) szerkezetének 1:1 megvalósítása,
   a honlap chrome-jába (site-header / site-footer) ágyazva.
   Oldalak : /tanulmanyok/<slug> (hu) · /en/tanulmanyok/<slug> (en)

   B-változat (2026-10-03): a "Magyar | English" piléta NEM JS-nyelvváltó,
   hanem a testvérnyelvű URL-re mutató link — a nyelv a URL-ben lakik (D3).
   A csomag inline JS-éből csak a kereső (filter) és a scroll-spy (syncNav)
   maradt meg; a setLang() törlésre került.

   Megkötések: NINCS külső CDN · NINCS webfont · NINCS süti/analitika.
   A csomag összes mérete/színe változatlan; a sticky eltolások a honlap
   --header-h (72px) fejlécéhez igazodnak.
   ========================================================================== */

/* 0. TOKENEK — a csomag :root blokkja, névütközés nélkül a --c-* mellett --- */
:root {
  --ink: #1b2430; --ink-soft: #4a5566; --paper: #fbfaf7; --card: #ffffff;
  --rule: #e2ded5; --accent: #1f3a5f; --accent-soft: #eaf0f7; --accent-2: #8a6d3b;
  --code-bg: #f4f1ea;
  --shadow: 0 1px 2px rgba(27,36,48,.06), 0 4px 14px rgba(27,36,48,.05);
  --maxw: 1080px; --radius: 10px;
  --study-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                 "Times New Roman", serif;
  --study-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --study-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* A .langbar TÉNYLEGES magassága (mérés): desktopon 58px, <=560px-en 115px
     (a .count flex-basis: 100% miatt kétsoros). A <=560px érték lent. */
  --langbar-h: 59px;
  --stick-top: calc(var(--header-h) + var(--langbar-h) + 12px);
}
/* Horgony-landolás: a globális `html { scroll-padding-top: calc(var(--header-h)
   + 16px) }` (style.css) a fejlécet + 16px rést adja; a study-oldalon a sticky
   stackben a .langbar is ott van, ezért a lenti célok még a langbar
   magasságával lejjebb landolnak (stack alja ≈ 285px, landolás ≈ 301px). */

body.study-doc { background: var(--paper); color: var(--ink); }
body.study-doc #main {
  font-family: var(--study-serif);
  font-size: 17px; line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
body.study-doc .wrap { max-width: var(--maxw); }

/* 1. MASTHEAD -------------------------------------------------------------- */
.masthead {
  background: linear-gradient(160deg, var(--accent) 0%, #16283f 100%);
  color: #f4f2ec; padding: 2.2rem 1.25rem 1.6rem;
}
.masthead-inner { max-width: var(--maxw); margin: 0 auto; }
.masthead .eyebrow {
  font-family: var(--study-sans); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; opacity: .72; margin: 0 0 .5rem; color: inherit;
}
.masthead h1 {
  font-family: var(--study-serif);
  font-size: clamp(1.3rem, 1.05rem + 1.7vw, 2.05rem); line-height: 1.24;
  margin: 0 0 .5rem; font-weight: 600; color: #f4f2ec; text-wrap: balance;
}
.masthead .author {
  margin: 0 0 .25rem; font-size: 1rem; font-weight: 600; letter-spacing: .04em;
}
.masthead .author a { color: inherit; text-decoration: underline dotted; }
.masthead .cite {
  margin: .6rem 0 0; font-family: var(--study-sans); font-size: .8rem;
  line-height: 1.5; opacity: .78; max-width: 78ch; color: inherit;
}
.masthead .actions {
  display: flex; flex-wrap: wrap; gap: .45rem; list-style: none;
  margin: .9rem 0 0; padding: 0;
}
.masthead .actions a {
  font-family: var(--study-sans); font-size: .78rem; font-weight: 600;
  color: #f4f2ec; text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(244,242,236,.34); border-radius: 999px;
  padding: .3rem .85rem; transition: background .15s ease, color .15s ease;
}
.masthead .actions a:hover {
  background: rgba(244,242,236,.14); color: #f4f2ec; text-decoration: none;
}

/* 2. NYELVI + KERESŐ ESZKÖZTÁR (sticky a site-header alatt) ---------------- */
.langbar {
  background: var(--card); border-bottom: 1px solid var(--rule);
  position: sticky; top: var(--header-h); z-index: 20;
  box-shadow: 0 1px 0 rgba(27,36,48,.04);
}
.langbar-inner {
  max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center;
  gap: .75rem; flex-wrap: wrap; padding: .6rem 1.25rem;
  /* SZÁNDÉKOS literál (S0): a --langbar-h a sticky-eltolások konstansa;
     innen visszaolvasva minden korrekció a langbart is átméretezné.
     A <=560px érték a lenti blokkban. */
  min-height: 49px;
}
.tabs {
  display: flex; gap: .3rem; background: var(--code-bg);
  padding: .22rem; border-radius: 999px;
}
.tab {
  font-family: var(--study-sans); border: 0; background: transparent; cursor: pointer;
  padding: .38rem 1.05rem; border-radius: 999px; font-size: .87rem; font-weight: 600;
  color: var(--ink-soft); text-decoration: none; display: inline-block; line-height: 1.35;
  transition: background .15s ease, color .15s ease;
}
.tab[aria-current="true"] { background: var(--accent); color: #fff; }
.tab:hover:not([aria-current="true"]) { background: #e8e2d6; color: var(--ink); }
/* A keresőmező + a két gomb (× törlés / ▾ chevron) -----------------------
   A gombok a .search-wrap-en belül abszolút pozicionáltak, ezért NEM
   foglalnak helyet a flex sorban: a langbar magassága változatlan marad
   (mobilon továbbra is kétsoros). A .search padding-right-ja (4.2rem)
   tartja távol a begépelt szöveget a gomboktól. */
.search-wrap {
  position: relative; display: flex;
  flex: 1 1 190px; min-width: 150px; max-width: 340px; margin-left: auto;
}
.search {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--study-sans); font-size: .88rem;
  padding: .42rem 4.2rem .42rem .8rem;
  border: 1px solid var(--rule); border-radius: 999px; background: #fff; color: var(--ink);
}
.search::placeholder { color: #9aa1ad; }
.search:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
/* A WebKit/Blink saját törlő-X-e HELYETT a saját × gomb — különben két X
   látszana egymás mellett (Firefoxban nincs natív X, ott csak a saját). */
.search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* NINCS display szabály: különben felülírná a hidden attribútumot (lásd a
   .results-nél is). Az absolute pozicionálás blokkosítja a gombot. */
.search-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--ink-soft); cursor: pointer;
  font-family: var(--study-sans); font-size: 1rem; line-height: 28px;
  text-align: center;
}
.search-btn:hover { background: var(--accent-soft); color: var(--ink); }
.search-btn:focus-visible { outline: 2px solid var(--accent); }
.search-btn--clear { right: 2rem; }
.search-btn--toggle { right: .3rem; }
.count {
  font-family: var(--study-sans); font-size: .78rem; color: var(--ink-soft);
  white-space: nowrap;
}

/* 3. KÉTOSZLOPOS ELRENDEZÉS ------------------------------------------------ */
.layout {
  max-width: var(--maxw); margin: 0 auto; display: grid;
  grid-template-columns: 250px minmax(0, 1fr); gap: 2.2rem;
  padding: 2rem 1.25rem 4rem;
}

/* 4. OLDALSÁV (TANULMÁNY / JEGYZETEK / RÖVIDÍTÉSEK csoportok) -------------- */
.sidenav {
  position: sticky; top: var(--stick-top); align-self: start;
  /* A silabusz a sticky stack (--stick-top = 297px) ALATT kezdődik, ezért a
     rendelkezésre álló hely: nézetmagasság mínusz a stack és 16px lég.
     A régi calc(100vh - 6rem) = 704px ennél nagyobb → 800px-es viewporton a
     silabusz alja 46.7px-rel a hajtás alá lógott (S1 köztes állapot).
     A dvh a mobil böngészők dinamikus eszköztárát is követi (minta:
     style.css 1190–1191). */
  max-height: calc(100vh - var(--stick-top) - 16px);
  max-height: calc(100dvh - var(--stick-top) - 16px);
  overflow-y: auto;
}
.sidenav-title {
  font-family: var(--study-sans); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .7rem;
}
.nav-group {
  font-family: var(--study-sans); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-2); font-weight: 700;
  margin: 1rem 0 .3rem; padding-left: .6rem;
}
.nav-group:first-child { margin-top: 0; }
.sidenav a {
  display: block; padding: .3rem .6rem; margin-left: -.6rem; border-radius: 6px;
  text-decoration: none; color: var(--ink-soft); font-size: .86rem; line-height: 1.35;
  font-family: var(--study-sans);
  transition: background .15s ease, color .15s ease;
}
.sidenav a:hover { background: var(--accent-soft); color: var(--accent); }
.sidenav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sidenav a em { font-style: italic; opacity: .8; }

/* 5. TARTALOMOSZLOP -------------------------------------------------------- */
/* A honlap globális h1–h6 / a szabályai felülírnák a csomag tipográfiáját,
   ezért a betűtípust, a sortávot és a linkszínt itt explicit állítjuk be. */
.content h2, .content h3 {
  font-family: var(--study-serif); line-height: 1.32;
}
.content h2 {
  font-size: 1.16rem; font-weight: 600; margin: 2.4rem 0 .9rem; padding-bottom: .4rem;
  border-bottom: 2px solid var(--accent); scroll-margin-top: var(--langbar-h);
  color: var(--ink);
}
.content h2:first-of-type { margin-top: 0; }
.content h3 {
  font-size: 1rem; margin: 1.6rem 0 .6rem; color: var(--accent);
  scroll-margin-top: var(--langbar-h);
}
.content p { margin: 0 0 .85rem; text-align: justify; hyphens: auto; color: var(--ink); }
.content em { color: var(--ink-soft); }
.content blockquote {
  margin: 1rem 0; padding: .8rem 1rem; background: var(--accent-soft);
  border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .9rem;
}
.content blockquote p { margin: 0; }
/* A csomag markdown-listái: <ul><li>, a folyószöveg méretében. */
.content ul { margin: 0 0 .85rem; padding-left: 1.45em; }
.content li { margin-bottom: .3rem; }
.anchor-alt { display: block; height: 0; scroll-margin-top: var(--langbar-h); }

/* 6. LÁBJEGYZET: [n] hivatkozás + visszatérés ------------------------------ */
a.fn { text-decoration: none; color: var(--accent-2); font-weight: 600; padding: 0 .05em; }
a.fn sup { font-size: .68em; }
a.fn:hover { background: var(--accent-soft); border-radius: 3px; color: var(--accent-2); }
p.note {
  background: var(--card); border: 1px solid var(--rule);
  border-left: 3px solid var(--accent-2); border-radius: var(--radius);
  padding: .7rem 1rem; margin: 0 0 .5rem; font-size: .93rem; line-height: 1.6;
  scroll-margin-top: var(--langbar-h); overflow-wrap: break-word;
}
p.note:target {
  background: #fff8e6; border-left-color: #c9992b; box-shadow: 0 0 0 3px #fdf1d2;
}
p.note .note-num {
  display: inline-block; min-width: 2.1em; font-family: var(--study-mono);
  font-size: .78rem; font-weight: 700; color: var(--accent); background: var(--code-bg);
  border: 1px solid var(--rule); border-radius: 5px; padding: .05rem .35rem;
  margin-right: .5rem; text-align: center;
}
a.fnback { text-decoration: none; color: var(--accent-2); font-size: .9em; opacity: .7; }
a.fnback:hover { opacity: 1; color: var(--accent-2); text-decoration: none; }
/* A honlap .note strong szabálya ne színezze át a csomag jegyzeteit. */
body.study-doc p.note strong,
body.study-doc p.tetel strong { color: var(--accent); }

/* 7. RÖVIDÍTÉSTÉTEL -------------------------------------------------------- */
p.tetel {
  background: var(--card); border: 1px solid var(--rule);
  border-left: 3px solid var(--accent-2); border-radius: var(--radius);
  padding: .8rem 1rem; margin: 0 0 .6rem; box-shadow: var(--shadow);
  font-size: .95rem; line-height: 1.62; overflow-wrap: break-word;
  scroll-margin-top: var(--langbar-h);
}
p.tetel strong {
  font-family: var(--study-mono); font-size: .82rem; background: var(--code-bg);
  border: 1px solid var(--rule); padding: .1rem .42rem; border-radius: 5px;
  color: var(--accent); font-weight: 700; margin-right: .35rem;
}

/* 8. TÁBLÁZAT / KÓD / ELVÁLASZTÓ ------------------------------------------- */
.content table {
  width: 100%; border-collapse: collapse; margin: 1rem 0 1.4rem; font-size: .87rem;
  font-family: var(--study-sans); background: var(--card); box-shadow: var(--shadow);
  border-radius: var(--radius); overflow: hidden; display: block; overflow-x: auto;
}
.content thead th {
  background: var(--accent); color: #fff; text-align: left; padding: .55rem .8rem;
  font-weight: 600; font-size: .8rem; letter-spacing: .03em;
}
.content tbody td {
  padding: .55rem .8rem; border-top: 1px solid var(--rule);
  vertical-align: top; white-space: normal;
}
.content tbody tr:nth-child(even) td { background: #faf8f4; }
.content code {
  font-family: var(--study-mono); font-size: .82rem; background: var(--code-bg);
  padding: .08rem .34rem; border-radius: 4px;
}
.content hr { border: 0; border-top: 1px solid var(--rule); margin: 1.8rem 0; }

/* 9. KERESÉS-ÁLLAPOTOK (JS nélkül rejtve marad a vezérlő) ------------------ */

/* A találati panel a .langbar GYEREKE — a study.js a bar.appendChild(panel)
   sorral szúrja be. A .langbar position: sticky (78. sor) pozicionálási
   kontextus, ezért a panel top: 100%-a a langbar ALJÁT jelenti, a fejléc
   tényleges magasságától FÜGGETLENÜL — nem kell ismerni a --header-h-t.
   A .langbar .results kétosztályos specificitása (0,2,0) felülírja a
   13. szekció .results szabályát (0,1,0) — sorrendtől függetlenül
   érvényesül.
   A max-width / margin / padding a 13. szekcióból jön (nem ütközik). */
.langbar .results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
}
/* A 60vh helyett: a dvh a mobil billentyűzetet is figyeli, a 340px plafon
   pedig megakadályozza, hogy a panel a rövid képernyőn túlnőjön. */
.langbar .results__list { max-height: min(50dvh, 340px); }

.hit { background: #fff6d8 !important; border-left-color: #c9992b !important; }
.no-hit { display: none; }
.empty {
  display: none; padding: 1.4rem; text-align: center; color: var(--ink-soft);
  font-size: .9rem; background: var(--card); border: 1px dashed var(--rule);
  border-radius: var(--radius);
}
body.study-doc:not(.js) .search,
body.study-doc:not(.js) .count { display: none; }

/* 10. A CSOMAG LÁBLÉCA (a site-footer fölött) ------------------------------ */
.docfooter {
  border-top: 1px solid var(--rule); padding: 1.6rem 1.25rem 2.6rem;
  color: var(--ink-soft); font-size: .8rem; font-family: var(--study-sans);
}
.docfooter div { max-width: var(--maxw); margin: 0 auto; }

/* 11. RESZPONZÍV — a csomag töréspontjaival ------------------------------- */
@media (max-width: 860px) {
  /* S3: a .sidenav chip-sávként a sticky stack ALATT ragad. A --snav-h a sáv
     mért magassága: 7.2 (padding-top) + 28.2 (chip) + 12.8 (padding-bottom)
     + 1 (border) = 49.2 → 50px; a horgony-célok ezzel lejjebb landolnak. */
  :root { --snav-h: 50px; }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; padding-top: 1.4rem; }
  .sidenav {
    position: sticky; top: calc(var(--header-h) + var(--langbar-h)); z-index: 10;
    max-height: none; overflow: visible;
    display: flex; gap: .4rem; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Teljes szélesség (a .layout 1.25rem paddingját átfedi), átlátszatlan
       háttérrel, hogy a görgetett tartalom ne látszódjon ki mellette/alatta.
       Az alsó lég a dobozon BELÜL van (nem margó), különben a tartalom egy
       vékony csíkban kilátszana a sáv alatt. A z-index 10 a .langbar (20) és
       a találati panel (30) alatt, a tartalom fölött. */
    margin: 0 -1.25rem; padding: .45rem 1.25rem .8rem;
    background: var(--paper); border-bottom: 1px solid var(--rule);
  }
  .nav-group { display: none; }
  .sidenav a { display: inline-block; white-space: nowrap; background: var(--accent-soft);
               margin-left: 0; margin-right: .4rem; }
  /* S3: a chip-sáv sticky → a horgony-célok a sáv ALÁ landolnak (a globális
     16px lég a sáv aljához képest érvényesül). */
  .content h2, .content h3, .anchor-alt, p.note, p.tetel {
    scroll-margin-top: calc(var(--langbar-h) + var(--snav-h));
  }
  .content p { text-align: left; hyphens: manual; }
}
@media (max-width: 560px) {
  /* A .count flex-basis: 100% (lent) miatt a langbar kétsoros → a mért
     magasság 115px (a desktop 58px). A .sidenav top-ja, a horgony-landolás
     és a langbar sticky top-ja ettől függ. */
  :root { --langbar-h: 116px; }
  body.study-doc #main { font-size: 16px; }
  .masthead { padding: 1.6rem 1rem 1.2rem; }
  .langbar-inner { padding: .55rem 1rem; min-height: 92px; }
  .count { flex-basis: 100%; margin-left: 0; }
  .search { max-width: none; }
  p.tetel, p.note { padding: .7rem .8rem; font-size: .9rem; }
}

/* 12. NYOMTATÁS ------------------------------------------------------------ */
@media print {
  .site-header, .langbar, .sidenav, .search, .breadcrumb, .skip-link,
  .site-footer, .docfooter, .masthead .actions { display: none !important; }
  body.study-doc { background: #fff; }
  .layout { grid-template-columns: 1fr; padding: 0; }
  .masthead { background: none; color: #000; padding: 0 0 1rem; }
  .masthead h1, .masthead .eyebrow, .masthead .cite { color: #000; opacity: 1; }
  p.tetel, p.note { box-shadow: none; break-inside: avoid; border-left-color: #666; }
  .content h2 { break-after: avoid; }
  .content table { display: table; box-shadow: none; }
}

/* 13. KERESŐPANEL — A study.js-ből átemelt keresőpanel-stílusok (8/3e) ----- */
/* A 8/3e (2026-10-14): a stílusok korábban a study.js futásidejű
   <style>-injekciójából jöttek — a CSP style-src 'self' (8/2) azt blokkolja.
   A .results-nek nincs display szabálya — különben felülírná a hidden
   attribútumot. */
.results { max-width: var(--maxw); margin: 0 auto; padding: .75rem 1.25rem 0; }
.results__list {
  list-style: none; margin: 0; padding: 0; background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow); max-height: 60vh; overflow-y: auto;
}
.results__list li + li { border-top: 1px solid var(--rule); }
.results__list button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: .55rem .8rem; font-family: var(--study-sans); font-size: .86rem;
  line-height: 1.45; color: inherit; cursor: pointer;
}
.results__list button:hover, .results__list button:focus-visible {
  background: var(--accent-soft); outline: none;
}
.results__head {
  display: block; font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-2); font-weight: 700;
  margin-bottom: .15rem;
}
.results__snip { display: block; color: var(--ink-soft); }
.results__snip mark, .content mark {
  background: #fff6d8; color: var(--ink); font-weight: 600;
}
@media print { .results { display: none !important; } }