/* ----------------------------------------------- */
/* JY-MENUBAR */
/* ----------------------------------------------- */
/* VARIABLES */

:root {
  --jy-menubar-direction: row;
  --jy-menubar-justify: flex-end;
  --jy-menubar-align-item: flex-start;
  --jy-menu__button-justify: flex-end;

  --jy-menubar__overlay-color: #872334;
  --jy-menu-color: #a52c3c;
  --jy-menu__button-color: #872334;

  --jy-menubar-gap: 12px;
  --jy-menubar-transition: .6s;
  --jy-menu-radius: 6px;

  --jy-menu__button-height: 40px;

  /* MENU 1 */
  --jy-menu1-close_width: 105px;
  --jy-menu1-open_width: 200px;
  --jy-menu1-open_height: 280px;

  /* MENU 2 */
  --jy-menu2-close_width: 140px;
  --jy-menu2-open_width: 300px;
  --jy-menu2-open_height: 800px;
}

/* ----------------------------------------------- */
/* FONTS */

/* JY-MENU__BUTTON */
.jy-menu__button {
  color: white;
  font: normal 500 0.95rem/0.9rem "Ubuntu", sans-serif;
  letter-spacing: 0.01rem; text-transform: uppercase;
}

/* JY-MENU__CONTENT */
.jy-menu__content,
.jy-menu__content a {
  color: white;
  font: normal 500 1.3rem/1.3rem "Ubuntu", sans-serif;
  letter-spacing: 0.05rem; text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}

/* ----------------------------------------------- */
/* LAYOUT & DESIGN */

/* JY-MENUBAR */
.jy-menubar { /*--h:0; background: hsl(var(--h),100%,90%); border: 5px solid hsl(var(--h),100%,50%);
  /* LAYOUT */
  width: 100%; height: 100%; margin: ; padding: ;
  display: flex; flex-direction: var(--jy-menubar-direction); justify-content: var(--jy-menubar-justify); align-items: var(--jy-menubar-align-item);
  /* DESIGN */
  gap: var(--jy-menubar-gap);
}

/* JY-MENUBAR__OVERLAY */
.jy-menubar__overlay {
  /* LAYOUT */
  position: fixed; top: 0; left: 0; bottom: 0; right: 0;
  z-index:10;
}

/* JY-MENU */
.jy-menu { /*--h:120; background: hsl(var(--h),100%,90%); border: 5px solid hsl(var(--h),100%,50%);
  /* LAYOUT */
  width: ; height: ; margin: ; padding: ;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
  position: relative; z-index: 13;
  /* DESIGN */
  overflow: hidden;
  border-radius: var(--jy-menu-radius);
   -webkit-user-select: none; /* Safari */
      -moz-user-select: none; /* Firefox */
       -ms-user-select: none; /* Internet Explorer/Edge */
           user-select: none; /* supported by Chrome and Opera */
} .jy-menu > * { flex: 1 0 auto; }

/* JY-MENUBAR__BUTTON */
.jy-menu__button { /*--h:240; background: hsl(var(--h),100%,90%); border: 5px solid hsl(var(--h),100%,50%);
  /* LAYOUT */
  width: ; height: ; margin: ; padding: ;
  position: relative; z-index: 19;
  flex: 0 0 var(--jy-menu__button-height);
  display: flex; flex-direction: row; justify-content: var(--jy-menu__button-justify); align-items: center;
  /* DESIGN */
  overflow: hidden;
  border-top-left-radius: var(--jy-menu-radius);
  border-top-right-radius: var(--jy-menu-radius);
} .jy-menu__button > * {
    position: absolute; right: 0;
  }
  .jy-menu__button__text {
    right: var(--jy-menu__button-height);
    padding-right: 2px;
  }
  .jy-menu__button__icon,
  .jy-menu__button__icon > * {
    width: var(--jy-menu__button-height); height: var(--jy-menu__button-height);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
  } .jy-menu__button__icon svg { width: 73%; height: auto; }

/* JY-MENUBAR__CONTENT */
.jy-menu__content { /*--h:0; background: hsl(var(--h),100%,90%); border: 5px solid hsl(var(--h),100%,50%);
  /* LAYOUT */
  width: ; height: ; margin: ; padding: ;
  position: relative; z-index: 16;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
  /* DESIGN */
  overflow: hidden;
  background-color: var(--jy-menu-color);
  border-bottom-left-radius: var(--jy-menu-radius);
  border-bottom-right-radius:var(--jy-menu-radius);
} .jy-menu__content div {
     padding: 18px;
  } .jy-menu__content ul { /*--h:120; background: hsl(var(--h),100%,90%); border: 5px solid hsl(var(--h),100%,50%);
      /* LAYOUT */
      width: ; height: ; margin: ; padding: ;
      display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
      gap: 12px;
      list-style: none;
    } .jy-menu__content ul {
        /* HACK > OXYGEN : Hack to counter Oxygen that will automatically add margin and padding on UL tag. */
        margin: 0; padding: 0;
      }
      .jy-menu__content ul > * { flex: 1 0 auto; }
      .jy-menu__content ul li a { /*--h:240; background: hsl(var(--h),100%,90%); border: 5px solid hsl(var(--h),100%,50%);
          /* LAYOUT */
          width: ; height: ; margin: ; padding: 10px 12px;
          display: block;
          border-radius: 8px;
        }

/* ----------------------------------------------- */
/* FOCUS & HOVER */

/* JY_MENUBAR */
.jy-menubar *:focus { outline: none; }

/* JY-MENU__CONTENT */
.jy-menu__content li a {
  background-color: rgba(255,255,255,0);
  transform: none;
  transition: background-color var(--jy-menubar-transition) ease;
} .jy-menu__content li a:hover,
  .jy-menu__content li a:focus { background-color: rgba(255,255,255,0.3);
  }

/* ----------------------------------------------- */
/* INTERACTION */

/* JY-MENU__BUTTON */
.jy-menu__button {
  cursor: pointer;
  pointer-events: auto;
} .jy-menu:focus-within .jy-menu__button { pointer-events: none; }

/* JY-MENUBAR__OVERLAY */
.jy-menubar__overlay {
  cursor: default;
  pointer-events: none;
} .jy-menubar:focus-within .jy-menubar__overlay { pointer-events: auto; }

/* ----------------------------------------------- */
/* TRANSITION */

/* JY-MENU__OVERLAY */
.jy-menubar__overlay {
  background-color: var(--jy-menubar__overlay-color);
  opacity: 0;
  transition: opacity var(--jy-menubar-transition) ease;
} .jy-menubar:focus-within .jy-menubar__overlay { opacity: 0; }

/* JY-MENU */
.jy-menu {
  min-height: var(--jy-menu__button-height);
} .jy-menu:focus-within { filter: drop-shadow(0px 0px 6px rgba(0,0,0,0.4)); }
#jy-menu1 {
  width: var(--jy-menu1-close_width); height: var(--jy-menu__button-height);
  transition: width var(--jy-menubar-transition) ease, height var(--jy-menubar-transition) ease;
} #jy-menu1:focus-within { width:var(--jy-menu1-open_width); height:var(--jy-menu1-open_height); }
#jy-menu2 {
  width: var(--jy-menu2-close_width); height: var(--jy-menu__button-height);
  transition: width var(--jy-menubar-transition) ease, height var(--jy-menubar-transition) ease;
} #jy-menu2:focus-within { width:var(--jy-menu2-open_width); height:var(--jy-menu2-open_height); }

/* JY-MENU__BUTTON */
.jy-menu__button {
  background-color: rgba(0,0,0,0);
  transition: background-color var(--jy-menubar-transition) ease;
} .jy-menu:focus-within .jy-menu__button { background-color: var(--jy-menu__button-color); }

/* JY-MENU__BUTTON__ICON */
.jy-menu__button > .jy-menu__button__icon:nth-child(2) {
  top: 0px;
  transition: top var(--jy-menubar-transition) ease;
} .jy-menu:focus-within .jy-menu__button > .jy-menu__button__icon:nth-child(2) { top: var(--jy-menu__button-height); }
.jy-menu__button > .jy-menu__button__icon:nth-child(3) {
  top: calc(var(--jy-menu__button-height)*(-1));
  transition: top var(--jy-menubar-transition) ease;
} .jy-menu:focus-within .jy-menu__button > .jy-menu__button__icon:nth-child(3) { top: 0px; }

/* JY-MENU__CONTENT */
.jy-menu__content {
  opacity: 0;
  transition: opacity var(--jy-menubar-transition) ease;
} .jy-menu:focus-within .jy-menu__content { opacity: 1; }

/* ----------------------------------------------- */
/* RESET*/
/* Border & Background */ /* * { border: none !important; background: hsla(0,100%,50%,0.08) !important; }
/* Focus */ /* .jy-menubar *:focus { outline: 5px solid rgba(255,255,0,1); outline-offset: -5px; }
/* ----------------------------------------------- */