/* ====== Alap változók ====== */
:root{
  --text:#f0f0f0;
  --border:rgba(255,255,255,0.12);
  --panel:#252525;
  --btnbg:#2a2a2a;
  --accent:#9a9a9a;
  --nav-hover-bg:#3a3a3a;
  --nav-hover-fg:#ffffff;
  --nav-hover-bd:rgba(255,255,255,.18);
  --header-h:64px; /* JS pontosítja */
  --content-max: 1320px;
}

/* ====== Oldal eltolása a fix header alatt ====== */
html,body{height:100%}
body{padding-top:var(--header-h)}

/* ====== Konténer ====== */
.shell{max-width: var(--content-max);margin:0 auto;padding:10px 16px;position:relative;z-index:2}

/* ====== Fix (lebegő) fejléc ====== */
.header{
  position:fixed; top:0; left:0; right:0;
  z-index:10000;
  background:rgba(20,20,20,.82);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(120%) blur(6px);
  transition:background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.header.is-scrolled{
  background:rgba(20,20,20,.92);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}

/* ====== Navigáció blokk ====== */
.nav{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:14px;
  padding:10px 12px;
  box-shadow:0 4px 10px rgba(0,0,0,0.22);
}

/* ====== Logó ====== */
.logo{
  display:flex; align-items:center; gap:.75rem;
  font-weight:700; font-size:1.125rem; letter-spacing:.025em; color:var(--text);
  text-decoration:none;
}
.logo-icon{
  width:2rem; height:2rem; background:var(--accent); border-radius:.5rem;
  display:flex; align-items:center; justify-content:center; color:#111;
}
.logo-icon .icon{width:1.25rem; height:1.25rem; color:#111;}
.spacer{flex:1}

/* ====== Fő menüsor ====== */
.menu{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* Fő gomb/link egységes stílusa */
.menu a,
.menu__btn{
  display:inline-block;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--btnbg);
  font-size:14px; font-weight:600;
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  user-select:none;
}
.menu a:hover,
.menu__btn:hover{
  background:var(--nav-hover-bg);
  color:var(--nav-hover-fg);
  border-color:var(--nav-hover-bd);
}
.menu a.active,
.menu__dropdown a.active,
.menu__btn.active{
  color:#111;
  border-color:var(--accent);
  background:var(--accent);
}

/* ====== Legördülő („Funkciók”) ====== */
.menu__group{ position:relative }
.menu__group > summary.menu__btn{ list-style:none }
.menu__group > summary::-webkit-details-marker{ display:none }

/* Doboz */
.menu__dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:220px;
  padding:6px;
  margin:0;
  list-style:none;
  display:none;
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  z-index:10001;
}

/* Nyitva */
.menu__group[open] > .menu__dropdown{ display:block }

/* Elem */
.menu__dropdown a{
  display:block;
  padding:8px 10px;
  border-radius:8px;
  color:var(--text);
  background:transparent;
  border:1px solid transparent;
  font-size:14px; font-weight:600;
  text-decoration:none;
}
.menu__dropdown a:hover{
  background:var(--nav-hover-bg);
  color:var(--nav-hover-fg);
  border-color:var(--nav-hover-bd);
}

/* ====== Mobil finomhangolás ====== */
@media (max-width:800px){
  .menu{gap:8px}
  .menu__dropdown{
    position:static;
    display:block;
    padding:6px 0 0 0;
    box-shadow:none;
    border:none;
    background:transparent;
  }
}
/* Zöld státuszpont az email span helyett (brutál felülírás) */
#site-menu #user-area > span:first-child,
.header #user-area > span:first-child{
  display:inline-block !important;
  width:10px !important;
  height:10px !important;
  border-radius:50% !important;
  background:#22c55e !important;
  box-shadow:0 0 0 2px rgba(34,197,94,.25) !important;
  margin-right:8px !important;

  /* az email szöveg eltüntetése */
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  overflow:hidden !important;
  text-indent:-9999px !important;
}