/* =========================================================
   OFFCANVAS DEFAULT STATE
   ========================================================= */

:root{
  --offcanvas-width:260px;
}

.ms-offcanvas .rm-toggle{
  float:left;
  margin:0;
  padding:0;
}

/* hamburger gomb */

.ms-offcanvas .rm-toggle__link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:var(--sotetkek);
  color:#fff;
  padding:.45rem .7rem;
  border-radius:2px;
  text-decoration:none;
}

/* hamburger ikon */

.ms-offcanvas .rm-toggle svg,
.ms-offcanvas .rm-toggle svg path{
  fill:#fff;
}

.ms-offcanvas .rm-toggle__icon span{
  background:#fff;
}

/* oldal animáció */

.ms-offcanvas > .page{
  transition:transform .25s ease-in-out;
  will-change:transform;
}

/* =========================================================
   OFFCANVAS MENU
   ========================================================= */

.ms-offcanvas .rm-block__content{
  position:fixed;
  top:0;
  left:0;
  width:var(--offcanvas-width);
  height:100vh;
  overflow-y:auto;

  opacity:0;
  visibility:hidden;

  transform:translateX(calc(-1 * var(--offcanvas-width)));
  transition:transform .25s ease,opacity .25s ease;

  z-index:9999;
}

/* =========================================================
   MENÜPONTOK
   ========================================================= */

.ms-offcanvas .menu__link{
  display:block;
  padding:.6rem 1.2rem;
  margin:0;
}

.ms-offcanvas .menu__link:after{
  content:none;
}

/* =========================================================
   ALMENÜK
   ========================================================= */

/* alapból zárva */

.ms-offcanvas .menu__item--expanded > .menu{
  display:none;
}

/* nyitott állapot */

.ms-offcanvas .menu__item--expanded.rm-is-open > .menu{
  display:block;
}

/* beljebb tolás */

.ms-offcanvas .menu-level-2 .menu__link{
  padding-left:2rem;
}

.ms-offcanvas .menu-level-3 .menu__link{
  padding-left:3rem;
}

/* =========================================================
   OPEN STATE
   ========================================================= */

.ms-offcanvas.rm-is-open > .page{
  transform:translateX(var(--offcanvas-width));
}

.ms-offcanvas.rm-is-open .rm-block__content{
  transform:translateX(0);
  opacity:1;
  visibility:visible;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:480px){

  :root{
    --offcanvas-width:85vw;
  }

}