Tiered responsive footer + narrow-width navbar fixes

src/css/custom.css

@@ -381,6 +381,18 @@ html {
   align-self: flex-start;
 }
 
+/* On narrow widths the secondary nav is replaced by the hamburger
+   menu, so its 48px shouldn't be reserved as empty space above the
+   breadcrumbs. Also align hamburger and article column to a shared
+   20px left edge so they line up visually. */
+@media (max-width: 996px) {
+  :root {
+    --ifm-secondary-nav-height: 0px;
+    --ifm-navbar-padding-horizontal: 20px;
+    --ifm-spacing-horizontal: 20px;
+  }
+}
+
 
 /* Fix sidebar border to not extend behind navbar */
 @media (min-width: 997px) {

src/theme/Footer/styles.module.css

@@ -8,17 +8,17 @@
   -webkit-backdrop-filter: blur(12px);
 }
 
-/* Sticky to viewport bottom only on top-level category index pages */
-:global(body:has([class*='topLevelCategory'])) .footer {
-  position: sticky;
-  bottom: 0;
-  z-index: 50;
-}
+/* Footer flows as the last block element in the page — no
+   sticky/overlay so content scrolls under it instead of behind it. */
 
-/* On desktop docs pages, scope the footer to the main content column only */
+/* On desktop docs pages, scope the footer to the main content column.
+   The 1px left border continues the sidebar's right-edge divider line
+   down through the footer so the vertical rule doesn't break at the
+   article/footer boundary. */
 @media (min-width: 997px) {
   :global(html.docs-wrapper) .footer {
-    margin-left: 307px;
+    margin-left: 306px;
+    border-left: 1px solid var(--ifm-section-divider-color);
   }
 }
 
@@ -46,21 +46,29 @@
   pointer-events: none;
 }
 
+/* Full-width container so it left-aligns with the article column at
+   every viewport — matches the alignment of the page-nav links above
+   ("← Previous", "Next →"). The article column has its own
+   --ifm-spacing-horizontal padding; we mirror it here. */
 .container {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: 2rem;
-  width: 83%;
-  margin: 0 auto;
-  padding: 0 var(--neo-spacing_3_1_4);
-  transform: translateX(-120px);
+  gap: 1.25rem 2rem;
+  width: 100%;
+  margin: 0;
+  padding: 0 var(--ifm-spacing-horizontal, 1.5rem);
 }
 
-@media (max-width: 996px) {
-  .container {
-    transform: none;
-  }
+.links {
+  flex-wrap: nowrap;
+  min-width: 0;
+}
+
+.links a,
+.links span {
+  white-space: nowrap;
 }
 
 .social {
@@ -133,14 +141,23 @@
   pointer-events: none;
 }
 
+/* Stage 2 (medium): when the row gets too narrow to fit links + button
+   + socials inline, .actions wraps to a second line automatically via
+   .container's flex-wrap: wrap. No media query needed here — flexbox
+   handles it as soon as content doesn't fit.
+
+   Stage 3 (narrow): full vertical stack. */
 @media (max-width: 768px) {
   .container {
     flex-direction: column;
-    gap: 1.5rem;
+    align-items: flex-start;
+    gap: 1.25rem;
   }
 
   .links {
-    flex-wrap: wrap;
-    justify-content: center;
+    flex-direction: column;
+    align-items: flex-start;
+    flex-wrap: nowrap;
+    gap: 0.5rem;
   }
 }