/* 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;
  }
}