/* Match the pkgdown navigation to the dark blue in the gllvmTMB logo. */
:root {
  --gllvmtmb-logo-blue: #052b3f;
  --gllvmtmb-logo-blue-2: #08384d;
  --gllvmtmb-ice-blue: #d8eef6;
}

.template-home main,
.template-home aside {
  min-width: 0;
}

.template-home pre,
.template-home .sourceCode {
  max-width: 100%;
  overflow-x: auto;
}

.template-home table.table {
  table-layout: fixed;
  width: 100%;
}

.template-home table.table th,
.template-home table.table td,
.template-home table.table code {
  overflow-wrap: anywhere;
  white-space: normal;
}

.template-home p,
.template-home li {
  overflow-wrap: anywhere;
}

.bg-primary {
  background-color: var(--gllvmtmb-logo-blue) !important;
}

.bg-primary .navbar-brand,
.bg-primary .navbar-brand:hover,
.bg-primary .navbar-brand:focus,
.bg-primary .navbar-nav .nav-link {
  color: #f6fbfd !important;
}

.bg-primary .navbar-nav .show > .nav-link,
.bg-primary .navbar-nav .nav-link.active,
.bg-primary .navbar-nav .nav-link:hover,
.bg-primary .navbar-nav .nav-link:focus {
  color: var(--gllvmtmb-ice-blue) !important;
}

.bg-primary .nav-item.active .nav-link,
.bg-primary .nav-item .nav-link:hover,
.bg-primary .nav-item .nav-link:focus {
  background: rgba(216, 238, 246, 0.14);
  border-radius: 0.32rem;
}

.bg-primary .dropdown-menu {
  --bs-dropdown-bg: #10283d;
  --bs-dropdown-border-color: rgba(216, 238, 246, 0.22);
  --bs-dropdown-link-color: #d8eef6;
  --bs-dropdown-link-hover-bg: rgba(216, 238, 246, 0.14);
  --bs-dropdown-link-hover-color: #ffffff;
  --bs-dropdown-link-active-bg: var(--gllvmtmb-logo-blue-2);
  --bs-dropdown-link-active-color: #ffffff;
}

.navbar .form-control,
.navbar .search-input {
  background-color: #20272d;
  border-color: rgba(216, 238, 246, 0.35);
  color: #f6fbfd;
}

.navbar .form-control::placeholder,
.navbar .search-input::placeholder {
  color: rgba(246, 251, 253, 0.75);
}

img.logo {
  width: 168px;
  margin-left: 2rem;
}

.template-home img.logo {
  width: 252px;
}

@media (min-width: 576px) {
  .page-header {
    min-height: 148px;
  }

  .template-home .page-header {
    min-height: 228px;
  }
}

@media (max-width: 767.98px) {
  .template-home .page-header .logo {
    height: auto;
    max-width: 156px;
  }
}

@media (max-width: 575.98px) {
  .template-home > .row {
    --bs-gutter-x: 0;
  }

  .template-home main {
    width: calc(100vw - 1.5rem);
    max-width: calc(100vw - 1.5rem);
    overflow-x: visible;
  }

  .page-header img.logo {
    display: block;
    float: none;
    width: 128px;
    margin: 0 auto 1rem;
  }

  .template-home .page-header img.logo {
    width: 156px;
  }

  .template-home table.table {
    display: block;
    width: 100%;
    min-width: 0;
    table-layout: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Selected matrix and multi-panel figures retain a readable drawing width on
   phones. Their figure container scrolls horizontally instead of shrinking
   labels to illegibility. Simple single-panel figures keep normal responsive
   scaling. */
.figure {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
  .figure img.wide-scientific-figure {
    width: 680px;
    max-width: none;
  }
}

/* --- Navbar overlay fix: make the fixed-top navbar STICKY ---------------- */
/* pkgdown renders the navbar as `.navbar.fixed-top` (position: fixed), which
   removes it from layout flow and overlays page content, clipping whatever sits
   at the top (page header, home logo, and especially the right-hand "On this
   page" TOC). Its height is NOT a fixed number: menu items wrap to a second line
   depending on viewport width AND on label length (e.g. "Get started" wraps even
   on wide screens), and browsers round/wrap differently (the clip shows in
   Firefox but not Chromium), so no single `padding-top` reliably clears it — the
   earlier per-breakpoint offsets could not. Making the navbar `position: sticky`
   keeps it pinned to the top on scroll while leaving it IN the layout flow, so
   content always starts below it and can never be clipped, at any width, wrap
   state, or browser. Keep a generous scroll-padding so in-page anchor jumps
   clear the pinned bar. */
.navbar.fixed-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

html {
  scroll-padding-top: 7rem;
}

/* The full desktop navigation needs more horizontal room than Bootstrap's
   default `lg` breakpoint allows. Collapse it below 1280px so search and the
   menu toggle remain reachable on tablets, small laptops, and phones. */
@media (max-width: 1279.98px) {
  .navbar.navbar-expand-lg {
    flex-wrap: wrap;
  }

  .navbar.navbar-expand-lg .navbar-toggler {
    display: block;
  }

  .navbar.navbar-expand-lg .navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
  }

  .navbar.navbar-expand-lg .navbar-collapse:not(.show) {
    display: none !important;
  }

  .navbar.navbar-expand-lg .navbar-collapse.show,
  .navbar.navbar-expand-lg .navbar-collapse.collapsing {
    display: block !important;
  }

  .navbar.navbar-expand-lg .navbar-nav {
    flex-direction: column;
    width: 100%;
  }

  .navbar.navbar-expand-lg .navbar-nav .dropdown-menu {
    position: static;
  }

  .navbar.navbar-expand-lg form[role="search"],
  .navbar.navbar-expand-lg .search-form {
    width: 100%;
    margin: 0.5rem 0;
  }
}