/* ==========================================================================
   Rohit's Blog — style adapted from Cassidy Williams' "blahg"
   (https://github.com/cassidoo/blahg), itself based on Bear Blog's default CSS
   (MIT). Serif prose, monospace code, minimal sticky centred nav, blue underlines.
   All the site's feature hooks (TOC, alerts, line numbers, etc.) are preserved.
   ========================================================================== */

:root {
  --font-mono: "iA Writer Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* Warm system serif for prose (Iowan Old Style on Apple, Palatino/Georgia elsewhere). */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --measure: 70ch;

  /* blahg palette */
  --white: #efefef;
  --black: #252525;
  --gray: #6b6b6b;
  --highlight: #e5ffc3;
  --green: #24d05a;
  --pink: #eb4888;
  --blue: #10a2f5;
  --yellow: #e9bc3f;

  /* semantic (light) */
  --bg: var(--white);
  --fg: var(--black);
  --fg-muted: var(--gray);
  --accent: var(--blue);
  --border: #cfcfcf;
  --nav-bg: rgba(239, 239, 239, 0.7);
  --code-bg: rgba(37, 37, 37, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--black);
    --fg: var(--white);
    --fg-muted: #a4a4a4;
    --border: #444444;
    --nav-bg: rgba(37, 37, 37, 0.7);
    --code-bg: rgba(239, 239, 239, 0.10);
  }
}

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

html, body {
  margin: auto;
  max-width: var(--measure);
  padding: 20px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.65;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

::selection { background: var(--highlight); color: var(--black); }
@media (prefers-color-scheme: dark) {
  ::selection { background: #0f0f0f; color: var(--white); }
}

/* Links: text is the body colour, underline is always blue. */
a {
  color: var(--fg);
  text-decoration-color: var(--blue);
  text-decoration-thickness: 0.3ex;
  text-underline-offset: 0.3ex;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 20px; top: 8px; z-index: 10;
  background: var(--bg); padding: 0.4rem 0.6rem; border: 1px solid var(--border);
}

/* --- Header + sticky nav ---------------------------------------------- */
.site-header { text-align: center; margin-bottom: 0; }
.site-title {
  display: inline-block;
  font-size: 1.9rem;
  font-weight: 700;
  text-decoration-line: none;
  margin: 0.3em 0 0.1em;
}
.site-subtitle { color: var(--fg-muted); margin: 0 0 0.5em; }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  text-align: center;
  padding: 20px 0;
  margin-bottom: 24px;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.site-nav a { text-decoration-line: none; }
.site-nav a:not(:last-child) { padding-right: 12px; }
.site-nav a.active { font-weight: 700; text-decoration-line: underline; }
@media (max-width: 600px) {
  .site-nav a:not(:last-child) { padding-right: 8px; }
}

main { line-height: 1.6; }

/* --- Headings --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { line-height: 1.15; position: relative; }
h1 { color: var(--fg); font-weight: 700; font-size: 1.8rem; margin: 0.6em 0 0.3em; }
h2, h3, h4, h5, h6 { color: var(--fg-muted); font-weight: 400; }
h2 { font-size: 1.4rem; margin: 1.8em 0 0.4em; }
h3 { font-size: 1.15rem; margin: 1.5em 0 0.4em; }
h4 { font-size: 1rem; margin: 1.3em 0 0.3em; }

/* Anchor sits in the left gutter, out of flow, so heading text aligns with body. */
.zola-anchor {
  position: absolute;
  left: 0;
  transform: translateX(-100%);
  padding-right: 0.3em;
  font-size: 0.85em;
  opacity: 0;
  text-decoration-line: none;
}
h1:hover .zola-anchor, h2:hover .zola-anchor, h3:hover .zola-anchor,
h4:hover .zola-anchor, h5:hover .zola-anchor, h6:hover .zola-anchor { opacity: 0.4; }

p, ul, ol, blockquote, table, figure, pre, dl { margin: 0 0 1rem; }
ul, ol { padding-left: 1.3rem; }
li { margin: 0.2rem 0; }
img { max-width: 100%; height: auto; }
hr { border: none; border-top: 1px solid var(--gray); margin: 1.5rem 0; }

blockquote {
  /* Bar hangs in the left gutter; quote text lines up with body text. */
  margin: 0 0 1rem -1rem;
  padding-left: calc(1rem - 3px);
  border-left: 3px solid var(--gray);
  font-style: italic;
  color: var(--fg);
}
blockquote > :first-child { margin-top: 0; }
blockquote > :last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); text-align: left; }
th { font-weight: 700; }

/* --- Code ------------------------------------------------------------- */
:not(pre) > code {
  font-family: var(--font-mono);
  background: var(--code-bg);
  padding: 2px 5px;
  font-size: 0.86em;
  font-weight: 700;
}
pre {
  font-family: var(--font-mono);
  padding: 1rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  font-size: 0.88rem;
  line-height: 1.5;
  -webkit-overflow-scrolling: touch;
}
pre code { font-family: var(--font-mono); background: none; padding: 0; font-weight: 400; }

/* Line numbers (```lang,linenos): right-aligned, non-selectable gutter. */
.giallo-ln {
  display: inline-block;
  min-width: 2.2em;
  margin-right: 1rem;
  text-align: right;
  user-select: none;
  opacity: 0.5;
}
/* Highlighted lines (```lang,hl_lines=…): full-width row + left marker. */
.z-hl { display: inline-block; width: 100%; box-shadow: inset 3px 0 0 0 var(--accent); }

/* Filename caption from ```lang,name=file.ext (rendered as <code data-name>). */
pre:has(code[data-name]) { position: relative; padding-top: 2.6rem; }
pre > code[data-name]::before {
  content: attr(data-name);
  position: absolute; inset: 0 0 auto 0;
  padding: 0.4rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem; color: var(--fg-muted);
  background: var(--code-bg); border-bottom: 1px solid var(--border);
}

/* Included source files (code_file shortcode). */
figure.code-file { margin: 0 0 1rem; }
figure.code-file figcaption {
  font-family: var(--font-mono);
  font-size: 0.78rem; color: var(--fg-muted);
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border); border-bottom: none;
  background: var(--code-bg);
}
figure.code-file figcaption + pre { margin: 0; }

/* --- Post lists / archive --------------------------------------------- */
.posts { list-style: none; padding: 0; }
.posts li { margin: 0 0 1.4rem; }
.post-link { font-size: 1.2rem; font-weight: 700; }
.excerpt { display: block; color: var(--fg-muted); }
time { font-style: italic; color: var(--fg-muted); }
.posts time { white-space: nowrap; }

/* --- Tags (#tag) ------------------------------------------------------ */
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.tag { font-family: var(--font-mono); color: var(--fg-muted); font-size: 0.8rem; text-decoration-line: none; }
.tag::before { content: "#"; }
.tag:hover { font-weight: 700; }
.tag-cloud { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.tag-cloud .count { color: var(--fg-muted); font-size: 0.8rem; }
.tag-cloud .count::before { content: "×"; margin-right: 0.15rem; }

/* --- Post page -------------------------------------------------------- */
.post-head { margin-bottom: 1rem; }
.post-head h1 { margin-bottom: 0.15em; }
.post-meta { color: var(--fg-muted); font-style: italic; margin: 0.2rem 0 0.6rem; }

/* Series navigation (posts with extra.series) */
.series {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}
.series summary { cursor: pointer; font-weight: 700; }
.series ol { margin: 0.6rem 0 0.2rem; padding-left: 1.6rem; }
.series li { margin: 0.25rem 0; }
.series li.current { font-weight: 700; list-style-type: disc; }
.series a { text-decoration-line: none; }

/* Narrow screens: the TOC is a collapsible box inline above the post. */
.toc {
  border: 1px solid var(--border);
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 2rem;
}
.toc summary { cursor: pointer; font-weight: 700; }
.toc ul { list-style: none; padding-left: 0.6rem; margin: 0.5rem 0 0.2rem; }
.toc ul ul { padding-left: 1rem; }
.toc a { text-decoration-line: none; }
.toc a:hover { color: var(--blue); }

/* A post with neither a series nor a TOC leaves the aside with no element
   children; drop it so it can't contribute stray chrome to the gutter.
   `:not(:has(*))` rather than `:empty`, since the template leaves whitespace. */
.post-aside:not(:has(*)) { display: none; }

/* Wide screens: lift the whole aside (series nav + TOC) out of the flow into
   the left gutter and fix it to the viewport, so it stays put while the post
   scrolls. Both live in one container so they stack predictably and the group
   scrolls together when tall. The offset is measured from the centre of the
   viewport, since the text column is centred at --measure wide; max() keeps it
   on-screen if `ch` renders wider than expected. */
@media (min-width: 1200px) {
  .post-aside {
    position: fixed;
    top: 5.5rem;
    left: max(0.75rem, calc(50vw - (var(--measure) / 2) - 19.5rem));
    width: 16rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-left: 2px solid var(--border);
    padding-left: 0.9rem;
    font-size: 0.8rem;
    line-height: 1.45;
  }

  /* Inside the sidebar both boxes drop their own chrome. */
  .post-aside .series,
  .post-aside .toc {
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0 0 1.1rem;
    font-size: inherit;
  }
  .post-aside .series { padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
  .post-aside .toc { margin-bottom: 0; }

  .post-aside summary {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-muted);
    font-weight: 700;
  }
  .post-aside ul, .post-aside ol { padding-left: 0; }
  .post-aside ul ul { padding-left: 0.8rem; }
  .post-aside ol { list-style-position: inside; }
  .post-aside li { margin: 0.3rem 0; }
  .post-aside a { color: var(--fg-muted); }
  .post-aside a:hover { color: var(--blue); }
  .post-aside .series li.current { color: var(--fg); }
}

/* A very short viewport can't host a fixed sidebar -- fall back to inline. */
@media (min-width: 1200px) and (max-height: 26rem) {
  .post-aside {
    position: static; width: auto; max-height: none;
    border-left: none; padding-left: 0; font-size: inherit;
  }
  .post-aside .series,
  .post-aside .toc {
    border: 1px solid var(--border); padding: 0.5rem 1rem; margin-bottom: 1.5rem;
  }
}

.post-nav {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--gray);
  font-size: 0.9rem;
}
.post-nav .next { margin-left: auto; text-align: right; }

/* --- GitHub-style alerts (> [!NOTE] etc.) ----------------------------- */
[class^="markdown-alert-"] {
  margin: 0 0 1rem;
  padding: 0.6rem 1rem;
  border-left: 4px solid var(--alert-color, var(--accent));
  background: color-mix(in srgb, var(--alert-color, var(--accent)) 10%, transparent);
}
[class^="markdown-alert-"] > :first-child { margin-top: 0; }
[class^="markdown-alert-"] > :last-child { margin-bottom: 0; }
[class^="markdown-alert-"]::before {
  content: attr(data-label);
  display: block;
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--alert-color, var(--accent));
  margin-bottom: 0.3rem;
}
.markdown-alert-note      { --alert-color: var(--blue); }
.markdown-alert-tip       { --alert-color: var(--green); }
.markdown-alert-important { --alert-color: #8250df; }
.markdown-alert-warning   { --alert-color: var(--yellow); }
.markdown-alert-caution   { --alert-color: var(--pink); }
.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"; }

/* --- Definition lists ------------------------------------------------- */
dt { font-weight: 700; margin-top: 0.6rem; }
dd { margin: 0.15rem 0 0.15rem 1.2rem; color: var(--fg-muted); }

/* --- Misc inline HTML ------------------------------------------------- */
kbd {
  font-family: var(--font-mono);
  font-size: 0.8em; padding: 0.1em 0.4em;
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px;
  background: var(--code-bg);
}
mark { background: var(--highlight); color: var(--black); padding: 0 0.15em; }
/* Scoped to post content: the TOC and series nav supply their own chrome,
   and a generic `details` border would double up inside them. */
.post-body details { border: 1px solid var(--border); padding: 0.6rem 1rem; margin: 0 0 1rem; }
.post-body details summary { cursor: pointer; font-weight: 700; }

/* --- Section / page heads, footer, 404 -------------------------------- */
.page-head { margin-bottom: 1.5rem; }
.intro { color: var(--fg); }
.notfound { text-align: center; padding: 3rem 0; }

.site-footer {
  margin-top: 2.5rem;
  padding: 25px 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--fg-muted);
}