/* Navbar tools and title (all four handbooks; Bryan approved 14 November 2026).
 *
 * 1. The Display menu built by styles/navbar-tools-v1.js holds reader mode
 *    and dark mode. Each item shows a small switch for its state.
 * 2. Menu labels never wrap ("Start Here" broke over two lines).
 * 3. From the point where the navbar expands up to 1599px, the book title
 *    shows its short form (--handbook-short-title, set per book in
 *    _quarto.yml), so the title is never cut with an ellipsis and the tools
 *    stay on one row. The full title stays in the markup for screen readers
 *    and search; the short form is drawn with empty alternative text. All
 *    four books expand at 1200px (collapse-below: xl).
 */

/* 1. Display menu */
#quarto-header .handbook-display-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  border: 0;
  background: transparent;
  color: inherit;
  line-height: 1;
}

#quarto-header .handbook-display-toggle::after {
  display: none;
}

#quarto-header .handbook-display-toggle .bi {
  font-size: 1rem;
}

#quarto-header .handbook-display-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

#quarto-header .handbook-display-menu {
  --bs-dropdown-bg: #ffffff;
  --bs-dropdown-link-color: #343a40;
  --bs-dropdown-link-hover-color: #1f2937;
  --bs-dropdown-link-hover-bg: #f1f3f5;
  --bs-dropdown-link-active-color: #1f2937;
  --bs-dropdown-link-active-bg: #e9ecef;
  min-width: 12rem;
  padding: 0.35rem 0;
  font-size: 0.9rem;
}

:is([data-bs-theme="dark"], body.quarto-dark) #quarto-header .handbook-display-menu {
  --bs-dropdown-bg: #2b3035;
  --bs-dropdown-link-color: #dee2e6;
  --bs-dropdown-link-hover-color: #ffffff;
  --bs-dropdown-link-hover-bg: #343a40;
  --bs-dropdown-link-active-color: #ffffff;
  --bs-dropdown-link-active-bg: #3d434a;
}

#quarto-header .handbook-display-menu .handbook-display-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.45rem 0.9rem;
  margin: 0;
  white-space: nowrap;
}

#quarto-header .handbook-display-menu .handbook-display-item > .bi,
#quarto-header .handbook-display-menu .quarto-reader-toggle-btn {
  display: none;
}

#quarto-header .handbook-display-state {
  position: relative;
  flex: none;
  width: 1.9rem;
  height: 1.05rem;
  border: 1.5px solid #6b7280;
  border-radius: 999px;
  background: transparent;
  transition: background-color 120ms ease, border-color 120ms ease;
}

#quarto-header .handbook-display-state::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.15rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #6b7280;
  transform: translateY(-50%);
  transition: left 120ms ease, background-color 120ms ease;
}

#quarto-header .handbook-display-item[aria-checked="true"] .handbook-display-state {
  border-color: #1f2937;
  background: #1f2937;
}

#quarto-header .handbook-display-item[aria-checked="true"] .handbook-display-state::after {
  left: 1rem;
  background: #ffffff;
}

:is([data-bs-theme="dark"], body.quarto-dark) #quarto-header .handbook-display-item[aria-checked="true"] .handbook-display-state {
  border-color: #e5e7eb;
  background: #e5e7eb;
}

:is([data-bs-theme="dark"], body.quarto-dark) #quarto-header .handbook-display-item[aria-checked="true"] .handbook-display-state::after {
  background: #111827;
}

@media (prefers-reduced-motion: reduce) {
  #quarto-header .handbook-display-state,
  #quarto-header .handbook-display-state::after {
    transition: none;
  }
}

/* 2. Menu labels stay on one line */
#quarto-header .navbar-nav .nav-link .menu-text {
  white-space: nowrap;
}

/* 3. Short title while the expanded navbar is tight */
@media (min-width: 1200px) and (max-width: 1599.98px) {
  #quarto-header .navbar.navbar-expand-xl .navbar-brand-container {
    flex: none;
    max-width: none;
  }

  #quarto-header .navbar.navbar-expand-xl .navbar-brand {
    max-width: none;
    overflow: visible;
  }

  #quarto-header .navbar.navbar-expand-xl .navbar-title {
    font-size: 0 !important;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  #quarto-header .navbar.navbar-expand-xl .navbar-title::after {
    content: var(--handbook-short-title, "");
    content: var(--handbook-short-title, "") / "";
    font-size: 1.25rem;
  }
}

@media (min-width: 1600px) {
  #quarto-header .navbar.navbar-expand-xl .navbar-brand,
  #quarto-header .navbar.navbar-expand-xl .navbar-title {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }
}

/* 5. Expanded but tight (1200px to 1439px): slightly tighter menu spacing
   and the PDF link as its icon alone (its accessible name stays "Download
   PDF"), so every book's menus, icons and search fit on one row at 1280. */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  #quarto-header .navbar.navbar-expand-xl .navbar-nav .nav-link {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    font-size: 1rem;
  }

  #quarto-header .navbar.navbar-expand-xl .navbar-nav a.nav-link[href$=".pdf"] .menu-text {
    display: none;
  }

  #quarto-header .navbar.navbar-expand-xl .navbar-brand-container {
    margin-right: 0.5rem;
  }
}

@media (min-width: 1200px) and (max-width: 1279.98px) {
  #quarto-header .navbar.navbar-expand-xl .navbar-nav .nav-link {
    padding-left: 0.28rem;
    padding-right: 0.28rem;
    font-size: 0.94rem;
  }

  #quarto-header .navbar.navbar-expand-xl .navbar-title::after {
    font-size: 1.125rem;
  }
}

/* 4. The X profile link is a plain icon beside LinkedIn and GitHub, not a
   labeled pill (styles/reader-funnel-v5.css drew the pill). The link, its
   accessible name and its Follow X Click event are unchanged. */
#quarto-header .navbar a.nav-link[href="https://x.com/BryanTegomoh"] {
  margin: 0;
  padding-left: 0.4rem !important;
  padding-right: 0.4rem !important;
  border: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
}

#quarto-header .navbar a.nav-link[href="https://x.com/BryanTegomoh"] .bi {
  font-size: inherit;
}

#quarto-header .navbar a.nav-link[href="https://x.com/BryanTegomoh"] .menu-text:empty {
  display: none;
}

#quarto-header .navbar a.nav-link[href="https://x.com/BryanTegomoh"]::after {
  content: none !important;
}