From 0c6fa47c847f607aa728e43bf7d7fa8b97f85e71 Mon Sep 17 00:00:00 2001
From: nlevesque <nassim.levesque@gmail.com>
Date: Wed, 29 Jul 2026 00:29:32 +0200
Subject: [PATCH] Fix focus ring shape on input-group children

The global :focus-visible outline was drawing a square border around the
inner (square-cornered) input, sticking out of the group's rounded
focus-within ring. Suppress child outlines inside .input-group.
---
 .vscode/launch.json   | 1 +
 src/styles/global.css | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/.vscode/launch.json b/.vscode/launch.json
index d642209..9240064 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -1,6 +1,7 @@
 {
   "version": "0.2.0",
   "configurations": [
+    
     {
       "command": "./node_modules/.bin/astro dev",
       "name": "Development server",
diff --git a/src/styles/global.css b/src/styles/global.css
index c965f09..ec2e965 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -31,6 +31,13 @@ a:hover {
     outline-offset: 2px;
 }
 
+/* Inside an input-group the container draws its own focus-within ring —
+   suppress the child outlines (the inner input is square-cornered, so its
+   outline would stick out of the group's rounded shape) */
+.input-group :focus-visible {
+    outline: none;
+}
+
 /* Hide the native clear button on search inputs — the pages provide their
    own clear button, and Chrome renders both, overlapping the input text */
 input[type="search"]::-webkit-search-cancel-button {