/**************************************************
/* ========================= */
/* ALAP BEÁLLÍTÁSOK, VÁLTOZÓK */
/* ========================= */

*[hidden]{display:none !important}                      /* Minden [hidden] attribútumos elem elrejtése */

:root{                                                  /* CSS változók (globális) */
  --topbar-h:40px;                                      /* Topbar magassága */
  --nav-h:104px;                                        /* Navbar magassága */
  --green:#22c55e;                                      /* Zöld téma */
  --blue:#3b82f6;                                       /* Kék téma */
  --gray-btn:#e5e7eb;                                   /* Szürke gomb háttér */
  --stack-gap:16px;                                     /* RÉS a két kép között */
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:#111;
}

/* ========================= */
/* SKIP LINK */
/* ========================= */

.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{
  left:16px;top:16px;
  background:#000;color:#fff;
  padding:8px 12px;border-radius:6px;
  z-index:1100;
}

/* ========================= */
/* TOPBAR */
/* ========================= */

.topbar{
  position:fixed;inset:0 0 auto 0;
  height:var(--topbar-h);
  background:#000;color:#fff;
  z-index:1000;
}
.topbar__container{
  height:100%;max-width:1320px;margin-inline:auto;
  padding-inline:clamp(12px,3vw,32px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.topbar__left,
.topbar__right{display:flex;align-items:center;gap:16px}
.topbar__brand{font-weight:800;color:#fff;margin-right:8px}
.topbar__item{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:14px;margin-left:6px}
.topbar__item a{color:#fff;text-decoration:none}
.icon{width:18px;height:18px;fill:currentColor}
.icon--phone{color:var(--green)}
.icon--mail{color:var(--blue)}
.flag{width:18px;height:12px;border-radius:2px;display:inline-block}
.chev{width:14px;height:14px;opacity:.8;fill:#fff}
details.lang summary{list-style:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:#fff}
.lang__menu{
  position:absolute;right:0;top:calc(100% + 6px);
  background:#111;color:#fff;border:1px solid #333;border-radius:6px;
  padding:8px 10px;min-width:160px;
}
.topbar__cookie{
  appearance:none;border:1px solid #333;border-radius:8px;
  background:#111;color:#fff;padding:6px 10px;font-size:13px;cursor:pointer;
}
.topbar__cookie:hover{background:#222}
.social.social--fb{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;background:#60a5fa;color:#fff;font-weight:800;
}

/* ===== TOPBAR – mobilon csak telefon + email ===== */
@media (max-width: 900px){
  /* jobb oldal (nyelv, süti, facebook) elrejtése mobilon */
  .topbar__right{
    display:none;
  }

  /* bal oldal marad, de a brand logót elrejtjük, hogy legyen hely a kontaktoknak */
  .topbar__left{
    display:flex;
    align-items:center;
    gap:8px;
  }

  .topbar__brand{
    display:none;
  }

  .topbar__container{
    justify-content:center;
  }

  .topbar__item{
    font-size:13px;
    gap:6px;
  }
}

/* ========================= */
/* NAVBAR */
/* ========================= */

.mainnav{
  position:fixed;top:var(--topbar-h);left:0;right:0;
  height:var(--nav-h);
  background:#fff;z-index:900;display:flex;align-items:center;
  border-bottom:1px solid #e5e7eb;
}
.mainnav__container{
  max-width:1320px;margin-inline:auto;
  padding-inline:clamp(12px,3vw,32px);
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  position:relative; /* hogy z-indexek működjenek gyermekekre */
}
.brand__logo{height:calc(var(--nav-h) - 6px);width:auto;display:block}
@media(max-width:900px){ .brand__logo{height:56px} }
.mainnav__buttons{display:flex;gap:12px;flex-wrap:wrap}
.navbtn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;background:var(--gray-btn);color:#111;text-decoration:none;
  border-radius:10px;border:1px solid #d1d5db;font-weight:600;
  transition:transform .12s ease,background-color .12s ease,color .12s ease,border-color .12s ease;
  position:relative;overflow:hidden;
}
.navbtn:hover{background:#e6f7ec;color:#064e3b;border-color:#86efac;transform:scale(1.04)}
.navbtn.active{border-color:#16a34a;background:#d1fae5;color:#065f46}
.navtxt{display:inline-block;transition:transform .05s linear}
.navbtn:hover .navtxt{transform:translate(var(--mx,0px), var(--my,0px))}

/* ========================= */
/* OLDAL HÁTTÉR */
/* ========================= */

.page{
  padding-top:calc(var(--topbar-h) + var(--nav-h));
  min-height:100vh;
  background:linear-gradient(135deg,#d9fbe5 0%,#0b7c2e 100%);
}

/* ========================= */
/* HERO Mottó */
/* ========================= */

.brand-hero{padding:20px 16px 0;display:flex;justify-content:center}
.brand-hero--compact{padding-top:12px}
.brand-hero__inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;text-align:center}
.brand-hero__tagline{
  margin:0;
  font-family:'Caveat',cursive;
  font-weight:700;
  color:#0b3d1a;
  font-size:42px;
  letter-spacing:10px;
  line-height:1;
}

/* ========================= */
/* KÁRTYA RÁCS */
/* ========================= */

.hero-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 350px));
  justify-content:center;
  align-items:start;
  gap:64px;
  padding:36px 16px;
  min-height:calc(100vh - var(--topbar-h) - var(--nav-h));
}

/* ========================= */
/* KÁRTYÁK */
/* ========================= */

.card{
  background:#fff;
  border:2px solid #0b7c2e;
  border-radius:10px;
  overflow:hidden;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.card:hover{transform:scale(1.03);border-color:#fff;box-shadow:0 10px 8px rgba(0,0,0,.12)}

.card__link{
  display:flex;flex-direction:column;
  color:inherit;text-decoration:none;
}

.card__title{
  text-align:center;
  font-weight:800;
  font-size:20px;
  padding:10px;
  background:#fff;
  margin:0 0 8px 0;
}

/* ========================= */
/* KÉP STACK */
/* ========================= */

figure{ margin:0; }

.card__stack{
  position:relative;
  width:100%;
  display:grid;
  grid-template-rows:auto auto;
  padding:6px;
  gap:var(--stack-gap);
  background:transparent;
}

.stack__top{
  position:relative;
  overflow:visible;
  border-radius:8px;
}
.stack__bottom{
  position:relative;
  overflow:hidden;
  border-radius:8px;
}

.card__stack img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  border-radius:8px;
}

.stack__top::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:12%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.88) 100%
  );
}
.stack__bottom::before{
  content:"";
  position:absolute;left:0;right:0;top:0;
  height:12%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    to top,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.88) 100%
  );
}

/* ========================= */
/* KÖZÉPSŐ SZÖVEG BLOKK */
/* ========================= */

.blend__center{
  position:absolute;
  left:12px; right:12px;
  bottom:calc(var(--stack-gap) / -2);
  transform:translateY(50%);
  z-index:3;
  display:flex; align-items:center; justify-content:center;
  padding:8px 12px;
  border-radius:10px;
  backdrop-filter: blur(6px);
  background:transparent;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}

.card__list{
  list-style:disc;
  margin:0; padding:0 0 0 18px;
  color:#0b3d1a;
  font-weight:700;
  line-height:1.3;
  max-width:100%;
  text-align:left;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ========================= */
/* SEAM */
/* ========================= */

.seam{
  position:absolute;left:0;right:0;
  display:flex;justify-content:center;
  pointer-events:none;
}
.seam--bottom{ bottom:4px }
.seam--top{ top:4px }

.seam__list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:2px;
  font-weight:700;color:#0b3d1a;text-align:center;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* ========================= */
/* BELSŐ OLDAL (3 oszlop) */
/* ========================= */

.page-3col{
  display:grid;
  grid-template-columns:1fr minmax(420px, 560px) 1fr;
  gap:24px;max-width:1400px;margin:0 auto;padding:24px;
}
.col--img-left,
.col--img-right{
  position:relative;
  z-index:1;
}
.col--text{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  overflow:visible;
  position:relative;
  z-index:2;
}
.page-title{text-align:center;margin:8px 0 14px;font-weight:800}
.page-text{
  width:100%;
  max-width:420px;
  text-align:justify;
  padding-bottom:20px;
}
.col--img-left img,.col--img-right img{width:100%;height:auto;display:block;border-radius:8px}

/* ========================= */
/* RESZPONZÍV */
/* ========================= */

@media(max-width:1024px){
  .page-3col{grid-template-columns:1fr}
  .page-text{max-width:720px}
  .brand__logo{height:56px}
  .brand-hero__tagline{font-size:34px}
  .hero-grid{grid-template-columns:1fr;min-height:auto}
}

/* ========================= */
/* COOKIE MODAL */
/* ========================= */

.cookie-modal{position:fixed;inset:0;z-index:2200;background:rgba(0,0,0,.55);display:grid;place-items:center}
.cookie-modal__dialog{
  width:min(92vw,720px);background:#fff;color:#111;border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);padding:16px 16px 12px;position:relative;
}
.cookie-modal__close{
  position:absolute;right:12px;top:10px;width:32px;height:32px;border:none;
  border-radius:50%;background:#eee;color:#111;font-size:22px;line-height:30px;cursor:pointer;
}
.cookie-modal__close:hover{background:#e0e0e0}
.cookie-modal__title{margin:0 0 8px;font-weight:800}
.cookie-modal__status{margin:0 0 8px}
.cookie-cats{list-style:none;margin:12px 0;padding:0;display:flex;flex-direction:column;gap:12px}
.cookie-cat{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;
  padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#fafafa;
}
.cookie-cat__label{font-weight:700}
.cookie-cat__desc{font-size:13px;color:#555}
.switch{position:relative;width:46px;height:26px;display:inline-block}
.switch input{display:none}
.slider{position:absolute;inset:0;background:#ccc;border-radius:20px;transition:all .15s ease}
.slider::before{
  content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;transition:all .15s ease;
}
.switch input:checked + .slider{background:#1d4ed8}
.switch input:checked + .slider::before{transform:translateX(20px)}
.cookie-details{margin:8px 0 10px}
.cookie-details__body{padding:8px 12px;background:#f6f7f9;border:1px solid #e5e7eb;border-radius:8px}
.cookie-modal__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}

/* ========================= */
/* GOMBOK */
/* ========================= */

.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:8px;border:1px solid transparent;cursor:pointer}
.btn--primary{background:#1d4ed8;color:#fff}
.btn--ghost{background:#fff;color:#1d4ed8;border-color:#1d4ed8}

/* ========================= */
/* Táblázat keretek */
/* ========================= */

.styled-table {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: clamp(600px, 74vw, 1500px);
  margin-top: -20px;
  margin-left: 0;
  margin-right: 0;
  table-layout: fixed;
  border-collapse: collapse;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid #333;
  background: transparent;
  font-family: Arial, sans-serif;
  font-size: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  border-radius: 6px;
}
.styled-table thead tr {
  background-color: #333;
  color: #fff;
  text-align: center;
}
.styled-table th,
.styled-table td {
  border: 1px solid #333;
  padding: 12px 14px;
  word-break: break-word;
  background: transparent;
}
.styled-table tbody tr:nth-child(even) {
  background: transparent;
}
.styled-table tbody tr:hover {
  background-color: rgba(0,0,0,0.08);
  cursor: pointer;
}
@media (max-width: 900px) {
  .styled-table {
    left: auto; 
    transform: none;
    width: 100%;
    margin: 16px 0 0;
    box-shadow: none;
    border-radius: 0;
  }
}
.styled-table {
  --col-1: 300px;
  --col-2: 300px;
  --col-3: 300px;
  --col-4: 1fr;
}

/* ========================= */
/* HAMBURGER NAV – MOBIL */
/* ========================= */

.hamburger{
  display:none;
  width:40px;
  height:32px;
  position:relative;
  cursor:pointer;
  border-radius:6px;
  border:1px solid #d1d5db;
  background:#fff;
  align-items:center;
  justify-content:center;
}
.hamburger span{
  position:absolute;
  left:8px;
  right:8px;
  height:3px;
  background:#111;
  border-radius:999px;
  transition:transform .2s ease,opacity .2s ease,top .2s ease,bottom .2s ease;
}
.hamburger span:nth-child(1){top:8px}
.hamburger span:nth-child(2){top:50%;transform:translateY(-50%)}
.hamburger span:nth-child(3){bottom:8px}

#nav-toggle{display:none}

@media(max-width:900px){
  .mainnav{
    height:auto;
  }

  .mainnav__container{
    align-items:center;
    gap:8px;
    position:relative; /* a hamburger z-indexéhez */
  }

  .hamburger{
    display:inline-flex; /* biztosan látszódjon mobilon */
    z-index:2;           /* ha bármi fedné (pl. menü lenyíláskor) */
  }

  .mainnav__buttons{
    display:none;         /* alap: rejtve mobilon */
    flex-direction:column;
    width:100%;
    gap:8px;
    margin-top:8px;
  }

  /* ===== JAVÍTOTT LENYITÁS LOGIKA =====
     A checkbox követő testvérére célozunk (menü gombok div).
     FONTOS: a DOM-ban #nav-toggle -> label.hamburger -> div.mainnav__buttons sorrend legyen.
  */
  #nav-toggle:checked ~ .mainnav__buttons{
    display:flex;
  }

  /* Hamburger ikon animáció (változatlan) */
  #nav-toggle:checked + .hamburger span:nth-child(1){
    top:50%;
    transform:translateY(-50%) rotate(45deg);
  }
  #nav-toggle:checked + .hamburger span:nth-child(2){
    opacity:0;
  }
  #nav-toggle:checked + .hamburger span:nth-child(3){
    bottom:auto;
    top:50%;
    transform:translateY(-50%) rotate(-45deg);
  }
  
/* ========================= */
/* WEBOLDAL SZERZŐJE */
/* ========================= */

.footer-author {
  /* Középre igazítás – flexszel bombabiztos + text-align fallback */
  display: flex;
  justify-content: center;  /* vízszintesen középre a flex item-eket */
  align-items: center;      /* függőlegesen is */
  text-align: center;       /* fallback sima szöveghez / több sorra */

  /* Alap megjelenés */
  color: #777;
  padding: 20px 0;
  font-size: 14px;
  border-top: 1px solid #e0e0e0;
  margin-top: 50px;

  /* Teljes szélesség, stabil pozíció */
  width: 100%;
  box-sizing: border-box;   /* hozzáadva: padding ne tolja ki */
  float: none;
  position: static;

  /* ÚJ: Gyerekelemeket flex item-mé tenni */
  gap: 10px;  /* opcionális: térköz linkek között */
}

.footer-author > * {
  flex: 0 1 auto;  /* ÚJ: csak így működik flexbox a közvetlen gyerekekre */
  display: inline-block;  /* segít inline tartalomnál */
}

/* Link stílusok – változatlan */
.footer-author .author-link {
  color: inherit;
  text-decoration: none;
}

.footer-author .author-link:hover {
  text-decoration: underline;
}


/* ========================= */
/* VÉGE */
/**************************************************/