/* ==========================================================
   Kapibarátok – új fejléc: egy sávos, krémszínű „üveg” fejléc
   ========================================================== */
html body header.site::before, html body header.site::after{ display: none !important; }
html body header.site{
  background: rgba(255,253,247,0.84) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  border-bottom: 1px solid rgba(150,130,85,0.22);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset;
  transition: box-shadow .25s ease, background-color .25s ease;
}
html body header.site.kb-scrolled{ box-shadow: 0 10px 28px -18px rgba(30,25,10,0.45) !important; background: rgba(255,253,247,0.93) !important; }
html body header.site .topbar, html body header.site .navbar{ background: transparent !important; }

/* menüpontok: egyszerű szöveg, aláhúzással */
html body header.site .navbar .nav-links a{
  position: relative; background: transparent !important; box-shadow: none !important; border: 0 !important;
  color: var(--teal-dark, #144E44) !important; font-family: 'Imprima', sans-serif; font-weight: 400 !important;
  border-radius: 8px !important; transition: color .2s ease, background-color .2s ease;
}
html body header.site .navbar .nav-links a::after{
  content: ''; position: absolute; left: 50%; bottom: 3px; width: calc(100% - 20px); height: 2px; border-radius: 2px;
  background: var(--citrus, #E89A2C); transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform .25s ease;
}
html body header.site .navbar .nav-links a:hover{ color: var(--teal, #1F6F63) !important; background: rgba(31,111,99,0.06) !important; }
html body header.site .navbar .nav-links a:hover::after,
html body header.site .navbar .nav-links a.kb-active::after{ transform: translateX(-50%) scaleX(1); }
html body header.site .navbar .nav-links a.kb-active{ color: var(--teal, #1F6F63) !important; background: transparent !important; }

/* Játék + Jótékonyság: teli türkiz gombok – az egyetlen hangsúlyos elem */
html body header.site .navbar .nav-cta-group a{
  background: linear-gradient(135deg, var(--teal, #1F6F63), var(--teal-dark, #144E44)) !important; color: #fff !important;
  border: 0 !important; border-radius: 999px !important; box-shadow: 0 8px 18px -10px rgba(20,78,68,0.75) !important;
  font-family: 'Imprima', sans-serif; font-weight: 400 !important; transition: transform .2s ease, box-shadow .2s ease;
}
html body header.site .navbar .nav-cta-group a:hover{ transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(20,78,68,0.8) !important; }
html body header.site .navbar .nav-cta-group a.kb-active{ background: var(--citrus-dark, #C67C16) !important; }

/* ---------- széles képernyő: minden egy sorban ---------- */
@media (min-width: 1100px){
  html body header.site{ display: flex; align-items: center; gap: 22px; padding: 0 max(24px, calc((100vw - 1280px) / 2)); min-height: 64px; }
  html body header.site .topbar{ flex: 0 0 auto; padding: 0 !important; }
  html body header.site .topbar .wrap{ max-width: none !important; padding: 0 !important; margin: 0 !important; }
  html body header.site .topbar-info{ display: none !important; }
  html body header.site .brand .logo-mark{ height: 46px !important; width: auto !important; }
  html body header.site .brand .wordmark-img{ height: 30px !important; }
  html body header.site .navbar{ flex: 1 1 auto; padding: 0 !important; }
  html body header.site .navbar .wrap{ max-width: none !important; margin: 0 !important; padding: 10px 0 !important; display: flex !important; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: nowrap !important; }
  html body header.site .navbar .nav-links{ display: flex !important; flex-wrap: nowrap !important; gap: 2px !important; margin: 0 auto !important; transform: none !important; }
  html body header.site .navbar .nav-links a{ padding: 8px 10px !important; font-size: 17px !important; white-space: nowrap; }
  html body header.site .navbar .nav-cta-group{ display: flex !important; gap: 8px !important; flex: 0 0 auto; }
  html body header.site .navbar .nav-cta-group a{ padding: 9px 18px !important; font-size: 16.5px !important; white-space: nowrap; }
}
@media (min-width: 1100px) and (max-width: 1260px){
  html body header.site{ gap: 14px; }
  html body header.site .brand .wordmark-img{ height: 25px !important; }
  html body header.site .navbar .nav-links a{ padding: 8px 7px !important; font-size: 16px !important; }
  html body header.site .navbar .nav-cta-group a{ padding: 8px 14px !important; font-size: 15.5px !important; }
}

/* ---------- közepes képernyő: logó felül, menü alatta középre zárva ---------- */
@media (min-width: 961px) and (max-width: 1099px){
  html body header.site .topbar-info{ display: none !important; }
  html body header.site .topbar{ padding: 8px 0 2px !important; }
  html body header.site .topbar .wrap{ justify-content: center !important; }
  html body header.site .navbar .wrap{ display: flex !important; justify-content: center; align-items: center; gap: 12px; flex-wrap: nowrap !important; padding: 4px 16px 8px !important; }
  html body header.site .navbar .nav-links{ display: flex !important; gap: 0 !important; flex-wrap: nowrap !important; transform: none !important; margin: 0 !important; }
  html body header.site .navbar .nav-links a{ padding: 7px 7px !important; font-size: 15.5px !important; white-space: nowrap; }
  html body header.site .navbar .nav-cta-group{ display: flex !important; gap: 6px !important; }
  html body header.site .navbar .nav-cta-group a{ padding: 7px 13px !important; font-size: 15.5px !important; white-space: nowrap; }
}

/* ---------- tablet és telefon: a görgethető egysoros menü marad, az új színekkel ---------- */
@media (max-width: 960px){
  html body header.site .navbar .nav-links a{ background: rgba(255,255,255,0.7) !important; border: 1px solid rgba(20,78,68,0.14) !important; border-radius: 999px !important; }
  html body header.site .navbar .nav-links a::after{ display: none; }
  html body header.site .navbar .nav-links a.kb-active{ background: var(--teal, #1F6F63) !important; color: #fff !important; border-color: transparent !important; }
  html body header.site .navbar .nav-cta-group a{ box-shadow: none !important; }
}

/* a lebegő Jótékonyság-jelvény helyett a fejlécben van a gomb */
.charity-badge{ display: none !important; }
html body header.site .topbar{ border: 0 !important; box-shadow: none !important; }
@media (min-width: 961px) and (max-width: 1099px){
  html body header.site .brand .logo-mark{ height: 38px !important; width: auto !important; }
  html body header.site .brand .wordmark-img{ height: 25px !important; }
}
@media (min-width: 1261px){
  html body header.site .navbar .nav-links a{ font-size: 17.5px !important; padding: 8px 11px !important; }
}

/* ---------- a fejléc szélessége igazodjon a tartalomhoz (max. 1600 px-es sáv, 32 px margó) ---------- */
@media (min-width: 1100px){
  html body header.site{ padding-left: max(32px, calc((100% - 1600px) / 2 + 32px)) !important; padding-right: max(32px, calc((100% - 1600px) / 2 + 32px)) !important; gap: 28px; }
  html body header.site .navbar .wrap{ justify-content: space-between !important; gap: 20px !important; }
  html body header.site .navbar .nav-links{ flex: 1 1 auto; justify-content: space-evenly; gap: 4px !important; margin: 0 !important; }
}
@media (min-width: 1261px){
  html body header.site .navbar .nav-links a{ font-size: 18px !important; padding: 8px 12px !important; }
  html body header.site .navbar .nav-cta-group a{ font-size: 17px !important; padding: 10px 20px !important; }
  html body header.site .brand .logo-mark{ height: 48px !important; }
  html body header.site .brand .wordmark-img{ height: 31px !important; }
}

/* ---------- széles képernyő: Instagram + YouTube ikon a fejléc jobb szélén ---------- */
@media (min-width: 1100px){
  html body header.site .topbar, html body header.site .topbar .wrap{ display: contents !important; }
  html body header.site .brand{ order: 0; flex: 0 0 auto; }
  html body header.site .navbar{ order: 1; }
  html body header.site .topbar-info{ display: flex !important; order: 2; flex: 0 0 auto; align-items: center; gap: 12px !important; flex-wrap: nowrap !important; }
  html body header.site .topbar-info-mail, html body header.site .topbar-info-label{ display: none !important; }
  html body header.site .topbar-info a{ display: inline-flex; align-items: center; justify-content: center; line-height: 0; transition: transform .2s ease, opacity .2s ease; }
  html body header.site .topbar-info a:hover{ transform: translateY(-1px); opacity: .85; }
  html body header.site .topbar-info .social-icon{ width: 26px !important; height: 26px !important; }
}
@media (min-width: 1100px) and (max-width: 1260px){
  html body header.site .topbar-info{ gap: 9px !important; }
  html body header.site .topbar-info .social-icon{ width: 22px !important; height: 22px !important; }
}