/* User Provided Stylesheet */

/* Brand-color CSS layer for the mystmd port — knock the book-theme toward
   the agogo-era CIRES blue (#006189) and a softer link green (#288e17). */

:root {
  --myst-color-text-primary: #1a1a1a;
  --myst-color-text-link: #006189;
  --myst-color-text-link-hover: #288e17;
  --myst-color-text-heading: #0469B3;
  --myst-color-bg-primary: #ffffff;
}

a, a:visited {
  color: #006189;
  text-decoration: none;
}
a:hover {
  color: #288e17;
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Helvetica, "Trebuchet MS", Arial, sans-serif;
  color: #0469B3;
}

body {
  font-family: Verdana, Geneva, sans-serif;
}

/* Site-wide image banner — ports the original rugo.us #header strip.
   Rendered into the new `parts.header` slot from the local fork of
   myst-theme. The slot is non-dismissible by design. We just style the
   .myst-blog-site-header element with our brand color and Banner.png. */
.myst-blog-site-header {
  height: 150px;
  background: #006189 url('/Banner.png') repeat-x bottom left;
}

/* Sidebars — both behave the same way:
   At rest, sit below the banner (their natural position in document flow);
   once the banner scrolls past, pin at viewport top.

   The RIGHT document outline already does this via the theme's
   `lg:sticky lg:h-0`. Its inline `top:60px` just needs to become 0.

   The LEFT primary sidebar is `position:fixed` in the theme, which floats
   it at a constant offset and prevents it from sliding up with the page.
   We override to `position:sticky; top:0; height:0` (mirroring the right
   outline). `height:0 + overflow:visible` keeps it from pushing main down
   while letting the inner `-pointer` render visibly below.
*/
@media (min-width: 1280px) {
  .myst-primary-sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 0 !important;
    overflow: visible !important;
  }
}
[class*="col-margin-right"][style*="top"] {
  top: 0 !important;
}

/* Theme styles bare <p><img></p> as ~1.2em inline icons (intended for
   emoji / status glyphs). On builds where mystmd skips the <picture>+webp
   wrapper (CI without working sharp deps), every external content image
   matches that selector and collapses to ~24×19px. Override for any image
   that mystmd has captured from an external URL — those carry a
   data-canonical-url attribute and are always meant to render at full size. */
.article p > img[data-canonical-url],
.prose p > img[data-canonical-url] {
  display: block;
  max-height: none;
  margin-left: auto;
  margin-right: auto;
  vertical-align: baseline;
}

/* Figure float: bio content on the home page is wrapped in
   :::{div} (with class bio-content) so we have a block-level container
   inside the otherwise-grid article. Inside that wrapper, the tagged
   figure floats right and text wraps around it without bleeding into
   the left sidebar's column. */
.bio-content {
  display: block;
}
.bio-content figure.float-right-figure {
  float: right;
  margin: 0 0 1rem 1.5rem;
  max-width: 50%;
}
.bio-content figure.float-right-figure picture > img,
.bio-content figure.float-right-figure > img {
  margin-left: 0 !important;
}