Polish mobile navbar and hero actions

app/portfolio.css

@@ -870,6 +870,11 @@
       font-size: clamp(28px, 10vw, 42px);
     }
 
+    [dir="rtl"] .contact-title {
+      font-size: clamp(24px, 8.4vw, 34px);
+      line-height: 1.18;
+    }
+
     .contact-card {
       min-height: 126px;
       padding: 1.25rem 1rem;
@@ -879,6 +884,7 @@
       display: grid;
       width: 100%;
       justify-content: stretch;
+      justify-items: center;
       gap: 0.65rem;
       margin-top: 1.5rem;
       padding: 0;
@@ -886,7 +892,7 @@
     }
 
     .hero-action-link {
-      width: 100%;
+      width: min(100%, 18rem);
       min-width: 0;
       min-height: 46px;
       padding: 0.72rem 1rem;
@@ -943,6 +949,10 @@
       font-size: clamp(26px, 9.5vw, 36px);
     }
 
+    [dir="rtl"] .contact-title {
+      font-size: clamp(22px, 8vw, 30px);
+    }
+
     .hero-action-group {
       gap: 0.6rem;
     }
@@ -952,7 +962,7 @@
     }
 
     .hero-action-group > * {
-      width: 100%;
+      width: min(100%, 17rem);
       min-width: 0;
     }
   }

components/mobile-nav.tsx

@@ -13,9 +13,10 @@ type MobileNavProps = {
   dir: "rtl" | "ltr";
   openLabel: string;
   closeLabel: string;
+  className?: string;
 };
 
-export function MobileNav({ items, dir, openLabel, closeLabel }: MobileNavProps) {
+export function MobileNav({ items, dir, openLabel, closeLabel, className }: MobileNavProps) {
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
@@ -57,7 +58,7 @@ export function MobileNav({ items, dir, openLabel, closeLabel }: MobileNavProps)
   const label = open ? closeLabel : openLabel;
 
   return (
-    <div className="md:hidden">
+    <div className={className ? `md:hidden ${className}` : "md:hidden"}>
       <button
         type="button"
         className="theme-toggle mobile-menu-toggle"

components/navbar.tsx

@@ -61,15 +61,20 @@ export function Navbar({ language }: { language: Language }) {
           </div>
         </div>
 
-        <div className="navbar-mobile-controls flex items-center gap-2 md:hidden">
+        <div className={`navbar-mobile-controls flex items-center gap-2 md:hidden ${dir === "rtl" ? "flex-row-reverse" : ""}`}>
           <MobileNav
             items={navItems}
             dir={dir}
+            className="order-3"
             openLabel={language === "ar" ? "فتح القائمة" : "Open menu"}
             closeLabel={language === "ar" ? "إغلاق القائمة" : "Close menu"}
           />
-          <LanguageToggle language={language} />
-          <ThemeToggle language={language} />
+          <div className="order-2">
+            <LanguageToggle language={language} />
+          </div>
+          <div className="order-1">
+            <ThemeToggle language={language} />
+          </div>
         </div>
       </div>
     </header>