Add dedicated file to header style

src/scss/components/_header.scss

@@ -0,0 +1,39 @@
+header {
+  background-color: var(--primary);
+  position: fixed;
+  z-index: 10;
+  inset-block-start: 0;
+  inset-inline: 0;
+
+  nav {
+    ul {
+      display: flex;
+      justify-content: flex-end;
+      padding: 0;
+      list-style: none;
+      flex-wrap: wrap;
+    }
+
+    li {
+      padding: 6px 20px;
+      padding: 6px clamp(10px, 3vw, 20px);
+      margin: 0;
+      text-align: end;
+    }
+
+    a {
+      text-decoration: none;
+      text-underline-offset: 0.4rem;
+
+      &:hover {
+        text-decoration: underline .12rem;
+      }
+
+      &[aria-current="page"] {
+        color: var(--text-2);
+        text-decoration: underline .12rem;
+        font-weight: var(--font-weight-semibold)
+      }
+    }
+  }
+}

src/scss/critical.scss

@@ -7,6 +7,7 @@
 @use './components/button';
 @use './components/skip-link';
 @use './components/icons';
+@use './components/header';
 
 html {
   scroll-padding-top: 2rem;
@@ -23,38 +24,7 @@ body {
     padding: .5rem clamp(.2rem, 3vw, 2rem);  
   }
 }
-header {
-  background-color: var(--primary);
-  /* background: inherit;
-  background-attachment: fixed; */
-  position: fixed;
-  z-index: 10;
-  inset-block-start: 0;
-  inset-inline: 0;
 
-  nav {
-    ul {
-      display: flex;
-      justify-content: flex-end;
-      padding: 0;
-      list-style: none;
-      flex-wrap: wrap;
-    }
-
-    li {
-      padding: 6px 20px;
-      padding: 6px clamp(10px, 3vw, 20px);
-      margin: 0;
-      text-align: end;
-    }
-
-    a[aria-current="page"] {
-      color: var(--text-2);
-      text-decoration: underline;
-      font-weight: var(--font-weight-semibold)
-    }
-  }
-}
 main {
   margin: 0;
   padding: 0;