@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+Runic&display=swap');

:root{
  /* --- Színek --- */
  --pine-950:#141d18;   /* mélyerdő háttér */
  --pine-900:#1a2620;
  --pine-800:#243128;   /* panel / kártya háttér */
  --pine-700:#324137;
  --stone-500:#8b9086;  /* tompa kőszürke — másodlagos szöveg */
  --stone-300:#c3c6bd;
  --moss-400:#7d9a70;   /* moha zöld — link, aktív állapot */
  --moss-300:#9db392;
  --birch-100:#ece7da;  /* nyírfakéreg — fő szövegszín világos alapon */
  --birch-50:#f5f2e9;
  --lichen-600:#b3702f; /* zuzmó / rozsda — ritka, hangsúlyos akcent */

  --font-display:'Fraunces', 'Noto Sans Runic', serif;
  --font-body:'Source Serif 4', 'Noto Sans Runic', serif;
  --font-mono:'JetBrains Mono', monospace;

  --container: 900px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--pine-950);
  color:var(--birch-100);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--moss-300);text-decoration-color:rgba(157,179,146,.35);text-underline-offset:3px;}
a:hover{color:var(--moss-400);}
a:focus-visible, button:focus-visible{outline:2px solid var(--lichen-600);outline-offset:3px;}

img{max-width:100%;display:block;}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:6vh 6vw 8vh;
  background-color:var(--pine-950);
  background-image:
    linear-gradient(180deg, rgba(20,29,24,.35) 0%, rgba(20,29,24,.55) 55%, rgba(20,29,24,.96) 100%),
    url('../img/hero.jpg');
  background-size:cover;
  background-position:center;
}
/* Ha még nincs feltöltve saját fotó (assets/img/hero.jpg), ez a réteges
   hegyvonal-illusztráció szolgál helyettesítő háttérként. */
.hero::before{
  content:"";
  position:absolute;inset:0;
  z-index:-1;
  background:
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(125,154,112,.10), transparent 70%),
    linear-gradient(180deg,#0f1613 0%, #1a2620 45%, #24312a 100%);
}
.hero-eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--stone-300);
  margin:0 0 1.1rem;
}
.hero-eyebrow span{color:var(--lichen-600);}
.hero h1{
  font-family:var(--font-display);
  font-weight:600;
  font-style:italic;
  font-size:clamp(2.6rem, 7vw, 5.2rem);
  line-height:1.02;
  margin:0 0 1.2rem;
  max-width:14ch;
  color:var(--birch-50);
}
.hero-stats{
  display:flex;
  gap:2.2rem;
  flex-wrap:wrap;
  margin-top:1.6rem;
  padding-top:1.6rem;
  border-top:1px solid rgba(236,231,218,.18);
}
.hero-stats div{font-family:var(--font-mono);font-size:13px;color:var(--stone-300);}
.hero-stats strong{display:block;font-size:1.3rem;color:var(--birch-50);font-weight:500;}

.scroll-cue{
  position:absolute;
  left:6vw; bottom:3vh;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--stone-300);
  display:flex;align-items:center;gap:.6rem;
}
.scroll-cue::after{
  content:"";
  width:1px;height:34px;
  background:linear-gradient(var(--moss-400), transparent);
}

/* ---------- INTRO / bevezető szöveg a lista előtt ---------- */
.intro{
  max-width:var(--container);
  margin:0 auto;
  padding:9vh 6vw 4vh;
}
.intro p{color:var(--stone-300);font-size:1.05rem;}
.intro .label{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--moss-400);
  margin-bottom:.8rem;
}

/* ---------- FEJEZET-LISTA — az útvonal ---------- */
.trail{
  max-width:var(--container);
  margin:0 auto;
  padding:2vh 6vw 14vh;
  position:relative;
}
.trail-line{
  position:absolute;
  left:calc(6vw + 27px);
  top:2vh;
  bottom:14vh;
  width:1px;
  background:linear-gradient(var(--pine-700), var(--moss-400) 8%, var(--moss-400) 92%, var(--pine-700));
  opacity:.55;
}
.chapter{
  position:relative;
  display:grid;
  grid-template-columns:56px 1fr;
  gap:1.4rem;
  padding:1.35rem 0;
  align-items:start;
  text-decoration:none;
  color:inherit;
  border-bottom:1px solid rgba(140,150,134,.14);
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.chapter.is-visible{opacity:1;transform:none;}
.chapter:last-of-type{border-bottom:none;}

.chapter-marker{
  width:56px;height:56px;
  border-radius:3px;
  background:var(--pine-800);
  border:1px solid var(--pine-700);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);
  font-size:.95rem;
  color:var(--stone-300);
  position:relative;
  z-index:1;
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.chapter.is-ready .chapter-marker{color:var(--birch-100);}
.chapter:hover.is-ready .chapter-marker{
  border-color:var(--moss-400);
  color:var(--moss-300);
  background:var(--pine-700);
}
.chapter.is-soon .chapter-marker{color:var(--pine-700);border-style:dashed;}

.chapter-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.32rem;
  margin:0 0 .35rem;
  color:var(--birch-50);
  transition:color .2s ease;
}
.chapter:hover.is-ready .chapter-title{color:var(--moss-300);}
.chapter.is-soon .chapter-title{color:var(--stone-500);}

.chapter-teaser{
  margin:0;
  color:var(--stone-300);
  font-size:.98rem;
  max-width:56ch;
}
.chapter.is-soon{cursor:default;}
.chapter-soon-tag{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lichen-600);
}

footer{
  text-align:center;
  padding:3rem 6vw 4rem;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--stone-500);
  letter-spacing:.05em;
}

.support-btn{
  position:fixed;
  right:24px;bottom:24px;
  z-index:50;
  background:var(--pine-800);
  border:1px solid var(--lichen-600);
  color:var(--birch-50);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  padding:.75rem 1.1rem;
  border-radius:999px;
  text-decoration:none;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  transition:background .2s ease, transform .2s ease;
}
.support-btn:hover{background:var(--lichen-600);color:var(--pine-950);transform:translateY(-1px);}
.support-btn[hidden]{display:none;}
@media (max-width:640px){
  .support-btn{right:16px;bottom:16px;padding:.65rem .9rem;font-size:11px;}
}

/* ---------- FEJEZET-OLDAL ---------- */
.chapter-header{
  min-height:30vh;
  padding:9vh 6vw 5vh;
  border-bottom:1px solid rgba(140,150,134,.16);
}
.back-link{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  display:inline-block;
  margin-bottom:2.4rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.9);
}
.chapter-header .eyebrow{
  font-family:var(--font-mono);
  color:var(--moss-400);
  font-size:13px;
  letter-spacing:.14em;
  text-shadow: 0 1px 8px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.9);
  margin-bottom:.8rem;
}
.chapter-header h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2rem, 5vw, 3.2rem);
  margin:0;
  max-width:18ch;
  color:var(--birch-50);
}

.chapter-body{
  max-width:var(--container);
  margin:0 auto;
  padding:6vh 6vw;
}
.chapter-body p{margin:0 0 1.4rem;}
.chapter-body p:first-of-type{
  /* Az automatikus nagybetű szándékosan levéve — lásd .rune-large / .initial-cap
     osztályokat lentebb, amivel bárhol, kézzel kijelölhető egy nagy kezdőbetű/rúna. */
}

.rune-large, .initial-cap{
  font-family:var(--font-display);
  font-size:4.4rem;
  font-weight:600;
  float:left;
  line-height:.78;
  padding:.05em .12em 0 0;
  margin-top:-.05em;
  color:var(--moss-300);
}

.rune-divider{
  display:block;
  clear:both;
  text-align:center;
  margin:2.4rem auto;
  font-family:var(--font-display);
  font-size:1.7rem;
  color:var(--lichen-600);
}

.gallery-section{
  max-width:960px;
  margin:2vh auto 10vh;
  padding:0 6vw;
}
.gallery-label{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--moss-400);
  margin-bottom:1.3rem;
  padding-top:2.5rem;
  border-top:1px solid rgba(140,150,134,.16);
}
.gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.gallery-item{
  aspect-ratio:4/5;
  background:var(--pine-800);
  border:1px solid var(--pine-700);
  border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  color:var(--stone-500);
  font-family:var(--font-mono);
  font-size:11px;
  text-align:center;
  padding:.6rem;
  position:relative;
  cursor:pointer;
}
.gallery-item.has-media{padding:0;overflow:hidden;}
.gallery-item.has-media:focus-visible{outline:2px solid var(--lichen-600);outline-offset:2px;}
.gallery-item.video::before{
  content:"▶";
  display:block;
  font-size:1.4rem;
  color:var(--moss-400);
  margin-bottom:.4rem;
}
.gallery-item img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:1px;
  transition:transform .3s ease;
}
.gallery-item.has-media:hover img{transform:scale(1.03);}

.fb-comment-wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 6vw 3vh;
  text-align:center;
}
.fb-comment-btn{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.05em;
  color:var(--birch-100);
  background:var(--pine-800);
  border:1px solid var(--moss-400);
  padding:.7rem 1.3rem;
  border-radius:999px;
  text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
.fb-comment-btn:hover{background:var(--moss-400);color:var(--pine-950);}
.fb-comment-btn[hidden]{display:none;}

/* Lightbox — teljes képernyős nézet, felirat nélkül */
.lightbox{
  position:fixed;inset:0;
  background:rgba(10,15,12,.95);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:100;
  padding:6vh 5vw;
  animation:lightbox-fade .18s ease;
}
.lightbox[hidden]{display:none;}
.lightbox-img{
  max-width:100%;max-height:calc(100% - 70px);
  object-fit:contain;
  border:1px solid var(--pine-700);
}
.lightbox-close{
  position:absolute;top:20px;right:24px;
  width:42px;height:42px;
  background:var(--pine-800);
  border:1px solid var(--stone-500);
  color:var(--birch-100);
  border-radius:2px;
  font-size:17px;
  line-height:1;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.lightbox-close:hover{border-color:var(--moss-400);color:var(--moss-300);}
.lightbox-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;
  background:var(--pine-800);
  border:1px solid var(--stone-500);
  color:var(--birch-100);
  border-radius:50%;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.lightbox-arrow:hover{border-color:var(--moss-400);color:var(--moss-300);}
.lightbox-prev{left:16px;}
.lightbox-next{right:16px;}
.lightbox-caption{
  margin-top:18px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:25px;
  letter-spacing:.02em;
  color:var(--birch-100);
  max-width:90%;
  pointer-events:none;
}
.lightbox-caption[hidden]{display:none;}
@media (max-width:640px){
  .lightbox-arrow{width:40px;height:40px;font-size:22px;}
  .lightbox-prev{left:8px;}
  .lightbox-next{right:8px;}
}
@keyframes lightbox-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .lightbox{animation:none;}
  .gallery-item.has-media:hover img{transform:none;}
}

/* Szélesebb, 16:9 videóbeágyazás (pl. YouTube) — a galéria alatt/között, teljes szélességben */
.video-embed{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:var(--pine-800);
  border:1px solid var(--pine-700);
  margin:1.6rem 0;
  overflow:hidden;
}
.video-embed iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
}

.chapter-nav{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  max-width:var(--container);
  margin:0 auto;
  padding:4vh 6vw 10vh;
  border-top:1px solid rgba(140,150,134,.16);
}
.chapter-nav a{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--stone-300);
  display:flex;
  flex-direction:column;
  gap:.4rem;
  max-width:45%;
}
.chapter-nav a span{
  font-family:var(--font-display);
  text-transform:none;
  letter-spacing:0;
  font-style:italic;
  font-size:1.05rem;
  color:var(--birch-100);
}
.chapter-nav a.next{text-align:right;align-items:flex-end;}
.chapter-nav a:hover span{color:var(--moss-300);}
.chapter-nav a.disabled{color:var(--pine-700);pointer-events:none;}
.chapter-nav a.disabled span{color:var(--pine-700);}

@media (max-width: 640px){
  .gallery{grid-template-columns:repeat(2, 1fr);}
  .trail-line{left:calc(6vw + 22px);}
  .chapter{grid-template-columns:46px 1fr;gap:1rem;}
  .chapter-marker{width:46px;height:46px;font-size:.8rem;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .chapter{transition:none;opacity:1;transform:none;}
}

/* ===== Napi statisztika-piktogramok (A zarándoklat / napok) ===== */
.day-stats{
  display:flex;
  flex-wrap:wrap;
  gap:2.2rem;
  max-width:var(--container);
  margin:0 auto;
  padding:0 6vw 5vh;
}
.day-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  min-width:64px;
}
.day-stat-icon{
  color:var(--moss-300);
  display:flex;
}
.day-stat-value{
  font-family:var(--font-mono);
  font-size:.95rem;
  font-weight:500;
  color:var(--birch-100);
}
.day-stat-label{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--stone-500);
  letter-spacing:.03em;
}
@media (max-width:640px){
  .day-stats{gap:1.4rem;}
  .day-stat{min-width:52px;}
}
.chapter-body h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.5rem;
  color:var(--birch-50);
  margin:2.4rem 0 1rem;
  padding-top:1.6rem;
  border-top:1px solid rgba(140,150,134,.16);
}
.chapter-body h2:first-of-type{
  margin-top:0;
  padding-top:0;
  border-top:none;
}
#nap-title{
  max-width:34ch;
}
.chapter-header{ position:relative; overflow:hidden; }
.chapter-header > *:not(.header-bg){ position:relative; z-index:1; }
.header-bg{
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background-size:cover;
  background-position:bottom center;
  pointer-events:none;
}
.header-bg:not(.profile-bg){
  background-position: center center;
}
/* ===== "Megtekintése semmilyen korosztálynak nem ajánlott" — kényes tartalmú galéria-képek ===== */
.gallery-item.sensitive img{
  filter: blur(22px) saturate(0.7);
  transition: filter .35s ease;
}
.gallery-item.sensitive.revealed img{
  filter: none;
}
.sensitive-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4rem;
  background:rgba(20,29,24,.35);
  font-family:var(--font-mono);
  text-align:center; padding:1rem;
  pointer-events:none;
}
@media (max-width:640px){
  .header-bg{
    background-size:contain;
    background-repeat:no-repeat;
  }
}
.gallery-item.sensitive.revealed .sensitive-overlay{ display:none; }
.sensitive-overlay .icon{ font-size:20px; color:var(--lichen-600); }
.sensitive-overlay .label{ font-size:10.5px; letter-spacing:.05em; color:var(--birch-100); text-transform:uppercase; }
.sensitive-overlay .sub{ font-size:9.5px; color:var(--stone-300); }

/* Ugyanez a lightboxban is — ha valaki a rácsban még nem oldotta fel, nagyítva se legyen éles */
.lightbox-img.sensitive{
  filter: blur(28px) saturate(0.7);
}
.lightbox-reveal-btn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.05em;
  color:var(--birch-100); background:var(--pine-800); border:1px solid var(--lichen-600);
  padding:.7rem 1.2rem; border-radius:999px; cursor:pointer;
}
.lightbox-reveal-btn[hidden]{ display:none; }
.chapter-body img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2.2rem auto;
  border-radius: 2px;
  border: 1px solid var(--pine-700);
}
.chapter-body figure{
  margin: 2.2rem 0;
}
.chapter-body figure img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 2px;
  border: 1px solid var(--pine-700);
}
.chapter-body figcaption{
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--stone-300);
  text-align: center;
  margin-top: .7rem;
  padding: 0 1rem;
}