diff --git a/src/css/custom.css b/src/css/custom.css
index a37a65f02..b40fda1aa 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -136,14 +136,121 @@ h4,
   display: flex;
 }
 .menu__link--sublist:after {
+  /* Keep sidebar chevron size consistent with leaf items */
   background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
 }
 
+/* Ensure category caret variants use the same icon size in the sidebar */
+div[class^="sidebar_"] .menu__link--sublist-caret:after {
+  background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
+  height: 1.5rem;
+  min-width: 1.5rem;
+}
+div[class^="sidebar_"] .menu__caret:before {
+  background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 div[class^="sidebar_"]
   .menu__link.menu__link--active:not(.menu__link--sublist) {
   padding-right: calc(var(--ifm-menu-link-padding-horizontal) - 2px);
 }
 
+/* Do not highlight category labels (that also have pages) as active; only leaf pages should be highlighted */
+div[class^="sidebar_"] .menu__link--sublist.menu__link--active {
+  color: inherit !important;
+  font-weight: inherit;
+}
+
+/* Do NOT bold category when on its own page */
+div[class^="sidebar_"] .menu__list-item-collapsible--active .menu__link--sublist {
+  color: inherit !important;
+  font-weight: inherit;
+}
+/* And keep color unchanged even on hover when on its own page */
+div[class^="sidebar_"] .menu__list-item-collapsible--active .menu__link--sublist:hover {
+  color: inherit !important;
+}
+
+/* Explicitly neutralize color when category link is both sublist and active (own page) */
+div[class^="sidebar_"] .menu__list-item-collapsible--active .menu__link--sublist.menu__link--active {
+  color: inherit !important;
+}
+
+/* When the category's own page is current, do not change its color/background/weight */
+div[class^="sidebar_"] .menu__list-item-collapsible .menu__link[aria-current="page"] {
+  color: inherit !important;
+  background: transparent !important;
+  font-weight: inherit !important;
+}
+div[class^="sidebar_"] .menu__list-item-collapsible .menu__link[aria-current="page"]:hover,
+div[class^="sidebar_"] .menu__list-item-collapsible .menu__link[aria-current="page"]:focus,
+div[class^="sidebar_"] .menu__list-item-collapsible .menu__link[aria-current="page"].menu__link--active {
+  color: inherit !important;
+  /* prevent extra link-layer background; container provides unified hover */
+  background-color: transparent !important;
+  font-weight: inherit !important;
+}
+
+/* Strong override: category with its own current page should use normal menu color (not active black) */
+div[class^="sidebar_"] .menu__link--sublist.menu__link--active[aria-current="page"] {
+  color: var(--ifm-menu-color) !important;
+}
+
+/* Extra-specific guard: ensure normal color for category labels on their own page */
+div[class^="sidebar_"] li.menu__list-item > a.menu__link.menu__link--sublist[aria-current="page"],
+div[class^="sidebar_"] li.menu__list-item > a.menu__link.menu__link--sublist[aria-current="page"].menu__link--active,
+div[class^="sidebar_"] li.menu__list-item > div.menu__list-item-collapsible > a.menu__link.menu__link--sublist[aria-current="page"] {
+  color: var(--ifm-menu-color) !important;
+  background: transparent !important;
+  font-weight: inherit !important;
+}
+
+/* Restore hover background for categories with their own page when hovering that link */
+div[class^="sidebar_"] li.menu__list-item > a.menu__link.menu__link--sublist[aria-current="page"]:hover,
+div[class^="sidebar_"] li.menu__list-item > div.menu__list-item-collapsible > a.menu__link.menu__link--sublist[aria-current="page"]:hover {
+  /* prevent extra link-layer hover; container provides unified hover */
+  background-color: transparent !important;
+}
+
+/* Unify hover background for text + caret (arrow) when category has its own page */
+/* Use unified hover on container; clear child backgrounds to prevent double overlays */
+div[class^="sidebar_"] .menu__list-item-collapsible--active:hover {
+  background-color: var(--ifm-menu-color-background-hover) !important;
+}
+div[class^="sidebar_"] .menu__list-item-collapsible--active:hover > a.menu__link,
+div[class^="sidebar_"] .menu__list-item-collapsible--active:hover > .menu__caret {
+  background-color: transparent !important;
+}
+
+/* For categories with pages (collapsible) when NOT on their page: hover on arrow OR text gives one unified background */
+div[class^="sidebar_"] .menu__list-item-collapsible:not(.menu__list-item-collapsible--active):hover {
+  background-color: var(--ifm-menu-color-background-hover) !important;
+}
+div[class^="sidebar_"] .menu__list-item-collapsible:not(.menu__list-item-collapsible--active):hover > a.menu__link,
+div[class^="sidebar_"] .menu__list-item-collapsible:not(.menu__list-item-collapsible--active):hover > .menu__caret {
+  background-color: transparent !important;
+}
+/* Ensure link text color does not change on hover in this specific case */
+div[class^="sidebar_"] .menu__list-item-collapsible--active:hover > a.menu__link {
+  color: inherit !important;
+}
+
+/* Remove background highlight when category's own page is active; keep hover behavior */
+div[class^="sidebar_"] .menu__list-item-collapsible--active {
+  background: transparent !important;
+}
+
+
+/* Parent style when a child page is active is handled below for light mode (orange) */
+
+/* Light mode: use orange color (no bold) for parent when a child page is active */
+html[data-theme="light"] div[class^="sidebar_"] .menu__list-item-collapsible:not(.menu__list-item-collapsible--active) .menu__link--sublist.menu__link--active {
+  color: var(--ifm-color-primary) !important;
+  font-weight: inherit;
+}
+
 div[class^="sidebar_"] .button {
   @apply mx-auto mb-2 w-full border-0;
 }
@@ -151,6 +258,15 @@ div[class^="sidebar_"] .button svg {
   @apply mx-auto;
 }
 
+/* Prevent descenders (g, y, p) from clipping in sidebar, including when bold/active */
+div[class^="sidebar_"] .menu__link {
+  line-height: 1.5;
+  padding-bottom: calc(var(--ifm-menu-link-padding-vertical) + 1px);
+}
+div[class^="sidebar_"] .menu__link.menu__link--active {
+  line-height: 1.5; /* ensure active/bold state also has enough leading */
+}
+
 .table-of-contents {
   @apply border-none pt-12;
 }