/* 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) */
/* 20261008b (eljvele): a régi oldalakon a body 8 px-es margója és az első elem felső margója ÖSSZEOLVADT (a nagyobb számít).
   Az Elementor flex-tárolója és az overflow ezt megakadályozta (jezuselete-kartoto: 8 + 16 px) → blokk-tároló, overflow nélkül;
   a túl széles régi tartalom – mint a régin – az egész oldalt görgeti. */
.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 */
/* 20261008b (eljvele): 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
   (pl. iijnp/styles.css: Arial 13px #777; page.css: text-align:center) ugyanúgy érvényesül, mint a régin */
: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: VALÓDI mobilnézet a régi (táblázatos) oldalakhoz – csak a body.ev-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.ev-mobil { margin: 0 !important; }
  body.ev-mobil .kf-hu { padding: 0 12px; overflow-wrap: anywhere; }
  body.ev-mobil .kf-hu table, body.ev-mobil .kf-hu tbody, body.ev-mobil .kf-hu thead, body.ev-mobil .kf-hu tr,
  body.ev-mobil .kf-hu td, body.ev-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.ev-mobil .kf-hu table { margin: 0 auto 6px !important; }
  body.ev-mobil .kf-hu td:empty { display: none; }
  body.ev-mobil .kf-hu [style*="width"], body.ev-mobil .kf-hu [width] { max-width: 100% !important; }
  body.ev-mobil .kf-hu div[style*="width"] { width: auto !important; }
  body.ev-mobil .kf-hu img { max-width: 100% !important; height: auto !important; float: none !important; display: block;
    margin: 8px auto; }
  body.ev-mobil .kf-hu iframe, body.ev-mobil .kf-hu embed, body.ev-mobil .kf-hu object, body.ev-mobil .kf-hu video,
  body.ev-mobil .kf-hu ruffle-object, body.ev-mobil .kf-hu ruffle-embed { max-width: 100% !important; }
  body.ev-mobil .kf-hu font[size="7"] { font-size: 30px; line-height: 1.15; }
  body.ev-mobil .kf-hu font[size="6"] { font-size: 25px; line-height: 1.2; }
  body.ev-mobil .kf-hu font[size="5"] { font-size: 20px; }
  body.ev-mobil .kf-hu, body.ev-mobil .kf-hu td { font-size: 16px; line-height: 1.45; }
  body.ev-mobil .kf-hu font[size="1"], body.ev-mobil .kf-hu font[size="2"] { font-size: 15px; }
  /* 20261009e: a Wordből/Excelből mentett táblázatok celláiban tiltott a sortörés (white-space:nowrap, <nobr>) → telefonon
     kilógott (alapitvany-aktualis, alpha) → keskeny kijelzőn a szöveg tördelhető (pre marad). */
  body.ev-mobil .kf-hu :is(td, th, nobr), body.ev-mobil .kf-hu :is(td, th) :not(pre) { white-space: normal !important; }
  /* 20261009e: a családplakátok két képváltója (700 px, a szkript fix 500 px-es képlépéssel számol) → szélesség-elvétel helyett
     arányos kicsinyítés (zoom), így a lapozás változatlanul működik. */
  body.ev-mobil .kf-hu [id^="slideshow_wrap"] { zoom: .5; }
  /* 20261009k: a „Miért van így?” nagyítós kártyái telefonon nagyban (a bővítmény a nagy képet teszi be) */
  body.ev-mobil .kf-hu a.ev-kartya { position: relative; display: block; width: fit-content; max-width: 100%; margin: 10px auto 18px; }
  body.ev-mobil .kf-hu a.ev-kartya > img {
    width: 340px !important; max-width: 100% !important; margin: 0 auto !important; border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
  }
  body.ev-mobil .kf-hu a.ev-kartya::after {
    content: "+"; position: absolute; right: -6px; bottom: -6px; width: 30px; height: 30px; border-radius: 50%;
    background: #2f6fd1; color: #fff; font: 700 24px/29px Arial, sans-serif; text-align: center; box-shadow: 0 0 0 3px #fff;
  }

  /* 20261009d – kezdőlap, a KERESZT (Péter: „az alapötlete az volt, hogy keresztalakban voltak az ikonok, de ez mobilnál nem fér
     ki”): telefonon is kereszt, CSS-rács a régi táblázaton. Asztali nézetben a régi 5 oszlopos táblázat változatlan.
     20261009f (Péter: „a vízszintes szárnál elég lenne az első három ikon, nagyjából egy magasságban és méretben – az első ikont
     módosítani lehetne, sőt az legyen a 3. helyen; a kimaradt 4. ikon a bemutatkozás felé menjen, az önarckép legyen kisebb”):
     12 oszlopos rács – fent Jézus (középső fele), a kar: Krisztusfüzér | Miért van így? | karkötő (egyforma keretben, a karkötő
     képe a közepére vágva), lefelé a szár: alapítvány, hírek (együtt), bemutatkozás (kisebb önarckép), archiv, alatta Alpha.
     A régi táblázat sorai: 3. Jézus (3. cella), 4. a kar (1 karkötő, 2 Krisztusfüzér, 3 üres, 4 Miért, 5 hírek), 5. alapítvány,
     6. bemutatkozás, 7. archiv (mind a 2. cellában), 8. Alpha. A sorrendet az „order” adja (a rács a DOM helyett ezt követi). */
  body.home.ev-mobil .kf-hu { padding-top: 12px; }
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody {
    display: grid !important; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: center;
  }
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr { display: contents !important; }
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr > td { grid-column: 1 / -1; padding: 0 !important; }
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr:nth-child(-n+2) > td,
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr:nth-child(3) > td:not(:nth-child(3)),
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr:nth-child(4) > td:nth-child(3),
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr:nth-child(n+5):nth-child(-n+7) > td:not(:nth-child(2)) {
    display: none !important;
  }
  /* a középső szár: Jézus, alapítvány, hírek, bemutatkozás, archiv – a középső 6 oszlop */
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr:nth-child(3) > td:nth-child(3),
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr:nth-child(4) > td:nth-child(5),
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr:nth-child(n+5):nth-child(-n+7) > td:nth-child(2) { grid-column: 4 / span 6; }
  /* a kar: Krisztusfüzér | Miért van így? | karkötő (20261009j: a bővítmény a cellák tartalmát már a szerveren ebbe a sorrendbe
     teszi – 1 Krisztusfüzér, 2 Miért, 3 üres, 4 karkötő, 5 hírek –, asztalon is) */
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr:nth-child(4) > td:nth-child(1) { grid-column: 1 / span 4; }
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr:nth-child(4) > td:nth-child(2) { grid-column: 5 / span 4; }
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr:nth-child(4) > td:nth-child(4) { grid-column: 9 / span 4; }
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr:nth-child(5) > td { order: 2; }
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr:nth-child(4) > td:nth-child(5) { order: 3; }
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr:nth-child(n+6) > td { order: 4; }
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody img { margin: 0 auto !important; }
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr:nth-child(4) > td:is(:nth-child(1), :nth-child(2), :nth-child(4)) img {
    width: 100% !important; aspect-ratio: 194 / 141; object-fit: cover; object-position: center;
  }
  /* a Krisztusfüzér-cellában a kép után &nbsp; áll → magasabb sor, a kép feljebb csúszott: a kar celláiban nincs szövegsor */
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr:nth-child(4) > td { font-size: 0 !important; line-height: 0 !important; }
  /* 20261009h (Péter: „a karkötő képe túlzottan le van vágva, lehetne kicsit nyújtani, és akkor beleférne a teteje és alja”):
     a karkötő-kép nem vágva, hanem a kerethez igazítva (kissé összenyomva) – egészben látszik */
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr:nth-child(4) > td:nth-child(4) img { object-fit: fill; }
  /* 20261009h (Péter: „több hely legyen az alapítvány és a zöldcsíkos képek között”) */
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr:nth-child(4) > td:nth-child(5) { margin-top: 22px; }
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr:nth-child(4) > td:nth-child(5) img,
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr:nth-child(5) img { width: 100% !important; }
  body.home.ev-mobil .kf-hu table:has(img[src*="jezus1.jpg"]):not(table table) > tbody > tr:nth-child(6) img { width: 96px !important; margin-top: 4px !important; }
}