Hide Header component on print

Author: webstackdev

src/components/Header/index.astro

@@ -19,8 +19,8 @@ import './index.css'
 
 {/* Hidden modal shown when theme picker icon selected - moved to BaseLayout for persistence */}
 {/* Header for all pages */}
-<div class="header-shell">
-  <div class="header-footprint print:hidden!" aria-hidden="true"></div>
+<div class="header-shell print:hidden">
+  <div class="header-footprint" aria-hidden="true"></div>
   <div class="header-fixed">
     <header
       id="header"
@@ -31,7 +31,7 @@ import './index.css'
       {/*- Element for animated background behind mobile navigation menu -*/}
       <div
         id="mobile-splash"
-        class="mobile-splash print:hidden!"
+        class="mobile-splash"
         aria-hidden="true"
         data-testid="mobile-splash-backdrop"
       >
@@ -54,15 +54,15 @@ import './index.css'
       {/* Theme picker toggle button to show modal */}
       <span
         id="header__theme-icon"
-        class="header-icon order-3 lg:order-4 ml-2 mr-2 block shrink-0 w-(--header-icon-size) h-(--header-icon-size) relative z-(--z-content-overlay)  print:hidden!"
+        class="header-icon order-3 lg:order-4 ml-2 mr-2 block shrink-0 w-(--header-icon-size) h-(--header-icon-size) relative z-(--z-content-overlay)"
       >
         <ThemeButton />
       </span>
 
       {/* Header search icon that expands left into a search panel */}
       <span
         id="header__search-icon"
-        class="header-icon order-4 lg:order-5 mr-2 lg:mr-0 block shrink-0 w-(--header-icon-size) h-(--header-icon-size) relative z-(--z-content-overlay) group-data-[header-search-open=true]/header:z-(--z-modal) lg:z-(--z-nav)  print:hidden!"
+        class="header-icon order-4 lg:order-5 mr-2 lg:mr-0 block shrink-0 w-(--header-icon-size) h-(--header-icon-size) relative z-(--z-content-overlay) group-data-[header-search-open=true]/header:z-(--z-modal) lg:z-(--z-nav)"
       >
         <SearchBar variant="header" />
       </span>