/* =========================================================
   ClearBeam Mobile Menu (hamburger + drawer)
   - Hamburger appears on mobile
   - Drawer contains only nav links + Close X
   ========================================================= */


/* =========================================================
   1) HAMBURGER BUTTON
   ========================================================= */
.cb-mm-btn{
  display:none;
  width:40px;
  height:40px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(0,0,0,.20);
  border-radius:14px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  padding:0
}
.cb-mm-btn:focus{
  outline:2px solid rgba(0,255,255,.55);
  outline-offset:2px
}
.cb-mm-lines{
  display:flex;
  flex-direction:column;
  gap:4px
}
.cb-mm-line{
  display:block;
  width:18px;
  height:2px;
  background:#fff;
  border-radius:2px;
  opacity:.9
}


/* =========================================================
   2) DRAWER (BACKDROP + PANEL) + OPEN STATE
   ========================================================= */
.cb-mm{display:none}
html.cb-mm-open .cb-mm{display:block}

.cb-mm__backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:9997
}
.cb-mm__panel{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:min(88vw,420px);
  background:#fff;
  color:#111;
  z-index:9998;
  box-shadow:20px 0 50px rgba(0,0,0,.45);
  transform:translateX(-102%);
  transition:transform .18s ease-out
}
html.cb-mm-open .cb-mm__panel{transform:translateX(0)}


/* =========================================================
   3) CLOSE BUTTON (X)
   ========================================================= */
.cb-mm__close{
  position:absolute;
  top:14px;
  right:14px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  color:#111;
  font-size:28px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer
}
\.cb-mm__close:focus\{outline:2px solid rgba\(0,0,0,\.35\);outline-offset:2px\}


/* =========================================================
   4) DRAWER TOOLS (LANGUAGE + THEME)
   ========================================================= */
.cb-mm__tools{
  margin:68px 0 0;
  padding:0 18px 10px;
  border-bottom:1px solid rgba(0,0,0,.08)
}
.cb-mm__tools .lang-switch{
  display:flex;
  gap:12px;
  align-items:center
}
.cb-mm__tools .lang-flag img{display:block}
.cb-mm__tools .theme-toggle{margin-left:auto}


/* =========================================================
   5) DRAWER LINKS (NAV ITEMS)
   ========================================================= */
.cb-mm__links{
  list-style:none;
  margin:12px 0 0;
  padding:0
}
.cb-mm__links li{border-top:1px solid rgba(0,0,0,.08)}
.cb-mm__links li:last-child{border-bottom:1px solid rgba(0,0,0,.08)}
.cb-mm__links a{
  display:block;
  padding:16px 18px;
  color:#111;
  text-decoration:none;
  font-weight:600
}
.cb-mm__links a:active{background:rgba(0,0,0,.04)}


/* =========================================================
   6) RESPONSIVE: SHOW HAMBURGER ONLY ON MOBILE
   ========================================================= */
@media (max-width:600px){
  .cb-mm-btn{display:inline-flex}
}


/* =========================================================
   7) FIX: HEADER SA NU DEPASEASCA LATIMEA SITE-ULUI (MOBIL)
   ========================================================= */
@media (max-width: 768px){

  /* nu mai lasa header/nav sa iasa in afara */
  nav{
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* daca ai wrapper de header, taie si acolo */
  header, .header, .topbar, .navbar{
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* asta omoara bug-ul clasic de 100vw care include scrollbar */
  html, body{
    overflow-x: hidden !important;
  }
}


/* =========================================================
   8) MOBILE: ASCUNDE STEAGURI + DARKMODE DIN HEADER (NAV)
      + le pastreaza vizibile in Drawer
   ========================================================= */
@media (max-width: 768px){

  /* ascunde in NAV doar (header) */
  nav .lang-switch,
  nav .lang-flag,
  nav .flags,
  nav .language-switch,
  nav .theme-toggle,
  nav .theme-switch,
  nav .darkmode-switch,
  nav .mode-switch,
  nav .wp-dark-mode-switch {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* dar in Drawer (meniul hamburger) le lasam sa apara */
  .cb-mm__tools .lang-switch{
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .cb-mm__tools .theme-toggle,
  .cb-mm__tools .theme-switch,
  .cb-mm__tools .wp-dark-mode-switch{
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}


/* =========================================================
   9) MOBILE: SPATIERE LOGO <-> HAMBURGER + AER IN NAV
   ========================================================= */
@media (max-width: 768px){

  /* mareste spatiul intre logo (stanga) si hamburger (dreapta) */
  nav{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* daca ai layout pe grid/flex in header, asta mareste “aerul” */
  nav .nav-inner,
  nav .nav-row,
  nav .nav-wrap,
  nav .container{
    column-gap: 16px !important; /* creste la 18-20 daca vrei si mai mult */
  }

  /* fallback: daca hamburger-ul e absolut/align, impinge-l un pic */
  .cb-mm-btn{ margin-left: 12px !important; }
}