fix: resolve CSP violations and React hydration issues

- Fix Permissions-Policy header: change ambient-light-sensor to ambient-light
- Add Google Fonts domain to font-src CSP for Leaflet map tiles
- Allow unsafe-inline for style-src to support third-party libraries (Sonner, Leaflet)
- Fix React hydration mismatch by conditionally adding nonce attribute
- Add debug logging for nonce retrieval issues

These changes resolve all CSP violations while maintaining security best practices.

lib/nonce-utils.ts

@@ -6,9 +6,21 @@ import { headers } from "next/headers";
 export async function getNonce(): Promise<string | undefined> {
   try {
     const headersList = await headers();
-    return headersList.get("X-Nonce") || undefined;
-  } catch {
+    const nonce = headersList.get("X-Nonce");
+
+    // Log for debugging hydration issues
+    if (!nonce && process.env.NODE_ENV === "development") {
+      console.warn(
+        "No nonce found in headers - this may cause hydration mismatches"
+      );
+    }
+
+    return nonce || undefined;
+  } catch (error) {
     // Headers not available (e.g., in client-side code)
+    if (process.env.NODE_ENV === "development") {
+      console.warn("Failed to get headers for nonce:", error);
+    }
     return undefined;
   }
 }