/* Site-level custom CSS, loaded via Site.Params.customCSS (Archie's own
   documented hook for extra styles — theme untouched). Loads after all of
   Archie's own stylesheets. */

.post-tags-inline {
  font-size: 0.7rem;
  color: var(--color-text-muted, #737373);
}

.post-tags-inline a {
  color: inherit;
  border-bottom: none;
}

.post-tags-inline a:hover,
.post-tags-inline a:focus {
  background-color: transparent;
  color: inherit;
  outline: none;
  border-bottom: 3px solid var(--color-primary, #dc143c);
}

/* Archie's code-block language badge (e.g. "SHELL") is absolutely
   positioned over the top-right corner of the code, which blocks mouse
   text-selection in that area. It's purely decorative, so let clicks pass
   through to the code underneath. */
.highlight pre code[class*="language-"]::before {
  pointer-events: none;
}

/* Archie dims the selection highlight inside code blocks to a nearly
   transparent white (rgba(255,255,255,0.2)), meant to keep syntax colors
   readable while selecting. Against the light code background it's almost
   invisible, so selecting text there looks like nothing happened even
   though it works. Bump the contrast while keeping text color inherited
   (so syntax-highlight colors still show through). */
.highlight pre ::selection {
  background: rgba(220, 20, 60, 0.35);
  color: inherit;
}

.highlight pre ::-moz-selection {
  background: rgba(220, 20, 60, 0.35);
  color: inherit;
}

/* Table of contents responsive behavior, in three zones:

   Zone A (>=90em / 1440px+): plenty of room either side of .content once
   it's centered at its normal 800px, so leave that default centering
   alone and float the TOC outside it entirely via position:fixed.

   Zone B (54em-89.99em): not enough spare room on both sides to center
   .content AND float the TOC outside it without overlap — but there's
   still unused space to the *left* of centered .content that centering
   just wastes. So here .content stops being centered and instead grows
   to fill the full available width (still capped at the same 1440px
   Zone-A uses), with the article text and the TOC laid out side by side
   in normal flow inside it. Net visual effect: the content column slides
   left, and the TOC keeps sitting to its right, using up that idle
   left-hand space instead of the TOC just disappearing.

   Zone C (<54em): not enough room for both at any reasonable reading
   width, so the TOC is hidden and .content falls back to Archie's
   default single-column centered layout. */

@media screen and (min-width: 90em) {
  .toc {
    position: fixed;
    top: 6rem;
    left: calc(50% + (var(--content-max-width, 800px) / 2) + 1.5rem);
    max-width: 18.75rem;
    max-height: calc(100vh - 8rem);
  }
}

@media screen and (min-width: 54em) and (max-width: 89.99em) {
  .content:has(.toc) {
    max-width: 90em;
    width: 100%;
    /* Keep a comfortable gutter instead of jamming flush against the
       browser edges once .content stops being purely centered. */
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .content:has(.toc) .post-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .content:has(.toc) .post-content {
    flex: 1 1 auto;
    min-width: 0;
    max-width: var(--content-max-width, 800px);
  }

  .content:has(.toc) .toc {
    position: sticky;
    top: 1.25rem;
    flex: 0 0 18.75rem;
    margin-left: auto;
    /* Archie's own <60em rule sets order: -1 to put the TOC above the
       content on mobile; override back so the TOC stays on the right of
       the content in this side-by-side layout. */
    order: 0;
  }
}

@media screen and (max-width: 53.99em) {
  .toc {
    display: none;
  }
}

/* Lightbox: click any image to view it full-size in a native <dialog>,
   without leaving the page or opening a new tab. Wired up by
   static/js/lightbox.js via the [data-lightbox] attribute, which the
   site-level figure shortcode (layouts/_shortcodes/figure.html) and the
   markdown image render hook (layouts/_markup/render-image.html) add to
   every image on the site. */

[data-lightbox] {
  /* Archie's default link underline/hover-fill styling isn't appropriate
     for an image wrapper — neutralize it here. */
  border-bottom: none;
  border-block-end: none;
  display: inline-block;
  cursor: zoom-in;
}

[data-lightbox]:hover,
[data-lightbox]:focus {
  background-color: transparent;
  outline: none;
}

.lightbox-dialog {
  /* Explicit fixed + inset + margin:auto centering (rather than relying on
     the UA stylesheet's default modal positioning, or worse, `relative`,
     which drops the dialog into normal document flow at the end of <body>
     and makes the browser scroll to bring it into view — the cause of the
     page jumping to a different scroll position when opened). */
  position: fixed;
  inset: 0;
  margin: auto;
  overflow: auto;
  border: none;
  padding: 0;
  background: transparent;
  max-width: 90vw;
  max-height: 90vh;
}

.lightbox-dialog::backdrop {
  background: rgba(0, 0, 0, 0.75);
}

.lightbox-dialog .lightbox-image {
  display: block;
  max-width: 90vw;
  max-height: 80vh;
  width: auto;
  height: auto;
}

.lightbox-caption {
  /* Width is set inline by lightbox.js to match the rendered <img>, so text
     wraps at the image's edges instead of stretching wider than it. */
  box-sizing: border-box;
  margin: 0.5rem auto 0;
  padding: 0 0.5rem;
  text-align: center;
  color: #ffffff;
}

.lightbox-caption h4 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.lightbox-caption p {
  margin: 0;
  font-size: 0.875rem;
  color: #d4d4d4;
}

.lightbox-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}