/* symbolizer pkgdown overrides */

/*
 * Make the hex logo prominent — matches the visual weight of the drmTMB
 * and gllvmTMB sister-package pkgdown sites.
 *
 * pkgdown ships bootstrap.min.css with these rules:
 *   .logo                    { width: 100px; float: right; margin-left: 30px }
 *   .template-home img.logo  { width: 120px }
 *   (small screens)          .logo { width: 80px }
 *
 * The `.template-home img.logo` rule has higher specificity (a chained
 * class + element + class selector) than a bare `.logo`. To override it
 * we use selectors of matching or higher specificity below, plus
 * !important on the responsive overrides for belt-and-braces (Bootstrap's
 * media-query block also targets the bare .logo and would otherwise win
 * on small screens).
 */

/* Default desktop / tablet. The chained `.template-home img.logo`
 * selector matches the pkgdown rule we are overriding. */
.template-home img.logo,
img.logo {
  width: 320px !important;
  margin-left: 40px !important;
}

/* Large screens: full drmTMB-scale presence. */
@media (min-width: 992px) {
  .template-home img.logo,
  img.logo {
    width: 400px !important;
  }
}

/* Phones: keep the logo visible but not overwhelming the title. */
@media (max-width: 575.98px) {
  .template-home img.logo,
  img.logo {
    width: 180px !important;
    margin-left: 20px !important;
  }
}

/*
 * Wide display equations: scroll, do not overflow/collide.
 *
 * Some equations are intrinsically wider than their container -- the gllvm
 * "model in symbols" long/wide forms sit in ~380px side-by-side columns yet
 * render 600-730px wide, and the families BetaBinomial line slightly exceeds
 * the main column. Under KaTeX a too-wide .katex-display otherwise spills out
 * and visually collides with neighbouring content. Give every display block a
 * horizontal scrollbar so it stays inside its column and never overlaps.
 */
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;   /* keep the scrollbar clear of the equation glyphs */
}