fix: mobile menu layout and submenu dropdowns

src/app/globals.css

@@ -292,24 +292,65 @@ p  { font-size: 1rem; line-height: 1.6; color: var(--foreground); }
     border: 2px solid var(--foreground);
     border-radius: 6px;
     background: #fff;
+    cursor: pointer;
+    font-size: 1.25rem;
   }
   .nav-list {
     display: none;
-  }
-  .nav-toggle[aria-expanded="true"] + .nav-list {
-    display: grid;
-    grid-template-columns: 1fr;
+    flex-direction: column;
     gap: 0.5rem;
     margin-top: 0.75rem;
+    width: 100%;
+  }
+  .nav-toggle[aria-expanded="true"] + .nav-list {
+    display: flex;
+  }
+  .nav-item {
+    width: 100%;
   }
   .nav-item.has-sub > .submenu {
     position: static;
-    display: grid;
-    grid-template-columns: 1fr;
+    display: none;
+    flex-direction: column;
     gap: 0.25rem;
     box-shadow: none;
     border: none;
-    padding: 0;
+    background: rgba(0,0,0,0.03);
+    padding: 0.5rem 0.75rem;
     margin-top: 0.25rem;
+    min-width: auto;
+  }
+  .nav-item.has-sub > .submenu.expanded {
+    display: flex;
+  }
+  .nav-item-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+  }
+  .nav-submenu-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    font-size: 1rem;
+  }
+  .nav-submenu-toggle::after {
+    content: "▼";
+    font-size: 0.625rem;
+    transition: transform 150ms ease;
+  }
+  .nav-submenu-toggle[aria-expanded="true"]::after {
+    transform: rotate(180deg);
+  }
+  .submenu a {
+    display: block;
+    padding: 0.375rem 0;
   }
 }

src/components/layout/Navigation.tsx

@@ -5,11 +5,18 @@ import { usePathname } from "next/navigation";
 
 export function Navigation() {
   const [expanded, setExpanded] = useState(false);
+  const [expandedSubs, setExpandedSubs] = useState<string[]>([]);
   const pathname = usePathname();
   const locale = pathname.startsWith("/en") ? "en" : "pt";
   const base = `/${locale}`;
   const isActive = (href: string) => pathname.startsWith(href);
 
+  const toggleSubmenu = (key: string) => {
+    setExpandedSubs((prev) =>
+      prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]
+    );
+  };
+
   const sections = useMemo(() => [
     {
       key: "home",
@@ -73,8 +80,24 @@ export function Navigation() {
           <li key={s.key} className={s.items.length ? "nav-item has-sub" : "nav-item"}>
             {s.items.length > 0 ? (
               <>
-                <span className={isActive(s.path) ? "active nav-label" : "nav-label"}>{s.label}</span>
-                <ul className="submenu" role="menu" aria-label={s.label}>
+                <div className="nav-item-header">
+                  <span className={isActive(s.path) ? "active nav-label" : "nav-label"}>{s.label}</span>
+                  <button
+                    className="nav-submenu-toggle"
+                    aria-expanded={expandedSubs.includes(s.key)}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      toggleSubmenu(s.key);
+                    }}
+                  >
+                    <span className="sr-only">
+                      {expandedSubs.includes(s.key)
+                        ? (locale === "en" ? "Hide" : "Ocultar") + ` ${s.label}`
+                        : (locale === "en" ? "Show" : "Mostrar") + ` ${s.label}`}
+                    </span>
+                  </button>
+                </div>
+                <ul className={`submenu ${expandedSubs.includes(s.key) ? "expanded" : ""}`} role="menu" aria-label={s.label}>
                   {s.items.map((it) => (
                     <li key={it.href} role="none">
                       <Link role="menuitem" href={it.href} className={isActive(it.href) ? "active" : ""}>{it.label}</Link>