/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */

/* One coordinated type system instead of a grab-bag: IBM Plex was designed by
   IBM as a single family for technical communication, in three optical
   registers. Sans for headings/labels, Serif for reading body copy, Mono for
   metadata — one system, several parts, which fits a blog about
   infrastructure better than reaching for whatever's popular. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:ital,wght@0,400;1,400;0,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --pico-font-family-sans-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --pico-font-family-display: "IBM Plex Sans", -apple-system, sans-serif;
  --pico-font-family-monospace: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* A light accent needs dark text on top of it, not Quark2's hardcoded white */
  --q2-accent-contrast: #ffffff;
}

/* Light — warm paper + deep pine green ("systems: healthy" without literally
   recreating a dashboard widget). This is the site's primary identity. */
:root,
:root[data-theme="light"] {
  --q2-bg: #faf9f6;
  --q2-bg-elev: #ffffff;
  --q2-bg-muted: #f0eee8;
  --q2-text: #1a1d23;
  --q2-text-strong: #0f1114;
  --q2-text-muted: #5b6470;
  --q2-accent: #1f5d42;
  --q2-link: #1f5d42;
  --q2-accent-contrast: #ffffff;
}

/* Dark — same DNA (deep charcoal, brighter pine green for contrast), not just
   abandoned. theme-mode is "auto" so this follows the visitor's OS setting. */
:root[data-theme="dark"] {
  --q2-bg: #14171b;
  --q2-bg-elev: #1d2127;
  --q2-bg-muted: #23272e;
  --q2-text: #ecece4;
  --q2-text-strong: #ffffff;
  --q2-text-muted: #9ba3ad;
  --q2-accent: #3fae7c;
  --q2-link: #3fae7c;
  --q2-accent-contrast: #0a140f;
}

/* Cards — thin hairline border for a crisper, spec-sheet precision, on top
   of Quark2's existing shadow (softened via border-width, not a rewrite). */
.card {
  border: 1px solid var(--q2-border-ring);
}

/* Category markers — the site's one signature device. A bordered, tinted
   chip so it reads unambiguously as a distinct, clickable label (first pass
   was bare bracketed text with no container — too subtle to register as a
   feature, not just quiet). Brackets stay as CSS-drawn ::before/::after
   content, not literal characters, so screen readers only hear the category
   name. */
.category-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--pico-font-family-monospace);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--q2-accent);
  background: color-mix(in oklab, var(--q2-accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--q2-accent) 40%, transparent);
  border-radius: var(--q2-radius-sm);
  padding: 0.28rem 0.65rem;
  margin: 0 0.5rem 0.4rem 0;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.category-badge::before {
  content: "[";
  margin-right: 0.3em;
  opacity: 0.6;
}
.category-badge::after {
  content: "]";
  margin-left: 0.3em;
  opacity: 0.6;
}
@media (hover: hover) and (pointer: fine) {
  .category-badge:hover {
    background: color-mix(in oklab, var(--q2-accent) 22%, transparent);
    border-color: color-mix(in oklab, var(--q2-accent) 65%, transparent);
  }
}
.category-badge:active {
  transform: scale(0.97);
}

/* Left-align the nav right after the logo instead of Quark2's default of
   pushing it flush against the theme toggle (`.desktop-menu` is
   `flex: 1 1 auto; justify-content: flex-end` in theme.css — it expands to
   fill the gap between logo and actions, then right-aligns its own
   children within that space). This also fixes the Technology submenu
   going off-screen from the last message: that was Posts sitting jammed
   against the right edge with nowhere for a rightward flyout to go. With
   the nav moved left, Posts has room on its right again, so Quark2's own
   default flyout direction (`left: calc(100% + 6px)`, unmodified — the
   override from the previous pass is removed here, not stacked on top)
   should work correctly without needing an override. */
.desktop-menu {
  justify-content: flex-start;
}

/* Dropdown submenus hug their text instead of Quark2's fixed 280px floor
   (`.dropmenu ul ul, .dropmenu li > ul { min-width: 280px; ... }` in
   theme.css) — with short single-word categories like "Gaming" or
   "Security", that floor left a lot of visibly empty space in the box.
   max-width (340px, theme.css default) stays as a ceiling so a future
   long category name can't blow the box out. */
.dropmenu ul ul,
.dropmenu li > ul {
  min-width: 0;
}

/* Blog listing header — left-aligned to match the nav, not Quark2's default
   centered treatment (`.blog-page-header { text-align: center; margin: 0
   auto ...}`, the theme's fallback styling for a blog index with no hero
   image). Centered hero text is a marketing/landing-page convention; this
   site is closer to an engineering log, and having the nav (left) and page
   header (previously center) pull in different directions read as two
   unexamined defaults stacked on each other rather than one coherent
   choice. Left-aligning both unifies it under one system. */
.blog-page-header {
  text-align: left;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

/* Active nav item — reuses the same accent-tint treatment as the category
   badges (color-mix at the same 12%/22% stops) instead of Quark2's default
   solid fill (`background: var(--q2-text)` — an opaque near-white block in
   dark mode, which is what read as "boring"). One accent-tint pattern
   applied to both category tags and active nav state is a more deliberate,
   consistent visual system than introducing a second, unrelated treatment
   for "currently selected." */
.dropmenu a.active {
  color: var(--q2-accent);
  background: color-mix(in oklab, var(--q2-accent) 14%, transparent);
  font-weight: 600;
}
.dropmenu a.active:hover {
  background: color-mix(in oklab, var(--q2-accent) 24%, transparent);
  color: var(--q2-accent);
}