/* New compact mobile menu (loaded per page via $extra_css).
   Hamburger button sits at the right of the logo row, the menu opens as a card. */
@media only screen and (max-width:768px){
  #header{position:relative;}
  #header .wrap-col.f-right{float:none!important;margin:0;}
  .slogan{display:none;}
  #cssmenu{position:absolute;top:11px;right:12px;width:auto;background:transparent;}
  #cssmenu #menu-button{width:48px;height:48px;padding:0;font-size:0;outline:none;border-radius:8px;background:#f2f5f8;}
  #cssmenu #menu-button::after{top:17px;right:16px;width:16px;height:2px;}
  #cssmenu #menu-button::before{top:22px;right:16px;width:16px;height:3px;}
  #cssmenu #menu-button.menu-opened{background:#e1edf7;}
  #cssmenu > ul{position:absolute;top:56px;right:0;width:264px;background:#fff;border:1px solid #e4e7eb;border-radius:10px;box-shadow:0 14px 34px rgba(20,40,70,.2);overflow:hidden;}
  #cssmenu ul li a{padding:16px 20px;font-size:16px;}
  #cssmenu ul ul li a{padding:13px 20px 13px 34px;font-size:15px;color:#444;}
  #cssmenu ul li:first-child{border-top:none;}
  #cssmenu .submenu-button{height:52px;width:52px;}
}