fix: correct top nav layout — display as separate row below header

The TopNav was being squeezed into the same row as the logo/search
because PageFrame's header had a fixed height constraint.

Fix:
- Added --sl-top-nav-height and --sl-header-total-height CSS variables
- PageFrame header now uses flex-direction: column on desktop to stack
  the header content and TopNav vertically
- Sidebar and main-frame positioning use --sl-header-total-height on
  desktop so they offset correctly below both header rows
- Header.astro inner content takes --sl-nav-height height, TopNav fills
  the remaining --sl-top-nav-height space

Author: cursoragent

src/starlight-overrides/Header.astro

@@ -18,22 +18,20 @@ const shouldRenderSearch =
   config.pagefind || config.components.Search !== "@astrojs/starlight/components/Search.astro";
 ---
 
-<div class="header-row">
-  <div class="header">
-    <div class="title-wrapper sl-flex">
-      <SiteTitle />
-    </div>
-    <div class="sl-flex print:hidden">
-      {shouldRenderSearch && <Search />}
-    </div>
-    <div class="sl-hidden md:sl-flex print:hidden right-group">
-      <div class="sl-flex social-icons">
-        <SocialIcons />
-      </div>
-      <ThemeSelect />
-      <LanguageSelect />
-      <ChatButton />
+<div class="header-inner">
+  <div class="title-wrapper sl-flex">
+    <SiteTitle />
+  </div>
+  <div class="sl-flex print:hidden">
+    {shouldRenderSearch && <Search />}
+  </div>
+  <div class="sl-hidden md:sl-flex print:hidden right-group">
+    <div class="sl-flex social-icons">
+      <SocialIcons />
     </div>
+    <ThemeSelect />
+    <LanguageSelect />
+    <ChatButton />
   </div>
 </div>
 
@@ -45,16 +43,13 @@ const shouldRenderSearch =
 
 <style>
   @layer starlight.core {
-    .header-row {
-      /* The header row itself — no changes needed */
-    }
-
-    .header {
+    .header-inner {
       display: flex;
       gap: var(--sl-nav-gap);
       justify-content: space-between;
       align-items: center;
-      height: 100%;
+      height: var(--sl-nav-height);
+      flex-shrink: 0;
     }
 
     .title-wrapper {
@@ -78,7 +73,6 @@ const shouldRenderSearch =
     .top-nav-row {
       border-top: 1px solid var(--sl-color-hairline-shade);
       margin: 0 calc(-1 * var(--sl-nav-pad-x));
-      margin-bottom: calc(-1 * var(--sl-nav-pad-y));
     }
 
     @media (min-width: 50rem) {
@@ -88,7 +82,7 @@ const shouldRenderSearch =
       :global(:root:not([data-has-toc])) {
         --__toc-width: 0rem;
       }
-      .header {
+      .header-inner {
         --__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x));
         --__main-column-fr: calc(
           (

src/starlight-overrides/PageFrame.astro

@@ -55,16 +55,25 @@ const { hasSidebar } = Astro.locals.starlightRoute;
       );
     }
 
+    @media (min-width: 50rem) {
+      .header {
+        display: flex;
+        flex-direction: column;
+        height: var(--sl-header-total-height, var(--sl-nav-height));
+        padding-bottom: 0;
+      }
+    }
+
     .sidebar-pane {
       visibility: var(--sl-sidebar-visibility, hidden);
       position: fixed;
-      height: calc(100dvh - var(--sl-nav-height));
       z-index: var(--sl-z-index-menu);
       inset-inline-start: 0;
       width: 100%;
       background-color: var(--sl-color-black);
       overflow-y: auto;
       top: var(--sl-nav-height);
+      height: calc(100dvh - var(--sl-nav-height));
     }
 
     :global([aria-expanded="true"]) ~ .sidebar-pane {
@@ -102,15 +111,22 @@ const { hasSidebar } = Astro.locals.starlightRoute;
         background-color: var(--sl-color-bg-sidebar);
         border-inline-end: 1px solid var(--sl-color-hairline-shade);
         position: sticky;
+        top: var(--sl-header-total-height, var(--sl-nav-height));
+        height: calc(100dvh - var(--sl-header-total-height, var(--sl-nav-height)));
+      }
+      .main-frame {
+        padding-top: calc(
+          var(--sl-header-total-height, var(--sl-nav-height)) + var(--sl-mobile-toc-height)
+        );
       }
     }
+
     .global-footer {
-      display: block;
+      display: flex;
       width: 100%;
       border-top: 1px solid var(--sl-color-hairline);
       text-align: center;
       padding: 2rem 0;
-      display: flex;
       justify-content: center;
       align-items: center;
       gap: 1rem;

src/styles/global.css

@@ -14,6 +14,14 @@
   }
 }
 
+/* Top navigation bar height (desktop only) */
+@media (min-width: 50rem) {
+  :root {
+    --sl-top-nav-height: 2.75rem;
+    --sl-header-total-height: calc(var(--sl-nav-height) + var(--sl-top-nav-height));
+  }
+}
+
 /* Chat Widget Styles */
 :root {
   --chat-header-height: 3.5rem;