Active nav green fill follows page

Task #12: Make the solid green fill the moving active-page indicator in the
header nav, matching the real ehsan.sa (where the current page's nav item is
filled solid green and that fill moves as you navigate).

Changes (artifacts/ehsan-poc/src/components/layout/Header.tsx):
- Desktop "الرئيسية" (Home): now solid green fill (bg-primary, white text,
  bold) only when on "/"; plain text otherwise.
- Desktop "فرص التبرع" (Opportunities): removed the always-on green CTA
  background and the active ring/outline. Now plain text (keeps its chevron)
  when inactive, and solid green fill only when on "/opportunities".
- Replaced the previous thin-outline/border active treatment on Home with the
  shared solid-green-fill active style so both links use one consistent
  indicator that moves with the route.
- Mobile nav: Home and Opportunities links updated to the same moving
  solid-green active fill for cross-breakpoint consistency.

Out of scope (unchanged): non-route placeholder items (الوقف، عن إحسان،
براعم إحسان), the services mega-menu layout/contents and its trigger.

Verified: tsc --noEmit clean; screenshots confirm green fill on الرئيسية at
"/" and on فرص التبرع at "/opportunities" with the other reverting to plain
text; console clean after workflow restart. No emojis. Bilingual unaffected.

artifacts/ehsan-poc/src/components/layout/Header.tsx

@@ -88,10 +88,10 @@ export function Header() {
         <nav className="hidden lg:flex items-center gap-1 flex-1 justify-center">
           <Link
             href="/"
-            className={`px-3 py-2 text-sm font-medium rounded-md border transition-colors ${
+            className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
               isActive("/")
-                ? "border-primary text-primary"
-                : "border-transparent text-foreground hover:text-primary"
+                ? "bg-primary text-primary-foreground font-bold"
+                : "text-foreground hover:text-primary"
             }`}
             data-testid="nav-home"
           >
@@ -104,8 +104,10 @@ export function Header() {
 
           <Link
             href="/opportunities"
-            className={`px-4 py-2 text-sm font-bold rounded-md bg-primary text-primary-foreground inline-flex items-center gap-1 hover:opacity-90 transition-opacity ${
-              isActive("/opportunities") ? "ring-2 ring-primary ring-offset-2" : ""
+            className={`px-4 py-2 text-sm rounded-md inline-flex items-center gap-1 transition-colors ${
+              isActive("/opportunities")
+                ? "bg-primary text-primary-foreground font-bold"
+                : "text-foreground font-medium hover:text-primary"
             }`}
             data-testid="nav-opportunities"
           >
@@ -254,8 +256,10 @@ export function Header() {
           <Link
             href="/"
             onClick={() => setMobileOpen(false)}
-            className={`block px-3 py-2 rounded-md text-sm font-medium hover:bg-muted ${
-              isActive("/") ? "text-primary bg-muted" : "text-foreground"
+            className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${
+              isActive("/")
+                ? "bg-primary text-primary-foreground font-bold"
+                : "text-foreground font-medium"
             }`}
           >
             {t.nav.home}
@@ -263,8 +267,10 @@ export function Header() {
           <Link
             href="/opportunities"
             onClick={() => setMobileOpen(false)}
-            className={`block px-3 py-2 rounded-md text-sm font-bold hover:bg-muted ${
-              isActive("/opportunities") ? "bg-primary text-primary-foreground" : "text-primary"
+            className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${
+              isActive("/opportunities")
+                ? "bg-primary text-primary-foreground font-bold"
+                : "text-foreground font-medium"
             }`}
           >
             {t.nav.opportunities}