/* ==========================================================================
   style.css
   Sharp corners. Snappy transitions. Monokai-adjacent, blue-and-green.
   Drop this in static/css/style.css and link it from templates/base.html:
     <link rel="stylesheet" href="{{ get_url(path='css/style.css') }}">
   (See the notes at the bottom of the chat message for the Sass version.)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   Self-host in static/fonts/. Fira Sans: grab the static weights you need
   (400/500/600/700, + italics if you want them) from Google Fonts or
   github.com/bBoxType/FiraSans. Fira Code: grab the variable font
   (FiraCode-VF.woff2) from github.com/tonsky/FiraCode/releases — one file
   covers weights 300-700, which is what the `format('woff2-variations')`
   line below expects.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Fira Sans";
  src: url("/fonts/FiraSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("/fonts/FiraSans-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("/fonts/FiraSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("/fonts/FiraSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("/fonts/FiraSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Code VF";
  src: url("/fonts/FiraCode-VF.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   Dark is the "home" palette (this is a Monokai-adjacent site); light is a
   proper AA-contrast remap, not just an inverted filter. Code blocks keep a
   fixed dark palette in BOTH modes — a code sample shouldn't go pastel just
   because someone's on light mode.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #1c1d1a;
  --bg-panel: #232420;
  --bg-inset: #161714;

  /* text */
  --fg: #eceee6;
  --fg-muted: #98988c;
  --fg-faint: #6b6b60;

  /* structure */
  --border: #3a3b34;
  --border-strong: #52534a;

  /* accents — blue is the default highlight, green is the deliberate
     variation, red/orange are reserved for real emphasis */
  --blue: #66d9ef;
  --green: #a6e22e;
  --red: #f92672;
  --orange: #fd971f;

  --link: var(--blue);
  --link-hover: var(--green);
  --selection: rgba(166, 226, 46, 0.28);

  /* fixed code palette — does not change with theme */
  --code-bg: #221f21;
  --code-fg: #f8f8f2;
  --code-border: #49483e;
  --code-muted: #75715e;
  --code-blue: #66d9ef;
  --code-green: #a6e22e;
  --code-pink: #f92672;
  --code-orange: #fd971f;
  --code-purple: #ae81ff;
  --code-yellow: #e6db74;

  /* type */
  --font-sans: "Fira Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Fira Code VF", "Fira Code", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* layout */
  --measure: 42rem;      /* prose column width */
  --rail: 15rem;         /* sidebar width, once you add ToC/related content */
  --gap: 3rem;
  --header-h: 3.75rem;

  /* motion — short and snappy, not zero */
  --fast: 100ms;
  --normal: 160ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* light remap — same variable names, different values, no inversion */
[data-theme="light"] {
  color-scheme: light;

  --bg: #f3f4f1;
  --bg-panel: #ffffff;
  --bg-inset: #eaeae4;

  --fg: #1b1c19;
  --fg-muted: #565749;
  --fg-faint: #83847a;

  --border: #d9dad1;
  --border-strong: #b9baaf;

  --blue: #0a6ea8;
  --green: #2f7d1f;
  --red: #c3225f;
  --orange: #a85a0a;

  --link: var(--blue);
  --link-hover: var(--green);
  --selection: rgba(47, 125, 31, 0.18);
}

/* honour system preference until the visitor picks explicitly */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f3f4f1;
    --bg-panel: #ffffff;
    --bg-inset: #eaeae4;
    --fg: #1b1c19;
    --fg-muted: #565749;
    --fg-faint: #83847a;
    --border: #d9dad1;
    --border-strong: #b9baaf;
    --blue: #0a6ea8;
    --green: #2f7d1f;
    --red: #c3225f;
    --orange: #a85a0a;
    --link: var(--blue);
    --link-hover: var(--green);
    --selection: rgba(47, 125, 31, 0.18);
  }
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  color-scheme: light dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  transition: background-color var(--normal) var(--ease), color var(--normal) var(--ease);
}

img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--selection); color: var(--fg); }

/* every interactive element gets a real, visible, on-brand focus ring */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* scrollbars, themed (Firefox + WebKit) */
* { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   4. Type
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg);
}

h1 { font-size: 2rem; margin-block: 0 1rem; }
h2 { font-size: 1.5rem; margin-block: 2.5rem 0.9rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
h3 { font-size: 1.2rem; margin-block: 1.8rem 0.6rem; }
h4 { font-size: 1rem; margin-block: 1.4rem 0.4rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); }

p, ul, ol, blockquote, figure, table, pre { margin-block: 0 1.1rem; }
ul, ol { padding-inline-start: 1.3rem; }
li + li { margin-top: 0.3rem; }

small, .meta { color: var(--fg-muted); font-size: 0.85rem; }

strong { font-weight: 600; }
em { color: var(--fg); }

/* a heading you can permalink to — style the anchor Zola/most ToC setups add */
h2 .heading-anchor, h3 .heading-anchor, h4 .heading-anchor {
  font-family: var(--font-mono);
  color: var(--fg-faint);
  text-decoration: none;
  margin-left: 0.5rem;
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
}
h2:hover .heading-anchor, h3:hover .heading-anchor, h4:hover .heading-anchor { opacity: 1; }

hr {
  border: none;
  border-top: 1px dashed var(--border-strong);
  margin-block: 2.5rem;
}

/* --------------------------------------------------------------------------
   5. Links — the signature: blue by default, green is what YOU do differently
   -------------------------------------------------------------------------- */

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1.5px;
  transition: color var(--fast) var(--ease), text-decoration-color var(--fast) var(--ease);
}

a:hover, a:focus-visible {
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
}

nav a, .site-title, footer a { text-decoration: none; }

/* --------------------------------------------------------------------------
   6. Page shell — header / footer full-width, content centered
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}

.site-header .wrap {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1rem;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 0.1em;
  white-space: nowrap;
}

/* the caret: a terminal cursor standing in for a logomark */
/* .site-title::before { */
/*   content: ">"; */
/*   color: var(--green); */
/*   font-weight: 700; */
/* } */
/* .site-title::after { */
/*   content: ""; */
/*   width: 0.55em; */
/*   height: 1.1em; */
/*   margin-left: 0.15em; */
/*   background: var(--green); */
/*   animation: caret-blink 1.1s steps(1) infinite; */
/* } */
/* @media (prefers-reduced-motion: reduce) { */
/*   .site-title::after { animation: none; opacity: 1; } */
/* } */
/* @keyframes caret-blink { */
/*   0%, 49% { opacity: 1; } */
/*   50%, 100% { opacity: 0; } */
/* } */

.site-nav {
  display: flex;
  gap: 1.4rem;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.site-nav a {
  color: var(--fg-muted);
  padding-block: 0.3rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--fg); border-bottom-color: var(--blue); }
.site-nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--green); }

/* theme toggle — sharp square, not a pill */
.theme-toggle {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.theme-toggle:hover { border-color: var(--green); }
.theme-toggle svg { width: 1.05rem; height: 1.05rem; stroke: var(--fg); fill: none; stroke-width: 1.6; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--fg-muted);
}
.site-footer .wrap { padding-block: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   7. Content layout — centered column, room for rails either side
   -------------------------------------------------------------------------- */

main { flex: 1 0 auto; padding-block: 3rem 4rem; }

.page {
  display: flex;
  justify-content: center;
  gap: var(--gap);
  align-items: flex-start;
}

.prose { width: 100%; max-width: var(--measure); min-width: 0; }

.rail {
  flex: none;
  width: var(--rail);
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--fg-muted);
}

.rail h4 { margin-top: 0; }

/* table of contents */
.toc { border-left: 2px solid var(--border); padding-left: 1rem; }
.toc ol, .toc ul { list-style: none; padding-left: 0; margin: 0; }
.toc li + li { margin-top: 0.45rem; }
.toc a { color: var(--fg-muted); text-decoration: none; }
.toc a:hover, .toc a:focus-visible { color: var(--green); }
.toc ol ol, .toc ul ul { padding-left: 0.9rem; margin-top: 0.45rem; }

@media (max-width: 74rem) {
  .rail { display: none; } /* promote to a <details> in the template if you want it on mobile */
}

/* --------------------------------------------------------------------------
   8. Prose elements
   -------------------------------------------------------------------------- */

.post-meta {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--fg-muted);
  margin-bottom: 1.75rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

blockquote {
  border-left: 3px solid var(--blue);
  padding: 0.2rem 1rem;
  color: var(--fg-muted);
  font-style: italic;
}
blockquote p:last-child { margin-bottom: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
th, td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.7rem;
  text-align: left;
}
th {
  background: var(--bg-panel);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-panel) 55%, transparent); }

figure { text-align: center; }
figure img { margin-inline: auto; border: 1px solid var(--border); }
figcaption {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--fg-muted);
  margin-top: 0.5rem;
}

/* tags / badges */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; }
.tag {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: lowercase;
  color: var(--fg-muted);
  border: 1px solid var(--border-strong);
  padding: 0.15rem 0.55rem;
  text-decoration: none;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.tag:hover, .tag:focus-visible {
  color: var(--bg);
  background: var(--green);
  border-color: var(--green);
}

/* callouts, if you want a note/warn/danger admonition class */
.callout {
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--blue);
  background: var(--bg-panel);
  padding: 0.9rem 1.1rem;
}
.callout.warn { border-left-color: var(--orange); }
.callout.danger { border-left-color: var(--red); }
.callout p:last-child { margin-bottom: 0; }

/* buttons, if you need one (subscribe, etc.) */
.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--fg);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--green); border-color: var(--green); color: var(--bg); }

/* --------------------------------------------------------------------------
   9. Code
   Fixed Monokai-ish palette regardless of page theme. Styled as a small
   terminal card: thin header bar, sharp corners, its own scrollbar.
   The .giallo-l / .giallo-ln rules are required by Zola's Giallo highlighter
   for line layout — keep them even if you restyle everything else.
   -------------------------------------------------------------------------- */

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
}

:not(pre) > code {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 0.1em 0.4em;
  color: var(--green);
}

pre {
  position: relative;
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--code-border);
  padding: 2.25rem 1.1rem 1.1rem;
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.55;
}

/* terminal-card header bar with three sharp-cornered "buttons" */
pre::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1.9rem;
  background: color-mix(in srgb, var(--code-bg) 80%, black);
  border-bottom: 1px solid var(--code-border);
}
pre::after {
  content: "";
  position: absolute;
  top: 0.65rem;
  left: 1rem;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--code-pink);
  box-shadow: 0.95rem 0 0 var(--code-orange), 1.9rem 0 0 var(--code-green);
}

pre > code {
  font-family: var(--font-mono);
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  display: block;
}

/* filename label, populated via ```rust,name=foo.rs */
pre > code[data-name]::before {
  content: attr(data-name);
  position: absolute;
  top: 0.45rem;
  right: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--code-muted);
}

.giallo-l { display: inline-block; min-height: 1lh; width: 100%; }
.giallo-ln {
  display: inline-block;
  user-select: none;
  margin-right: 0.4em;
  padding: 0.4em;
  min-width: 3ch;
  text-align: right;
  opacity: 0.6;
  color: var(--code-muted);
}

/* Fix Giallo putting background:FFFFFF on certain spans. */
.giallo-l span[style*="background-color: #FFFFFF"] {
  background-color: transparent !important;
  color: inherit !important;
}

pre mark {
  display: block;
  margin-inline: -1.1rem;
  padding-inline: 1.1rem;
  background: color-mix(in srgb, var(--code-blue) 14%, transparent);
  color: inherit;
}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 40rem) {
  html { font-size: 15px; }
  .site-header .wrap { gap: 1rem; }
  .site-nav { gap: 0.9rem; font-size: 0.8rem; }
  main { padding-block: 2rem 3rem; }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
}