/* ===========================================================================
   thehelpfulidiot.com — appearance overrides on top of vendored tabi
   ---------------------------------------------------------------------------
   LOAD ORDER (tabi/templates/partials/header.html builds the list):
       giallo.css -> main.css -> custom.css -> skins/<skin>.css
   So this file wins over main.css by order, but the SKIN loads after it.
   Anything touching --primary-color must therefore beat the skin on
   specificity, not order. See the palette block at the bottom.

   SPECIFICITY: tabi's sass nests under IDs (#banner-container-home
   #image-container-home #banner-home-img = 0,3,0). Several rules below repeat
   the full ID chain for that reason. Shortening them will silently stop them
   working.
   =========================================================================== */


/* --- code blocks ---------------------------------------------------------
   Two problems, both from _code.scss:

   1. tabi paints a background only on `pre.z-code`, the class Zola adds to
      highlighted blocks. 157 of the fences that came out of WordPress carry no
      language, so those blocks got no background and read as loose indented
      text rather than as code.

   2. The language label is `pre code::before` with `content: attr(data-lang)`
      and `background-color: var(--primary-color)`. The bar paints whether or
      not data-lang exists — so unlabelled blocks got a full-width teal band
      with nothing written on it, and labelled one-liners got a band louder
      than the command underneath.
   ------------------------------------------------------------------------- */

/* Long shell output is common here; keep code blocks scrollable, not wrapped. */
pre { overflow-x: auto; }
pre code { white-space: pre; }

/* Give every block edges, highlighted or not. */
pre { padding-block-start: 1.9rem; }   /* was 2.4rem, sized for the removed bar */

/* --codeblock-bg is dark in BOTH themes; --bg-1 is the theme-aware one.
   Scoped to :not(.z-code) so highlighted blocks keep tabi's own background
   once highlighting is working. */
pre:not(.giallo) {
    background-color: var(--bg-1);
    color: var(--text-color);
}

/* Same information, as a muted tag rather than a band. Sits clear of the copy
   button, which lives at inset-inline-end: 0.7rem. */
pre code::before {
    inset-inline-start: auto;
    inset-inline-end: 2.7rem;
    background-color: transparent;
    padding-inline: 0.4rem;
    width: auto;
    color: var(--text-color);
    opacity: 0.55;
    text-align: end;
}


/* --- typography ----------------------------------------------------------
   main.scss sets `line-height: 190%` on :root and `line-height: 2rem` on p.
   At 1rem body text that is effectively double-spaced: lines of a single
   paragraph stop grouping into a block, which is most of why the pages read
   as sparse. 1.65 is the range where technical prose holds together.

   `body` can carry it directly (it inherits down); the `.content` selectors
   are needed to beat the bare `p` rule in main.scss.
   ------------------------------------------------------------------------- */
body { line-height: 1.65; }

.content p,
.content li { line-height: 1.65; }

/* Scoped deliberately: the nav uses line-height 2.5 on its own list items
   (_header.scss) and should keep it. */


/* --- home banner ---------------------------------------------------------
   The h1 is now the tagline rather than the site name (see content/_index.md).
   The site name already sits in the nav two lines above, so the old h1 made
   the reader's eye hit the same five words twice before any content, and at
   2.8rem the longer tagline would break awkwardly mid-phrase.
   ------------------------------------------------------------------------- */
#banner-container-home #home-banner-text #home-banner-header {
    font-size: clamp(1.6rem, 3.4vw, 2.25rem);
    line-height: 1.25;
    text-wrap: balance;
}

/* Centre the text against the image instead of top-aligning both, which left
   an empty rectangle to the right of the heading. */
#banner-container-home { align-items: center; }

/* The banjo cat is a transparent 960x720 PNG. tabi forces
   `aspect-ratio: 1 / 1` + `object-fit: cover` on the banner image, which was
   cropping roughly a quarter off each side. Let it keep its own proportions. */
#banner-container-home #image-container-home #banner-home-img {
    aspect-ratio: auto;
    object-fit: contain;
    height: auto;
}
#banner-container-home #image-container-home { max-width: 13rem; }


/* --- images in posts -----------------------------------------------------
   WordPress screenshots vary wildly in size.
   ------------------------------------------------------------------------- */
article img { max-width: 100%; height: auto; border-radius: 4px; }
article figure { margin-inline: 0; }


/* --- post listing --------------------------------------------------------
   Categories and tags now both appear in the post listing (see the
   list_posts.html override). Distinguish the category chip so the two kinds
   of link don't read as one undifferentiated pile.
   ------------------------------------------------------------------------- */
.bloglist-tags .category-chip {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}


/* --- palette (OPTIONAL — commented out) ----------------------------------
   The banjo cat is warm sepia, black and a little red; skin = "teal" puts a
   cool teal on every heading, link and chip. A warmer accent makes the page
   look designed rather than themed.

   To try it: uncomment below AND remove `skin = "teal"` from config.toml.
   (Leaving the skin set is also fine — these selectors carry one more element
   than the skin's `:root` / `[data-theme='dark']` / `:root:not(...)` rules, so
   they win despite loading first. Removing the skin is just less to reason
   about.)

   Contrast, checked against tabi's backgrounds:
     #9c4a2f on #fff    -> 6.3:1   (teal was 4.73:1)
     #e5a27d on #1f1f1f -> 9.1:1   (teal was 11.06:1)

html:root { --primary-color: #9c4a2f; }
html[data-theme='dark'] { --primary-color: #e5a27d; }
@media (prefers-color-scheme: dark) {
    html:root:not([data-theme='light']) { --primary-color: #e5a27d; }
}
   ------------------------------------------------------------------------- */

/* --- copy button ---------------------------------------------------------
   tabi fills the mask with --hover-color, which was fine when code blocks
   were dark in both themes. With github-light in light mode that is a pale
   icon on white. --text-color flips with the theme (#222226 / #D4D4D4), so
   the button stays legible against whatever the block background is.

   background-color, not the `background` shorthand: the shorthand would
   reset the background-size: contain that tabi sets on the next line, and
   the icon would render at its intrinsic size.
   ------------------------------------------------------------------------- */
.copy-code {
    background-color: var(--text-color);
    opacity: 0.5;
    transition: opacity 0.15s ease;
}
.copy-code:hover,
.copy-code:focus-visible {
    opacity: 1;
}
.copy-code.checked {
    background-color: #3fa45b;   /* success green, readable on both backgrounds */
    opacity: 1;
}