refactor(docs-ui): top bar site logo = icon btn + adt-header-site-logo

- header: navbar-item adt-header-icon-btn adt-header-site-logo (same as GitHub VCS)
- site-doc-layout: apply icon control rules to all .navbar .adt-header-icon-logo
  in the header, not only .navbar-end (logo lives in .navbar-brand)
- override: retarget light tile + no SVG filter; fix :focus vs transparent for logo

Made-with: Cursor

Author: AMDphreak

site/supplemental-ui/css/site-doc-layout.css

@@ -178,33 +178,14 @@ pre,
   column-gap: 0.15rem;
 }
 
-.adt-header-logo-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  width: var(--adt-header-ctrl);
-  height: var(--adt-header-ctrl);
-  min-width: var(--adt-header-ctrl);
-  min-height: var(--adt-header-ctrl);
-  padding: 0;
-  line-height: 0;
-  border-radius: 0.2rem;
-  text-decoration: none;
-  box-sizing: border-box;
-}
-
-.adt-header-logo-item:hover,
-.adt-header-logo-item:focus {
-  background: var(--adt-header-bar-hover);
-  outline: none;
-}
-
-.adt-header-logo {
+/* Optional hook for the site logo: same as .adt-header-icon-btn (see below) + this class. */
+.adt-header-icon-btn.adt-header-site-logo .adt-header-logo {
   display: block;
   width: 30px;
   height: 30px;
   object-fit: contain;
+  pointer-events: none;
+  flex-shrink: 0;
 }
 
 /* Dark-mode FTN header logo: see css/site-header-logo-override.css (logo link background +
@@ -230,8 +211,8 @@ a.adt-header-title:focus {
   opacity: 0.9;
 }
 
-/* Header end controls (GitHub, theme) — one shape; beats site-extra .theme-toggle:hover colors. */
-.header.adt-header .navbar .navbar-end .adt-header-icon-btn {
+/* Top bar icon controls (logo, GitHub, theme): one shape. Include .navbar-brand, not only .navbar-end. */
+.header.adt-header .navbar .adt-header-icon-btn {
   min-width: var(--adt-header-ctrl) !important;
   min-height: var(--adt-header-ctrl) !important;
   width: var(--adt-header-ctrl) !important;
@@ -251,17 +232,17 @@ a.adt-header-title:focus {
 }
 
 /* :focus (mouse click) would keep the “hover” fill until click-away—use :focus-visible for keyboard. */
-.header.adt-header .navbar .navbar-end .adt-header-icon-btn:hover {
+.header.adt-header .navbar .adt-header-icon-btn:hover {
   background: var(--adt-header-bar-hover) !important;
   text-decoration: none;
 }
 
-.header.adt-header .navbar .navbar-end .adt-header-icon-btn:focus {
+.header.adt-header .navbar .adt-header-icon-btn:focus {
   outline: none;
   background: transparent !important;
 }
 
-.header.adt-header .navbar .navbar-end .adt-header-icon-btn:focus-visible {
+.header.adt-header .navbar .adt-header-icon-btn:focus-visible {
   background: var(--adt-header-bar-hover) !important;
   outline: 2px solid var(--adt-header-bar-fg);
   outline-offset: 2px;

site/supplemental-ui/css/site-header-logo-override.css

@@ -1,29 +1,30 @@
-/* Load after site-doc-layout (head-meta). Separate file to avoid long-lived cache on
-   site-doc-layout.css. Target is the *button* (the logo link) background in dark mode,
-   not text — the <a> is img-only, but the hit area must read as a filled control. */
-html.dark-theme a.adt-header-logo-item,
-html.dark-theme .navbar a.adt-header-logo-item,
-html.dark-theme .adt-header-logo-item {
+/* Load after site-doc-layout (head-meta). Markup: navbar-item adt-header-icon-btn adt-header-site-logo
+   (same as other top bar icon buttons) + adt-header-site-logo for per-site / per-logo overrides. */
+/* Dark: light “button” fill so the full control matches the other top bar hit targets. */
+html.dark-theme .header.adt-header .navbar .navbar-item.adt-header-icon-btn.adt-header-site-logo,
+html.dark-theme .header.adt-header .navbar a.adt-header-icon-btn.adt-header-site-logo {
   background: #eef0f3 !important;
   background-color: #eef0f3 !important;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1) !important;
 }
 
-html.dark-theme a.adt-header-logo-item:hover,
-html.dark-theme a.adt-header-logo-item:focus,
-html.dark-theme .navbar a.adt-header-logo-item:hover,
-html.dark-theme .navbar a.adt-header-logo-item:focus,
-html.dark-theme .adt-header-logo-item:hover,
-html.dark-theme .adt-header-logo-item:focus {
+html.dark-theme .header.adt-header .navbar .adt-header-icon-btn.adt-header-site-logo:hover {
   background: #dde1e6 !important;
   background-color: #dde1e6 !important;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
 }
 
+/* site-doc-layout uses :focus { background: transparent } on all icon btn — re-apply the tile for the site logo. */
+html.dark-theme .header.adt-header .navbar .adt-header-icon-btn.adt-header-site-logo:focus,
+html.dark-theme .header.adt-header .navbar .adt-header-icon-btn.adt-header-site-logo:focus-visible {
+  background: #eef0f3 !important;
+  background-color: #eef0f3 !important;
+}
+
 /* antora-dark-theme: do not recolor the SVG */
-html.dark-theme .adt-header-logo,
-html.dark-theme a.adt-header-logo-item .adt-header-logo,
-html.dark-theme a.adt-header-logo-item > img {
+html.dark-theme .adt-header-site-logo .adt-header-logo,
+html.dark-theme .adt-header-icon-btn.adt-header-site-logo .adt-header-logo,
+html.dark-theme .adt-header-icon-btn.adt-header-site-logo > img {
   filter: none !important;
   opacity: 1 !important;
 }

site/supplemental-ui/partials/header-content.hbs

@@ -1,7 +1,7 @@
 <header class="header adt-header">
   <nav class="navbar adt-site-navbar" aria-label="Site">
     <div class="navbar-brand adt-header-brand">
-      <a class="adt-header-logo-item" href="{{{or (lookup site.keys 'foodtrucknerdz_com') 'https://foodtrucknerdz.com'}}}" rel="noopener" target="_blank" title="foodtrucknerdz.com" aria-label="foodtrucknerdz.com (opens in new tab)">
+      <a class="navbar-item adt-header-icon-btn adt-header-site-logo" href="{{{or (lookup site.keys 'foodtrucknerdz_com') 'https://foodtrucknerdz.com'}}}" rel="noopener" target="_blank" title="foodtrucknerdz.com" aria-label="foodtrucknerdz.com (opens in new tab)">
         <img class="adt-header-logo" src="{{{uiRootPath}}}/img/foodtrucknerdz.svg" width="34" height="34" alt="" />
       </a>
       <a class="navbar-item adt-header-title" href="{{{or site.url siteRootPath}}}">{{detag (or (lookup site.keys 'title_bar_brand') (or site.title 'FTN Docs'))}}</a>