/* A blog stílusa. A színek és a betűk a glamping.hu index.html-jéből jönnek,
   hogy a blog ne egy másik oldalnak látsszon. Ha ott változik a márkaszín,
   ezt a fájlt is át kell írni -- a két helyen álló érték el tud csúszni. */
:root{
  --erdo:#2F3A22;      /* sötét erdőzöld, címek */
  --oliva:#5E6B44;     /* fő márkaszín */
  --moha:#7C8A5C;
  --homok:#EDE7D0;     /* bézs dobozok */
  --papir:#FAF9F4;     /* háttér */
  --zuzmo:#C9D89A;
  --szoveg:#2B2F24;
  --halvany:#5D6152;
  --vonal:#DAD4BC;
  --r-nagy:22px; --r-kicsi:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--papir);color:var(--szoveg);
     font:16px/1.7 "Poppins",system-ui,-apple-system,sans-serif}

/* ---- fejléc, ugyanaz a logika, mint a főoldalon ---- */
/* A fejlec meretei a FOOLDAL header.top-jabol jonnek (max-width 1120,
   padding 18px 20px, logo 1.25rem, nav .95rem, gap 16px), hogy a ket lap
   egy oldalnak latsszon, ne kettonek. */
.fejlec{border-bottom:1px solid var(--vonal);background:var(--papir);
        position:sticky;top:0;z-index:10}
.fejlec .belso{max-width:1120px;margin:0 auto;padding:18px 20px;min-width:0;
               display:flex;justify-content:space-between;align-items:center;
               gap:22px;flex-wrap:wrap}
.logo{font-weight:700;font-size:1.25rem;color:var(--erdo);text-decoration:none}
.logo span{font-weight:400}
.fejlec nav{display:flex;gap:16px;flex-wrap:wrap;
            /* min-width:0 + max-width:100%: kulonben a nav a tartalma (a 14
               nyelv) szelesseget keri, es a gyerekere tett max-width:100% egy
               mar tulnott szulohöz mer. Merve 2026-10-11. */
            min-width:0;max-width:100%}
.fejlec nav a{color:var(--halvany);text-decoration:none;font-size:.95rem}
.fejlec nav a:hover,.fejlec nav a:focus-visible{color:var(--erdo)}

/* ---- nyelvvalto ----
   A fejlec vegen all, elvalasztva: ez nem a tartalom menuje, hanem a lape.
   Az AKTUALIS nyelv <strong>, nem link, mert onmagara mutato link zavaro.
   Csak akkor latszik, ha tenyleg van tobb nyelv; a generator ki sem irja egy
   nyelv eseten. */
.nyelvvalto{display:inline-flex;gap:10px;align-items:center;font-size:.9rem;
            padding-left:16px;border-left:1px solid var(--vonal);
            /* A SAV MAGA GORGET, NEM A LAP. Merve 2026-10-11 20:5x, Mate panasza
               nyoman (Telegram 1965 es 1967): a tizennegy nyelv egy `nowrap`
               flex-sorban 984 px-et kert, es mivel a sav nem gorgott, az EGESZ LAP
               lett 1004 px szeles. Telefonon (390/360/320 px) a bongeszo ezert
               kizoomolt, hogy elferjen -- pontosan ezt latta Mate: "egymas mellett
               a nyelvek es ossze ment a fo szoveg". A fo szoveg nem zsugorodott,
               hanem a lap nott, es a zoom kicsinyitett mindent.
               A `min-width:0` nem dekoracio: flex-gyerekkent a sav alapbol a
               TARTALMA szelesseget keri (`min-width:auto`), es akkor az `overflow`
               sosem lep eletbe. Ket sor kell, nem egy. */
            flex:1 1 0;max-width:100%;min-width:0;overflow-x:auto;
            /* iOS-en ettol lesz lendulete a gorgetesnek, es a sav nem "ragad". */
            -webkit-overflow-scrolling:touch;
            /* A nyelvnevek NE tordeljenek ket sorba a sav belsejeben. */
            white-space:nowrap;
            /* Vekony, halvany gorgeto-sav, ahol a bongeszo tudja; ahol nem, ott a
               rendszer alapertelmezese marad, es az is jo. */
            scrollbar-width:thin;scrollbar-color:var(--vonal) transparent}
.nyelvvalto::-webkit-scrollbar{height:4px}
.nyelvvalto::-webkit-scrollbar-thumb{background:var(--vonal);border-radius:2px}
.nyelvvalto::-webkit-scrollbar-track{background:transparent}
/* A gorgetheto elem FOKUSZALHATO legyen, kulonben a billentyuzettel navigalo nem
   er el a jobb szelen allo nyelvekhez. A generator `tabindex="0"`-t nem ir ki, ezert
   ezt a lap-epito HTML-je adja; ha megsincs ott, a linkek fokusza is elgorgeti. */
.nyelvvalto{scroll-padding-inline:16px}
@media (max-width:560px){
  /* Keskenyen a nav tordel, es ott a bal szegely egy sor kozepen lognana. */
  .nyelvvalto{padding-left:0;border-left:0;
              /* Teljes szelessegu sav a nav alatt: igy a tizennegy nyelv nem
                 szoritja a tobbi menupontot, es a gorgetes celpontja nagy. */
              flex:1 1 100%;padding-bottom:6px}
}
.nyelvvalto a{color:var(--halvany);text-decoration:none}
.nyelvvalto a:hover,.nyelvvalto a:focus-visible{color:var(--erdo);text-decoration:underline}
.nyelvvalto strong{color:var(--erdo);font-weight:600}
:focus-visible{outline:3px solid var(--oliva);outline-offset:3px}

/* ---- tartalom ---- */
.tartalom{max-width:720px;margin:0 auto;padding:40px 20px 72px}
.lista{max-width:1040px}

h1{font-size:clamp(28px,4.4vw,42px);line-height:1.18;color:var(--erdo);
   margin:0 0 14px;letter-spacing:-.5px}
h2{font-size:clamp(21px,2.6vw,27px);line-height:1.3;color:var(--erdo);margin:40px 0 12px}
h3{font-size:19px;color:var(--oliva);margin:28px 0 8px}
p{margin:0 0 18px}
a{color:var(--oliva)}
ul,ol{margin:0 0 18px;padding-left:22px}
li{margin:0 0 8px}
strong{color:var(--erdo)}

.bevezeto{font:400 19px/1.6 "Lora",Georgia,serif;color:var(--halvany);margin:0 0 28px}
.meta{font-size:14px;color:var(--halvany);margin:0 0 30px;
      padding-bottom:18px;border-bottom:1px solid var(--vonal)}

blockquote{margin:24px 0;padding:18px 22px;background:var(--homok);
           border-radius:var(--r-kicsi);border-left:4px solid var(--moha)}
blockquote p:last-child{margin:0}

/* ---- ábra (sáv-diagram) ----
   EGY szín, mert ezek nagyság-összehasonlítások egyetlen mértékből: a szín feladata
   a nagyság, nem az identitás. Ezért nincs jelmagyarázat sem (egy sorozat van), és
   minden sáv a saját értékével van közvetlenül felcímkézve -- így a diagram
   kinyomtatva, kényszerített színekkel (forced-colors) és képernyőolvasóval is
   olvasható marad, nem csak színesben.
   A sáv vége 4px-en lekerekített, a kezdete szögletes: a nulla-vonal kemény, a
   mért érték vége lágy. A sáv 14px vastag, mert a cím és az érték FÖLÖTTE áll,
   nem benne -- így 320px-en sem tud beszorulni és levágódni. */
.abra{margin:26px 0;padding:20px 22px;background:#fff;border:1px solid var(--vonal);
      border-radius:var(--r-nagy)}
.abra figcaption{font-size:15px;font-weight:600;color:var(--erdo);margin:0 0 16px;line-height:1.35}
.abra-sorok{display:flex;flex-direction:column;gap:14px}
.abra-fej{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 5px}
.abra-nev{font-size:14.5px;color:var(--szoveg)}
.abra-ertek{font-size:14.5px;font-weight:600;color:var(--erdo);
            font-variant-numeric:tabular-nums;white-space:nowrap}
.abra-sav{height:14px;background:var(--homok);border-radius:2px;overflow:hidden}
.abra-sav>span{display:block;height:100%;background:var(--oliva);
               border-radius:0 4px 4px 0;min-width:3px}
.abra-forras{font-size:13px;color:var(--halvany);margin:16px 0 0;line-height:1.5}
@media (forced-colors:active){
  .abra-sav{border:1px solid CanvasText}
  .abra-sav>span{background:CanvasText;forced-color-adjust:none}
}

/* ---- táblázat ----
   2026-10-08-ig a generátor nem ismerte a táblázatot, és a `| a | b |` sorok nyers
   szövegként álltak a lapon. A keret azért kell, mert egy négyoszlopos, forintos
   táblázat 390 px-en nem fér ki: ott inkább vízszintesen csúszik, mint hogy a
   számok egymásra törjenek. */
.tabla-kerete{margin:0 0 22px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla-kerete table{border-collapse:collapse;width:100%;min-width:min(100%,420px);font-size:15px}
.tabla-kerete th,.tabla-kerete td{padding:9px 14px 9px 0;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--vonal)}
.tabla-kerete th{font-size:13px;font-weight:600;color:var(--moha);
  letter-spacing:.06em;text-transform:uppercase;border-bottom-width:2px}
.tabla-kerete td{font-variant-numeric:tabular-nums}
.tabla-kerete tbody tr:last-child td{border-bottom:none}
.tabla-kerete td strong{color:var(--erdo)}

/* A forrás-blokk. Ez a blog lelke: ha egy szám nem innen jön, nem kerül bele. */
.forrasok{margin:46px 0 0;padding:22px 24px;background:var(--homok);
          border-radius:var(--r-nagy);font-size:14.5px}
.forrasok h2{font-size:17px;margin:0 0 10px}
.forrasok li{margin:0 0 10px;line-height:1.55}
.forrasok .megjegyzes{color:var(--halvany);font-style:italic}

/* ---- cikklista ---- */
.sorozat{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
         margin:30px 0 0;padding:0;list-style:none}
.kartya{background:#fff;border:1px solid var(--vonal);border-radius:var(--r-nagy);
        padding:22px 24px;display:flex;flex-direction:column;gap:8px}
.kartya .szam{font-size:13px;font-weight:600;color:var(--moha);letter-spacing:.08em;text-transform:uppercase}
.kartya h2{font-size:20px;margin:0}
.kartya h2 a{color:var(--erdo);text-decoration:none}
.kartya h2 a:hover{color:var(--oliva)}
.kartya p{font-size:15px;color:var(--halvany);margin:0}
.szakasz-cim{margin:44px 0 0;font-size:15px;font-weight:600;color:var(--moha);
             letter-spacing:.08em;text-transform:uppercase}

.vissza{display:inline-block;margin:36px 0 0;font-size:15px}

/* ---- lábléc ---- */
.lablec{border-top:1px solid var(--vonal);background:var(--homok)}
.lablec .belso{max-width:1040px;margin:0 auto;padding:28px 20px;
               font-size:14.5px;color:var(--halvany)}
.lablec a{color:var(--oliva)}