fix(a11y): scope focus-visible ring to header itemsHEADmain

Add explicit .header-item:focus { outline: none } and
.header-item:focus-visible rules in +layout.svelte so the navbar
matches the dropdown menu's teal rounded ring on keyboard focus and
stops leaking the browser default blue square ring on mouse click.
Same pattern as the Dropdown component's scoped focus-visible rule.

1 files changed, 10 insertions, 0 deletions

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 633fdffc..0cfde36d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -397,6 +397,16 @@ $: {
     text-decoration: none;
   }
 
+  .header-item:focus {
+    outline: none;
+  }
+
+  .header-item:focus-visible {
+    outline: 2px solid var(--base0D);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+
   .header-item:active {
     outline: none;
   }