Add responsive styles for navbar and mobile menu

frontend/src/app/globals.css

@@ -414,3 +414,155 @@ html[data-reduce-motion="true"] *::after {
   scroll-behavior: auto !important;
 }
 
+/* =====================================================
+   NAVBAR RESPONSIVENESS IMPROVEMENTS
+   Append at end of globals.css
+   ===================================================== */
+
+/* Prevent navbar overflow */
+.navbar {
+  width: 100%;
+  overflow-x: hidden;
+}
+
+/* Smooth mobile menu animations */
+.mobile-menu {
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease,
+    max-height 0.3s ease;
+}
+
+/* Responsive navbar container */
+.nav-container {
+  width: 100%;
+  max-width: 1280px;
+  margin-inline: auto;
+  padding-inline: 1rem;
+}
+
+/* Tablet */
+@media (max-width: 1024px) {
+  .nav-container {
+    padding-inline: 1.25rem;
+  }
+
+  .navbar-links {
+    gap: 1rem;
+  }
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+  .navbar {
+    min-height: 72px;
+  }
+
+  .nav-container {
+    padding-inline: 1rem;
+  }
+
+  .navbar-logo {
+    max-width: 160px;
+  }
+
+  .navbar-links {
+    display: none;
+  }
+
+  .mobile-menu-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  .mobile-menu {
+    width: 100%;
+    padding: 1rem;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
+
+  .mobile-menu a {
+    display: block;
+    width: 100%;
+    padding: 0.875rem 0;
+  }
+}
+
+/* Small Phones */
+@media (max-width: 480px) {
+  .navbar {
+    min-height: 64px;
+  }
+
+  .nav-container {
+    padding-inline: 0.75rem;
+  }
+
+  .navbar-logo {
+    max-width: 130px;
+  }
+
+  .mobile-menu {
+    padding: 0.75rem;
+  }
+
+  .mobile-menu a {
+    font-size: 0.95rem;
+  }
+}
+
+/* Large Desktop */
+@media (min-width: 1440px) {
+  .nav-container {
+    max-width: 1400px;
+  }
+
+  .navbar-links {
+    gap: 2rem;
+  }
+}
+
+/* Touch Device Optimization */
+@media (hover: none) and (pointer: coarse) {
+  .navbar a,
+  .navbar button {
+    min-height: 48px;
+    min-width: 48px;
+  }
+}
+
+/* Landscape Mobile */
+@media (max-height: 500px) and (orientation: landscape) {
+  .mobile-menu {
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+}
+
+/* iPhone Notch / Safe Areas */
+.navbar-safe {
+  padding-top: env(safe-area-inset-top);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+}
+
+/* Prevent horizontal scrolling caused by navbar */
+.navbar,
+.nav-container,
+.mobile-menu {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+/* Better focus states */
+.navbar a:focus-visible,
+.navbar button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 3px;
+  border-radius: 0.5rem;
+}
+