Fixed menu wrapping on md and bigger screens

dist/main.compiled.css

@@ -4108,10 +4108,8 @@ html .layout .l-sidebar + .l-content{
 
 /* Menus */
 
-.js .menu-dropdown > li > a,
-.js .menu-dropdown > li > a:hover,
-.js .menu-dropdown > li > a:focus,
-.js .menu-dropdown > li > a:active{
+.js .menu-dropdown > li > a, .js .menu-dropdown > li > a:hover, .js .menu-dropdown > li > a:focus, .js .menu-dropdown > li > a:active, .js .menu-tree > li > a, .js .menu-tree > li > a:hover, .js .menu-tree > li > a:focus, .js .menu-tree > li > a:active{
+  text-wrap: wrap;
   padding: 0;
 }
 
@@ -4241,7 +4239,7 @@ html .layout .l-sidebar + .l-content{
 }
 
 .block-system-main-menu .block-content > ul > li a.has-submenu, .block-system-main-menu .block-content > ul > li a:hover.has-submenu{
-  padding-right: 0;
+  padding-right: 3rem;
 }
 
 .block-system-main-menu .block-content > ul > li a::before {
@@ -4268,7 +4266,7 @@ html .layout .l-sidebar + .l-content{
 }
 
 .block-system-main-menu .block-content > ul > li span.sub-arrow{
-  top: 2rem;
+  top: 2.5rem;
   border-style: none;
   margin: 0;
   height: 1.2rem;
@@ -4279,38 +4277,19 @@ html .layout .l-sidebar + .l-content{
   background-repeat: none;
   background-position: center center;
   transition: transform 0.25s ease-out;
-}
-
-@media (min-width: 768px){
-  .block-system-main-menu .block-content > ul > li span.sub-arrow{
-    position: relative;
-    top: 50%;
-    right: 0;
-    display: inline-block;
-  }
-}
-
-.block-system-main-menu .block-content > ul > li span.sub-arrow{
-  right: 2rem;
+  position: absolute;
+  right: 1rem;
+  --tw-rotate: -90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 @media (min-width: 768px){
   .block-system-main-menu .block-content > ul > li span.sub-arrow{
     right: 0;
   }
-}
 
-.block-system-main-menu .block-content > ul > li li .sub-arrow{
-  position: absolute;
-  right: 2rem;
-  top: 2.5rem;
-  --tw-rotate: -90deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-@media (min-width: 768px){
-  .block-system-main-menu .block-content > ul > li li .sub-arrow{
-    right: 1rem;
+  .block-system-main-menu .block-content > ul > li li span.sub-arrow{
+    right: 2rem;
   }
 }
 
@@ -4426,6 +4405,7 @@ html .layout .l-sidebar + .l-content{
     float: left;
     margin-left: 0.5rem;
     margin-right: 0.5rem;
+    align-content: flex-end;
     border-width: 0px;
   }
 }
@@ -4466,19 +4446,29 @@ html .layout .l-sidebar + .l-content{
 }
 
 .l-header .block-system-main-menu .block-content > ul > li > a{
-  font-size: 2rem;
   border-width: 0px;
+  font-size: 2rem;
 }
 
 @media (min-width: 768px){
   .l-header .block-system-main-menu .block-content > ul > li > a{
+    bottom: 0;
+    margin-top: auto;
     padding-left: 0;
     padding-right: 0;
     padding-top: 2rem;
     padding-bottom: 2rem;
   }
 }
 
+.l-header .block-system-main-menu .block-content > ul > li > a{
+  white-space: normal;
+}
+
+.l-header .block-system-main-menu .block-content > ul > li > a.has-submenu, .l-header .block-system-main-menu .block-content > ul > li > a:hover.has-submenu{
+  padding-right: 3rem;
+}
+
 .l-header .block-system-main-menu .block-content > ul > li > a::before{
   display: none;
   height: 0.6rem;

src/colors.css

@@ -1,6 +1,8 @@
 html body,
 .l-header,
-.menu-dropdown
+.menu-dropdown,
+.l-header .menu,
+.l-header .menu ul
 {
   background-color: #FFFFFE;
   color: #2E2D28;
@@ -112,11 +114,11 @@ body .header-menu .links a:after {
 }
 
 .l-header .l-header-inner .block-system-main-menu ul,
-.menu-dropdown ul a:hover, 
-.menu-dropdown ul a:focus, 
-.menu-dropdown ul a:active, 
-.menu-dropdown ul a.highlighted,
-.menu-dropdown ul a
+.l-header .menu ul a:hover, 
+.menu ul a:focus, 
+.l-header .menu  ul a:active, 
+.l-header .menu  ul a.highlighted,
+.l-header .menu  ul a
 {
   background-color: #FFFFFE;
 }

src/main.css

@@ -427,10 +427,10 @@ html .layout {
 /* Menus */
 
 .js .menu-dropdown > li > a,
-.js .menu-dropdown > li > a:hover,
-.js .menu-dropdown > li > a:focus,
-.js .menu-dropdown > li > a:active {
-  @apply p-0;
+.js .menu-tree > li > a {
+  &, &:hover, &:focus, &:active {
+    @apply p-0 text-wrap;
+  }
 }
 
 .menu,
@@ -503,7 +503,7 @@ html .layout {
       @apply scale-100 bg-fog;
     }
     a.has-submenu, a:hover.has-submenu {
-      @apply pr-0;
+      @apply pr-30;
     }
     a::before {
       content: '';
@@ -516,11 +516,11 @@ html .layout {
       @apply scale-100;
     }
     span.sub-arrow {
-      @apply border-none caret top-20 md:top-1/2 md:right-0 md:relative md:inline-block;
-      @apply right-20 md:right-0;
+      @apply border-none caret top-25;
+      @apply absolute right-10 md:right-0 -rotate-90;
     }
-    li .sub-arrow {
-      @apply absolute right-20 md:right-10 top-25 -rotate-90;
+    li span.sub-arrow {
+      @apply md:right-20;
     }
     a.highlighted span.sub-arrow {
       @apply rotate-0;
@@ -567,7 +567,7 @@ html .layout {
           @apply m-0;
         }
         > li {
-          @apply md:float-left md:mx-5 lg:mr-10 xl:mr-20 md:border-0;
+          @apply md:float-left md:mx-5 lg:mr-10 xl:mr-20 md:border-0  md:content-end;
           ul {
             @apply pl-20 border-0;
             @apply md:pl-0 md:shadow-md md:absolute;
@@ -580,8 +580,13 @@ html .layout {
             @apply md:mr-0;
           }
           > a {
-            @apply text-20;
-            @apply md:px-0 md:py-20 border-0;
+            @apply text-20 border-0;
+            @apply md:px-0 md:py-20 md:mt-auto md:bottom-0;
+            @apply whitespace-normal;
+
+            &.has-submenu, &:hover.has-submenu {
+              @apply pr-30;
+            }
 
             &::before {
               @apply hidden md:block h-6 w-full scale-x-0 scale-y-100;