/* =========================================================
   VERICUT CUSTOM CSS
   Purpose:
   Header, TOC, search, permalink, scrollbars, themes,
   layout, footer, and right/left TOC styling.

   NOTE:
   Logic unchanged. Only comments/section organization added.
========================================================= */


/* =========================================================
   SECTION 1: HEADER CUSTOMIZATION
========================================================= */

/* Same header color in light and dark mode */
.md-header {
    background-color: #002a3a !important;
}

/* Header logo size */
.md-header__button.md-logo img {
    height: 2.0rem;
    width: auto;
}

/* Lock header title typography */
.md-header__title,
.md-header__title * {
  font-weight: 500 !important;
  font-size: 1.3rem !important;
  transition: none !important;
}


/* =========================================================
   SECTION 2: LEFT TABLE OF CONTENTS WIDTH + TITLE
========================================================= */

/* Sidebar width adjustment */
.md-sidebar--primary {
    width: 300px !important;
    min-width: 250px !important;
    max-width: 350px !important;
}




/* =========================================================
   SECTION 3: RIGHT TOC SELECTED / HOVER STATE
========================================================= */

/* Only manually selected right TOC item gets dark grey */
.md-sidebar--secondary .md-nav__link.vericut-roc-clicked,
.md-sidebar--secondary .md-nav__link.vericut-roc-clicked:hover {
  background-color: #e0e0e0 !important;
  color: #002a3a !important;
  font-weight: 500;
  border-radius: 6px;
}

/* Remove hover overlay used by theme */
.md-sidebar--secondary .md-nav__link::before,
.md-sidebar--secondary .md-nav__link:hover::before {
    background: transparent !important;
}

/* Instant feedback on click */
.md-sidebar--secondary .md-nav__link:active {
  background-color: #e0e0e0;
  color: #002a3a;
}

/* Lock right TOC text color */
.md-sidebar--secondary .md-nav__link {
  color: inherit !important;
  opacity: 1 !important;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

/* Right TOC text color in light mode */
[data-md-color-scheme="default"] .md-sidebar--secondary .md-nav__link:not(.vericut-roc-clicked) {
  color: #000000 !important;
  opacity: 1 !important;
}

/* Right TOC text color in dark mode */
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link:not(.vericut-roc-clicked) {
  color: #ffffff !important;
  opacity: 1 !important;
}


/* =========================================================
   SECTION 4: PERMALINK / HEADERLINK STYLE
========================================================= */

.headerlink,
:target > .headerlink {
    color: #bebebe !important;
    opacity: 1 !important;
}

.headerlink:hover {
    color: #002a3a !important;
}


/* =========================================================
   SECTION 5: SCROLLBARS - CHROME / EDGE / SAFARI
========================================================= */

/* Outer page scrollbar */
html::-webkit-scrollbar {
    width: 20px;
}

html::-webkit-scrollbar-track {
    background: #e0e0e0;
}

html::-webkit-scrollbar-thumb {
    background-color: #002a3a;
    border-radius: 12px;
    border: 4px solid #e0e0e0;
}

/* Inner left TOC scrollbar */
.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar {
    width: 20px;
}

.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-track {
    background: #e0e0e0;
}

.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
    background-color: #002a3a;
    border-radius: 12px;
    border: 4px solid #e0e0e0;
}


/* =========================================================
   SECTION 6: SCROLLBARS - FIREFOX
========================================================= */

/* Outer page scrollbar */
html {
    scrollbar-width: auto;
    scrollbar-color: #002a3a #e0e0e0;
}

/* Inner left TOC scrollbar */
.md-sidebar--primary .md-sidebar__scrollwrap {
    scrollbar-width: auto;
    scrollbar-color: #002a3a #e0e0e0;
}


/* =========================================================
   SECTION 7: SEARCH BOX STYLE
========================================================= */

/* Search box permanent grey */
.md-search__form {
    background-color: #e0e0e0 !important;
    border-color: #e0e0e0 !important;
}

.md-search__form:hover,
.md-search__form:focus-within {
    background-color: #e0e0e0 !important;
    border-color: #e0e0e0 !important;
}


/* =========================================================
   SECTION 8: LEFT TOC ACTIVE LINK STYLE
========================================================= */

.md-sidebar--primary a.md-nav__link[aria-current="page"],
.md-sidebar--primary a.md-nav__link[aria-current="page"]:hover,
.md-sidebar--primary a.md-nav__link.vericut-left-clicked,
.md-sidebar--primary a.md-nav__link.vericut-left-clicked:hover {
    color: #002a3a !important;
    background-color: #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 0.35rem 0.6rem !important;
    font-weight: 600 !important;
    display: block !important;
}


/* =========================================================
   SECTION 9: BACK TO TOP BUTTON
========================================================= */

.md-top:hover,
.md-top:focus {
    background-color: #e0e0e0 !important;
    color: #002a3a !important;
}


/* =========================================================
   SECTION 10: LIGHT THEME VARIABLES
========================================================= */

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #03203d;
  --md-header-bg-color: #002a3a;
  --md-header-fg-color: #ffffff;
  --md-sidebar-bg-color: #f8f8f8;
  --md-sidebar-fg-color: #020202;
  --md-default-bg-color: #ffffff;
  --md-default-fg-color: #020202;
  --md-footer-bg-color: #ffffff;
  --md-footer-fg-color: #020202;
  --md-elevation-shadow: rgba(0, 0, 0, 0.15);
  --md-scrollbar-track-bg: #e0e0e0;
  --md-scrollbar-thumb-bg: #002a3a;
}


/* =========================================================
   SECTION 11: DARK THEME VARIABLES
========================================================= */

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #ffffff;
  --md-header-bg-color: #002a3a;
  --md-header-fg-color: #ffffff;
  --md-sidebar-bg-color: #1a1a1a;
  --md-sidebar-fg-color: #ffffff;
  --md-default-bg-color: #1e1e1e;
  --md-default-fg-color: #ffffff;
  --md-footer-bg-color: #121212;
  --md-footer-fg-color: #ffffff;
  --md-elevation-shadow: rgba(0, 0, 0, 0.15);
  --md-scrollbar-track-bg: #b0b0b0;
  --md-scrollbar-thumb-bg: #4a4a4a;
  color: #ffffff !important;
}


/* =========================================================
   SECTION 12: DARK MODE TEXT COLORS
========================================================= */

[data-md-color-scheme="slate"] h1,
[data-md-color-scheme="slate"] h2,
[data-md-color-scheme="slate"] h3,
[data-md-color-scheme="slate"] h4,
[data-md-color-scheme="slate"] h5,
[data-md-color-scheme="slate"] h6,
[data-md-color-scheme="slate"] p,
[data-md-color-scheme="slate"] li,
[data-md-color-scheme="slate"] span {
  color: #ffffff !important;
}


/* =========================================================
   SECTION 13: HEADER + SEARCH BUTTON
========================================================= */

[data-md-color-scheme="default"] .md-header {
  background-color: #002a3a;
  color: #ffffff !important;
}

.md-search__button {
  margin: 0 !important;
  color: var(--md-header-fg-color) !important;
}

.md-search__button:before {
    background-color: #fffffffe;
}

.md-search__button:after {
    background: #b5b2b2b2;
    border-radius: .2rem;
    content: "Ctrl+K";
    display: block;
    font-size: .6rem;
    padding: .1rem .2rem;
    position: absolute;
    right: .6rem;
    top: .35rem;
}

/* Search button permanent color */
.md-search__button {
    background-color: #08374a !important;
    color: #ffffff !important;
}

@media screen and (min-width: 45em) {
  .md-search__button:hover,
  .md-search__button:focus {
    background-color: #094861 !important;
  }
}

/* Move search bar to right */
.md-search {
    justify-self: end;
}


/* =========================================================
   SECTION 14: BREADCRUMBS / NAVIGATION PATH
========================================================= */

.md-path__link {
    color: #002a3a !important;
    font-weight: 500;
}

.md-path__separator {
    color: #6e6e6e !important;
}

.md-path__link:hover {
    color: #002a3a !important;
    text-decoration: underline;
}


/* =========================================================
   SECTION 15: GENERAL NAV TEXT / SEARCH HIGHLIGHT
========================================================= */

/* Ellipsis handling */
.md-nav__link.md-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Exact phrase search highlight */
.exact-phrase {
  background-color: #ff9800;
  color: #000;
  padding: 0 2px;
  border-radius: 2px;
}

/* Right TOC scrollbar color */
.md-sidebar--secondary .md-sidebar__scrollwrap {
  scrollbar-color: #002a3a #e0e0e0;
}


/* =========================================================
   SECTION 16: BODY CONTENT LINKS
========================================================= */

.md-content a:not(.headerlink),
.md-content a:not(.headerlink):visited {
  color: #459db9 !important;
  font-weight: 500;
}

.md-content a:not(.headerlink):hover,
.md-content a:not(.headerlink):focus {
  font-weight: 540;
  text-decoration: underline;
}


/* =========================================================
   SECTION 17: HEADERLINK ICON
========================================================= */

.md-content .headerlink,
.md-content .headerlink:focus,
.md-content .headerlink:active,
.md-content :target > .headerlink {
  color: #6e6e6e !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  background: none !important;
}

.md-content .headerlink:hover {
  color: #459db9 !important;
}

/* Change headerlink symbol */
.md-content .headerlink {
  font-size: 0;
}

.md-content .headerlink::after {
  content: "🔗";
  font-size: 0.9rem;
  font-weight: 400;
}


/* =========================================================
   SECTION 18: HIDE TOC INFO ICONS
========================================================= */

.md-nav__item .md-status,
.md-nav__item .md-meta {
    display: none !important;
}


/* =========================================================
   SECTION 19: RIGHT TOC ACTIVE HEADING OFFSET
========================================================= */

.md-content h1,
.md-content h2,
.md-content h3,
.md-content h4,
.md-content h5,
.md-content h6 {
  scroll-margin-top: 5rem;
}


/* =========================================================
   SECTION 20: DUPLICATE LEFT TOC ACTIVE LABEL FIX
========================================================= */

/* Hide duplicate active label when same item has real page link */
.md-sidebar--primary .md-nav__item--active > label.md-nav__link.md-nav__link--active[for="__toc"] {
  display: none !important;
}

/* Fix spacing when nested label and real link both exist */
.md-sidebar--primary .md-nav__item > label.md-nav__link + a.md-nav__link.vericut-left-clicked {
  margin-top: 0 !important;
}

.md-sidebar--primary .md-nav__item > label.md-nav__link.md-nav__link--active + a.md-nav__link.vericut-left-clicked {
  display: block !important;
}


/* =========================================================
   SECTION 21: SIDEBAR POSITIONING + WIDTHS
========================================================= */

/* Stronger right TOC fix */
.md-sidebar--secondary {
  top: 4.8rem !important;
}

.md-sidebar--secondary .md-sidebar__scrollwrap {
  max-height: calc(100vh - 4.8rem) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 1rem !important;
}

/* Center On This Page */
.md-sidebar--secondary .md-nav__title {
  display: block !important;
  text-align: center !important;
  font-weight: 600 !important;
  font-size: 0.86rem;
}

/* Make left and right sidebars start at same height */
.md-sidebar--primary,
.md-sidebar--secondary {
  top: 4.8rem !important;
}

/* Keep TOC widths fixed */
.md-sidebar--primary {
  width: 320px !important;
  min-width: 320px !important;
  max-width: 320px !important;
}

.md-sidebar--secondary {
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
}

/* Increase middle content width */
.md-grid {
  max-width: 1500px !important;
}

/* Let article area grow wider */
.md-content {
  max-width: none !important;
}

.md-content__inner {
  max-width: none !important;
  margin-right: 0 !important;
}


/* =========================================================
   SECTION 22: LEFT TOC CLEAN FINAL - LIGHT MODE
========================================================= */

/* Default file links */
.md-sidebar--primary .md-nav__item > a.md-nav__link {
  font-weight: 400 !important;
  color: #000000 !important;
  background-color: transparent !important;
  border-radius: 6px !important;
}

/* Folder / section labels */
.md-sidebar--primary .md-nav__item--nested > label.md-nav__link,
.md-sidebar--primary .md-nav__item--nested > .md-nav__link {
  font-weight: 600 !important;
  color: #000000 !important;
}

/* Current / selected child file */
.md-sidebar--primary .md-nav__item--active > a.md-nav__link,
.md-sidebar--primary .md-nav__item--active > a.md-nav__link:hover,
.md-sidebar--primary .md-nav__item > a.md-nav__link[aria-current="page"],
.md-sidebar--primary .md-nav__item > a.md-nav__link[aria-current="page"]:hover,
.md-sidebar--primary .md-nav__item > a.md-nav__link.vericut-left-clicked,
.md-sidebar--primary .md-nav__item > a.md-nav__link.vericut-left-clicked:hover {
  background-color: #e0e0e0 !important;
  color: #002a3a !important;
  font-weight: 600 !important;
}


/* =========================================================
   SECTION 23: LEFT TOC CLEAN FINAL - DUPLICATE BLOCK
   Kept as-is because you asked not to remove anything.
========================================================= */

/* Default file links */
.md-sidebar--primary .md-nav__item > a.md-nav__link {
  font-weight: 400 !important;
  color: #000000 !important;
  background-color: transparent !important;
  border-radius: 6px !important;
}

/* Folder / section labels */
.md-sidebar--primary .md-nav__item--nested > label.md-nav__link,
.md-sidebar--primary .md-nav__item--nested > .md-nav__link {
  font-weight: 600 !important;
  color: #000000 !important;
}

/* Current / selected child file */
.md-sidebar--primary .md-nav__item--active > a.md-nav__link,
.md-sidebar--primary .md-nav__item--active > a.md-nav__link:hover,
.md-sidebar--primary .md-nav__item > a.md-nav__link[aria-current="page"],
.md-sidebar--primary .md-nav__item > a.md-nav__link[aria-current="page"]:hover,
.md-sidebar--primary .md-nav__item > a.md-nav__link.vericut-left-clicked,
.md-sidebar--primary .md-nav__item > a.md-nav__link.vericut-left-clicked:hover {
  background-color: #e0e0e0 !important;
  color: #002a3a !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}


/* =========================================================
   SECTION 24: RIGHT TOC SELECTED / HOVER FINAL
========================================================= */

/* Right TOC selected - only custom class */
.md-sidebar--secondary .md-nav__link.vericut-roc-clicked,
.md-sidebar--secondary .md-nav__link.vericut-roc-clicked:hover {
  background-color: #e0e0e0 !important;
  color: #002a3a !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 0.35rem 0.6rem !important;
}

.md-sidebar--secondary .md-nav__link:hover {
  background-color: #f2f2f2 !important;
  color: #002a3a !important;
  border-radius: 6px !important;
}


/* =========================================================
   SECTION 25: DARK MODE LEFT TOC FIXES
========================================================= */

/* Reset folder tabs to normal */
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__item--nested > label.md-nav__link {
  background-color: transparent !important;
  color: #ffffff !important;
  border-radius: 0 !important;
}

/* Remove white hover overlay */
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__link::before,
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__link:hover::before,
[data-md-color-scheme="slate"] .md-sidebar--primary label.md-nav__link::before,
[data-md-color-scheme="slate"] .md-sidebar--primary label.md-nav__link:hover::before {
  background: transparent !important;
  opacity: 0 !important;
}

/* Dark mode hover only */
[data-md-color-scheme="slate"] .md-sidebar--primary a.md-nav__link:hover,
[data-md-color-scheme="slate"] .md-sidebar--primary label.md-nav__link:hover {
  background-color: #4a4a4a !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}

/* Dark mode selected tab */
[data-md-color-scheme="slate"] .md-sidebar--primary a.md-nav__link[aria-current="page"],
[data-md-color-scheme="slate"] .md-sidebar--primary a.md-nav__link.md-nav__link--active,
[data-md-color-scheme="slate"] .md-sidebar--primary a.md-nav__link.vericut-left-clicked {
  background-color: #4a4a4a !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

/* Remove white hover overlay globally in dark mode */
[data-md-color-scheme="slate"] .md-nav__link::before,
[data-md-color-scheme="slate"] .md-nav__link:hover::before {
  background: transparent !important;
  opacity: 0 !important;
}

/* Force dark hover */
[data-md-color-scheme="slate"] .md-nav__link:hover {
  background-color: #4a4a4a !important;
  color: #ffffff !important;
}


/* =========================================================
   SECTION 26: LIGHT / DARK HOVER FOR LEFT TOC FILE LINKS
========================================================= */

/* Hover only for non-selected file links - light mode */
[data-md-color-scheme="default"] .md-sidebar--primary .md-nav__item > a.md-nav__link:not([aria-current="page"]):not(.vericut-left-clicked):hover {
  background-color: #f2f2f2 !important;
  color: #002a3a !important;
}

/* Hover only for non-selected file links - dark mode */
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__item > a.md-nav__link:not([aria-current="page"]):not(.vericut-left-clicked):hover {
  background-color: #4a4a4a !important;
  color: #ffffff !important;
}


/* =========================================================
   SECTION 27: LEFT TOC SCROLLBAR BEHAVIOR
========================================================= */

.md-sidebar--primary .md-sidebar__scrollwrap {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}


/* =========================================================
   SECTION 28: DARK MODE RIGHT + LEFT TOC ACTIVE FIX
========================================================= */

[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link.vericut-roc-clicked,
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link.vericut-roc-clicked:hover,
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link.md-nav__link--active,
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link.md-nav__link--active:hover,
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link[aria-current="true"],
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__item--active > a.md-nav__link,
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__item--active > a.md-nav__link:hover {
  background-color: #4a4a4a !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

/* Remove white hover layer on right TOC */
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link::before,
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link:hover::before {
  background: transparent !important;
  opacity: 0 !important;
}

[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link.vericut-roc-clicked {
  background-color: #4a4a4a !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}


/* =========================================================
   SECTION 29: DARK MODE RIGHT TOC SINGLE SELECTED FIX
   Keeps light mode unchanged.
========================================================= */

/* In dark mode, theme-active right TOC items stay normal unless custom clicked */
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link.md-nav__link--active:not(.vericut-roc-clicked),
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link[aria-current="true"]:not(.vericut-roc-clicked),
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link[aria-current="page"]:not(.vericut-roc-clicked) {
  background-color: transparent !important;
  color: #ffffff !important;
  font-weight: 400 !important;
  border-radius: 0 !important;
}

/* In dark mode, only clicked right TOC item gets selected tab */
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link.vericut-roc-clicked,
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link.vericut-roc-clicked:hover {
  background-color: #4a4a4a !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}


/* =========================================================
   SECTION 30: RIGHT TOC TITLE ROW + 3-BAR BUTTON
========================================================= */

/* Keep left TOC title normal*/
.md-sidebar--primary::before {
  content: "Table of Contents";
} 

/* Right TOC title row only */
.vericut-toc-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: var(--md-default-fg-color);
}

/* Small 3-bar icon only for right TOC */
#vericut-right-toggle {
  background: #002a3a;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  width: 18px;
  height: 18px;
  font-size: 0.65rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

#vericut-right-toggle:hover {
  background: #094861;
}

/* Hide right TOC list only, not title/icon */
body.vericut-hide-right-toc .md-sidebar--secondary nav.md-nav > ul {
  display: none !important;
}

/* Content expands slightly when right TOC is hidden */
body.vericut-hide-right-toc .md-grid {
  max-width: 1630px !important;
}


/* Hide only stray text like "Made with" */
.md-copyright {
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Restore actual copyright line */
.md-copyright__highlight {
  font-size: 0.64rem !important;
  line-height: normal !important;
}

/* Remove Zensical link if still present */
.md-copyright a[href*="zensical"] {
  display: none !important;
}


/* =========================================================
   SECTION 32: WEBKIT SIDEBAR SCROLL SUPPORT
========================================================= */

@supports selector(::-webkit-scrollbar) {
  [dir="ltr"] .md-sidebar__inner {
    padding-right: calc(100% - 16rem);
  }

  /* Show scrollbar only when TOC content overflows */
  .md-sidebar--primary .md-sidebar__scrollwrap {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .md-sidebar--primary .md-sidebar__inner {
    min-height: auto !important;
    height: auto !important;
  }
}


/* =========================================================
   SECTION 33: PREVENT TOCS FROM RUNNING OVER FOOTER
========================================================= */

.md-sidebar--primary,
.md-sidebar--secondary {
  position: sticky !important;
  top: 4.8rem !important;
  align-self: flex-start !important;
}

.md-sidebar--primary .md-sidebar__scrollwrap,
.md-sidebar--secondary .md-sidebar__scrollwrap {
  max-height: calc(100vh - 14.5rem) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 0.5rem !important;
}


/* =========================================================
   SECTION 34: CTRL+K POSITION FIX
========================================================= */

.md-search__button {
  position: relative !important;
}

.md-search__button::after {
  content: "Ctrl+K";
  position: absolute !important;
  right: 0.55rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  background: #8a8f93 !important;
  color: #ffffff !important;
  border-radius: 0.25rem !important;
  padding: 0.1rem 0.35rem !important;

  font-size: 0.6rem !important;
  line-height: 1.2 !important;
  height: auto !important;
}


/* =========================================================
   SECTION 35: FOOTER HEIGHT / SPACING
========================================================= */

.md-footer .md-footer__link {
  min-height: 2rem !important;
  padding-top: 0.2rem !important;
  padding-bottom: 0.2rem !important;
}

.md-footer .md-footer__title,
.md-footer .md-ellipsis,
.md-footer .md-footer__direction {
  line-height: 1 !important;
}


/* =========================================================
   SECTION 36: RIGHT TOC TITLE STICKY + SCROLL AREA
========================================================= */

/* Right TOC title stays outside scroll area */
.md-sidebar--secondary .vericut-right-title-row {
  position: sticky !important;
  top: 4.8rem !important;
  z-index: 20 !important;
  background: var(--md-default-bg-color) !important;
  padding: 0.4rem 0 !important;
  margin-bottom: 0.3rem !important;
}

/* Only TOC content scrolls */
.md-sidebar--secondary .md-sidebar__scrollwrap {
  max-height: calc(100vh - 13.5rem) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}


/* =========================================================
   SECTION 37: RIGHT TOC SAME AS LEFT TOC
========================================================= */

/* Normal right TOC item */
.md-sidebar--secondary .md-nav__link {
  font-weight: 400 !important;
  background-color: transparent !important;
  border-radius: 6px !important;
  padding: 0.35rem 0.6rem !important;
}

/* Right TOC hover */
.md-sidebar--secondary .md-nav__link:hover {
  background-color: #f2f2f2 !important;
  color: #002a3a !important;
}

/* Right TOC selected */
.md-sidebar--secondary .md-nav__link.vericut-roc-clicked,
.md-sidebar--secondary .md-nav__link.md-nav__link--active,
.md-sidebar--secondary .md-nav__link[aria-current="true"] {
  background-color: #e0e0e0 !important;
  color: #002a3a !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

/* Move right TOC slightly right without breaking hide toggle */
.md-sidebar--secondary .md-sidebar__scrollwrap {
  padding-left: 1.5rem !important;
}


/* =========================================================
   SECTION 38: RIGHT TOC FINAL PROTECTED FIX
========================================================= */

/* Title row: 3-bar directly before On This Page */
.md-sidebar--secondary .vericut-right-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  width: 100% !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: var(--md-default-bg-color) !important;
  padding: 0.4rem 0 !important;
  margin: 0 0 0.5rem 0 !important;
}

.md-sidebar--secondary .vericut-right-title-row .md-nav__title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-align: center !important;
}

/* Final right TOC 3-bar button */
#vericut-right-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #002a3a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 0.65rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
  flex: 0 0 auto !important;
}

#vericut-right-toggle:hover {
  background: #094861 !important;
}

/* Normal right TOC item */
.md-sidebar--secondary .md-nav__link {
  font-weight: 400 !important;
  background-color: transparent !important;
  border-radius: 6px !important;
  padding: 0.35rem 0.6rem !important;
}

/* Right TOC hover */
.md-sidebar--secondary .md-nav__link:hover {
  background-color: #f2f2f2 !important;
  color: #002a3a !important;
}

/* Right TOC selected */
.md-sidebar--secondary .md-nav__link.vericut-roc-clicked,
.md-sidebar--secondary .md-nav__link.md-nav__link--active,
.md-sidebar--secondary .md-nav__link[aria-current="true"] {
  background-color: #e0e0e0 !important;
  color: #002a3a !important;
  font-weight: 525 !important;
  border-radius: 6px !important;
}

/* Hide right TOC list only, keep title/icon */
body.vericut-hide-right-toc .md-sidebar--secondary nav.md-nav > ul {
  display: none !important;
}

/* Dark mode right TOC final hover / selected */
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link.vericut-roc-clicked,
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link.md-nav__link--active,
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link[aria-current="true"] {
  background-color: #4a4a4a !important;
  color: #ffffff !important;
  font-weight: 525 !important;
}

/* =========================================
   Fix compressed desktop / 50% browser view
   Keeps hamburger TOC working
   ========================================= */

@media screen and (max-width: 1100px) {
  /* Hide only right TOC */
/* Right TOC drawer */
.md-sidebar--secondary {
  display: block !important;
  position: fixed !important;
  top: 3rem !important;
  right: 0 !important;
  z-index: 20 !important;
  width: 18rem !important;
  max-width: 85vw !important;
  height: calc(100vh - 3rem) !important;
  background: var(--md-default-bg-color) !important;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

/* Show right TOC when right hamburger is clicked */
[data-md-toggle="toc"]:checked ~ .md-container .md-sidebar--secondary {
  transform: translateX(0) !important;
}

  /* Keep left TOC available for hamburger */
  .md-sidebar--primary {
    position: fixed !important;
    top: 3rem !important;
    left: 0 !important;
    z-index: 20 !important;
    width: 18rem !important;
    max-width: 85vw !important;
    height: calc(100vh - 3rem) !important;
    background: var(--md-default-bg-color) !important;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  /* Show left TOC when hamburger is clicked */
  [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary {
    transform: translateX(0) !important;
  }

  .md-main__inner {
    margin: 0 !important;
    max-width: 100% !important;
  }

  .md-content {
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 760px !important;
    padding: 1rem 1.5rem !important;
  }

  .md-content__inner {
    margin: 0 !important;
    padding: 0 !important;
  }

  .md-typeset img {
    max-width: 100% !important;
    height: auto !important;
  }

  .md-typeset {
    overflow-wrap: anywhere;
  }
}

@media screen and (max-width: 1100px) {
  .md-sidebar--primary::before {
    display: none !important;
    content: none !important;
  }

  .md-sidebar--primary .md-nav__title {
    font-size: 0 !important;
    padding: 1rem !important;
    margin: 0 !important;
  }

  .md-sidebar--primary .md-nav__title .md-logo,
  .md-sidebar--primary .md-nav__title > a,
  .md-sidebar--primary .md-nav__title > span {
    display: none !important;
  }

  .md-sidebar--primary .md-nav__title::after {
    content: "Table of Contents";
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--md-default-fg-color);
  }
}


/* =========================================================
   FINAL MOBILE / TABLET DRAWER FIX
   Works for iPhone, Android, iPad, all browsers
========================================================= */

@media screen and (max-width: 1100px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  .md-main__inner {
    margin: 0 !important;
    max-width: 100% !important;
  }

  .md-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0.9rem 1rem !important;
    box-sizing: border-box !important;
  }

  .md-content__inner {
    margin: 0 !important;
    padding: 0 !important;
  }

  .md-sidebar--primary,
  .md-sidebar--secondary {
    position: fixed !important;
    top: 3rem !important;
    bottom: 0 !important;
    height: calc(100dvh - 3rem) !important;
    background: var(--md-default-bg-color) !important;
    z-index: 90 !important;
    overflow: hidden !important;
    transition: transform 0.25s ease !important;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.25) !important;
  }

  .md-sidebar--primary {
    left: 0 !important;
    right: auto !important;
    width: 82vw !important;
    max-width: 19rem !important;
    transform: translateX(-105%) !important;
  }

  .md-sidebar--secondary {
    right: 0 !important;
    left: auto !important;
    width: 72vw !important;
    max-width: 17rem !important;
    transform: translateX(105%) !important;
  }

  [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary {
    transform: translateX(0) !important;
  }

  .md-sidebar--secondary.custom-right-toc-open {
    transform: translateX(0) !important;
  }

  .md-sidebar--primary .md-sidebar__scrollwrap,
  .md-sidebar--secondary .md-sidebar__scrollwrap {
    max-height: calc(100dvh - 3rem) !important;
    height: calc(100dvh - 3rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 2rem !important;
  }

  .custom-right-toc-toggle {
    position: fixed !important;
    top: 4rem !important;
    right: 0.75rem !important;
    z-index: 120 !important;
    background: #ffffff !important;
    color: #002a3a !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 999px !important;
    width: 1.9rem !important;
    height: 1.9rem !important;
    min-width: 1.9rem !important;
    padding: 0 !important;
    font-size: 0.85rem !important;
    line-height: 1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
  }

  .custom-right-toc-toggle .toc-text {
    display: none !important;
  }

  body.vericut-left-open .custom-right-toc-toggle {
    display: none !important;
  }
}

@media screen and (min-width: 601px) and (max-width: 1100px) {
  .custom-right-toc-toggle {
    width: auto !important;
    min-width: auto !important;
    height: 2rem !important;
    padding: 0 0.65rem !important;
    font-size: 0.75rem !important;
    border-radius: 6px !important;
  }

  .custom-right-toc-toggle .toc-text {
    display: inline !important;
  }
}

/* Right TOC floating button: visible at top, faded after scroll */

@media screen and (max-width: 1100px) {
  .custom-right-toc-toggle.vericut-faded-until-hover {
    opacity: 0.22 !important;
  }

  .custom-right-toc-toggle:hover,
  .custom-right-toc-toggle:focus,
  .custom-right-toc-toggle:active,
  .custom-right-toc-toggle.vericut-faded-until-hover:hover,
  .custom-right-toc-toggle.vericut-faded-until-hover:focus,
  .custom-right-toc-toggle.vericut-faded-until-hover:active {
    opacity: 1 !important;
    background: #002a3a !important;
    color: #ffffff !important;
    border-color: #002a3a !important;
  }
}
/* Right TOC: strict one-highlight visual rule */
.md-sidebar--secondary .md-nav__link.md-nav__link--active,
.md-sidebar--secondary .md-nav__link[aria-current="true"],
.md-sidebar--secondary .md-nav__link[aria-current="page"],
.md-sidebar--secondary .md-nav__link.vericut-roc-clicked {
  background: transparent !important;
  color: inherit !important;
  font-weight: 400 !important;
}

.md-sidebar--secondary .md-nav__link.vericut-roc-current {
  background-color: #e0e0e0 !important;
  color: #002a3a !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link.vericut-roc-current {
  background-color: #4a4a4a !important;
  color: #ffffff !important;
}

/* Left TOC title */
.md-sidebar--primary::before {
  content: "Table of Contents";
  display: block;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--md-default-fg-color);
  margin-bottom: 0.4rem;
}

/* Dark mode fix for mobile right TOC floating button */
@media screen and (max-width: 1100px) {
  [data-md-color-scheme="slate"] .custom-right-toc-toggle {
    background: #002a3a !important;
    color: #ffffff !important;
    border: 1px solid #4a4a4a !important;
  }

  [data-md-color-scheme="slate"] .custom-right-toc-toggle .toc-icon,
  [data-md-color-scheme="slate"] .custom-right-toc-toggle .toc-text {
    color: #ffffff !important;
    opacity: 1 !important;
  }

  [data-md-color-scheme="slate"] .custom-right-toc-toggle:hover,
  [data-md-color-scheme="slate"] .custom-right-toc-toggle:focus,
  [data-md-color-scheme="slate"] .custom-right-toc-toggle:active {
    background: #094861 !important;
    color: #ffffff !important;
    border-color: #094861 !important;
    opacity: 1 !important;
  }

  [data-md-color-scheme="slate"] .md-sidebar--secondary {
    background: #1e1e1e !important;
  }
}
/* Fix right TOC disappearing/clipping at 100% zoom */
@media screen and (min-width: 1100px) {
  .md-grid {
    max-width: 1500px !important;
  }

  .md-sidebar--secondary {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    transform: none !important;
  }

  .md-sidebar--secondary .md-sidebar__scrollwrap {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .md-sidebar--secondary nav.md-nav,
  .md-sidebar--secondary nav.md-nav > ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media screen and (max-width: 1100px) {
  .md-sidebar--secondary {
    position: fixed !important;
    top: 3.1rem !important;
    right: 0 !important;
    left: auto !important;
    width: 78vw !important;
    max-width: 320px !important;
    height: calc(100dvh - 3.1rem) !important;
    background: var(--md-default-bg-color) !important;
    transform: translateX(105%) !important;
    transition: transform 0.25s ease !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    box-shadow: -4px 0 12px rgba(0,0,0,.15) !important;
  }

  .md-sidebar--secondary.custom-right-toc-open {
    transform: translateX(0) !important;
  }

  .md-sidebar--secondary .md-sidebar__scrollwrap {
    height: calc(100dvh - 3.1rem) !important;
    max-height: calc(100dvh - 3.1rem) !important;
    overflow-y: auto !important;
  }
}

/* Right TOC: thin single scrollbar */
@media screen and (max-width: 1100px) {
  .md-sidebar--secondary {
    overflow: hidden !important;
  }

  .md-sidebar--secondary .md-sidebar__scrollwrap {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: #002a3a #e0e0e0 !important;
  }
.md-sidebar--secondary .md-sidebar__inner,
.md-sidebar--secondary nav.md-nav {
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.md-sidebar--secondary nav.md-nav {
  padding: 0 !important;
  margin: 0 !important;
}

  .md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar {
    width: 8px !important;
  }

  .md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-track {
    background: #e0e0e0 !important;
  }

  .md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
    background-color: #002a3a !important;
    border-radius: 8px !important;
  }
}

/* iPad Mini / Air: smaller right TOC button */
@media screen and (min-width: 601px) and (max-width: 1100px) {
  .custom-right-toc-toggle {
    top: 5rem !important;
    height: 1.65rem !important;
    min-height: 1.65rem !important;
    padding: 0 0.5rem !important;
    font-size: 0.68rem !important;
    border-radius: 5px !important;
  }
}

/* iPad Mini / Air: move right TOC button slightly lower */
@media screen and (min-width: 601px) and (max-width: 1100px) {
  .custom-right-toc-toggle {
    top: 5.5rem !important;
  }
}

/* Fix right TOC content starting at bottom in live/mobile drawer */
@media screen and (max-width: 1100px) {
  .md-sidebar--secondary {
    overflow: hidden !important;
  }

  .md-sidebar--secondary .vericut-right-title-row,
  .md-sidebar--secondary .md-nav__title {
    position: static !important;
    top: auto !important;
    margin-top: 0 !important;
  }

  .md-sidebar--secondary .md-sidebar__scrollwrap {
    padding-top: 0.75rem !important;
    overflow-y: auto !important;
  }

    .md-sidebar--secondary .md-sidebar__inner,
  .md-sidebar--secondary nav.md-nav {
    position: static !important;
    top: auto !important;
  }
}

/* =========================================================
   FINAL FIX: Right TOC drawer at 50% / iPad / phone
========================================================= */


@media screen and (max-width: 1100px) {

  /* Hide Material/Zensical built-in right TOC hamburger */
  label.md-sidebar-button[for="__toc"],
  .md-sidebar--secondary label[for="__toc"] {
    display: none !important;
  }

  /* Right TOC drawer container */
  .md-sidebar--secondary {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: fixed !important;
    top: 3.1rem !important;
    right: 0 !important;
    left: auto !important;

    width: 78vw !important;
    max-width: 320px !important;
    height: calc(100dvh - 3.1rem) !important;

    background: var(--md-default-bg-color) !important;
    transform: translateX(105%) !important;
    transition: transform 0.25s ease !important;

    overflow: hidden !important;
    z-index: 9999 !important;
    box-shadow: -4px 0 12px rgba(0,0,0,.15) !important;
  }

  /* Open state from your custom JS */
  .md-sidebar--secondary.custom-right-toc-open {
    transform: translateX(0) !important;
  }

  /* Keep TOC content at top, not bottom */
  .md-sidebar--secondary .md-sidebar__scrollwrap {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: static !important;
    top: auto !important;

    height: calc(100dvh - 3.1rem) !important;
    max-height: calc(100dvh - 3.1rem) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding: 0.75rem 0.75rem 2rem 0.75rem !important;
    margin: 0 !important;
  }

  .md-sidebar--secondary .md-sidebar__inner,
  .md-sidebar--secondary nav.md-nav {
    position: static !important;
    top: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  .md-sidebar--secondary nav.md-nav > ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Right TOC title stays at top */
  .md-sidebar--secondary .vericut-right-title-row {
    position: static !important;
    top: auto !important;
    margin: 0 0 0.6rem 0 !important;
    padding: 0.4rem 0 !important;
  }
}

@media screen and (min-width: 1101px) {
  .md-sidebar--secondary {
    transform: none !important;
  }
}

@media screen and (max-width: 1100px) {
  .md-sidebar--secondary {
    background: #ffffff !important;
  }

  [data-md-color-scheme="slate"] .md-sidebar--secondary {
    background: #1e1e1e !important;
  }

  .md-sidebar--secondary .md-sidebar__scrollwrap {
    background: #ffffff !important;
  }

  [data-md-color-scheme="slate"] .md-sidebar--secondary .md-sidebar__scrollwrap {
    background: #1e1e1e !important;
  }

  .md-sidebar--secondary nav.md-nav {
    box-shadow: none !important;
    border: none !important;
  }
}

/* =========================================================
   FINAL: Remove right TOC inner box/card on mobile/tablet
========================================================= */

@media screen and (max-width: 1100px) {
  .md-sidebar--secondary nav.md-nav {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .md-sidebar--secondary .md-sidebar__scrollwrap {
    background: var(--md-default-bg-color) !important;
    padding: 1rem 1.25rem 2rem 1.25rem !important;
  }
}

@media screen and (max-width: 1100px) {
  .md-sidebar--secondary,
  .md-sidebar--secondary * {
    pointer-events: auto !important;
  }

  .md-sidebar--secondary {
    z-index: 99999 !important;
  }

  .md-sidebar--secondary .md-nav__link {
    cursor: pointer !important;
    position: relative !important;
    z-index: 100000 !important;
  }
}


/* =========================================================
   FINAL FIX: Remove right TOC card/box and expand content
========================================================= */

@media screen and (max-width: 1100px) {

  /* Full right drawer */
  .md-sidebar--secondary {
    width: 82vw !important;
    max-width: 360px !important;
    background: var(--md-default-bg-color) !important;
    box-shadow: -4px 0 14px rgba(0,0,0,.22) !important;
  }

  /* Remove inner box spacing */
  .md-sidebar--secondary .md-sidebar__scrollwrap {
    padding: 1rem 1rem 2rem 1rem !important;
    background: var(--md-default-bg-color) !important;
  }

  /* Remove card/box completely */
  .md-sidebar--secondary nav.md-nav {
    width: 100% !important;
    max-width: none !important;

    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;

    padding: 0 !important;
    margin: 0 !important;
  }

  .md-sidebar--secondary .md-sidebar__inner,
  .md-sidebar--secondary nav.md-nav > ul,
  .md-sidebar--secondary .md-nav__item,
  .md-sidebar--secondary .md-nav__link {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* Expand text area */
  .md-sidebar--secondary .md-nav__link {
    display: block !important;
    padding: 0.45rem 0.65rem !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Remove extra indentation */
  .md-sidebar--secondary .md-nav {
    padding-left: 0 !important;
  }

  .md-sidebar--secondary .md-nav .md-nav {
    padding-left: 0.7rem !important;
  }

  /* Title spacing */
  .md-sidebar--secondary .vericut-right-title-row {
    margin-bottom: 0.8rem !important;
  }
}

/* =========================================================
   HARD REMOVE: right TOC inner card/box
========================================================= */

@media screen and (max-width: 1100px) {

  .md-sidebar--secondary,
  .md-sidebar--secondary .md-sidebar__scrollwrap,
  .md-sidebar--secondary .md-sidebar__inner,
  .md-sidebar--secondary nav,
  .md-sidebar--secondary nav.md-nav,
  .md-sidebar--secondary .md-nav {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
  }

  .md-sidebar--secondary {
    background: var(--md-default-bg-color) !important;
  }

  .md-sidebar--secondary .md-sidebar__scrollwrap {
    padding: 1rem 1.25rem 2rem 1.25rem !important;
  }

  .md-sidebar--secondary .md-sidebar__inner,
  .md-sidebar--secondary nav.md-nav,
  .md-sidebar--secondary nav.md-nav > ul {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .md-sidebar--secondary .md-nav__link {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    padding: 0.45rem 0.6rem !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
}

/* Slightly increase right TOC width */
.md-sidebar--secondary {
  width: 320px !important;
  min-width: 320px !important;
  max-width: 320px !important;
}


/* =========================================================
   RIGHT TOC: Separate drawer column on tablet/mobile
   Does not change outside-click close JS
========================================================= */

@media screen and (max-width: 1100px) {

  .md-sidebar--secondary {
    background: var(--md-default-bg-color) !important;
    border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: -6px 0 18px rgba(0, 0, 0, 0.22) !important;
  }

  .md-sidebar--secondary .md-sidebar__scrollwrap {
    background: var(--md-default-bg-color) !important;
    padding: 1rem 1.4rem 2rem 1.4rem !important;
  }

  .md-sidebar--secondary .md-sidebar__inner,
  .md-sidebar--secondary nav.md-nav,
  .md-sidebar--secondary .md-nav {
    background: var(--md-default-bg-color) !important;
  }

  .md-sidebar--secondary nav.md-nav {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }

  .md-sidebar--secondary .md-nav__link {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}
/* Restore right TOC auto-highlight while scrolling main page */
.md-sidebar--secondary .md-nav__link.md-nav__link--active,
.md-sidebar--secondary .md-nav__link[aria-current="true"],
.md-sidebar--secondary .md-nav__link[aria-current="page"],
.md-sidebar--secondary .md-nav__link.vericut-roc-clicked {
  background-color: #e0e0e0 !important;
  color: #002a3a !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

/* FINAL: right TOC auto-highlight in dark mode */
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link.md-nav__link--active,
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link[aria-current="true"],
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link[aria-current="page"],
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link.vericut-roc-clicked,
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__item--active > .md-nav__link {
  background-color: #4a4a4a !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

/* prevent old reset rules from making active dark TOC transparent */
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link.md-nav__link--active:not(.vericut-roc-clicked),
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link[aria-current="true"]:not(.vericut-roc-clicked),
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link[aria-current="page"]:not(.vericut-roc-clicked) {
  background-color: #4a4a4a !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

/* Hide this section from Right ToC */

.md-sidebar--secondary a[href="#wire-edm-pictures"],
.md-sidebar--secondary a[href$="index.html#wire-edm-pictures"],
.md-sidebar--secondary a[href$="index.md#wire-edm-pictures"] {
  display: none !important;
}

/* FIX 55–75%: force left TOC scroll height when JS misses inline height */
@media screen and (min-width: 1101px) and (max-width: 1400px) {
  .md-sidebar--primary .md-sidebar__scrollwrap {
    height: calc(100vh - 9rem) !important;
    max-height: calc(100vh - 9rem) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .md-sidebar--primary .md-sidebar__inner {
    height: auto !important;
    min-height: 100% !important;
  }
}

/* Remove logo + Vericut text from left TOC title */
.md-sidebar--primary .md-nav__title {
  font-size: 0 !important;
}

.md-sidebar--primary .md-nav__title .md-logo,
.md-sidebar--primary .md-nav__title a,
.md-sidebar--primary .md-nav__title img {
  display: none !important;
}

.md-sidebar--primary .md-nav__title::after {
  display: block !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--md-default-fg-color) !important;
}

/* Only 55–75% desktop scale: add gap below TOC title */
@media screen and (min-width: 1101px) and (max-width: 1400px) {
  .md-sidebar--primary .md-nav__title {
    padding-bottom: 0.5rem !important;
  }

  .md-sidebar--primary .md-nav__title::after {
    margin-bottom: 0.5rem !important;
  }
}

/* 55–75% desktop scale: keep left TOC pinned to left, not centered */
@media screen and (min-width: 1101px) and (max-width: 1400px) {
  .md-main__inner {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  .md-sidebar--primary {
    position: sticky !important;
    top: 4.8rem !important;
    left: 0 !important;
    margin-left: 0 !important;
    margin-right: 1.5rem !important;
    flex: 0 0 320px !important;
    transform: none !important;
  }

  .md-sidebar--primary .md-sidebar__scrollwrap {
    width: 320px !important;
    max-width: 320px !important;
  }
}

/* 55–75% scale: make left TOC normal sidebar, not card */
@media screen and (min-width: 1101px) and (max-width: 1400px) {
  .md-sidebar--primary {
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    margin-left: 0 !important;
    margin-right: 1.5rem !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

/* FINAL: right TOC footer-safe + keeps page-scroll highlight working */ @media screen and (min-width: 1101px) { .md-sidebar--secondary { position: sticky !important; top: 4.8rem !important; align-self: flex-start !important; overflow: visible !important; height: auto !important; } .md-sidebar--secondary .md-sidebar__scrollwrap { height: calc(100vh - 9.4rem) !important; max-height: calc(100vh - 9.4rem) !important; overflow-y: auto !important; overflow-x: auto !important; padding-bottom: 0 !important; margin-bottom: 0 !important; box-sizing: border-box !important; } .md-sidebar--secondary .md-sidebar__inner, .md-sidebar--secondary nav.md-nav, .md-sidebar--secondary .md-nav__list { height: auto !important; max-height: none !important; overflow: visible !important; } }


/* 51–75% view: use same drawer behavior as 50% */
@media screen and (min-width: 1101px) and (max-width: 1400px) {
  .md-main__inner {
    margin: 0 !important;
    max-width: 100% !important;
  }
  .md-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 1rem 1rem !important;
    box-sizing: border-box !important;
  }
  .md-sidebar--primary {
  position: fixed !important;
  top: 3rem !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 18rem !important;
  max-width: 74vw !important;
  height: calc(100dvh - 3rem) !important;
  background: var(--md-default-bg-color) !important;
  transform: translateX(-105%) !important;
  transition: transform 0.25s ease !important;
  z-index: 9999 !important;
  overflow: hidden !important;
  box-shadow: 4px 0 12px rgba(0,0,0,.15) !important;
  border-radius: 0 14px 14px 0 !important;
}
  [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary {
    transform: translateX(0) !important;
  }
  .md-sidebar--primary .md-sidebar__scrollwrap {
    height: calc(100dvh - 3rem) !important;
    max-height: calc(100dvh - 3rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 1rem !important;
  }
  .md-sidebar--primary::before {
    display: none !important;
    content: none !important;
  }
}
/* 51–75% drawer: keep scrollbar at very top of drawer */
@media screen and (min-width: 1101px) and (max-width: 1400px) {
  .md-sidebar--primary {
    padding-top: 0 !important;
  }
  .md-sidebar--primary .md-sidebar__scrollwrap {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .md-sidebar--primary .md-sidebar__inner {
    padding-top: 1.2rem !important;
  }
}
/* 51–75% drawer: keep only the top Table of Contents title */
@media screen and (min-width: 1101px) and (max-width: 1400px) {
  /* Hide all TOC title labels first */
  .md-sidebar--primary .md-nav__title {
    display: none !important;
  }
  /* Show only the main top navigation title */
  .md-sidebar--primary nav.md-nav--primary > label.md-nav__title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 1.6rem 0.5rem 0.01rem 0.5rem !important;
    margin: 0 0 0.5rem 0 !important;
    text-align: center !important;
  }
  .md-sidebar--primary nav.md-nav--primary > label.md-nav__title::after {
    content: "Table of Contents" !important;
    display: block !important;
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: var(--md-default-fg-color) !important;
  }
}
/* 51–75% drawer: move scrollbar to drawer edge */
@media screen and (min-width: 1101px) and (max-width: 1400px) {
  .md-sidebar--primary {
    padding-right: 0 !important;
  }
  .md-sidebar--primary .md-sidebar__scrollwrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .md-sidebar--primary .md-sidebar__inner,
  .md-sidebar--primary nav.md-nav--primary {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }
  
}
/* Hide hamburger on normal desktop */
@media screen and (min-width: 1401px) {
  .md-header label.md-header__button[for="__drawer"] {
    display: none !important;
  }
}
/* Show hamburger only when drawer layout is used */
@media screen and (max-width: 1400px) {
  .md-header label.md-header__button[for="__drawer"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}


/* 51–75% drawer: narrower drawer + more main content space */
@media screen and (min-width: 1101px) and (max-width: 1400px) {

  [data-md-toggle="drawer"]:checked ~ .md-container .md-main__inner {
    margin-left: 17rem !important;
    max-width: calc(100% - 17rem) !important;
    transition: margin-left 0.25s ease !important;
  }

  [data-md-toggle="drawer"]:not(:checked) ~ .md-container .md-main__inner {
    margin-left: 0 !important;
    max-width: 100% !important;
    transition: margin-left 0.25s ease !important;
  }

  .md-sidebar--primary {
    width: 18rem !important;
    max-width: 18rem !important;
  }

  .md-content {
    max-width: none !important;
    width: 100% !important;
  }
}}

/* =========================================================
   RIGHT TOC — STRICT SINGLE ACTIVE ITEM
========================================================= */

/* Remove ALL theme active styling */
.md-sidebar--secondary .md-nav__link.md-nav__link--active,
.md-sidebar--secondary .md-nav__link[aria-current="true"],
.md-sidebar--secondary .md-nav__link[aria-current="page"] {
  background: transparent !important;
  color: inherit !important;
  font-weight: 400 !important;
  border-radius: 0 !important;
}

/* ONLY custom clicked item is highlighted */
.md-sidebar--secondary .md-nav__link.vericut-roc-clicked {
  background-color: #e0e0e0 !important;
  color: #002a3a !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

/* Dark mode */
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link.vericut-roc-clicked {
  background-color: #4a4a4a !important;
  color: #ffffff !important;
}