/* =============================================================
   Közös stílusok minden oldalra (2026.10.09.)
   - képernyőolvasónak / keresőnek szóló, vizuálisan rejtett szöveg
   - width/height attribútumos képek arányának megtartása
   - süti-hozzájárulás sáv
   - JS nélküli (statikus) menü és lábléc tartalék
   ============================================================= */

/* Vizuálisan rejtett, de felolvasható / indexelhető szöveg */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* A 2026.10.09-én pótolt width/height attribútumok (data-arany jelölés) csak
   a képarányt adják a helyfoglaláshoz (CLS); a megjelenített méretet továbbra is
   a CSS vagy a kép saját mérete adja. :where() = 0 specificitás, így minden
   meglévő méretező szabály érvényesül. */
:where(img[data-arany]) {
  width: auto;
  height: auto;
}

/* ---------- Statikus menü / lábléc (csak JS nélkül látszik) ----------
   A mód-bootstrap a <html>-re data-mode attribútumot tesz: ha van, a JS-es
   fejléc/lábléc töltődik be, és a statikus tartalék rejtve marad. */
html[data-mode] .statikus-tartalek {
  display: none !important;
}
.statikus-tartalek {
  font-family: 'Montserrat', system-ui, sans-serif;
  background: #0f2236;
  color: #e6f0fa;
  padding: 1rem clamp(16px, 4vw, 32px);
}
.statikus-tartalek a {
  color: #8cc8ff;
}
.statikus-tartalek ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- Süti-hozzájárulás sáv ---------- */
.suti-sav {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 3000;
  max-width: 760px;
  margin: 0 auto;
  background: #ffffff;
  color: #1a2b4a;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
  padding: 1.1rem 1.25rem;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
}
.suti-sav[hidden] {
  display: none;
}
/* „Süti-beállítások” kattintáskor: rövid kiemelés (js/suti.js) */
.suti-sav-kiemelt {
  animation: suti-sav-kiemeles 0.6s ease;
}
@keyframes suti-sav-kiemeles {
  0% { transform: translateY(0); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28); }
  25% { transform: translateY(-8px); box-shadow: 0 0 0 4px #3498db, 0 10px 40px rgba(0, 0, 0, 0.28); }
  60% { transform: translateY(0); box-shadow: 0 0 0 4px #3498db, 0 10px 40px rgba(0, 0, 0, 0.28); }
  100% { transform: translateY(0); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28); }
}
@media (prefers-reduced-motion: reduce) {
  .suti-sav-kiemelt { animation: none; }
}
.suti-sav-cim {
  margin: 0 0 0.35rem 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a365d;
}
.suti-sav-szoveg {
  margin: 0 0 0.9rem 0;
}
.suti-sav-szoveg a {
  color: #2980b9;
  text-decoration: underline;
}
.suti-sav-gombok {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
}
.suti-sav-gomb {
  border: 0;
  border-radius: 999px;
  padding: 0.6rem 1.3rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}
.suti-sav-gomb-elutasit {
  background: #e9eef4;
  color: #1a2b4a;
}
.suti-sav-gomb-elutasit:hover,
.suti-sav-gomb-elutasit:focus-visible {
  background: #d7e0ea;
}
.suti-sav-gomb-elfogad {
  background: #3498db;
  color: #ffffff;
}
.suti-sav-gomb-elfogad:hover,
.suti-sav-gomb-elfogad:focus-visible {
  background: #2980b9;
}
.suti-sav-gomb:focus-visible {
  outline: 3px solid #1a365d;
  outline-offset: 2px;
}
@media (max-width: 520px) {
  .suti-sav-gombok {
    justify-content: stretch;
  }
  .suti-sav-gomb {
    flex: 1 1 100%;
  }
}

/* Lábléc jogi linkek (a mód-láblécekben) */
.lablec-jogi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.2rem;
  margin: 0.6rem 0 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}
.lablec-jogi a,
.lablec-jogi button {
  color: inherit;
  opacity: 0.85;
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.lablec-jogi a:hover,
.lablec-jogi button:hover {
  opacity: 1;
}

/* ---------- Google Térkép helyőrző (js/terkep.js, 2026.10.10.) ----------
   A térkép csak kattintásra töltődik (adatvédelem + sebesség). */
.terkep-helyorzo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.5rem 16px;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  font-family: 'Montserrat', system-ui, sans-serif;
  color: #1a2b4a;
  background:
    linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)),
    repeating-linear-gradient(45deg, #dfe8f1 0 2px, transparent 2px 28px),
    repeating-linear-gradient(-45deg, #dfe8f1 0 2px, transparent 2px 28px),
    #eef4fa;
}
.terkep-helyorzo-cim {
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
}
.terkep-helyorzo-gomb {
  border: 0;
  border-radius: 999px;
  padding: 0.75rem 1.6rem;
  min-height: 44px;
  font: inherit;
  font-weight: 700;
  color: #ffffff;
  background: #3498db;
  cursor: pointer;
}
.terkep-helyorzo-gomb:hover,
.terkep-helyorzo-gomb:focus-visible {
  background: #2980b9;
}
.terkep-helyorzo-gomb:focus-visible {
  outline: 3px solid #1a365d;
  outline-offset: 2px;
}
.terkep-helyorzo-megjegyzes {
  margin: 0;
  max-width: 460px;
  font-size: 0.85rem;
  color: #4a5568;
}
.terkep-helyorzo-megjegyzes a {
  color: #2980b9;
}

/* ---------- Mobil: ne legyen vízszintes görgetés (SEO-átnézés, 2026.10.10.) ----------
   A díszítő háttér-alakzatok (.shape), a beúszó animációk kiinduló helyzete és
   a túl széles címsorok miatt keskeny kijelzőn oldalra is el lehetett görgetni.
   A clip (a hidden-nel ellentétben) nem hoz létre görgethető tárolót, így a
   sticky/fixed elemek működése nem változik. */
html,
body {
  overflow-x: clip;
}
@media (max-width: 480px) {
  .section-header h2.section-title {
    font-size: clamp(1.6rem, 8.5vw, 2.4rem);
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ---------- Morzsamenü (a lábléc fölött, 2026.10.10.) ----------
   Látható párja az oldalak BreadcrumbList schemájának. */
.morzsa {
  max-width: 1200px;
  margin: 2rem auto 1rem auto;
  padding: 0 16px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.9rem;
  color: #4a5568;
}
.morzsa ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.morzsa li + li::before {
  content: '›';
  margin: 0 0.55rem;
  opacity: 0.7;
}
.morzsa a {
  color: #2563eb;
  text-decoration: underline;
  display: inline-block;
  padding: 0.6rem 0;
}
.morzsa a:hover,
.morzsa a:focus-visible {
  text-decoration: none;
}
[data-mode="magamnak"] .morzsa {
  color: #c9d7ef;
}
[data-mode="magamnak"] .morzsa a {
  color: #8cc8ff;
}

/* Oldalcím ott, ahol a nézetnek nincs saját heroja (pl. elméleti tanfolyam, magamnak) */
.oldal-cim {
  margin: 2.5rem 0 2rem 0;
  text-align: center;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.2;
}

/* Promóciók: az állapot-címke a H1 mellett, de nem a címben (SEO, 2026.10.10.) */
.promo-cim-sor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3em 0.6em;
}
.promo-cim-sor h1 {
  margin: 0;
}
[data-mode="magamnak"] .oldal-cim {
  color: #ffffff;
  text-shadow: 0 0 14px rgba(36, 255, 217, 0.35);
}