Add search functionality with Pagefind

- Add search icon to header navigation linking to search box
- Add search box on homepage with Pagefind UI
- Configure Pagefind to index all company profile pages individually
- Add comprehensive dark mode styling for search UI
- Ensure search results are visible and accessible in both themes

Search now indexes 877 pages including all company profiles, allowing
users to quickly find companies by name, website, or region.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: dougaitken

src/_includes/partials/header.njk

@@ -9,7 +9,31 @@
     </a>
     <div class="cluster gutter-s">
       {% include "partials/main-nav.njk" %}
+      <a href="/#search" class="search-icon" aria-label="Search companies">
+        {% svg "misc/search" %}
+      </a>
       {% include 'partials/theme-switch.njk' %}
     </div>
   </div>
 </header>
+
+{%- css "global" -%}
+  .search-icon {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--space-xs);
+    color: var(--color-text);
+    text-decoration: none;
+    border-radius: var(--border-radius-small);
+    transition: background-color 0.2s ease;
+  }
+
+  .search-icon:hover {
+    background-color: var(--color-bg-accent);
+  }
+
+  .search-icon svg {
+    width: 1.2em;
+    height: 1.2em;
+  }
+{%- endcss -%}

src/_layouts/company.njk

@@ -2,7 +2,7 @@
 layout: base
 ---
 
-<article class="region wrapper flow prose">
+<article class="region wrapper flow prose" data-pagefind-body>
   <header>
     <h1 class="gradient-text">{{ name }}</h1>
     <p class="meta | cluster gutter-xs-s">

src/assets/svg/misc/search.svg

@@ -20,23 +20,26 @@ description: 'A list of semi to fully remote-friendly companies in tech'
     </p>
   </div>
 
-  <!-- Search will be inserted here by Pagefind -->
-  <div id="search"></div>
+  <!-- Search Companies -->
+  <div class="search-container">
+    <div id="search"></div>
+  </div>
 
   <script>
     window.addEventListener('DOMContentLoaded', (event) => {
       new PagefindUI({
         element: "#search",
         showSubResults: true,
         showImages: false,
-        excerptLength: 15
+        excerptLength: 15,
+        placeholder: "Search companies..."
       });
     });
   </script>
 
   <!-- Company Table -->
   <div class="company-list-container region">
-    <table class="company-table" data-pagefind-body>
+    <table class="company-table">
       <thead>
         <tr>
           <th>Name</th>
@@ -71,6 +74,90 @@ description: 'A list of semi to fully remote-friendly companies in tech'
 </div>
 
 {%- css "local" -%}
+  /* Search container */
+  .search-container {
+    margin-block: var(--space-m);
+  }
+
+  /* Pagefind UI dark mode styles */
+  .pagefind-ui__search-input {
+    background-color: var(--color-bg) !important;
+    border-color: var(--color-bg-accent) !important;
+    color: var(--color-text) !important;
+  }
+
+  .pagefind-ui__search-input::placeholder {
+    color: var(--color-text-accent) !important;
+  }
+
+  .pagefind-ui__search-input:focus {
+    border-color: var(--color-primary) !important;
+  }
+
+  .pagefind-ui__search-clear {
+    background-color: var(--color-bg-accent) !important;
+    color: var(--color-text) !important;
+  }
+
+  .pagefind-ui__search-clear:hover {
+    background-color: var(--color-bg-accent-2) !important;
+  }
+
+  .pagefind-ui__drawer {
+    background-color: var(--color-bg) !important;
+    border-color: var(--color-bg-accent) !important;
+  }
+
+  .pagefind-ui__result {
+    background-color: var(--color-bg) !important;
+    border-color: var(--color-bg-accent) !important;
+  }
+
+  .pagefind-ui__result:hover {
+    background-color: var(--color-bg-accent) !important;
+  }
+
+  .pagefind-ui__result-link {
+    color: var(--color-text) !important;
+    text-decoration: none !important;
+  }
+
+  .pagefind-ui__result-link:hover {
+    color: var(--color-primary) !important;
+  }
+
+  .pagefind-ui__result-title {
+    color: var(--color-primary) !important;
+  }
+
+  .pagefind-ui__result-excerpt {
+    color: var(--color-text) !important;
+  }
+
+  .pagefind-ui__result-nested {
+    color: var(--color-text-accent) !important;
+  }
+
+  .pagefind-ui__message {
+    color: var(--color-text) !important;
+  }
+
+  .pagefind-ui__button {
+    background-color: var(--color-bg-accent) !important;
+    border-color: var(--color-bg-accent-2) !important;
+    color: var(--color-text) !important;
+  }
+
+  .pagefind-ui__button:hover {
+    background-color: var(--color-bg-accent-2) !important;
+  }
+
+  .pagefind-ui mark,
+  mark {
+    background-color: var(--color-tertiary) !important;
+    color: var(--color-dark) !important;
+  }
+
   /* Override global table styles for company table */
   .company-list-container {
     --region-space: var(--space-m);