Add GDPR compliant cookie banner and update footer/privacy policy to include GA and Clarity; added e2e and unit tests for cookie handling; updated snapshots

src/routes/+layout.svelte

@@ -29,17 +29,12 @@
 </script>
 
 <svelte:head>
-    <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-36F29PDKRT"></script>
-    <script defer src="/assets/js/ga-init.js"></script>
     <script
         defer
         src="https://analytics.mifi.holdings/script.js"
         data-website-id="72ac01ce-e7fc-4582-8593-703f15add8d5"
     ></script>
     <script defer src="/assets/js/umami-helper.js"></script>
-    <!-- Microsoft Clarity -->
-    <script defer src="https://www.clarity.ms/tag/vuo5q3yf79?ref=bwt"></script>
 
     <title>{merged.title}</title>
     <meta name="description" content={merged.description ?? ''} />
@@ -151,6 +146,7 @@
 
     <script src="/assets/js/copyright-year.js" defer></script>
     <script src="/assets/js/mobile-menu-helper.js" defer></script>
+    <script src="/assets/js/cookie-consent.js" defer></script>
 </svelte:head>
 
 <a href="#main" class="skip-link" data-umami-event="skip to main content"
@@ -158,6 +154,24 @@
 >
 {@render children()}
 <Footer />
+<div id="cookie-banner" class="cookie-banner" role="region" aria-label="Cookie consent">
+    <div class="cookie-banner-content">
+        <p class="cookie-notification-text">
+            We use first-party analytics and, if you accept, third-party tools (e.g.
+            Google, Microsoft) to understand usage and improve this site. You can accept
+            all or reject non-essential analytics.
+            <a href="/privacy-policy#analytics-and-tracking">Learn more</a>.
+        </p>
+        <div class="cookie-banner-actions">
+            <button type="button" class="btn btn-primary small" data-consent="accept"
+                >Accept all</button
+            >
+            <button type="button" class="btn btn-secondary small" data-consent="reject"
+                >Reject non-essential</button
+            >
+        </div>
+    </div>
+</div>
 <img
     src="https://analytics.mifi.holdings/p/wQ9GYnLIg"
     alt=""
@@ -166,3 +180,105 @@
     role="presentation"
     loading="eager"
 />
+
+<style>
+    .cookie-banner {
+        position: fixed;
+        inset-inline: 0;
+        bottom: 0;
+        z-index: 1000;
+        display: none;
+        background-color: var(--color-bg-elevated, var(--color-bg));
+        color: var(--color-text);
+        border-top: 1px solid var(--color-border);
+        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.16);
+
+        &:global(.is-visible) {
+            display: block;
+        }
+    }
+
+    .cookie-banner-content {
+        container: cookie-banner / inline-size;
+        max-width: var(--max-narrow-width);
+        margin: 0 auto;
+        padding: var(--space-md) var(--space-md);
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-sm);
+
+        @media (min-width: 768px) {
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+        }
+    }
+
+    .cookie-notification-text {
+        margin: 0;
+        font-size: var(--font-size-small);
+        line-height: var(--line-height-base);
+
+        @container cookie-banner (width >= 644px) {
+            flex: 1 1 auto;
+        }
+
+        @container cookie-banner (width < 644px) {
+            flex: 0 0 100%;
+            text-align: center;
+            width: 100%;
+        }
+
+        & a {
+            color: var(--color-primary);
+            text-decoration: underline;
+            text-underline-offset: 0.16em;
+
+            &:hover {
+                color: var(--color-primary-hover);
+            }
+        }
+    }
+
+    .cookie-banner-actions {
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: flex-start;
+
+        @container cookie-banner (width >= 644px) {
+            flex: 0 0 auto;
+            gap: var(--space-xs);
+        }
+
+        @container cookie-banner (width < 644px) {
+            flex: 0 0 100%;
+            gap: var(--space-sm);
+            justify-content: center;
+            width: 100%;
+
+            & .btn {
+                max-width: 100%;
+                width: 100%;
+            }
+        }
+
+        & [data-consent='accept'] {
+            background-color: var(--color-primary);
+            color: var(--color-bg);
+
+            &:hover {
+                background-color: var(--color-primary-hover);
+            }
+        }
+
+        & [data-consent='reject'] {
+            background-color: transparent;
+            color: var(--color-text);
+            border-color: var(--color-primary);
+
+            &:hover {
+                background-color: var(--color-surface-subtle, rgba(148, 163, 184, 0.16));
+            }
+        }
+    }
+</style>