/* =========================
   ÚJ TÉMA – "Forest Sand"
   ========================= */
   :root{
    --nav-h: 64px;
  
    /* Paletta */
    --brand-900:#0f2d20;   /* nagyon sötét zöld */
    --brand-700:#1f5133;   /* fő zöld */
    --brand-500:#2d7a4c;   /* akció */
    --brand-300:#7fc7a1;   /* kiemelés */
    --ink:#1a1b1a;         /* alap szöveg */
    --muted:#5a5f5a;       /* másodlagos */
    --bg:#faf7f2;          /* homok/elefántcsont */
    --surface:#ffffff;     /* kártyák */
    --line:#e5e1da;        /* finom vonalak/körvonalak */
    --warn:#c47f17;        /* akcentus (borostyán) */
  
    --radius:12px;
    --ring:0 0 0 2px rgba(31,81,51,.15);
  
    --shadow:0 1px 0 rgba(17,17,17,.04), 0 2px 0 rgba(17,17,17,.03);
  }
  
  /* Alap */
  html, body { height:100%; }
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--ink);
    background:var(--bg);
    padding-top:var(--nav-h);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  h1,h2,h3,h4{
    font-family: ui-serif, Georgia, 'Times New Roman', serif;
    letter-spacing:.2px;
    color:var(--brand-900);
  }
  p{ line-height:1.7; }
  .container{max-width:1100px;margin:0 auto;padding:0 1rem;}
  .section{padding:3rem 0;}
  .section-title{font-size:2rem;font-weight:800;margin:1.25rem 0;color:var(--brand-900);}
  
  /* ===== NAV – stabil 3 oszlop, törésvédelem, korai burger ===== */
.nav{
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h);
  display:flex; align-items:center;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  z-index: 10000;
}
.nav__container{
  width:100%;
  display:grid; align-items:center; gap:.75rem;
  grid-template-columns: auto 1fr auto;   /* BRAND | MENU | JOBB BLOKK */
  min-height: var(--nav-h);
  padding-inline: 1rem;
}

/* BRAND */
.nav__brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--brand-900);}
.nav__logo{height:36px;width:auto;object-fit:contain;display:block;}
.nav__brand-text{font-weight:900;letter-spacing:.4px;line-height:1.1;font-size:1rem;white-space:nowrap;}

/* MENÜ – desktopon egy sor, nem törhet */
.nav__menu{
  list-style:none;margin:0;padding:0;
  display:flex; align-items:center; gap:.5rem;
  flex-wrap: nowrap;               /* <<< ne törjön */
  overflow: hidden;                /* ha szűk, inkább rejtse, mint törjön */
}
.nav__link{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.44rem .7rem;
  border-radius:8px;
  color:var(--brand-900); text-decoration:none; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; line-height:1;
  white-space: nowrap;
}
.nav__link:hover{ background:rgba(31,81,51,.06); }

/* JOBB BLOKK – nyelvváltó + CTA mindig a jobb szélen */
.nav__langs{
  margin-left:auto; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.25rem;
  background:transparent; padding:.2rem; border-radius:999px;
  border:1px solid var(--line);
}
.nav__lang{
  padding:.25rem .6rem;border-radius:999px;color:var(--brand-900);
  text-decoration:none;font-weight:800;letter-spacing:.04em; line-height:1;
  white-space:nowrap;
}
.nav__lang:hover{ background:rgba(31,81,51,.06); }
.nav__lang--active{ background:var(--brand-700); color:#fff; }

.nav__cta{
  line-height:1; padding:.5rem .8rem; white-space:nowrap;
  color:#fff; background:var(--brand-700); text-decoration:none;
  border-radius:999px; font-weight:800; margin-left:.5rem;
}
.nav__cta:hover{ filter:brightness(1.05); }

/* DROPDOWN */
.nav__item--dropdown details{position:relative;}
.nav__item--dropdown summary::-webkit-details-marker{display:none;}
.nav__link--summary{cursor:pointer;list-style:none;}
.nav__dropdown{
  position:absolute; top:calc(100% + 8px); left:0;
  background:var(--surface); border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow);
  padding:.4rem; min-width:200px; display:none; z-index:10001;
}
.nav__item--dropdown details[open] .nav__dropdown{display:block;}
.nav__dd-link{
  display:block;padding:.55rem .7rem;border-radius:8px;color:var(--brand-900);
  text-decoration:none;font-weight:700; white-space:nowrap;
}
.nav__dd-link:hover{ background:rgba(31,81,51,.06); }

/* BURGER alapból rejtve desktopon */
.nav__toggle{display:none;}
.nav__burger{
  display:none; width:40px; height:40px; border-radius:10px;
  align-items:center; justify-content:center; cursor:pointer;
  border:1px solid var(--line);
}
.nav__burger span{display:block;width:22px;height:2px;background:var(--brand-900);margin:4px 0;transition:.25s;}

/* ====== KÖZEPES KIJELZŐN KORAI BURGER (820–1199px) ====== */
@media (max-width:1199px){
  .nav__burger{ display:inline-flex; }
  /* konténer: BRAND | JOBB BLOKK (nyelv+CTA) | BURGER */
  .nav__container{ grid-template-columns: auto 1fr auto; }
  /* a menü lenyíló panelként jelenjen meg */
  .nav__menu{
    position:absolute; top:var(--nav-h); left:0; right:0;
    background:var(--surface); border-top:1px solid var(--line);
    display:grid; grid-auto-flow:row; justify-items:start;
    gap:.2rem; padding:.75rem 1rem;
    transform:translateY(-8px); opacity:0; pointer-events:none; z-index:9999;
    overflow:visible;
  }
  .nav__toggle:checked ~ .nav__menu{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav__toggle:checked + .nav__burger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .nav__toggle:checked + .nav__burger span:nth-child(2){opacity:0;}
  .nav__toggle:checked + .nav__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
  /* a jobb blokk ne tolja szét: marad a helyén */
  .nav__langs{ margin-left:auto; }
  /* menüpontok kisebb ritmussal */
  .nav__link{ padding:.42rem .6rem; letter-spacing:.05em; }
}

/* ====== MOBILON (≤819px) ====== */
@media (max-width:820px){
  .nav__burger{ display:inline-flex; }
  .nav__container{ gap:.5rem; }
  .nav__menu{
    position:absolute; top:var(--nav-h); left:0; right:0;
    background:var(--surface); border-top:1px solid var(--line);
    display:grid; grid-auto-flow:row; justify-items:start;
    gap:.2rem; padding:.75rem 1rem;
    transform:translateY(-8px); opacity:0; pointer-events:none; z-index:9999;
  }
  .nav__toggle:checked ~ .nav__menu{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav__toggle:checked + .nav__burger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .nav__toggle:checked + .nav__burger span:nth-child(2){opacity:0;}
  .nav__toggle:checked + .nav__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
  .nav__langs{ margin-left:0; } /* mobilon ne legyen autószéthúzás */
}

  
  /* Egységes vertikális padding a nav elemein */
  .nav__menu .nav__link, .nav__lang, .nav__cta{
    padding-top:.48rem; padding-bottom:.48rem;
  }
  
  /* =========================
     Gombok – outline az alap, tömör hover
     ========================= */
  .btn{
    display:inline-block; padding:.55rem .9rem; border-radius:10px;
    border:1px solid var(--brand-700);
    color:var(--brand-700); background:transparent;
    text-decoration:none; font-weight:800;
  }
  .btn:hover{ background:var(--brand-700); color:#fff; box-shadow:var(--ring); }
  
  /* =========================
     Hero – texturált háttér
     ========================= */
  .hero{
    position:relative; min-height:64vh; display:grid; place-items:center; text-align:center;
    background:
      radial-gradient(1200px 600px at 20% 20%, rgba(45,122,76,.12), transparent),
      radial-gradient(800px 400px at 80% 0%, rgba(196,127,23,.10), transparent),
      var(--bg);
  }
  .hero::before{
    content:""; position:absolute; inset:0; z-index:0; opacity:.25; pointer-events:none;
    background:repeating-linear-gradient(135deg, rgba(31,81,51,.06) 0 10px, transparent 10px 20px);
  }
  .hero-inner{position:relative; z-index:1; padding:2rem;}
  .hero h1{font-size:clamp(2rem,4vw,3.25rem);font-weight:900;margin-bottom:.5rem;}
  .hero .lead{opacity:.95; max-width:780px; margin:0 auto;}
  
  /* =========================
     Kártyák – outline
     ========================= */
  .card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:1.1rem;
  }
  .card-feature{text-align:center;transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;}
  .card-feature:hover{transform:translateY(-2px); box-shadow:var(--ring); border-color:rgba(31,81,51,.25);}
  .icon{width:64px;height:64px;object-fit:contain;margin:.25rem auto 1rem;display:block;}
  
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
  @media (max-width:950px){.grid-3{grid-template-columns:1fr 1fr;}}
  @media (max-width:640px){.grid-3{grid-template-columns:1fr;}}
  
  /* About/Contact dobozok */
  .about-box{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:1.5rem;
  }
  .about-box h3{margin-top:1.2rem;color:var(--brand-900);}
  .about-box ul{margin:.5rem 0 1.25rem 1.2rem;padding:0;list-style:disc;}
  .about-box li{margin-bottom:.45rem;line-height:1.6;}
  
  .contact-card ul{list-style:none;margin:0;padding:0;}
  .contact-card li{margin:.35rem 0;}
  
  /* =========================
     Cikkrács – mobil: 1 oszlop, >=768px: 2 oszlop
     ========================= */
  .row.g-4{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
  }
  @media (min-width:768px){
    .row.g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
  }
  
  .article-block{ margin:0; text-align:center; }
  .article-thumb{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:10px;
    border:1px solid var(--line);
    background:#ddd;
    max-height:140px;     /* kisebb kép desktopon */
  }
  @media (max-width:768px){
    .article-thumb{ max-height:120px; aspect-ratio:4/3; }
  }
  .article-block p{ margin-top:8px; font-size:.95rem; color:var(--brand-900); }
  
  /* =========================
     Média beágyazás
     ========================= */
  .prose img{border-radius:10px; border:1px solid var(--line);}
  .gallery figure{background:var(--surface); border:1px solid var(--line); border-radius:10px;}
  
  .video-embed{ position:relative; width:100%; max-width:900px; margin:1.5rem auto; }
  .video-embed::before{ content:""; display:block; padding-top:56.25%; }
  .video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  
  /* =========================
     Lábléc
     ========================= */
  footer{background:var(--surface);color:var(--brand-900);padding:2rem 0;text-align:center;border-top:1px solid var(--line);}
  
  /* =========================
     Fókuszok / hozzáférhetőség
     ========================= */
  a:focus-visible, button:focus-visible { outline:none; box-shadow:var(--ring); border-radius:8px; }
  .nav__menu a, .nav__dd-link, .nav__cta{ pointer-events:auto; cursor:pointer; }
  /* === NAV jobb oldali levágás javítás – kompaktabb méretek === */

/***** DROPDOWN – mindig működjön, ne csússzon a hero alá *****/

/* ne takarja semmi, és legyen kattintható minden réteg */
.nav,
.nav__container,
.nav__menu { position: relative; z-index: 100000; overflow: visible; }

/* a dropdown panel magasabb z-indexet kap */
.nav__item--dropdown { position: relative; }
.nav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-width: 220px;
  padding: .4rem;
  box-shadow: var(--shadow);
  display: none;
  z-index: 100050;
}

/* KATTINTÁSRA (details open) és HOVER-re is megjelenik */
.nav__item--dropdown details[open] .nav__dropdown { display: block; }
.nav__item--dropdown:hover .nav__dropdown { display: block; }

/* a summary legyen tényleg kattintható „link-szerű” elem */
.nav__link--summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
}
.nav__link--summary::-webkit-details-marker { display: none; }

/* Safari-ban ne akadjon össze más transzformokkal */
.hero { position: relative; z-index: 0; }
/***** NAV JOBB OLDAL – ne vágódjon le a CTA *****/
.nav__container { padding-right: clamp(12px, 2.4vw, 32px); }

.nav__menu { gap: .4rem; flex-wrap: nowrap; }
.nav__link {
  text-transform: none;
  letter-spacing: .02em;
  font-size: .92rem;
  padding: .38rem .58rem;
  white-space: nowrap;
}

/* HU/RO és CTA kompaktabb, hogy biztosan kiférjen */
.nav__langs { margin-left: auto; gap: .2rem; padding: .16rem .2rem; white-space: nowrap; }
.nav__lang  { font-size: .88rem; padding: .22rem .48rem; line-height: 1; }
.nav__cta   { font-size: .88rem; padding: .42rem .64rem; margin-left: .4rem; line-height: 1; white-space: nowrap; }

/* Ha szűk az ablak, még kisebb betű/padding + burger korábban */
@media (max-width: 1300px){
  .nav__burger { display: inline-flex; }
  .nav__menu{
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--surface); border-top: 1px solid var(--line);
    display: grid; grid-auto-flow: row; justify-items: start;
    gap: .25rem; padding: .8rem 1rem;
    opacity: 0; pointer-events: none; transform: none; /* ne hozzon új stacking contextet */
    z-index: 100001;
  }
  .nav__toggle:checked ~ .nav__menu{ opacity: 1; pointer-events: auto; }
  .nav__link{ font-size: .9rem; padding: .34rem .5rem; }
  .nav__lang{ font-size: .84rem; padding: .2rem .42rem; }
  .nav__cta{ font-size: .84rem; padding: .36rem .56rem; }
}
/***** TEVÉKENYSÉGEK gombok – kapjanak egységes stílust akkor is, ha <a> *****/
.activities .card a[href],
.card-feature a[href]{
  display: inline-flex;
  align-items: center; justify-content: center;
  padding: .55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--brand-700);
  color: var(--brand-700);
  background: transparent;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.activities .card a[href]:hover,
.card-feature a[href]:hover{
  background: var(--brand-700);
  color: #fff;
  box-shadow: var(--ring);
}
.activities .btn-row,
.card-feature .btn-row{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; }
/* ==== NAV teljesen a tetején, gap nélkül (Safari-biztos) ==== */

/* A nav tényleg a viewport tetejére ragadjon */
.nav{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  margin: 0; padding: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  z-index: 100000;         /* a hero fölött maradjon */
  overflow: visible;       /* dropdown ne vágódjon le */
}

/* A konténer magassága legyen pontosan a nav magassága */
.nav__container{
  height: var(--nav-h);
  min-height: var(--nav-h);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  padding-inline: 1rem;
}

/* A dokumentum tetején ne maradjon semmilyen extra hely */
html, body{ margin:0; }
body{ padding-top: var(--nav-h); }  /* a tartalom a nav alatt indul */

/* iOS notch / Safari safe-area: ne csússzon le, de legyen hely a bevágásnak */
:root{ --safe-top: env(safe-area-inset-top, 0px); }
.nav{ padding-top: var(--safe-top); }
body{ padding-top: calc(var(--nav-h) + var(--safe-top)); }

/* Az első blokk (hero) ne tolja le a nav-ot kollabáló marginnal */
.hero, .section:first-child{
  margin-top: 0 !important;
  padding-top: min(2rem, 3vh); /* ha kell kis lélegzet */
}

/* Dropdown minden rétegen fölé kerüljön */
.nav__menu{ position: relative; z-index: 100001; }
.nav__item--dropdown{ position: relative; }
.nav__dropdown{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-width: 220px;
  padding: .4rem;
  box-shadow: var(--shadow);
  display: none;
  z-index: 100050;
}
.nav__item--dropdown details[open] .nav__dropdown,
.nav__item--dropdown:hover .nav__dropdown{ display:block; }

/* Jobb oldali blokk (HU/RO + CTA) kompakt, hogy ne vágódjon le */
.nav__menu{ gap:.4rem; flex-wrap:nowrap; }
.nav__link{
  text-transform:none; letter-spacing:.02em;
  font-size:.92rem; padding:.38rem .58rem; white-space:nowrap;
}
.nav__langs{
  margin-left:auto; gap:.2rem; padding:.16rem .2rem; white-space:nowrap;
}
.nav__lang{ font-size:.88rem; padding:.22rem .48rem; line-height:1; }
.nav__cta{
  font-size:.88rem; padding:.42rem .64rem; margin-left:.4rem;
  line-height:1; white-space:nowrap; flex:0 0 auto;
}

/* Közepes képernyő: hamarabb burger, így nem feszül szét a sor */
@media (max-width: 1300px){
  .nav__burger{ display:inline-flex; }
  .nav__menu{
    position:absolute; top: calc(var(--nav-h) + var(--safe-top)); left:0; right:0;
    background: var(--surface); border-top:1px solid var(--line);
    display:grid; grid-auto-flow:row; justify-items:start;
    gap:.25rem; padding:.8rem 1rem;
    opacity:0; pointer-events:none; transform:none;
    z-index:100001;
  }
  .nav__toggle:checked ~ .nav__menu{ opacity:1; pointer-events:auto; }
}

/* Biztonsági: semmi se legyen a nav fölött */
header:first-child, .site-header:first-child{ margin-top:0 !important; }

