/* Project overrides for archie-zola.
   Loaded last via config.extra.custom_css, so these win over the theme's
   main.css and dark.css without touching the submodule.

   The theme scatters accent colours across four variables plus a number of
   hard-coded literals (red, rebeccapurple, dodgerblue, navy, blue, lightblue).
   Everything below funnels into ONE accent per theme:

       light -> blue    dark -> green

   To retheme the whole site, change --accent / --accent-hover only. */

:root {
  --accent: #1d6fb8;
  --accent-hover: #14507f; /* darker, for hover backgrounds */

  --dividercl: #d8d8d8; /* <hr>, deliberately neutral rather than accent */

  /* Inline `code` surface. Theme default (#f1f1f1) sat too close to the white
     page to read as a distinct chip — this is darker and tinted toward the
     accent so it registers without shouting. */
  --codebg: #d3e0ee;
  --codefg: #123f66;

  /* The theme's own accent variables, all routed through --accent.
     var() resolves per element, so the dark block below feeds these too. */
  --maincolor: var(--accent); /* links, heading #-prefixes, tags (main.css) */
  --darkMaincolor: var(--accent); /* same, but used by dark.css */
  --bordercl: var(--accent); /* blockquote rule + dotted footer bar */
  --callouctcolor: var(--accent); /* .callout blocks */
  --hovercolor: var(--accent-hover);
}

/* data-theme is set by themetoggle.js — dark.css is swapped via its `disabled`
   flag, which leaves CSS no way to tell which mode is active. */
:root[data-theme="dark"] {
  --accent: #3fc97a;
  --accent-hover: #2f9e5f;

  --dividercl: #3c3c3f; /* mid grey against the #202124 dark background */

  /* Sits just above the #202124 page, tinted toward the green accent. Going
     below the page colour instead looks inset but separates less — there is
     very little room darker than #202124 before it bottoms out. */
  --codebg: #2a3c31;
  --codefg: #a9e8c3;
}

/* Breathing room above the site title — the theme starts flush at 8px. */
.content {
  padding-top: 2.5rem;
}

/* The theme has no rule for the nav links at all: they sit inline, separated
   only by collapsed whitespace. Space them with margin rather than padding —
   the theme's 3px border-bottom spans the padding box, so padding here would
   stretch each underline along with the gap. */
header nav a {
  margin: 0 0.5rem;
}

/* dark.css hard-codes `blue` on both of these, so restate them explicitly
   rather than relying on the variables alone. */
hr {
  border-top-color: var(--dividercl);
}

blockquote {
  border-left-color: var(--bordercl);
}

/* Inline code. The theme styles every <code>, including the ones inside
   highlighted blocks — in dark mode that painted code blocks `lightblue`
   behind the syntax colours. Keep the surface on inline code only and let
   the giallo stylesheets own the blocks. */
code {
  background-color: var(--codebg);
  color: var(--codefg);
  border-radius: 3px;
}

pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
}

/* Drafts: dark.css gives this a `blue` background. */
.draft-label {
  color: var(--accent);
  background-color: var(--codebg);
}

/* GitHub-style callouts. `github_alerts = true` emits
   <blockquote class="markdown-alert-note"> and friends, but the theme predates
   the feature and has no rule for them — without this they render as plain
   blockquotes with the type label dropped entirely.

   These keep distinct colours on purpose: the whole point of a warning is that
   it does not look like body text. Only `note` follows the site accent. */
[class^="markdown-alert-"] {
  --alertcolor: var(--accent);
  border-left: 3px solid var(--alertcolor);
  color: inherit;
}

[class^="markdown-alert-"]::before {
  color: var(--alertcolor);
  display: block;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-bottom: 0.3em;
}

.markdown-alert-note::before      { content: "NOTE"; }
.markdown-alert-tip::before       { content: "TIP"; }
.markdown-alert-important::before { content: "IMPORTANT"; }
.markdown-alert-warning::before   { content: "WARNING"; }
.markdown-alert-caution::before   { content: "CAUTION"; }

.markdown-alert-tip       { --alertcolor: #1f7a5c; }
.markdown-alert-important { --alertcolor: #7c3aed; }
.markdown-alert-warning   { --alertcolor: #b25e09; }
.markdown-alert-caution   { --alertcolor: #b42318; }

/* dark.css hard-codes `red` / `blue` for selection regardless of the
   variables, so restate both here. */
::selection {
  background: var(--accent);
  color: #fff;
}

::-moz-selection {
  background: var(--accent);
  color: #fff;
}