/* =====================================================================
   Volatile NixOS — documentation theme
   Palette extracted from assets/banner.png:
     base    #07200F   deep forest / circuit board
     surface #0B2A14
     green   #3E9E40 -> #65AA6F   (snowflake + traces)
     glow    #B8DAB7   (lit edges)
     gold    #C7AA33 / #B1A142    (nebula accent)
     text    #D6E6DA   (sage white)
   ===================================================================== */

/* Bricolage Grotesque — display headings for the blog (editorial identity,
   distinct from the wiki's terminal-mono headings). */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&display=swap');

:root {
  /* content canvas: neutral charcoal (faint warm) so green reads as ACCENT */
  --vol-base:    #101311;
  --vol-surface: #181c19;
  --vol-surface-2: #1f2420;
  /* green chrome: header/tabs sit ABOVE the neutral page as a distinct band */
  --vol-header:   #0b3019;
  --vol-header-2: #114a23;
  --vol-tabs:     #0e2716;
  --vol-line:    #2a5a3a;
  --vol-green:   #3e9e40;
  --vol-green-2: #65aa6f;
  --vol-neon:    #4de07a;
  --vol-glow:    #b8dab7;
  --vol-gold:    #c7aa33;
  --vol-gold-2:  #b1a142;
  --vol-text:    #d6e6da;
  --vol-muted:   #93a59a;
}

/* ---- Dark scheme (default) ---------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-hue: 145;

  --md-default-bg-color:        var(--vol-base);
  --md-default-bg-color--light: var(--vol-surface);
  --md-default-bg-color--lighter: var(--vol-surface-2);
  --md-default-fg-color:        var(--vol-text);
  --md-default-fg-color--light: #c2d6c8;
  --md-default-fg-color--lighter: #8fae98;
  --md-default-fg-color--lightest: #2a5a3a;

  --md-primary-fg-color:        #0e3a1c;
  --md-primary-fg-color--light: #14502a;
  --md-primary-fg-color--dark:  #07200F;
  --md-primary-bg-color:        var(--vol-glow);
  --md-primary-bg-color--light: #d6e6da;

  --md-accent-fg-color:         var(--vol-neon);
  --md-accent-fg-color--transparent: rgba(77, 224, 122, 0.12);

  --md-typeset-color:           var(--vol-text);
  --md-typeset-a-color:         var(--vol-green-2);

  --md-code-bg-color:           #0c0f0d;
  --md-code-fg-color:           #cfe6d4;

  --md-footer-bg-color:         #0b1a12;
  --md-footer-bg-color--dark:   #081410;

  /* semantic tokens — component rules reference these so they flip per scheme */
  --vol-panel:      var(--vol-surface);
  --vol-heading:    var(--vol-glow);
  --vol-heading-2:  var(--vol-green-2);
  --vol-heading-3:  var(--vol-gold);
  --vol-code-fg:    #b6e8c2;
  --vol-code-bg:    rgba(77, 224, 122, 0.08);
  --vol-body-muted: var(--vol-muted);
  /* gold = the two-tone secondary: wayfinding, section rules, emphasis */
  --vol-gold-fg:    #e3c95c;
  --vol-gold-line:  rgba(227, 201, 92, 0.50);
}

/* ---- Light scheme (fully defined; same green family, darker shades) ---- */
[data-md-color-scheme="vol-light"] {
  --md-hue: 145;

  --md-default-bg-color:         #f3f7f3;
  --md-default-bg-color--light:  #e9f0ea;
  --md-default-bg-color--lighter:#dfe8e0;
  --md-default-fg-color:         #12241a;
  --md-default-fg-color--light:  #33473b;
  --md-default-fg-color--lighter:#5a6b60;
  --md-default-fg-color--lightest:#c4d2c8;

  --md-primary-fg-color:         #0e3a1c;
  --md-primary-fg-color--light:  #14502a;
  --md-primary-fg-color--dark:   #07200f;
  --md-primary-bg-color:         #eaf3ec;

  --md-accent-fg-color:          #1c7a3c;

  --md-typeset-color:            #172a1f;
  --md-typeset-a-color:          #15602f;

  --md-code-bg-color:            #eef3ee;
  --md-code-fg-color:            #16351f;

  /* footer stays dark-green in both modes (matches the header chrome) */
  --md-footer-bg-color:          #0b1a12;
  --md-footer-bg-color--dark:    #081410;

  /* semantic tokens — darker greens/gold that read on a light canvas */
  --vol-panel:      #eaf1ea;
  --vol-heading:    #0e3a1c;
  --vol-heading-2:  #14502a;
  --vol-heading-3:  #6f5a16;
  --vol-code-fg:    #0e3a1c;
  --vol-code-bg:    rgba(20, 80, 42, 0.10);
  --vol-body-muted: #4a5a50;
  /* gold = the two-tone secondary — lightest that still clears WCAG on light */
  --vol-gold-fg:    #836e18;
  --vol-gold-line:  rgba(131, 110, 24, 0.55);
}

/* ---- Header: subtle circuit-board gradient ------------------------ */
.md-header {
  background: linear-gradient(90deg, var(--vol-header) 0%, var(--vol-header-2) 70%, #15511f 100%);
  box-shadow: 0 0 0 1px rgba(77, 224, 122, 0.20), 0 2px 16px rgba(0, 0, 0, 0.7);
}
.md-tabs {
  background: var(--vol-tabs);
  border-bottom: 1px solid rgba(77, 224, 122, 0.18);
}

/* ---- Links + accents ---------------------------------------------- */
.md-typeset a {
  color: var(--md-typeset-a-color);
  text-decoration-color: rgba(101, 170, 111, 0.4);
}
.md-typeset a:hover {
  color: var(--vol-neon);
  text-shadow: 0 0 8px rgba(77, 224, 122, 0.45);
}

/* ---- Headings: monospace, neon underline -------------------------- */
.md-typeset h1,
.md-typeset h2 {
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
  letter-spacing: -0.01em;
}
.md-typeset h1 {
  color: var(--vol-heading);
  font-weight: 700;
}
.md-typeset h2 {
  color: var(--vol-heading-2);
  border-bottom: 1px solid var(--vol-gold-line);
  padding-bottom: 0.2em;
}
.md-typeset h3 { color: var(--vol-gold-fg); }

/* ---- Code blocks: circuit-board panel ----------------------------- */
.md-typeset pre > code {
  border: 1px solid rgba(77, 224, 122, 0.14);
  border-radius: 6px;
}
.md-typeset code {
  border-radius: 4px;
}

/* ---- Inline code accent ------------------------------------------- */
.md-typeset :not(pre) > code {
  background-color: var(--vol-code-bg);
  color: var(--vol-code-fg);
}

/* ---- Tables ------------------------------------------------------- */
.md-typeset table:not([class]) {
  border: 1px solid rgba(77, 224, 122, 0.16);
}
.md-typeset table:not([class]) th {
  background: #0e3a1c;
  color: var(--vol-glow);
  border-bottom: 2px solid var(--vol-gold-line);
}
.md-typeset table:not([class]) tr:hover {
  background: rgba(77, 224, 122, 0.05);
}

/* ---- Admonitions: gold + green family ----------------------------- */
.md-typeset .admonition,
.md-typeset details {
  border-left-width: 3px;
  border-radius: 6px;
  background: var(--vol-panel);
}
.md-typeset .admonition.note,
.md-typeset .admonition.abstract {
  border-color: var(--vol-green);
}
.md-typeset .admonition.warning,
.md-typeset .admonition.caution {
  border-color: var(--vol-gold);
}
.md-typeset .admonition.danger {
  border-color: #d35454;
}

/* ---- Search + nav active ------------------------------------------ */
/* wayfinding = gold (the two-tone counterpart to green links) */
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--vol-gold-fg);
}

/* ---- Buttons ------------------------------------------------------ */
.md-typeset .md-button {
  border-color: var(--vol-green);
  color: var(--vol-heading);
}
.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  background: var(--vol-green);
  border-color: var(--vol-neon);
  color: #061a0d;
  box-shadow: 0 0 16px rgba(77, 224, 122, 0.4);
}
.md-typeset .md-button--primary {
  background: linear-gradient(90deg, #1c7a3c, #3e9e40);
  border-color: var(--vol-neon);
  color: #051409;
}

/* ---- Hero (home page) --------------------------------------------- */
.vol-hero {
  position: relative;
  margin: -1.2rem -0.8rem 1.5rem;
  padding: 2.4rem 1.2rem 2rem;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 85% 30%, rgba(199, 170, 51, 0.18), transparent 55%),
    radial-gradient(90% 90% at 15% 80%, rgba(77, 224, 122, 0.14), transparent 60%),
    linear-gradient(160deg, #07200F 0%, #0b2a16 100%);
  border: 1px solid rgba(77, 224, 122, 0.18);
}
.vol-hero img.vol-banner {
  width: 100%;
  max-width: 980px;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
}
.vol-hero .vol-tagline {
  margin-top: 1rem;
  font-family: "JetBrains Mono", monospace;
  color: var(--vol-muted);
  letter-spacing: 0.04em;
}
.vol-badges { margin: 0.6rem 0 0; }
.vol-badges img { margin: 2px; vertical-align: middle; }

/* ---- Feature grid cards ------------------------------------------- */
.vol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
  margin: 1.2rem 0;
}
.vol-card {
  border: 1px solid rgba(77, 224, 122, 0.18);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  background: var(--vol-panel);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.vol-card:hover {
  border-color: var(--vol-neon);
  box-shadow: 0 0 18px rgba(77, 224, 122, 0.18);
  transform: translateY(-2px);
}
.vol-card h3 {
  margin: 0 0 0.4rem;
  color: var(--vol-heading);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.95rem;
}
.vol-card p { margin: 0; color: var(--vol-body-muted); font-size: 0.8rem; }

/* ---- Mermaid: tint to palette ------------------------------------- */
.md-typeset .mermaid {
  background: var(--vol-panel);
  border: 1px solid rgba(77, 224, 122, 0.14);
  border-radius: 8px;
  padding: 0.6rem;
}

/* ---- Scrollbar ---------------------------------------------------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #061a0d; }
::-webkit-scrollbar-thumb {
  background: #1c5230;
  border-radius: 6px;
  border: 2px solid #061a0d;
}
::-webkit-scrollbar-thumb:hover { background: var(--vol-green); }

/* ---- Blog tab: a separate entity, set apart from the wiki sections -- */
/* Blog is the last nav item and now links out to infernalcode.com; margin-left:auto
   floats it to the far right of
   the tab bar so it doesn't read as another wiki section. The gold accent
   (vs. the green wiki chrome) and the divider reinforce the separation.
   :has() degrades gracefully — the link keeps its gold colour either way. */
.md-tabs__item:has(.md-tabs__link[href^="https://infernalcode.com"]) {
  margin-left: auto;
  border-left: 1px solid rgba(199, 170, 51, 0.30);
  padding-left: 0.2rem;
}
.md-tabs__link[href^="https://infernalcode.com"] {
  color: var(--vol-gold);
  opacity: 1;
  font-weight: 700;
}
.md-tabs__link[href^="https://infernalcode.com"]:hover {
  color: var(--vol-gold-2);
  text-shadow: 0 0 8px rgba(199, 170, 51, 0.45);
}

/* ---- Highlights: gold emphasis (two-tone) ------------------------- */
.md-typeset mark {
  background-color: rgba(199, 170, 51, 0.22);
  color: inherit;
  border-radius: 3px;
  padding: 0 0.15em;
}

/* ===================================================================
   BLOG — editorial identity, distinct from the terminal-mono wiki
   =================================================================== */
/* Bricolage Grotesque display headings, scoped to blog surfaces only. */
.md-content--post .md-typeset :is(h1, h2, h3, h4),
.md-post__title,
.md-post--excerpt .md-post__content :is(h1, h2, h3) {
  font-family: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.md-content--post .md-typeset h1,
.md-post__title {
  font-weight: 800;
  line-height: 1.08;
}
.md-content--post .md-typeset h2 {
  font-weight: 700;
}
/* Blog leans gold: post meta (date · category) carries the gold accent. */
.md-post__meta,
.md-post__meta a,
.md-content--post .md-post__meta {
  color: var(--vol-gold-fg);
}