/* inc/topnav.css — меню по сетке .container */

.topnav{
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 12px 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* container уже даёт ширину/паддинги — НЕ трогаем */
.topnav__container{
  /* если в style.css у .container есть padding, то меню будет идеально совпадать */
}

/* внутренняя “стеклянная” панель меню */
.topnav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
}

.topnav__brand{
  text-decoration:none;
  font-weight:700;
  letter-spacing:.2px;
  color: rgba(255,255,255,.96);

  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.topnav__links{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.topnav__link{
  text-decoration:none;
  color: rgba(255,255,255,.92);

  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  white-space: nowrap;
}

.topnav__link:hover,
.topnav__brand:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}

.is-active{
  background: rgba(0,0,0,.22) !important;
  border-color: rgba(255,255,255,.26) !important;
}

@media (max-width: 720px){
  .topnav{ padding: 10px 0; }
  .topnav__inner{
    padding: 10px 10px;
    border-radius: 16px;
  }
  .topnav__brand{ padding: 8px 10px; }
  .topnav__link { padding: 8px 10px; }
}