/* страховка: светлая тема всегда перекрывает фон/цвет */
html[data-theme="light"] body{
  background: var(--bg-light);
  color: var(--text-light);
}

:root{
  /* ... твои переменные ... */

  /* MOBILE MENU colors (dark default) */
  --mnav-bg: rgba(7,14,26,.98);
  --mnav-text: #eaf1ff;
  --mnav-muted: rgba(234,241,255,.70);
  --mnav-border: rgba(255,255,255,.10);
  --mnav-hover: rgba(255,255,255,.06);
  --mnav-chevron: rgba(59,130,246,.95);
  --burger: #eaf1ff; /* цвет бургера в dark */
}

/* LIGHT overrides */
html[data-theme="light"]{
  --mnav-bg: #f6f7fb;
  --mnav-text: #111827;
  --mnav-muted: rgba(17,24,39,.65);
  --mnav-border: rgba(17,24,39,.12);
  --mnav-hover: rgba(17,24,39,.06);
  --mnav-chevron: rgba(59,130,246,.95);
  --burger: #111827; /* цвет бургера в light */
}

/* ============== MOBILE MENU (OFF-CANVAS) ============== */
.mnav{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;               /* будет включаться классом .is-open */
  background: rgba(0,0,0,.45); /* затемнение */
}

.mnav.is-open{ display: block; }

.mnav__panel{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: min(86vw, 360px);
  background: #f6f7fb;        /* светлый фон как на скрине */
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transform: translateX(-100%);
  transition: transform .28s ease;
  display: flex;
  flex-direction: column;
}

.mnav.is-open .mnav__panel{ transform: translateX(0); }

/* Header inside menu */
.mnav__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.mnav__logo{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mnav__logo .bbc{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .5px;
  color: #1a73e8; /* можно заменить на твой бренд */
}

.mnav__logo span:last-child{
  font-weight: 600;
  font-size: 14px;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mnav__close{
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #111827;
  border-radius: 10px;
}
.mnav__close:hover{ background: rgba(0,0,0,.06); }

/* List */
.mnav__list{
  list-style: none;
  margin: 0;
  padding: 10px 0 18px;
  overflow: auto;
}

.mnav__list > li > a{
  display: block;
  padding: 14px 16px;
  font-size: 16px;
  color: #111827;
  text-decoration: none;
}
.mnav__list > li > a:hover{
  background: rgba(0,0,0,.04);
}

.mnav__item{
  border-top: 1px solid rgba(0,0,0,.04);
}

/* Services toggle */
.mnav__toggle{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  font-size: 16px;
  color: #111827;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.mnav__toggle:hover{ background: rgba(0,0,0,.04); }

.mnav__toggle .chev{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(17,24,39,.55);
  border-bottom: 2px solid rgba(17,24,39,.55);
  transform: rotate(45deg);       /* вниз */
  transition: transform .2s ease;
  margin-left: auto;
}

/* Submenu */
.mnav__sub{
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  background: rgba(255,255,255,.55);
}

.mnav__sub a{
  display: block;
  padding: 12px 16px 12px 28px;
  font-size: 14.5px;
  color: rgba(17,24,39,.75);
  text-decoration: none;
}

.mnav__sub a:hover{ background: rgba(0,0,0,.035); }

/* OPEN state */


/* Disable body scroll when menu is open */
.no-scroll{
  overflow: hidden;
  touch-action: none;
}

/* Если хочешь, чтобы меню было строго mobile */
@media (min-width: 992px){
  .mnav{ display: none !important; }
}
/* ===== MOBILE HEADER RULES ===== */
.burger { display: none; } /* по умолчанию скрыт на десктопе */

@media (max-width: 991px){
  /* прячем десктоп-меню */
  .header .nav{ display: none !important; }

  /* показываем бургер */
/* ===== BURGER OVERRIDE (FINAL) ===== */

/* цвет бургера из темы */
:root{ --burger: #eaf1ff; }       /* dark */
html[data-theme="light"]{ --burger: #111827; }  /* light */

.header .burger{
  color: var(--burger);
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ЖЁСТКО перебиваем старые стили */
.header .burger span{
  all: unset;               /* 💥 сбрасывает ВСЁ старое */
  display: block;
  width: 22px;
  height: 2px;
  background: var(--burger);
  border-radius: 2px;
}

/* hover */
.header .burger:hover{
  background: rgba(59,130,246,.10);
}


  /* чтобы actions не ломал перенос */
  .header .actions{
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* если логотип слишком широкий */
  .header .logo .name{
    max-width: 52vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* screens */
.mnav__screen{ display:none; height:100%; }
.mnav__screen.is-active{ display:block; }

/* root list button like link */
.mnav__go{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border:0;
  background:transparent;
  font-size:16px;
  color:#111827;
  cursor:pointer;
}
.mnav__go:hover{ background:rgba(0,0,0,.04); }
.mnav__go-arrow{ opacity:.65; font-size:18px; }

/* services header */
.mnav__back{
  width:36px;height:36px;
  border:0;background:transparent;
  font-size:22px;cursor:pointer;
  border-radius:10px;
}
.mnav__back:hover{ background:rgba(0,0,0,.06); }

.mnav__title{
  font-weight:700;
  font-size:15px;
  color:#111827;
}

/* services two columns */
.mnav__services{
  display:flex;
  gap:14px;
  padding:14px 14px 18px;
  height: calc(100% - 64px);
}

.mnav__cats{
  width: 46%;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mnav__cat{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  border:0;
  cursor:pointer;
  border-radius:14px;
  background: rgba(2, 12, 28, .06);
  color:#111827;
  font-weight:600;
}

.mnav__cat.is-active{
  background: rgba(12, 54, 120, .20);
}

.mnav__items{
  width: 54%;
  overflow:auto;
  padding-right:4px;
}

.mnav__panel2{ display:none; }
.mnav__panel2.is-active{ display:block; }

.mnav__link{
  display:block;
  padding:12px 10px;
  border-radius:12px;
  color: rgba(17,24,39,.75);
  text-decoration:none;
  font-weight:600;
  line-height:1.25;
}
.mnav__link:hover{ background: rgba(0,0,0,.035); }
/* base toggles */
.mnav__toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  font-size:16px;
  color:#111827;
  background:transparent;
  border:0;
  cursor:pointer;
}

.mnav__toggle .chev{
  width:10px;height:10px;
  border-right:2px solid rgba(0,90,255,.65);
  border-bottom:2px solid rgba(0,90,255,.65);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.mnav__item.is-open > .mnav__toggle .chev{
  transform: rotate(-135deg);
}

/* submenus open/close */
.mnav__sub{
  list-style:none;
  margin:0;
  padding:0;
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
}

.mnav__item.is-open > .mnav__sub{
  max-height: 1400px;
}

/* level 2 style */
.mnav__toggle--lvl2{
  padding-left: 28px;
  font-size: 15px;
  color: rgba(17,24,39,.8);
}

.mnav__sub--lvl2 a{
  display:block;
  padding: 10px 16px 10px 44px;
  font-size: 14.5px;
  color: rgba(17,24,39,.65);
  text-decoration:none;
  line-height:1.25;
}

.mnav__sub--lvl2 a:hover{
  background: rgba(0,0,0,.035);
}
/* 1) По умолчанию ВСЕ стрелки вниз */
.mnav__toggle .chev{
  transform: rotate(45deg) !important;
}

/* 2) Вверх ТОЛЬКО когда открыт именно этот пункт */
.mnav__item.is-open > .mnav__toggle .chev{
  transform: rotate(-135deg) !important;
}
/* ================== FORCE THEME FOR MOBILE MENU ================== */
.mnav__panel{
  background: var(--mnav-bg) !important;
  color: var(--mnav-text) !important;
}

.mnav__head{
  border-bottom: 1px solid var(--mnav-border) !important;
}

.mnav__logo span:last-child,
.mnav__close{
  color: var(--mnav-text) !important;
}

/* list links */
.mnav__list > li > a{
  color: var(--mnav-text) !important;
}
.mnav__list > li > a:hover{
  background: var(--mnav-hover) !important;
}

/* toggles */
.mnav__toggle{
  color: var(--mnav-text) !important;
}
.mnav__toggle:hover{
  background: var(--mnav-hover) !important;
}

/* submenu background + links */
.mnav__sub{
  background: transparent !important;
}
.mnav__sub a{
  color: var(--mnav-muted) !important;
}
.mnav__sub a:hover{
  background: var(--mnav-hover) !important;
}

/* borders */
.mnav__item{
  border-top: 1px solid var(--mnav-border) !important;
}

/* chevrons */
.mnav__toggle .chev{
  border-right-color: var(--mnav-chevron) !important;
  border-bottom-color: var(--mnav-chevron) !important;
}
/* ===== MOBILE HEADER LAYOUT FIX ===== */
@media (max-width: 991px){

  .header{
    height: 64px;                 /* компактнее */
  }

  .container{
    padding: 0 14px !important;   /* у тебя было "20 px" (ошибка), лучше так */
    gap: 10px;
  }

  /* LOGO занимает всё доступное место */
  .logo{
    margin-right: 0 !important;
    gap: 10px !important;
    min-width: 0;
    flex: 1 1 auto;
  }

  .bbc img{
    height: 50px;
  }


  /* справа всё в одну линию */
  .actions{
    margin-left: 0 !important;
    flex: 0 0 auto;
    gap: 10px;
  }

  .lang__btn,
  .theme-switch{
    width: 40px;
    height: 40px;
  }

  /* БУРГЕР: показать и не дать ему пропасть */
  .header .burger{
    display: inline-flex !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 10002;
  }
}
/* ===== MOBILE HEADER LAYOUT FIX ===== */
@media (max-width: 991px){

  .header{
    height: 64px;                 /* компактнее */
  }

  .container{
    padding: 0 14px !important;   /* у тебя было "20 px" (ошибка), лучше так */
    gap: 10px;
  }

  /* LOGO занимает всё доступное место */
  .logo{
    margin-right: 0 !important;
    gap: 10px !important;
    min-width: 0;
    flex: 1 1 auto;
  }

  .bbc{
    font-size: 18px;
    flex: 0 0 auto;
  }
  

  .name{
    font-size: 16px;
    line-height: 1.1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* ✅ Mobile: перенос названия на 2 строки вместо "..." */
@media (max-width: 768px){
  .name,
  .header .logo .name{
    white-space: normal !important;   /* разрешить перенос */
    overflow: visible !important;     /* не обрезать */
    text-overflow: clip !important;   /* убрать ... */
    max-width: 52vw;                  /* можно оставить */
    word-break: keep-all;             /* не ломать слова */
    line-height: 1.1;
  }
}


  /* справа всё в одну линию */
  .actions{
    margin-left: 0 !important;
    flex: 0 0 auto;
    gap: 10px;
  }

  .lang__btn,
  .theme-switch{
    width: 40px;
    height: 40px;
  }

  /* БУРГЕР: показать и не дать ему пропасть */
  .header .burger{
    display: inline-flex !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 10002;
  }
}