/*
Theme Name: BroodLink Field Notes
Theme URI: https://github.com/jburrow-dev/broodlink-field-notes
Author: James Burrow
Author URI: https://broodlink.app
Description: Blog theme for BroodLink — apiary monitoring for beekeeping nerds. Child of Twenty Twenty-Five. Light default with a dark toggle, built against BroodLink Brand Style Guide v1.0.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: broodlink-field-notes
Tags: blog, one-column, block-patterns, custom-colors, custom-menu, featured-images, full-site-editing
*/

/* ==========================================================================
   0. WEBFONTS
   Self-hosted, latin subset, ~51 KB total. See assets/fonts/README.md for
   provenance and licensing (both families are OFL-1.1).

   Outfit is a variable font — one file covers 300–600 via the weight axis, so
   this is a single @font-face with a weight *range*, not four faces.
   ========================================================================== */

@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url('assets/fonts/outfit-variable.woff2') format('woff2-variations'),
	     url('assets/fonts/outfit-variable.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
	               U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
	               U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Space Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/space-mono-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
	               U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
	               U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Space Mono';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/space-mono-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
	               U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
	               U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   1. TOKENS
   Values are copied from the app's src/web/static/style.css so the blog and
   the product share one palette. If the Brand Style Guide changes, this block
   and theme.json must both be updated by hand — see README.
   ========================================================================== */

:root {
  /* --- light theme (blog default) --- */
  --bl-bg: #F5F0E8;
  --bl-card: #FFFFFF;
  --bl-text: #1A1A1A;
  --bl-text-2: #555555;
  --bl-muted: #5F5F5F; /* darkened from the app's #6B6B6B to clear AA on cream */
  --bl-accent: #8A6D00;
  --bl-accent-hover: #6E5600;
  --bl-on-accent: #FFFFFF;
  --bl-divider: rgba(0, 0, 0, 0.08);
  --bl-navbar-bg: rgba(255, 248, 230, 0.97);
  --bl-footer-bg: #EDE7D5;
  --bl-sunk: rgba(0, 0, 0, 0.03);
  --bl-shadow: 0 4px 6px -1px rgba(0, 0, 0, .10), 0 2px 4px -1px rgba(0, 0, 0, .06);
  --bl-shadow-lift: 0 10px 24px -8px rgba(60, 45, 0, .22);
  --bl-gradient-start: #F5F0E8;
  --bl-gradient-end: #EDE7D5;

  --bl-success-bg: #E3F3F0;  --bl-success-text: #04564B;
  --bl-danger-bg:  #FBEAEE;  --bl-danger-text:  #8C1D38;
  --bl-warning-bg: #FBEEDD;  --bl-warning-text: #8A5300;
  --bl-info-bg:    #E6F0FA;  --bl-info-text:    #1B4C87;
  --bl-neutral-bg: #EDE7DA;  --bl-neutral-text: #4A4A4A;

  /* Navy CTA band in both themes: it's the palette's nav/footer colour, and a
     dark surface is the only place bright #FFD700 works as a button fill. */
  --bl-cta-bg: #0F172A;

  /* Code blocks stay dark in both themes. */
  --bl-code-bg: #16181D;
  --bl-code-bar: #101216;
  --bl-code-text: #E6E6E6;
  --bl-code-comment: #7C8794;
  --bl-code-key: #93C5FD;
  --bl-code-str: #5EEAD4;
  --bl-code-num: #FCD34D;
  /* function/class names — the brand's semantic "Split" indigo */
  --bl-code-fn: #A5B4FC;

  --bl-radius: 12px;
  --bl-font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bl-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

[data-theme="dark"] {
  --bl-bg: #121212;
  --bl-card: #1E1E1E;
  --bl-text: #FFFFFF;
  --bl-text-2: #E0E0E0;
  --bl-muted: #9AA0A6;
  --bl-accent: #FFD700;
  --bl-accent-hover: #FFC107;
  --bl-on-accent: #0F172A;
  --bl-divider: rgba(255, 255, 255, 0.07);
  --bl-navbar-bg: rgba(15, 23, 42, 0.95);
  --bl-footer-bg: #0A0E18; /* deeper than the CTA navy so the two don't merge */
  --bl-sunk: rgba(255, 255, 255, 0.03);
  --bl-shadow: 0 4px 6px -1px rgba(0, 0, 0, .3), 0 2px 4px -1px rgba(0, 0, 0, .16);
  --bl-shadow-lift: 0 12px 28px -10px rgba(0, 0, 0, .7);
  --bl-gradient-start: #121212;
  --bl-gradient-end: #000000;

  --bl-success-bg: rgba(20, 184, 166, .18);  --bl-success-text: #5EEAD4;
  --bl-danger-bg:  rgba(239, 68, 68, .18);   --bl-danger-text:  #FCA5A5;
  --bl-warning-bg: rgba(245, 158, 11, .18);  --bl-warning-text: #FCD34D;
  --bl-info-bg:    rgba(59, 130, 246, .18);  --bl-info-text:    #93C5FD;
  --bl-neutral-bg: rgba(148, 163, 184, .18); --bl-neutral-text: #CBD5E1;
}

/* ==========================================================================
   2. BASE
   Every element-level reset goes through :where() so it sits at zero
   specificity. A bare `body p` rule would outrank single-class components
   like .bl-eyebrow and .bl-meta and silently override their colours.
   ========================================================================== */

body {
  background-color: var(--bl-bg);
  background-image: linear-gradient(to bottom, var(--bl-gradient-start), var(--bl-gradient-end));
  background-attachment: scroll;
  color: var(--bl-text);
  font-family: var(--bl-font);
  line-height: 1.6;
  min-height: 100vh;
}

:where(h1, h2, h3, h4, h5, h6) { color: var(--bl-text); line-height: 1.2; }
:where(h1) { font-weight: 600; letter-spacing: -1.5px; }
:where(h2) { font-weight: 500; letter-spacing: -.5px; }
:where(h3) { font-weight: 500; letter-spacing: -.2px; }
:where(p) { color: var(--bl-text-2); }
:where(a) { color: inherit; text-decoration: none; transition: color .2s; }

/* Visible keyboard focus everywhere — accessibility baseline. */
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--bl-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 1rem; left: 1rem; z-index: 1000;
  background: var(--bl-accent); color: var(--bl-on-accent);
  padding: .6rem 1rem; border-radius: var(--bl-radius); width: auto; height: auto;
  clip: auto; white-space: normal;
}

/* ==========================================================================
   3. SHARED PIECES
   ========================================================================== */

.bl-eyebrow {
  font-family: var(--bl-mono); font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bl-accent);
}
.bl-meta {
  font-family: var(--bl-mono); font-size: .72rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--bl-muted);
}
.bl-mono { font-family: var(--bl-mono); }

/* category tags — align-self keeps them from stretching in flex columns */
.bl-tag,
.taxonomy-category a,
.wp-block-post-terms a {
  display: inline-block; align-self: flex-start;
  font-family: var(--bl-mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .22rem .6rem; border-radius: 999px;
  background: var(--bl-neutral-bg); color: var(--bl-neutral-text);
}
.wp-block-post-terms { font-size: 0; } /* kill the separator whitespace */
.wp-block-post-terms a { font-size: .66rem; }

/* Per-pillar tag colours. Core's post-terms block emits a bare <a> with no
   term class, so these key off the category slug in the href — stable, since
   changing a slug would break the URLs anyway. Add a line per new pillar. */
.wp-block-post-terms a[href*="/pi-builds"],
.bl-tag.is-pi-builds        { background: var(--bl-info-bg);    color: var(--bl-info-text); }
.wp-block-post-terms a[href*="/at-the-hive"],
.bl-tag.is-at-the-hive      { background: var(--bl-success-bg); color: var(--bl-success-text); }
.wp-block-post-terms a[href*="/build-in-public"],
.bl-tag.is-build-in-public  { background: var(--bl-warning-bg); color: var(--bl-warning-text); }

.bl-card {
  background: var(--bl-card); border: 1px solid var(--bl-divider);
  border-radius: var(--bl-radius); box-shadow: var(--bl-shadow);
}

/* buttons — .btn rules must outrank the zero-specificity anchor reset */
.bl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-family: var(--bl-font); font-size: .92rem; font-weight: 500;
  padding: .55rem 1.1rem; border-radius: var(--bl-radius);
  border: 1px solid transparent; cursor: pointer; transition: background .2s, color .2s;
}
.bl-btn-primary { background: var(--bl-accent); color: var(--bl-on-accent); font-weight: 600; }
.bl-btn-primary:hover { background: var(--bl-accent-hover); color: var(--bl-on-accent); }
.bl-btn-outline { border-color: var(--bl-accent); color: var(--bl-accent); }
.bl-btn-outline:hover { background: var(--bl-accent); color: var(--bl-on-accent); }
.bl-btn-sm { font-size: .82rem; padding: .4rem .85rem; }

/* core button block styled to match */
.wp-block-button__link {
  border-radius: var(--bl-radius); font-weight: 600; font-family: var(--bl-font);
}

/* ==========================================================================
   4. HEADER
   ========================================================================== */

.bl-header {
  background: var(--bl-navbar-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bl-divider);
  position: sticky; top: 0; z-index: 100;
}
.bl-brand { display: inline-flex; align-items: center; gap: .55rem; }
.bl-brand-mark { width: 30px; height: 30px; flex: 0 0 auto; color: var(--bl-accent); }
.bl-brand-word { font-size: 1.3rem; font-weight: 600; letter-spacing: -.5px; color: var(--bl-text); }
.bl-brand-word em { font-style: normal; color: var(--bl-accent); }
.bl-brand-suffix {
  font-family: var(--bl-mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bl-muted);
  border-left: 1px solid var(--bl-divider); padding-left: .55rem;
  align-self: center; padding-top: .15rem; white-space: nowrap;
}
[data-theme="dark"] .bl-header .bl-brand-word { color: #FFFFFF; }
[data-theme="dark"] .bl-header .bl-brand-suffix { color: #94A3B8; border-color: rgba(255, 255, 255, .15); }
[data-theme="dark"] .bl-header .wp-block-navigation a { color: #FFFFFF; }

.bl-header .wp-block-navigation { font-size: .95rem; }
.bl-header .wp-block-navigation a:hover { color: var(--bl-accent); }
.bl-header .wp-block-navigation .current-menu-item > a { color: var(--bl-accent); font-weight: 500; }

/* "Try BroodLink" renders as the primary button, per the mockups. Applied via
   the nav item's own className so it stays editable in the Site Editor. */
.bl-header .wp-block-navigation-item.bl-nav-cta a,
.bl-header .wp-block-navigation-item.bl-nav-cta .wp-block-navigation-item__content {
  background: var(--bl-accent);
  color: var(--bl-on-accent);
  font-weight: 600;
  padding: .4rem .85rem;
  border-radius: var(--bl-radius);
  font-size: .82rem;
}
.bl-header .wp-block-navigation-item.bl-nav-cta a:hover,
.bl-header .wp-block-navigation-item.bl-nav-cta .wp-block-navigation-item__content:hover {
  background: var(--bl-accent-hover);
  color: var(--bl-on-accent);
}
/* the dark-theme nav-link override would otherwise repaint the label white */
[data-theme="dark"] .bl-header .wp-block-navigation-item.bl-nav-cta a { color: var(--bl-on-accent); }

.bl-theme-toggle {
  background: none; border: 1px solid var(--bl-divider); border-radius: 999px;
  width: 36px; height: 36px; cursor: pointer; font-size: 1rem; line-height: 1;
  color: inherit; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.bl-theme-toggle:hover { border-color: var(--bl-accent); }

/* ==========================================================================
   5. CARDS & LISTINGS
   ========================================================================== */

.bl-post-card {
  background: var(--bl-card); border: 1px solid var(--bl-divider);
  border-radius: var(--bl-radius); box-shadow: var(--bl-shadow);
  overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
  transition: box-shadow .2s;
}
.bl-post-card:hover { box-shadow: var(--bl-shadow-lift); }
.bl-post-card .wp-block-post-featured-image { margin: 0; }
.bl-post-card .wp-block-post-featured-image img {
  width: 100%; height: 168px; object-fit: cover; display: block; border-radius: 0;
}
.bl-post-card .bl-card-body {
  padding: 1.25rem; display: flex; flex-direction: column; gap: .6rem; flex: 1;
}
.bl-post-card h3, .bl-post-card .wp-block-post-title { font-size: 1.12rem; margin: 0; }
.bl-post-card .wp-block-post-excerpt { font-size: .9rem; }
.bl-post-card .wp-block-post-excerpt p { font-size: .9rem; margin: 0; }
.bl-post-card .bl-meta { margin-top: auto; padding-top: .5rem; }

/* featured / cornerstone card */
.bl-featured {
  display: grid; grid-template-columns: 1.05fr 1fr; overflow: hidden;
  background: var(--bl-card); border: 1px solid var(--bl-divider);
  border-radius: var(--bl-radius); box-shadow: var(--bl-shadow);
}
.bl-featured:hover { box-shadow: var(--bl-shadow-lift); }
.bl-featured .wp-block-post-featured-image { margin: 0; height: 100%; }
.bl-featured .wp-block-post-featured-image img {
  width: 100%; height: 100%; min-height: 300px; object-fit: cover; border-radius: 0;
}
.bl-featured-body {
  padding: 2rem; display: flex; flex-direction: column; gap: .85rem; align-self: center;
}
.bl-featured-body .wp-block-post-title { font-size: 1.8rem; margin: 0; }
/* Degrade to a single column when a post has no featured image, otherwise the
   image track stays as dead space beside the text. */
.bl-featured:not(:has(.wp-block-post-featured-image)) { grid-template-columns: 1fr; }
.bl-post-row:not(:has(.wp-block-post-featured-image)) { grid-template-columns: 1fr; }

.bl-featured-flag {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--bl-mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bl-accent);
}

/* horizontal row layout used on archives, author and search */
.bl-post-row {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 1.5rem;
  padding: 1.6rem 0; border-bottom: 1px solid var(--bl-divider); align-items: start;
}
.bl-post-row .wp-block-post-featured-image { margin: 0; }
.bl-post-row .wp-block-post-featured-image img {
  width: 100%; height: 124px; object-fit: cover; border-radius: 10px; display: block;
}
.bl-post-row .wp-block-post-title { font-size: 1.28rem; margin: .55rem 0 .5rem; }
.bl-post-row .wp-block-post-excerpt p { font-size: .95rem; margin: 0; }
.bl-post-row .bl-meta { margin-top: .7rem; }

/* section headers */
.bl-section-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.4rem; }
.bl-section-head h2 { font-size: 1.35rem; margin: 0; }
.bl-section-head a { margin-left: auto; font-size: .88rem; color: var(--bl-accent); font-weight: 500; }

/* pillar cards */
.bl-pillar {
  background: var(--bl-card); border: 1px solid var(--bl-divider);
  border-radius: var(--bl-radius); box-shadow: var(--bl-shadow);
  padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; height: 100%;
  transition: box-shadow .2s;
}
.bl-pillar:hover { box-shadow: var(--bl-shadow-lift); }
.bl-pillar h3 { font-size: 1.15rem; margin: 0; }
.bl-pillar p { font-size: .92rem; margin: 0; }
.bl-pillar .bl-meta { margin-top: auto; padding-top: .8rem; }
.bl-pillar-icon { width: 34px; height: 34px; color: var(--bl-accent); }

/* pagination */
.wp-block-query-pagination {
  justify-content: center; gap: .4rem; padding: 2.5rem 0 1rem;
}
.wp-block-query-pagination a,
.wp-block-query-pagination .current,
.wp-block-query-pagination-numbers span {
  min-width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--bl-mono); font-size: .8rem;
  border: 1px solid var(--bl-divider); color: var(--bl-text-2);
}
.wp-block-query-pagination .current {
  background: var(--bl-accent); color: var(--bl-on-accent);
  border-color: var(--bl-accent); font-weight: 700;
}

/* ==========================================================================
   6. CTA BAND
   ========================================================================== */

.bl-cta {
  background: var(--bl-cta-bg);
  padding: 3rem 0;
  /* Inside the band the surface is dark in both themes, so the accent flips to
     bright gold with an ink label — the guide's primary-button spec. */
  --bl-accent: #FFD700;
  --bl-accent-hover: #FFC107;
  --bl-on-accent: #0F172A;
}
.bl-cta h2 { color: #FFFFFF; font-size: 1.6rem; margin: 0 0 .5rem; }
.bl-cta p { color: #CBD5E1; font-size: 1rem; margin: 0; }
.bl-cta .bl-meta { color: #94A3B8; }
.bl-cta .wp-block-button__link { background: var(--bl-accent); color: var(--bl-on-accent); }
.bl-cta .is-style-outline .wp-block-button__link {
  background: transparent; color: var(--bl-accent); border-color: var(--bl-accent);
}

/* ==========================================================================
   7. FOOTER
   border-top matters: the light body gradient ends on the same cream as the
   footer, so without it there's no edge on pages that end in content.
   ========================================================================== */

.bl-footer {
  background: var(--bl-footer-bg);
  border-top: 1px solid var(--bl-divider);
  padding: 2.5rem 0 2rem;
}
[data-theme="dark"] .bl-footer { color: #E2E8F0; }
.bl-footer h4,
.bl-footer .wp-block-heading {
  font-family: var(--bl-mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bl-muted);
  margin: 0 0 .75rem;
}
[data-theme="dark"] .bl-footer h4,
[data-theme="dark"] .bl-footer .wp-block-heading { color: #94A3B8; }
.bl-footer a { color: var(--bl-text-2); font-size: .9rem; }
[data-theme="dark"] .bl-footer a { color: #CBD5E1; }
.bl-footer a:hover { color: var(--bl-accent); }
.bl-footer-blurb { font-size: .9rem; color: var(--bl-text-2); max-width: 22rem; }
[data-theme="dark"] .bl-footer-blurb { color: #94A3B8; }
.bl-footer-line {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .4rem 1rem; text-align: center; font-size: .85rem;
  border-top: 1px solid var(--bl-divider); padding-top: 1.4rem; margin-top: 2rem;
  color: var(--bl-muted);
}
.bl-footer-brand { display: inline-flex; align-items: center; gap: .5rem; }
.bl-footer-glyph { width: 20px; height: 20px; color: var(--bl-accent); }
.bl-footer-links { display: flex; gap: 1rem; }
.bl-footer-links a { color: var(--bl-muted); }

/* ==========================================================================
   8. SINGLE POST
   ========================================================================== */

.bl-crumbs {
  font-family: var(--bl-mono); font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bl-muted);
}
.bl-crumbs a:hover { color: var(--bl-accent); }
.bl-crumbs .sep { opacity: .5; margin: 0 .4rem; }

.bl-post-header .wp-block-post-title { font-size: 2.6rem; margin: .9rem 0 1rem; }
.bl-lede { font-size: 1.15rem; font-weight: 300; color: var(--bl-text-2); }

.bl-byline {
  display: flex; align-items: center; gap: .75rem;
  margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--bl-divider);
}
.bl-byline .wp-block-avatar img,
.bl-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
}
.bl-avatar {
  background: var(--bl-accent); color: var(--bl-on-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .95rem;
}
.bl-byline-name { font-size: .95rem; font-weight: 500; margin: 0; }
.bl-byline-name a { color: var(--bl-accent); }

/* two-column post layout: TOC beside the reading column, not inside it */
.bl-post-layout {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 3rem;
}
/* toc.js removes the sidebar on posts with fewer than three headings. Without
   this the sole remaining child lands in the 200px TOC track and the whole
   article renders in a narrow column.

   The track is sized to the reading measure rather than 1fr: WordPress's
   constrained layout centres children with `margin:auto !important`, so a wider
   track would float the article away from the left-aligned title. Matching the
   track to the measure makes that centring a no-op instead of fighting it. */
.bl-post-layout:not(:has(.bl-toc)) { grid-template-columns: minmax(0, 44rem); gap: 0; }
.bl-toc { align-self: start; position: sticky; top: 90px; font-size: .85rem; }
.bl-toc h2, .bl-toc .wp-block-heading {
  font-family: var(--bl-mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bl-muted);
  margin: 0 0 .7rem;
}
.bl-toc ol, .bl-toc ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .5rem;
  border-left: 2px solid var(--bl-divider);
}
.bl-toc li { padding-left: .85rem; margin-left: -2px; }
.bl-toc a { color: var(--bl-muted); }
.bl-toc a:hover { color: var(--bl-accent); }
.bl-toc-mobile { display: none; }

/* ==========================================================================
   9. POST CONTENT (prose)
   ========================================================================== */

.bl-prose > * + * { margin-top: 1.35rem; }
.bl-prose p { font-size: 1.06rem; line-height: 1.72; }
.bl-prose h2 { font-size: 1.65rem; margin-top: 3rem; }
.bl-prose h3 { font-size: 1.2rem; margin-top: 2.2rem; }
.bl-prose ul, .bl-prose ol {
  padding-left: 1.4rem; color: var(--bl-text-2); font-size: 1.04rem; line-height: 1.7;
}
.bl-prose li + li { margin-top: .4rem; }
.bl-prose a:not(.wp-block-button__link) {
  color: var(--bl-accent); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.bl-prose strong { color: var(--bl-text); font-weight: 600; }
/* Inline code only. Must exclude code blocks by *content*, not by parent:
   the highlighting plugin wraps block code as <pre><span><code>, so a
   `:not(pre) > code` rule matched it and painted ink-on-dark — invisible.
   :not(.hljs) covers the plugin's output, :not(pre code) covers it being
   removed later. */
.bl-prose code:not(.hljs):not(pre code) {
  font-family: var(--bl-mono); font-size: .86em;
  background: var(--bl-sunk); border: 1px solid var(--bl-divider);
  border-radius: 5px; padding: .1em .35em; color: var(--bl-text);
}

/* figures */
.bl-prose figure { margin-top: 2rem; }
.bl-prose figure img { border-radius: var(--bl-radius); border: 1px solid var(--bl-divider); }
.bl-prose figcaption,
.bl-prose .wp-element-caption {
  font-size: .82rem; color: var(--bl-muted); margin-top: .6rem; font-weight: 300;
  text-align: left;
}

/* blockquote */
.bl-prose blockquote,
.wp-block-quote {
  border-left: 3px solid var(--bl-accent); padding: .2rem 0 .2rem 1.25rem;
  font-size: 1.14rem; font-weight: 300; line-height: 1.6; color: var(--bl-text);
  margin-left: 0;
}

/* data tables — mono numerics */
.bl-prose table, .wp-block-table table {
  width: 100%; border-collapse: collapse; font-size: .9rem;
}
.bl-prose thead th, .wp-block-table thead th {
  font-family: var(--bl-mono); font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bl-muted); text-align: left;
  padding: .55rem .7rem; border-bottom: 1px solid var(--bl-divider);
}
.bl-prose tbody td, .wp-block-table tbody td {
  padding: .6rem .7rem; border-bottom: 1px solid var(--bl-divider); color: var(--bl-text-2);
}
/* is-style-bl-data renders every cell as tabular mono — for calibration tables */
.wp-block-table.is-style-bl-data tbody td {
  font-family: var(--bl-mono); font-size: .82rem; color: var(--bl-text);
  font-variant-numeric: tabular-nums;
}
/* wide content must scroll inside itself, never scroll the page */
.wp-block-table { overflow-x: auto; }

/* ==========================================================================
   10. SIGNATURE PATTERNS
   The spec block is the strongest "for beekeeping nerds" signal in the design.
   ========================================================================== */

.bl-spec {
  background: var(--bl-card); border: 1px solid var(--bl-divider);
  border-left: 3px solid var(--bl-accent); border-radius: var(--bl-radius);
  padding: 1.1rem 1.3rem;
  font-family: var(--bl-mono); font-size: .78rem; line-height: 1.75;
}
.bl-spec table { width: 100%; border-collapse: collapse; }
.bl-spec td { border: 0; padding: .15rem 0; vertical-align: top; color: var(--bl-text); }
.bl-spec td:first-child {
  color: var(--bl-muted); letter-spacing: .06em; text-transform: uppercase;
  font-size: .68rem; width: 8.5rem; padding-right: 1.2rem; white-space: nowrap;
}

/* callouts */
.bl-callout {
  border-radius: var(--bl-radius); padding: 1.05rem 1.25rem;
  display: flex; gap: .85rem; font-size: .96rem; line-height: 1.65;
}
.bl-callout > .bl-callout-label {
  font-family: var(--bl-mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; flex: 0 0 auto; padding-top: .18rem;
}
.bl-callout p { font-size: .96rem; color: inherit; margin: 0; }
.bl-callout-note { background: var(--bl-info-bg); color: var(--bl-info-text); }
.bl-callout-warn { background: var(--bl-warning-bg); color: var(--bl-warning-text); }
.bl-callout-ok   { background: var(--bl-success-bg); color: var(--bl-success-text); }

/* code blocks */
.wp-block-code {
  border-radius: var(--bl-radius); overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .35); padding: 0; background: var(--bl-code-bg);
}
.wp-block-code pre, .wp-block-code code {
  background: var(--bl-code-bg); color: var(--bl-code-text);
  font-family: var(--bl-mono); font-size: .8rem; line-height: 1.75;
  padding: 1rem 1.1rem; overflow-x: auto; display: block; white-space: pre;
}
.wp-block-code code { padding: 0; }
.wp-block-code pre { margin: 0; }
/* filename bar: set a "filename" via the block's title attribute pattern */
.bl-code-bar {
  background: var(--bl-code-bar); color: #8B97A5;
  font-family: var(--bl-mono); font-size: .7rem;
  padding: .5rem .9rem; display: flex; align-items: center; gap: .6rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--bl-radius) var(--bl-radius) 0 0;
}
.bl-code-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bl-accent); flex: 0 0 auto; }
.bl-code-bar .lang { margin-left: auto; letter-spacing: .1em; text-transform: uppercase; font-size: .62rem; }
/* gap:0 so the filename bar sits flush against the code block */
.bl-code-group { gap: 0; }
.bl-code-group > .wp-block-code { border-radius: 0 0 var(--bl-radius) var(--bl-radius); border-top: 0; margin: 0; }
/* --- syntax highlighting -------------------------------------------------
   Provided by the syntax-highlighting-code-block plugin, which decorates the
   *core* code block with .hljs-* spans server-side. Its stock light theme is
   dequeued in functions.php; these rules restyle the same classes from our
   tokens so code blocks stay on-brand in both colour modes.

   If the plugin is ever removed, blocks fall back to plain mono on the dark
   surface — valid content, no migration needed. That is why it was chosen. */
.hljs { color: var(--bl-code-text); background: transparent; }

.hljs-comment,
.hljs-quote { color: var(--bl-code-comment); font-style: italic; }

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-type,
.hljs-built_in,
.hljs-name,
.hljs-tag,
.hljs-meta { color: var(--bl-code-key); }

.hljs-string,
.hljs-regexp,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-doctag { color: var(--bl-code-str); }

.hljs-number,
.hljs-variable,
.hljs-template-variable,
.hljs-attr,
.hljs-attribute,
.hljs-link { color: var(--bl-code-num); }

.hljs-title,
.hljs-section,
.hljs-title.class_,
.hljs-title.function_ { color: var(--bl-code-fn); }

/* Structural wrappers, not tokens — reset to body text so nested code inside a
   string (f-string interpolation) doesn't inherit the string colour. */
.hljs-subst,
.hljs-params,
.hljs-function { color: var(--bl-code-text); }

.hljs-deletion { color: var(--bl-danger-text); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* The plugin appends its own "(language)" badge, which our .bl-code-bar already
   shows. Hide it visually rather than with display:none — the <pre> points at
   it via aria-describedby, and display:none would drop it from the
   accessibility tree and leave a dangling reference. */
.shcb-language {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* FAQ — answer-engine block, FAQPage schema added in functions.php */
.bl-faq { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--bl-divider); }
.bl-faq > h2 { font-size: 1.4rem; margin-bottom: 1.1rem; }
.bl-faq details, .bl-faq .wp-block-details {
  border-bottom: 1px solid var(--bl-divider); padding: .9rem 0;
}
.bl-faq summary {
  font-weight: 500; font-size: 1.02rem; cursor: pointer;
  list-style: none; display: flex; gap: .7rem; color: var(--bl-text);
}
.bl-faq summary::-webkit-details-marker { display: none; }
.bl-faq summary::before { content: "+"; color: var(--bl-accent); font-family: var(--bl-mono); }
.bl-faq details[open] summary::before { content: "\2212"; }
.bl-faq details p { margin-top: .6rem; font-size: .98rem; padding-left: 1.4rem; }

/* author box */
.bl-author-box {
  display: flex; gap: 1.2rem; padding: 1.5rem; margin-top: 2.5rem;
  background: var(--bl-card); border: 1px solid var(--bl-divider);
  border-radius: var(--bl-radius); box-shadow: var(--bl-shadow);
}
.bl-author-box .bl-avatar,
.bl-author-box .wp-block-avatar img { width: 56px; height: 56px; font-size: 1.15rem; }
.bl-author-box h4 { font-size: 1.05rem; margin: 0 0 .3rem; }
.bl-author-box p { font-size: .92rem; margin: 0; }

/* ==========================================================================
   11. ARCHIVES, AUTHOR, SEARCH, 404
   ========================================================================== */

.bl-archive-head { padding-bottom: 2.2rem; border-bottom: 1px solid var(--bl-divider); }
.bl-archive-head h1, .bl-archive-head .wp-block-query-title { font-size: 2.4rem; margin: .8rem 0 .9rem; }
.bl-archive-head .wp-block-term-description p,
.bl-archive-head .bl-lede { font-size: 1.1rem; font-weight: 300; max-width: 42rem; }

.bl-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.bl-chip {
  font-family: var(--bl-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--bl-divider);
  color: var(--bl-muted); background: var(--bl-card);
}
.bl-chip:hover, .bl-chip.is-active { border-color: var(--bl-accent); color: var(--bl-accent); }

.bl-author-hero { display: flex; gap: 1.6rem; align-items: flex-start; }
.bl-author-hero .bl-avatar,
.bl-author-hero .wp-block-avatar img { width: 84px; height: 84px; font-size: 1.7rem; }
.bl-author-hero h1 { font-size: 2.1rem; margin: 0 0 .3rem; }
.bl-author-role {
  font-family: var(--bl-mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bl-accent);
}
.bl-author-stats { display: flex; gap: 2rem; margin-top: 1.2rem; }
.bl-author-stats span { display: block; font-family: var(--bl-mono); font-size: 1.2rem; color: var(--bl-text); }
.bl-author-stats small {
  font-family: var(--bl-mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bl-muted);
}

.bl-util h1 { font-size: 2.4rem; margin: .8rem 0 .9rem; }
.bl-util-code {
  font-family: var(--bl-mono); font-size: 4rem; font-weight: 700;
  color: var(--bl-accent); line-height: 1; letter-spacing: -.04em;
}
.bl-searchbar .wp-block-search__inside-wrapper { gap: .6rem; border: 0; }
.bl-searchbar .wp-block-search__input {
  font-family: var(--bl-font); font-size: 1rem; color: var(--bl-text);
  background: var(--bl-card); border: 1px solid var(--bl-divider);
  border-radius: var(--bl-radius); padding: .65rem 1rem;
}
.bl-searchbar .wp-block-search__input::placeholder { color: var(--bl-muted); }
.bl-searchbar .wp-block-search__button {
  background: var(--bl-accent); color: var(--bl-on-accent);
  border: 0; border-radius: var(--bl-radius); font-weight: 600;
  font-family: var(--bl-font); padding: .55rem 1.1rem; cursor: pointer;
}
.bl-result-count { font-family: var(--bl-mono); font-size: .78rem; color: var(--bl-muted); }
.bl-suggest {
  list-style: none; margin: .8rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .55rem; font-size: .98rem;
}
.bl-suggest a { color: var(--bl-accent); }
.bl-suggest a:hover { color: var(--bl-accent-hover); }

/* Author bio and name blocks inside the hero/box need to shed core's centring */
.bl-author-hero .wp-block-post-author-biography,
.bl-author-box .wp-block-post-author-biography { font-size: .95rem; color: var(--bl-text-2); margin-top: .8rem; }
.bl-author-hero .wp-block-post-author-biography { max-width: 46rem; }
.bl-author-box .wp-block-post-author-name { font-size: 1.05rem; font-weight: 600; margin: 0 0 .3rem; }
.bl-author-box .wp-block-post-author-name a { color: var(--bl-text); }
.bl-author-box .wp-block-post-author-biography { margin-top: .2rem; }
.bl-author-box .wp-block-avatar img { border-radius: 50%; }
.bl-byline .avatar, .bl-byline img.avatar { border-radius: 50%; width: 42px; height: 42px; }
.bl-author-hero .avatar, .bl-author-hero img.avatar { border-radius: 50%; }

/* ==========================================================================
   12. RESPONSIVE
   Mobile is the majority of organic traffic — these are not optional.
   ========================================================================== */

@media (max-width: 900px) {
  .bl-post-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bl-toc { display: none; }
  .bl-toc-mobile { display: block; margin-bottom: 2rem; }
  .bl-toc-mobile summary {
    font-family: var(--bl-mono); font-size: .7rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--bl-muted); cursor: pointer;
    padding: .8rem 0; border-top: 1px solid var(--bl-divider); border-bottom: 1px solid var(--bl-divider);
  }
  .bl-toc-mobile ol, .bl-toc-mobile ul {
    list-style: none; padding: 1rem 0 0; margin: 0;
    display: flex; flex-direction: column; gap: .55rem; font-size: .92rem; border: 0;
  }
  .bl-toc-mobile a { color: var(--bl-accent); }
  .bl-featured { grid-template-columns: 1fr; }
  .bl-featured .wp-block-post-featured-image img { min-height: 200px; height: 200px; }
}

@media (max-width: 760px) {
  .bl-post-row { grid-template-columns: 1fr; gap: .9rem; }
  .bl-post-row .wp-block-post-featured-image img { height: 160px; }
  .bl-post-header .wp-block-post-title { font-size: 1.85rem; letter-spacing: -.8px; }
  .bl-prose p { font-size: 1.02rem; }
  .bl-prose h2 { font-size: 1.4rem; }
  .bl-featured-body { padding: 1.5rem; }
  .bl-featured-body .wp-block-post-title { font-size: 1.4rem; }
  .bl-archive-head h1, .bl-archive-head .wp-block-query-title { font-size: 1.85rem; }
  .bl-author-hero { flex-direction: column; gap: 1rem; }
  .bl-spec td { display: block; width: auto; white-space: normal; }
  .bl-spec td:first-child { padding-top: .5rem; }
  .bl-util h1 { font-size: 1.8rem; }
  .bl-byline { flex-wrap: wrap; }
  .bl-footer-line { flex-direction: column; }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .bl-toc { position: static; }
}