/* Krisztusfüzér segítő – stílusok (verzió a bővítmény fejlécében) */
:root {
  --kf-kek: #1f4fbf;
  --kf-piros: #c0262d;
  --kf-zold: #1e7a2e;
  --kf-arany: #b8892b;
  --kf-szoveg: #2b2b2b;
  --kf-halvany: #fbf8f1;
}

/* ---------- Forgó füzér ---------- */
.kf-fuzer { max-width: 560px; margin: 0 auto; text-align: center; }
.kf-fuzer-gomb {
  position: relative; display: block; width: 100%; padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer; border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.kf-fuzer-gomb:focus-visible { outline: 3px solid var(--kf-arany); outline-offset: 6px; }
.kf-fuzer-kep {
  display: block; width: 100%; height: auto;
  animation: kf-forgas var(--kf-tempo, 14.4s) linear infinite;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
}
@keyframes kf-forgas { to { transform: rotate(360deg); } }
.kf-fuzer-kozep {
  position: absolute; inset: 22% 20%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .1em; pointer-events: none;
  font-family: Georgia, "Times New Roman", serif; font-weight: 700; line-height: 1.15;
  font-size: clamp(14px, 4.2vw, 26px);
}
.kf-k1 { color: var(--kf-kek); font-style: italic; font-size: .82em; }
.kf-k2 { color: var(--kf-piros); font-size: 1.35em; }
.kf-k3 { color: var(--kf-zold); font-size: 1.35em; }
.kf-fuzer-felirat {
  margin: 1rem auto 0; font-size: 1.1rem; color: var(--kf-kek); font-weight: 600;
  display: inline-flex; align-items: center; gap: .5em;
}
.kf-hang { font-size: 1.4em; display: inline-block; }
.kf-fuzer.kf-szol .kf-hang { animation: kf-lukteto 1s ease-in-out infinite; color: var(--kf-piros); }
@keyframes kf-lukteto { 50% { transform: scale(1.35); } }
/* Ha valaki a rendszerében kérte a mozgás csökkentését: lassabban forog */
@media (prefers-reduced-motion: reduce) {
  .kf-fuzer-kep { animation-duration: 120s; }
  .kf-fuzer.kf-szol .kf-hang { animation: none; }
}

/* ---------- Kattintható gyöngyrajz ---------- */
.kf-gyongyok { max-width: 711px; margin: 0 auto 1.5rem; }
.kf-gyongyok-keret { position: relative; }
.kf-gyongyok-keret img { display: block; width: 100%; height: auto; }
.kf-pont {
  position: absolute; border-radius: 50%; border: 2px solid transparent; background: transparent;
  cursor: pointer; padding: 0; transition: border-color .2s, box-shadow .2s;
}
.kf-pont:hover, .kf-pont:focus-visible {
  border-color: var(--kf-arany); box-shadow: 0 0 0 4px rgba(184,137,43,.25); outline: none;
}
.kf-gyongyok figcaption { text-align: center; color: var(--kf-kek); font-weight: 600; margin-top: .5rem; }

/* Felugró ablak a gyöngy szövegével */
.kf-ablak { border: 0; border-radius: 14px; padding: 0; max-width: min(640px, 92vw); width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.35); color: var(--kf-szoveg); }
.kf-ablak::backdrop { background: rgba(20,20,30,.55); }
.kf-ablak-belso { padding: 1.4rem 1.5rem 1.2rem; max-height: 80vh; overflow: auto; background: var(--kf-halvany); }
.kf-ablak-belso h2, .kf-ablak-belso h3 { margin-top: 0; color: var(--kf-arany); }
.kf-ablak-zar { float: right; border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: #555; }

/* A gyöngyök szövegei az oldalon (lista a rajz alatt) */
.kf-gyongy-szoveg { background: var(--kf-halvany); border-left: 4px solid var(--kf-arany); padding: .8rem 1rem; margin: 0 0 1rem; border-radius: 6px; }
.kf-gyongy-szoveg.kf-kiemelt { animation: kf-villan 1.6s ease-out; }
@keyframes kf-villan { from { background: #f5e3b5; } }

/* ---------- Lábléc ---------- */
.kf-lablec { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  max-width: 1140px; margin: 0 auto; padding: 1rem 16px 1.5rem; font-size: .8rem; color: #666; }
.kf-verzio { white-space: nowrap; }

/* ---------- Régi tartalom kicsit rendezettebben ---------- */
.kf-regi img { max-width: 100%; height: auto; }
.kf-regi table { max-width: 100%; }
.kf-regi audio { width: 100%; max-width: 420px; display: block; margin: .3rem 0 .8rem; }
.kf-enek { display: grid; gap: .2rem; margin: 0 0 1.2rem; }


/* Flash (Ruffle) */
.kf-flash { width: 100%; max-width: 960px; margin: 0 auto 1rem; background: #fff; }
.kf-flash embed, .kf-flash ruffle-embed { display: block; width: 100%; height: 100%; }

/* A Hello Elementor téma gomb-stílusa ne rajzoljon keretet/hátteret a füzér és a gyöngyök köré */
.kf-fuzer .kf-fuzer-gomb, .kf-fuzer .kf-fuzer-gomb:hover, .kf-fuzer .kf-fuzer-gomb:focus,
.kf-gyongyok .kf-pont, .kf-ablak .kf-ablak-zar {
  border-color: transparent; background: transparent !important; color: inherit; box-shadow: none;
}
.kf-fuzer .kf-fuzer-gomb { border: 0 !important; }
.kf-gyongyok .kf-pont:hover, .kf-gyongyok .kf-pont:focus-visible { border-color: var(--kf-arany) !important; box-shadow: 0 0 0 4px rgba(184,137,43,.25); }

/* Felugró ablak mindig középen (a téma stílusa elcsúsztatta) – 20261008d */
dialog.kf-ablak { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: 90vh; width: min(640px, 92vw); }

/* ===== 20261008e – HŰ ÁTVITEL: az eredeti oldalak kinézete ===== */
/* Eredeti kezdőlap: a köszöntő KÉP (honlaphoz.png) áll, felette forog a füzér (mindkettő ~540×552) */
.kf-fuzer.kf-fuzer-eredeti { max-width: 540px; }
.kf-fuzer-eredeti .kf-fuzer-gomb { position: relative; }
.kf-fuzer-eredeti .kf-fuzer-hatter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.kf-fuzer-eredeti .kf-fuzer-kep { position: relative; filter: none; }
.kf-fuzer-eredeti .kf-fuzer-felirat { font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #006600; }
/* „Az oldal továbblép automatikusan …” – az eredeti színekkel */
.kf-tovabb { text-align: center; font-family: "Times New Roman", Times, serif; font-size: 22px; color: #006600; margin: .2em 0 1em; }
.kf-tovabb .kf-tovabb-ido { font-size: 16px; color: #006600; }
.kf-tovabb a { color: #551a8b; text-decoration: underline; }
/* A régi oldalak a saját stílusukkal jelennek meg (Elementor Canvas) – csak a képek ne lógjanak ki kis képernyőn */
/* 20261008g: NINCS max-width – a régi táblázatokban a kép tágítja a cellát (pl. index1: 50 px-es cella, 419 px-es kép) */
/* 20261008k: a régi oldalakon a body 8 px-es margója és az első elem felső margója ÖSSZEOLVADT – az Elementor flex-tárolója és
   az overflow ezt megakadályozta → blokk-tároló, overflow nélkül (a túl széles régi tartalom az egész oldalt görgeti, mint a régin) */
.page-template-elementor_canvas .elementor .e-con:has(.kf-hu) { display: block; }
/* A gyöngyök szövegei: mint a régin, csak a felugró ablakban látszanak */
.kf-hu .kf-gyongy-lista { display: none; }
.kf-ablak .kf-gyongy-szoveg { display: block; }
/* a böngésző alapértékei, ahogy a régi oldalak számoltak velük */
/* 20261008k: az alapértékek NULLA erősséggel a body-n, a .kf-hu örököl → a régi oldal saját body-szabálya ugyanúgy érvényesül */
:where(body.page-template-elementor_canvas) { font-family: "Times New Roman", Times, serif; font-size: 16px; line-height: normal; color: #000; text-align: start; }
.kf-hu { font: inherit; color: inherit; text-align: inherit; }
:where(.kf-hu) a { color: #0000ee; } :where(.kf-hu) a:visited { color: #551a8b; }
.kf-hu table { border-collapse: separate; }
/* 20261008f: a köszöntő kép az eredetin egy 608 px-es cella bal szélétől indult (a füzér középen) → ~35 px-szel balrább */
.kf-fuzer-eredeti .kf-fuzer-hatter { left: -6.5%; }
/* a régi oldalakon a jogi sor már az oldal része → a láblécben csak a verzió */
.page-template-elementor_canvas .kf-lablec .kf-jogi { display: none; }
.page-template-elementor_canvas .kf-lablec { justify-content: flex-end; }

/* 20261008h: az Elementor „.elementor img {max-width:100%}” szabálya a régi táblázatok képeit a cellához zsugorította */
.elementor .kf-hu img { max-width: none; }
/* 20261008i: „♪ Most szól” sáv a régi oldalak mp3-linkjeihez (a táblázatok kinézete változatlan) */
.kf-mostszol { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%) translateY(150%); z-index: 9999;
  background: #1f4fbf; color: #fff; border-radius: 999px; padding: 8px 10px 8px 18px; font: 600 15px/1.2 Calibri, Arial, sans-serif;
  box-shadow: 0 6px 20px rgba(0,0,0,.3); display: flex; align-items: center; gap: 10px; transition: transform .25s; max-width: 92vw; }
.kf-mostszol.kf-lathato { transform: translateX(-50%) translateY(0); }
.kf-mostszol .kf-ms-hang { font-size: 20px; }
.kf-mostszol .kf-ms-cim { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kf-mostszol .kf-ms-stop { border: 0; border-radius: 999px; background: #fff; color: #1f4fbf; font-weight: 700; padding: 6px 14px; cursor: pointer; }

/* 20261009b (az eljvele.hu-val azonos; Péter: „igen, mindkét honlapon terjeszd ki”): VALÓDI mobilnézet a régi (táblázatos) oldalakhoz – csak a body.kf-mobil oldalakon és csak keskeny kijelzőn;
   asztali nézetben a hű, régi kinézet változatlan. A cellák egymás alá, a fix szélességek feloldva, a képek a kijelzőhöz igazodnak. */
@media (max-width: 760px) {
  body.kf-mobil { margin: 0 !important; }
  body.kf-mobil .kf-hu { padding: 0 12px; overflow-wrap: anywhere; }
  body.kf-mobil .kf-hu table, body.kf-mobil .kf-hu tbody, body.kf-mobil .kf-hu thead, body.kf-mobil .kf-hu tr,
  body.kf-mobil .kf-hu td, body.kf-mobil .kf-hu th {
    display: block; width: auto !important; min-width: 0 !important; max-width: 100% !important; height: auto !important;
    box-sizing: border-box; float: none !important;
  }
  body.kf-mobil .kf-hu table { margin: 0 auto 6px !important; }
  body.kf-mobil .kf-hu td:empty { display: none; }
  body.kf-mobil .kf-hu [style*="width"], body.kf-mobil .kf-hu [width] { max-width: 100% !important; }
  body.kf-mobil .kf-hu div[style*="width"] { width: auto !important; }
  body.kf-mobil .kf-hu img { max-width: 100% !important; height: auto !important; float: none !important; display: block;
    margin: 8px auto; }
  body.kf-mobil .kf-hu iframe, body.kf-mobil .kf-hu embed, body.kf-mobil .kf-hu object, body.kf-mobil .kf-hu video,
  body.kf-mobil .kf-hu ruffle-object, body.kf-mobil .kf-hu ruffle-embed { max-width: 100% !important; }
  body.kf-mobil .kf-hu font[size="7"] { font-size: 30px; line-height: 1.15; }
  body.kf-mobil .kf-hu font[size="6"] { font-size: 25px; line-height: 1.2; }
  body.kf-mobil .kf-hu font[size="5"] { font-size: 20px; }
  body.kf-mobil .kf-hu, body.kf-mobil .kf-hu td { font-size: 16px; line-height: 1.45; }
  body.kf-mobil .kf-hu font[size="1"], body.kf-mobil .kf-hu font[size="2"] { font-size: 15px; }
  /* 20261009g (az eljvele.hu-n igazolt kilógás után, ott 20261009e): Word/Excel-táblázatok tiltott sortörése keskeny kijelzőn feloldva. */
  body.kf-mobil .kf-hu :is(td, th, nobr), body.kf-mobil .kf-hu :is(td, th) :not(pre) { white-space: normal !important; }
  /* 20261009c – kezdőlap (Péter: „a forgó rész jelenjen meg, de látszódjon, hogy van lejjebb is”): telefonon a forgó füzér
     kerül előre (asztalin a könyv/CD-sor alatt van). A forgó kép sarkai forgás közben kilógnának (vízszintes görgetés) → levágva;
     a füzér magassága legfeljebb a kijelző 58%-a, hogy alatta kilásson a folytatás.
     20261009e (Péter: „lejjebb is van… – ez béna, más ötlet kell”): a felirat helyett szöveg nélküli jel – egy aranygyöngy (mint a
     füzér arany gyöngye) fehér lefelé mutató nyíllal, finoman ring; rákoppintva lejjebb görget, görgetés után eltűnik
     (a gombot a bővítmény wp_footer-szkriptje teszi a füzér alá). */
  body.kf-mobil .e-con:has(> .elementor-widget .kf-fuzer) { display: flex !important; flex-direction: column; }
  body.kf-mobil .elementor-widget:has(.kf-fuzer) { order: -1; padding-top: 6px; }
  body.kf-mobil .kf-fuzer { overflow: clip; width: min(100%, 58vh); margin: 0 auto; }
  body.kf-mobil .kf-fuzer-felirat { margin-top: .4rem; }
  /* 20261009h: a gomb a könyv és a CD-korong mellett (a cella jobb oldalán, függőlegesen középen) */
  body.kf-mobil td.kf-nyil-hely { position: relative; }
  body.kf-mobil .kf-lejjebb {
    position: absolute; right: 18px; top: 50%; margin-top: -20px;
    display: block; width: 40px; height: 40px; padding: 0; border: 0 !important; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff8d6 0, #f0cd63 22%, #c9961c 58%, #7d5a06 100%);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25); cursor: pointer; animation: kf-lejjebb 1.8s ease-in-out infinite;
    transition: opacity .4s; -webkit-tap-highlight-color: transparent;
  }
  body.kf-mobil .kf-lejjebb svg { display: block; width: 22px; height: 22px; margin: 10px auto 0; }
  body.kf-mobil .kf-lejjebb.kf-elrejt { opacity: 0; pointer-events: none; }
}
.kf-lejjebb { display: none; }
@keyframes kf-lejjebb { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { body.kf-mobil .kf-lejjebb { animation: none; } }

/* 20261009h – a választóoldal (régi index1.html) „vissza a kezdőképre” gombja: kis forgó füzér + felirat, asztalon és telefonon */
.kf-vissza {
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; margin: 10px auto 0; padding: 4px 16px 4px 6px;
  border-radius: 30px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); text-decoration: none !important;
  font: italic 600 16px/1.2 Georgia, "Times New Roman", serif; color: #1a3c8f !important;
}
.kf-vissza img { width: 46px; height: auto; animation: kf-forgas 14.4s linear infinite; }
.kf-vissza:hover, .kf-vissza:focus-visible { box-shadow: 0 3px 12px rgba(0, 0, 0, .28); }
@media (prefers-reduced-motion: reduce) { .kf-vissza img { animation: none; } }