🐞 fix: Update media query breakpoints for navigation styles and add responsive tests

styles/navigation/nav-functional.css

@@ -43,7 +43,7 @@
 }
 
 /* Mobile */
-@media screen and (max-width: 62.5rem) {
+@media screen and (max-width: 79.9375rem) {
     #app:has(.nav-main__toggle[aria-expanded="true"]) { height: calc(100vh - var(--hgtHeader)); }
 
     .nav-main__toggle {
@@ -81,7 +81,7 @@
 }
 
 /* Desktop */
-@media screen and (min-width: 62.5rem) {
+@media screen and (min-width: 80rem) {
     .nav-main__toggle {
         @apply hidden;
     }

styles/navigation/nav-main-default.css

@@ -11,7 +11,7 @@
  */
 
 /* desktop */
-@media screen and (min-width: 62.5rem) {
+@media screen and (min-width: 80rem) {
     .nav-main .menu-vdi {
         @apply flex items-center justify-end p-0 m-0 h-full;
 
@@ -67,7 +67,7 @@
     }
 }
 
-@media screen and (min-width: 62.5rem) {
+@media screen and (min-width: 80rem) {
     .menu-vdi {
         .menu-vdi__toggle { @apply flex items-center gap-2 hover:cursor-pointer; }