/* Wordlight site frame: the shared look of the sub-pages (prayer requests, world situation, privacy).
   The rules are copied from the landing page (index.html) so the header, menu, footer and background match it.
   The landing page keeps its own inline styles; this file is only loaded by the sub-pages. */
  @font-face{font-family:'PP Felirat';src:url('/assets/anton-felirat.woff') format('woff');font-display:swap;font-weight:400;font-style:normal}
  :root{--bg:#0B110E;--panel:#121B16;--line:#22302A;--ink:#EDEBE1;--muted:#98A69D;
         --zold:#7CB342;--borostyan:#FFB340;--max:760px}
  *{margin:0;padding:0;box-sizing:border-box}
  body{background:var(--bg);color:var(--ink);
       font:17px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
       -webkit-font-smoothing:antialiased}
  a{color:var(--zold)}
  header{border-bottom:1px solid var(--line);background:rgba(11,17,14,.92)}
  /* Boss 2026-10-26 (TG 29604): the header uses the home page's width (1180 px), not the 760 px text column --
     in the narrow column the logo sat in the middle of a wide screen. */
  .nav{max-width:1180px;margin:0 auto;padding:0 26px;display:flex;align-items:center;
        gap:22px;height:74px}
  .brand{display:flex;align-items:center;gap:11px;margin-right:auto;text-decoration:none;color:var(--ink)}
  .brand img{width:38px;height:38px;border-radius:50%}
  .brand span{font-family:'PP Felirat',Impact,'Arial Narrow Bold',sans-serif;font-size:26px;font-weight:400;letter-spacing:.4px;color:#7CB342;text-shadow:0 1px 3px rgba(0,0,0,.6)}
  .brand img{border-radius:0}
  /* Boss 2026-10-19 22:25: logo 30% larger, wordmark smaller on phones in portrait */
  .brand img{width:50px;height:50px}
  @media (max-width:480px) and (orientation:portrait){.brand span{font-size:20px}}
  .nav a.link{color:var(--muted);font-size:14px;letter-spacing:.05em;text-transform:uppercase;
               text-decoration:none}
  .nav a.link:hover{color:var(--ink)}
  @media (max-width:920px){
    .nav{flex-wrap:wrap;height:auto;padding:10px 16px 8px;gap:4px 20px}
    .brand{width:100%;margin-right:0}
    .nav a.link{font-size:13px}
  }
  footer{border-top:1px solid var(--line);color:var(--muted);font-size:14px}
  footer div{max-width:var(--max);margin:0 auto;padding:26px 22px}
  footer a{color:var(--muted)}

  main.ppm{max-width:none;padding:0}
  .pp{max-width:var(--max);margin:0 auto;padding:32px 18px 56px}
  @media (max-width:560px){.pp{padding:24px 16px 48px}}
  .pp .kicsi{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--borostyan);font-weight:700;margin:0 0 10px}
  .pp h1{font-size:clamp(30px,6vw,46px);line-height:1.1;margin:0 0 16px}
  .pp p{margin:0 0 14px;color:#cfd6cf}
  .pp .halk{color:var(--muted);font-size:15px}
  .wlhatter{position:relative;overflow:hidden;isolation:isolate;
     background:
       radial-gradient(1.3px 1.3px at 23px 41px,rgba(255,255,255,.55),transparent 70%),
       radial-gradient(1px 1px at 97px 13px,rgba(255,255,255,.40),transparent 70%),
       radial-gradient(1.5px 1.5px at 151px 88px,rgba(255,244,214,.50),transparent 70%),
       radial-gradient(1px 1px at 58px 132px,rgba(255,255,255,.32),transparent 70%),
       radial-gradient(1.1px 1.1px at 189px 171px,rgba(255,255,255,.42),transparent 70%),
       radial-gradient(1.2px 1.2px at 128px 196px,rgba(214,255,214,.32),transparent 70%);
     background-size:211px 211px}
  .wlhatter::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
     background:
       radial-gradient(1px 1px at 61px 77px,rgba(255,255,255,.30),transparent 70%),
       radial-gradient(1.6px 1.6px at 263px 211px,rgba(255,255,255,.45),transparent 70%),
       radial-gradient(1px 1px at 190px 300px,rgba(255,255,255,.28),transparent 70%);
     background-size:337px 337px}
  .wlhatter::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
     background:
       radial-gradient(70% 520px at 50% 0,rgba(124,179,66,.17),transparent 75%),
       radial-gradient(45% 700px at 100% 38%,rgba(124,179,66,.07),transparent 75%),
       radial-gradient(45% 700px at 0 64%,rgba(255,179,64,.05),transparent 75%),
       radial-gradient(60% 600px at 50% 100%,rgba(124,179,66,.08),transparent 75%)}
  header .nav.fej2{max-width:1320px;margin:0 auto;padding:0 26px;display:flex;align-items:center;gap:18px;height:74px;flex-wrap:nowrap;position:relative}
  header .nav.fej2 .brand{width:auto;margin-right:auto;flex-shrink:0}
  header .nav.fej2 .brand img{width:52px;height:52px}
  header .nav.fej2 .linkek{display:flex;align-items:center;gap:18px;flex-shrink:0;order:0;position:static;flex:0 0 auto;overflow:visible;padding:0;
     background:none;border:0;box-shadow:none;-webkit-mask-image:none;mask-image:none}
  header .nav.fej2 a.link{display:inline;flex-shrink:0;white-space:nowrap;color:var(--muted);font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
  header .nav.fej2 a.link:hover{color:var(--ink)}
  header .nav.fej2 a.link[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--zold);padding-bottom:3px}
  header .nav.fej2 .fbtn{flex-shrink:0;display:inline-block;background:var(--zold);color:#0B110E;font-weight:700;padding:10px 16px;border-radius:6px;font-size:14px;text-decoration:none;white-space:nowrap}
  header .nav.fej2 .fbtn:hover{filter:brightness(1.1)}
  header .nav.fej2 .nyelvv,header .nav.fej2 .nyelvv.sarok{position:relative;right:auto;top:auto;margin-left:0;flex-shrink:0}
  header .nav.fej2 .hamb{display:none;flex-shrink:0;width:44px;height:44px;align-items:center;justify-content:center;background:none;
     border:1px solid #33453B;border-radius:8px;color:var(--ink);cursor:pointer;padding:0}
  header .nav.fej2 .hamb svg{width:22px;height:22px}
  header .nav.fej2.nyitva .hamb{border-color:var(--zold)}
  /* the hamburger mode: phones by CSS, and any width where the row does not fit (JS adds .kompakt) */
  header .nav.fej2.kompakt .hamb{display:flex}
  header .nav.fej2.kompakt .linkek{display:none;position:absolute;right:16px;top:calc(100% - 6px);z-index:60;flex-direction:column;
     align-items:stretch;gap:0;min-width:240px;padding:8px 0;background:var(--panel);border:1px solid var(--line);border-radius:8px;
     box-shadow:0 14px 40px rgba(0,0,0,.5)}
  header .nav.fej2.kompakt.nyitva .linkek{display:flex}
  header .nav.fej2.kompakt a.link{display:block;padding:13px 20px;font-size:15px;color:var(--ink);box-shadow:none}
  header .nav.fej2.kompakt a.link[aria-current]{color:var(--zold);box-shadow:inset 3px 0 0 var(--zold)}
  @media(max-width:920px){
    header .nav.fej2{padding:0 16px;gap:12px;height:70px}
    header .nav.fej2 .hamb{display:flex}
    header .nav.fej2 .linkek{display:none;position:absolute;right:16px;top:calc(100% - 6px);z-index:60;flex-direction:column;
       align-items:stretch;gap:0;min-width:240px;padding:8px 0;background:var(--panel);border:1px solid var(--line);border-radius:8px;
       box-shadow:0 14px 40px rgba(0,0,0,.5)}
    header .nav.fej2.nyitva .linkek{display:flex}
    header .nav.fej2 a.link{display:block;padding:13px 20px;font-size:15px;color:var(--ink);box-shadow:none}
    header .nav.fej2 a.link[aria-current]{color:var(--zold);box-shadow:inset 3px 0 0 var(--zold)}
  }
  @media(max-width:520px){ header .nav.fej2 .fbtn{display:none} }
  @media (max-width:480px) and (orientation:portrait){ header .nav.fej2 .brand span{font-size:21px} }
  .nyelvv{position:relative;margin-left:4px}
  .nyelvv summary{list-style:none;cursor:pointer;height:40px;min-width:46px;padding:0 10px;display:flex;align-items:center;
     justify-content:center;gap:6px;border:1px solid #33453B;border-radius:8px;color:#EDEBE1;font-size:13px;font-weight:700;
     letter-spacing:.06em;text-transform:uppercase}
  .nyelvv summary::-webkit-details-marker{display:none}
  .nyelvv summary svg{width:16px;height:16px}
  .nyelvv[open] summary{border-color:#7CB342}
  .nyelvv ul{position:absolute;right:0;top:48px;list-style:none;margin:0;padding:6px 0;min-width:170px;z-index:60;
     background:#121B16;border:1px solid #22302A;border-radius:8px;box-shadow:0 14px 40px rgba(0,0,0,.5)}
  .nyelvv li{margin:0}
  .nyelvv a{display:block;padding:10px 16px;color:#EDEBE1;text-decoration:none;font-size:15px}
  .nyelvv a:hover{background:#16211B}
  .nyelvv a[aria-current]{color:#FFB340;font-weight:700}
  /* /app/ and /utmutato/: on phones the brand takes the whole first row and the links wrap below it;
     the picker sits in the first row's corner, so long link words (ru, uk) cannot push it to a third row */
  /* the FAQ's generic details{border-bottom;padding} drew a stray line under the picker (2026-10-26) */
  .nyelvv{border-bottom:0;padding:0}
  @media (max-width:920px){ .nav{position:relative} .nyelvv.sarok{position:absolute;right:16px;top:10px;margin:0} }

  /* sub-page body */
  .wlbelso .wlhatter{min-height:calc(100svh - 150px)}
  .wlbelso .pp{padding-top:48px}
  .wlbelso .lead{font-size:clamp(17px,2.2vw,20px);color:#cfd6cf;margin:0 0 26px}
  .wlhamar-sor{background:var(--panel);border:1px dashed var(--line);border-radius:14px;padding:18px 20px;
     color:var(--muted);font-size:16px;margin:0 0 18px}