/* =========================================================
   MENU (Joomla 6 / Cassiopeia / mod_menu / offcanvas)
   ========================================================= */
.container-nav{
  --nav-top-text:#fff;
  --nav-top-hover-bg:rgba(255,255,255,.14);
  --nav-top-active-bg:rgba(255,255,255,.18);

  --menu-bg:#fff;
  --menu-text:#1f2933;
  --menu-muted:rgba(31,41,51,.65);
  --menu-hover-bg:rgba(88,117,197,.12);
  --menu-hover-text:#283d78;
  --menu-border:rgba(31,41,51,.14);
  --menu-sep:rgba(31,41,51,.18);
  --menu-shadow:0 14px 34px rgba(0,0,0,.14);

  --acc-dur:.22s;
  --acc-ease:cubic-bezier(.2,.8,.2,1);
}

.container-nav ul.mod-menu.vk-menu{
  list-style:none;
  margin:0;
  padding:0;
}

.container-nav ul.mod-menu.vk-menu a{ text-decoration:none; }

/* убрать underline Cassiopeia только для этого меню */
@media (min-width:992px){
  .container-header .container-nav ul.mod-menu.vk-menu > li.nav-item::after,
  .container-header .container-nav ul.mod-menu.vk-menu > li.nav-item:hover::after,
  .container-header .container-nav ul.mod-menu.vk-menu > li.nav-item.active::after{
    content:none !important;
    display:none !important;
  }
}

/* ========================= DESKTOP MENU (>=992px) ========================= */
@media (min-width:992px){

  .container-nav,
  .container-nav .vk-nav,
  .container-nav .vk-offcanvas,
  .container-nav .vk-offcanvas-body,
  .container-nav .offcanvas-body{ overflow:visible !important; }

  .container-nav .vk-offcanvas{
    position:static !important;
    transform:none !important;
    visibility:visible !important;
    background:transparent !important;
    border:0 !important;
    width:auto !important;
    max-width:none !important;
    box-shadow:none !important;
  }

  .container-nav .vk-offcanvas .offcanvas-header{ display:none !important; }

  .container-nav .vk-offcanvas-body,
  .container-nav .offcanvas-body{ padding:0 !important; }

  /* level 1 */
  .container-nav ul.mod-menu.vk-menu.nav{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    white-space:nowrap;
  }

  .container-nav ul.mod-menu.vk-menu > li.nav-item{
    position:relative;
    display:flex;
    align-items:center;
    white-space:nowrap;
  }

  .container-nav ul.mod-menu.vk-menu > li.nav-item + li.nav-item{ margin-left:14px; }

  .container-nav ul.mod-menu.vk-menu > li.nav-item > a{
    display:inline-flex;
    align-items:center;
    padding:10px 12px;
    border-radius:var(--r);
    color:var(--nav-top-text) !important;
    line-height:1.2;
    transition:background-color .16s ease;
    text-decoration:none !important;
  }

  .container-nav ul.mod-menu.vk-menu > li.nav-item > a:hover,
  .container-nav ul.mod-menu.vk-menu > li.nav-item > a:focus-visible{
    background:var(--nav-top-hover-bg);
    outline:none;
  }

  .container-nav ul.mod-menu.vk-menu .active > a,
  .container-nav ul.mod-menu.vk-menu a[aria-current="page"]{
    background:var(--nav-top-active-bg);
  }

  /* no toggle buttons on desktop */
  .container-nav ul.mod-menu.vk-menu button.mod-menu__toggle-sub{
    display:none !important;
  }

  /* level 2 dropdown */
  .container-nav ul.mod-menu.vk-menu ul.mod-menu__sub{
    display:block !important;
    position:absolute !important;
    left:0;
    min-width:280px;
    max-width:420px;

    background:var(--menu-bg);
    border:1px solid var(--menu-border);
    border-radius:var(--r);
    box-shadow:var(--menu-shadow);

    padding:8px;
    margin:0;

    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    pointer-events:none;

    transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index:2000;
  }

  .container-nav ul.mod-menu.vk-menu > li.nav-item.parent > ul.mod-menu__sub{
    top:calc(100% - 5px);
  }

  .container-nav ul.mod-menu.vk-menu > li.nav-item.parent:hover > ul.mod-menu__sub,
  .container-nav ul.mod-menu.vk-menu > li.nav-item.parent:focus-within > ul.mod-menu__sub{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
    transition:opacity .18s ease, transform .18s ease, visibility 0s;
  }

  .container-nav ul.mod-menu.vk-menu ul.mod-menu__sub > li.nav-item{
    position:relative;
    white-space:nowrap;
  }

  .container-nav ul.mod-menu.vk-menu ul.mod-menu__sub a{
    display:block;
    padding:10px 12px;
    border-radius:var(--r);
    color:var(--menu-text) !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transition:background-color .16s ease, color .16s ease;
  }

  .container-nav ul.mod-menu.vk-menu ul.mod-menu__sub a:hover,
  .container-nav ul.mod-menu.vk-menu ul.mod-menu__sub a:focus-visible{
    background:var(--menu-hover-bg);
    color:var(--menu-hover-text) !important;
    outline:none;
  }

  .container-nav ul.mod-menu.vk-menu ul.mod-menu__sub > li.nav-item + li.nav-item{
    border-top:1px dotted var(--menu-sep);
    margin-top:4px;
    padding-top:4px;
  }

  /* mark parent */
  .container-nav ul.mod-menu.vk-menu ul.mod-menu__sub > li.nav-item.parent > a{
    padding-right:28px;
    position:relative;
  }

  .container-nav ul.mod-menu.vk-menu ul.mod-menu__sub > li.nav-item.parent > a::after{
    content:"";
    position:absolute;
    right:12px;
    top:50%;
    width:6px;
    height:6px;
    border-right:2px solid rgba(31,41,51,.55);
    border-bottom:2px solid rgba(31,41,51,.55);
    transform:translateY(-50%) rotate(-45deg);
  }

  /* level 3 flyout */
  .container-nav ul.mod-menu.vk-menu ul.mod-menu__sub ul.mod-menu__sub{
    top:-8px;
    left:calc(100% - 3px);

    opacity:0;
    visibility:hidden;
    transform:translateX(8px);
    pointer-events:none;

    transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }

  .container-nav ul.mod-menu.vk-menu ul.mod-menu__sub > li.nav-item.parent:hover > ul.mod-menu__sub,
  .container-nav ul.mod-menu.vk-menu ul.mod-menu__sub > li.nav-item.parent:focus-within > ul.mod-menu__sub{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
    pointer-events:auto;
    transition:opacity .18s ease, transform .18s ease, visibility 0s;
  }
}

/* DESKTOP menu tweaks: hide first, CTA last */
@media (min-width:992px){

  .container-nav ul.mod-menu.vk-menu > li.nav-item:first-child{
    display:none !important;
  }

  .container-nav ul.mod-menu.vk-menu > li.nav-item:last-child{
    margin-left:18px;
  }

  .container-nav ul.mod-menu.vk-menu > li.nav-item:last-child > a{
    background:var(--primary) !important;
    text-transform:uppercase;
    color:#fff !important;

    border:1px solid rgba(255,255,255,.22);
    border-radius:var(--r) !important;

    padding:10px 14px !important;
    font-weight:700;
    letter-spacing:.2px;

    box-shadow:0 10px 22px rgba(0,0,0,.18);
  }

  .container-nav ul.mod-menu.vk-menu > li.nav-item:last-child > a:hover,
  .container-nav ul.mod-menu.vk-menu > li.nav-item:last-child > a:focus-visible{
    background:var(--primary-hover) !important;
    color:#fff !important;
    outline:none;
    transform:translateY(-1px);
  }

  .container-nav ul.mod-menu.vk-menu > li.nav-item:last-child.active > a,
  .container-nav ul.mod-menu.vk-menu > li.nav-item:last-child > a[aria-current="page"]{
    background:var(--primary-hover) !important;
  }

  .container-nav ul.mod-menu.vk-menu > li.nav-item:last-child::after{
    content:none !important;
    display:none !important;
  }
}

/* ========================= MOBILE / TABLET MENU (<992px) ========================= */
@media (max-width:991.98px){

  .container-nav .vk-offcanvas{
    background:var(--menu-bg) !important;
    color:var(--menu-text) !important;
    border-right:1px solid var(--menu-border);
  }

  .container-nav .vk-offcanvas-body,
  .container-nav .offcanvas-body{
    padding:12px 14px;
  }

  .container-nav .vk-offcanvas ul.mod-menu.vk-menu.nav{
    display:block !important;
    width:100% !important;
  }

  .container-nav .vk-offcanvas li.nav-item{
    display:grid !important;
    grid-template-columns:1fr 52px;
    column-gap:10px;
    align-items:center !important;
    width:100% !important;
  }

  .container-nav .vk-offcanvas li.nav-item > a{
    grid-column:1;
    display:block !important;
    min-width:0 !important;

    padding:10px 12px;
    margin:2px 0;
    border-radius:var(--r);

    color:var(--menu-text) !important;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    transition:background-color .16s ease, color .16s ease;
  }

  .container-nav .vk-offcanvas li.nav-item > a:hover,
  .container-nav .vk-offcanvas li.nav-item > a:focus-visible{
    background:var(--menu-hover-bg);
    color:var(--menu-hover-text) !important;
    outline:none;
  }

  .container-nav .vk-offcanvas .active > a,
  .container-nav .vk-offcanvas a[aria-current="page"]{
    background:rgba(88,117,197,.16);
    color:var(--menu-hover-text) !important;
  }

  .container-nav .vk-offcanvas li.nav-item > button.mod-menu__toggle-sub{
    grid-column:2;

    position:static !important;
    inset:auto !important;

    display:none !important;
    align-items:center;
    justify-content:center;

    width:44px;
    height:44px;

    border:0 !important;
    background:transparent !important;
    border-radius:var(--r);

    color:var(--menu-muted) !important;
  }

  .container-nav .vk-offcanvas li.nav-item.parent > button.mod-menu__toggle-sub{
    display:flex !important;
  }

  .container-nav .vk-offcanvas li.nav-item > button.mod-menu__toggle-sub:hover,
  .container-nav .vk-offcanvas li.nav-item > button.mod-menu__toggle-sub:focus-visible{
    background:var(--menu-hover-bg);
    outline:none;
  }

  .container-nav .vk-offcanvas button.mod-menu__toggle-sub .vk-chev{
    transition:transform .18s ease;
    transform:rotate(0deg);
  }

  .container-nav .vk-offcanvas button.mod-menu__toggle-sub[aria-expanded="true"] .vk-chev{
    transform:rotate(180deg);
  }

  .container-nav .vk-offcanvas li.nav-item > ul.mod-menu__sub{
    grid-column:1 / -1;

    display:block !important;
    overflow:hidden;

    max-height:0;
    opacity:0;
    transform:translateY(-2px);
    pointer-events:none;

    position:static !important;
    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    box-shadow:none !important;
    width:100% !important;

    transition:
      max-height var(--acc-dur) var(--acc-ease),
      opacity var(--acc-dur) var(--acc-ease),
      transform var(--acc-dur) var(--acc-ease);
  }

.container-nav .vk-offcanvas li.nav-item > ul.mod-menu__sub.show-menu,
.container-nav .vk-offcanvas li.nav-item > ul.mod-menu__sub[aria-hidden="false"]{
  max-height:5000px;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  margin:2px 0 6px 0 !important;
}

  .container-nav .vk-offcanvas ul.mod-menu.vk-menu ul.mod-menu__sub > li.nav-item > a{ padding-left:22px; }
  .container-nav .vk-offcanvas ul.mod-menu.vk-menu ul.mod-menu__sub ul.mod-menu__sub > li.nav-item > a{ padding-left:38px; }
  .container-nav .vk-offcanvas ul.mod-menu.vk-menu ul.mod-menu__sub ul.mod-menu__sub ul.mod-menu__sub > li.nav-item > a{ padding-left:54px; }

  .container-nav .vk-offcanvas ul.mod-menu.vk-menu ul.mod-menu__sub > li.nav-item + li.nav-item{
    border-top:1px dotted var(--menu-sep);
    margin-top:4px;
    padding-top:4px;
  }
}