/* ===========================================================================
   thehelpfulidiot.com — appearance overrides on top of vendored tabi
   ---------------------------------------------------------------------------
   LOAD ORDER (tabi/templates/partials/header.html builds the list):
       custom_subset.css -> giallo-light.css -> giallo-dark.css -> main.css
       -> custom.css -> giallo-light-scoped.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.

   NOTE also that giallo-dark.css loads AFTER giallo-light.css, and Giallo
   puts both class sets on the same element (class="z-l-3 z-d-3") with no
   theme scoping — so dark won everywhere, including on light pages. That is
   what static/giallo-light-scoped.css fixes. It is GENERATED by
   tools/scope-giallo-light.py from public/giallo-light.css; re-run that
   script after changing light_theme in config.toml, or light mode silently
   reverts to the dark palette.

   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` — syntect's class from
      Zola <= 0.21. Zola 0.22+ uses Giallo, which emits `giallo z-l-code
      z-d-code` instead, so tabi's rule never matches and NO block got a
      background. Hence `pre:not(.giallo)` below.

   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(.giallo) so highlighted blocks keep their theme background
   and only the unlabelled fences get this. */
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;
}
/* --- home banner on mobile ----------------------------------------------
   The banner wraps to a column below 720px, where the cat took over half
   the viewport and pushed the post list off the fold. The nav mark below
   carries the cat on small screens instead.
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {
    #banner-container-home #image-container-home { display: none; }
}


/* --- the cat as site mark ------------------------------------------------
   Promotes the cat from homepage decoration to the site's logo: every page,
   beside the title, no template override. CSP allows it (img-src 'self').

   THE CONFLICT, since this took several attempts to find: tabi draws its
   link hover highlight with `a:not(.no-hover-padding):hover::before`
   (themes/tabi/sass/parts/_misc.scss:126) — the same pseudo-element used
   here. .home-title carries no `no-hover-padding` class (only .nav-links
   do), so on hover tabi replaced the cat with an absolutely-positioned
   teal panel, and because it sets `position: absolute` the mark left the
   text flow and the title slid left over it.

   The :hover/:active/:focus block therefore has to restore every property
   tabi sets, not just the colour. 0,3,2 beats tabi's 0,2,2.

   THE CLEANER FIX, if you ever override templates/partials/header.html:
   add `no-hover-padding` to the .home-title anchor and delete that second
   block entirely — it is tabi's own escape hatch for exactly this.
   ------------------------------------------------------------------------- */
.nav-title .home-title::before {
    content: "";
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    margin-inline-end: 10px;
    vertical-align: -0.3em;
    background: url("/wp-content/uploads/2021/09/cropped-vintage-986051_960_720.png")
                center / contain no-repeat;
}

.nav-title .home-title:hover::before,
.nav-title .home-title:active::before,
.nav-title .home-title:focus::before {
    position: static;
    z-index: auto;
    inset: auto;
    max-inline-size: none;
    background-color: transparent;
    background-image: url("/wp-content/uploads/2021/09/cropped-vintage-986051_960_720.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/* A masthead should not read as an inline text link. */
.nav-title .home-title,
.nav-title .home-title:hover,
.nav-title .home-title:active,
.nav-title .home-title:focus {
    background-color: transparent;
    color: var(--primary-color);
    -webkit-tap-highlight-color: transparent;
}


/* --- heading hierarchy ---------------------------------------------------
   "Recent Posts" rendered larger and higher-contrast than the hero h1, so
   a section label outranked the masthead. Most obvious on mobile.
   ------------------------------------------------------------------------- */
.section-title { font-size: 1.5rem; }