/* A `site-*.css` sorozat 5., utolsó tagja - lásd site-base.css fejlécét a
   betöltési sorrendről. */
/* ---------- GYIK oldal (faq.html) - külön fájlban kell lennie, nem
   beágyazott <style>-ban, mert a CSP `style-src` nem enged inline stílust ---------- */
.faq-wrap { max-width: 760px; margin: 0 auto; padding: 40px 24px 64px; }
.faq-wrap h1 { font-family: var(--font-display); font-size: 30px; margin-bottom: 8px; }
.faq-intro { color: var(--text-muted); margin-bottom: 32px; }
.faq-group-title { font-family: var(--font-display); font-size: 19px; margin: 36px 0 14px; color: var(--primary); }
.faq-item { border-bottom: 1px solid var(--border); padding: 16px 0; }
.faq-item h3 { margin: 0 0 8px; font-size: 15px; }
.faq-item p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.faq-back { display: inline-block; margin-top: 32px; }

/* ---------- Globális töltés-sáv - lásd site.js apiFetch
   beginLoadingIndicator/endLoadingIndicator: minden API-hívásra (login,
   nézet-váltás, modal) automatikusan megjelenik, ha 400ms-nél tovább tart,
   hogy a felhasználó lássa, történik valami, nem "fagyott le" a felület. */
#mk-loading-bar { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .15s; }
#mk-loading-bar.active { opacity: 1; }
#mk-loading-bar::before {
  content: ""; display: block; height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  animation: mk-loading-sweep 1.1s ease-in-out infinite;
}
@keyframes mk-loading-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* ---------- Súgó nézet ----------
   A lépések kétoszlopos elrendezésűek (szöveg + képernyőkép), de a kép
   oszlopa ELTŰNHET (lásd portal-core.js: onerror), ha a képernyőkép még nem
   készült el. Ezért a rács NEM fix két oszlop, hanem flex-alapú: egy
   hiányzó kép esetén a szöveg egyszerűen kitölti a helyet, nem marad
   üres hasáb. */
.help-intro { max-width: 760px; color: var(--muted); margin-bottom: 28px; }

/* korábban `display:flex` volt,
   a kép a szöveg MELLETT, jobb szélen jelent meg - a felhasználó szerint ez
   nem a "megfelelő pont alatt" volt. Most a kép a saját lépése SZÖVEGE ALÁ
   kerül (egyszerű blokk-elrendezés, a meglévő DOM-sorrend - text majd image
   - már eddig is ezt a szándékot tükrözte). */
.help-step {
  padding: 20px 0;
  border-top: 1px solid var(--border);
}

.help-step:first-child { border-top: none; }
.help-step-text h4 { margin: 0 0 8px; font-size: 18px; }
.help-step-text p { margin: 0 0 12px; }

.help-tips {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
}
.help-tips li { margin-bottom: 6px; }

.help-step-image { max-width: 480px; margin-top: 14px; }
.help-step-image img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
}

.help-faq-title { margin-top: 36px; }

.help-faq-item {
  border-top: 1px solid var(--border);
  padding: 14px 0;
}
.help-faq-item summary { cursor: pointer; font-weight: 600; }
.help-faq-item p { margin: 10px 0 0; color: var(--muted); }