/* ── Theme system ─────────────────────────────────────────────────────────
   Dark by default (no attribute needed — it's the plain fallback below),
   flipped to light by JS setting <html data-theme="light">. See
   _includes/head-custom.html (no-flash early read) and js/theme.js
   (the toggle button's click handler).

   The base theme (pages-themes/slate) already ships a dark header and
   footer — #header_wrap and #footer_wrap are dark-on-dark out of the box.
   Only its #main_content_wrap (the actual reading area) is a light
   #f2f2f2 box; that's what these overrides flip. Selectors below target
   the theme's real markup/classes directly (#main_content_wrap, .inner,
   h1–h6, a, pre, code, blockquote, table/th/td, img, hr) — read from
   https://github.com/pages-themes/slate rather than guessed.
   ────────────────────────────────────────────────────────────────────── */
:root{
  --bg-content: #161a20;
  --text-main: #dbe1e8;
  --text-muted: #98a2ad;
  --heading: #f2f4f7;
  --link: #6ab0f3;
  --code-bg: #1d232b;
  --code-text: #e4e8ee;
  --border: #2b323c;
  --table-header-bg: #232a34;
  --card-bg: rgba(255,255,255,.06);
  --card-bg-strong: rgba(255,255,255,.10);
  --card-border: rgba(255,255,255,.12);
}

html[data-theme="light"]{
  --bg-content: #f2f2f2;
  --text-main: #373737;
  --text-muted: #666666;
  --heading: #222222;
  --link: #0F79D0;
  --code-bg: #ffffff;
  --code-text: #222222;
  --border: #ebebeb;
  --table-header-bg: #373737;
  --card-bg: rgba(0,0,0,.04);
  --card-bg-strong: rgba(0,0,0,.06);
  --card-border: rgba(0,0,0,.08);
}

/* The reading area itself. Header/footer are left alone — already dark. */
#main_content_wrap{ background: var(--bg-content) !important; }
#main_content{ color: var(--text-main); }

#main_content h1, #main_content h2, #main_content h3,
#main_content h4, #main_content h5, #main_content h6{
  color: var(--heading) !important;
}
/* h2/hr both paint a light dotted-rule background image in the base
   theme — replaced with a flat border so it doesn't fight the new bg. */
#main_content h2{ background: none !important; border-bottom: 1px solid var(--border); }
#main_content hr{ background: none !important; height: 1px; border: none; border-top: 1px solid var(--border); }

#main_content a{ color: var(--link) !important; }

#main_content pre, #main_content code{
  background-color: var(--code-bg) !important;
  color: var(--code-text) !important;
}

#main_content blockquote{
  color: var(--text-muted) !important;
  border-left-color: var(--border) !important;
}

#main_content table{ border-color: var(--border) !important; }
#main_content th{ background: var(--table-header-bg) !important; }
#main_content td{ border-color: var(--border) !important; color: var(--text-main); }

#main_content img{
  max-width: 100% !important;
  border-color: var(--border) !important;
  box-shadow: 0 0 5px var(--border) !important;
}

/* ── Reading width ────────────────────────────────────────────────────────
   The base theme hardcodes `.inner { max-width: 640px }` for the header,
   content AND footer alike — on any reasonably wide monitor that reads as
   roughly a third of the screen. Widened to half the viewport, with a
   sane floor/ceiling so it doesn't go unreadably narrow OR absurdly wide,
   and a mobile breakpoint that gives up the vw-based width entirely.
   ────────────────────────────────────────────────────────────────────── */
.inner{
  max-width: 50vw !important;
  min-width: 320px;
}
@media screen and (min-width: 2400px){
  .inner{ max-width: 1200px !important; }
}
@media screen and (max-width: 900px){
  .inner{ max-width: 92vw !important; }
}

/* ── Theme toggle button ──────────────────────────────────────────────── */
#theme-toggle{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 1000;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: var(--code-bg);
  color: var(--text-main);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  transition: transform 0.15s ease, background 0.15s ease;
}
#theme-toggle:hover{ transform: scale(1.08); }
#theme-toggle:focus{ outline: 2px solid var(--link); outline-offset: 2px; }

/* ── Captions and diagrams ────────────────────────────────────────────── */
#main_content p > em:only-child{ color: var(--text-muted); font-size: .92em; }
#main_content img.diagram{ box-shadow: none !important; border: none !important; }

/* ── Header photo ─────────────────────────────────────────────────────────
   The slate theme's title band (#header_wrap) gets the board photo as a
   background, darkened with a gradient so the white title stays readable.
   Same in dark and light mode (the theme's header is always dark).
   ────────────────────────────────────────────────────────────────────── */
#header_wrap{
  background:
    linear-gradient(rgba(10,12,16,.62), rgba(10,12,16,.82)),
    url("../img/esp32_bit_pirate_dock_re.jpeg") center 45% / cover no-repeat !important;
}
#header_wrap #project_title,
#header_wrap #project_tagline{
  text-shadow: 0 2px 8px rgba(0,0,0,.75);
}

/* ── Charts (inline SVG) ──────────────────────────────────────────────────
   Single-series bars: validated blue (dark #3987e5 on #161a20, 4.8:1;
   light #2a78d6 on #f2f2f2, 3.9:1). Text uses text tokens, never the series colour.
   ────────────────────────────────────────────────────────────────────── */
.viz-root{
  --viz-bar: #3987e5;
  --viz-text: var(--text-main, #dbe1e8);
  --viz-muted: var(--text-muted, #98a2ad);
  --viz-grid: var(--border, #2b323c);
  display: block; max-width: 100%; height: auto; font-family: inherit;
}
html[data-theme="light"] .viz-root{ --viz-bar: #2a78d6; --viz-grid: #dcdcdc; }
.viz-bar{ fill: var(--viz-bar); }
.viz-mark:hover .viz-bar{ opacity: .82; }
.viz-hit{ fill: transparent; }
.viz-grid{ stroke: var(--viz-grid); stroke-width: 1; }
.viz-baseline{ stroke: var(--viz-muted); stroke-width: 1; }
.viz-axis{ fill: var(--viz-muted); font-size: 13px; }
.viz-strong{ fill: var(--viz-text); font-weight: 600; }
.viz-value{ fill: var(--viz-text); font-size: 14px; font-weight: 600; }