/* Site-wide overrides loaded AFTER the theme's style.css. Affects every
 * page. Kept small and self-contained so it can be removed by deleting one
 * <link> and one file. */

/* ---------- Typography ------------------------------------------------- */
/* The theme uses Oswald (a narrow display face) for every heading and the
 * site title. It works for short menu items but looks heavy and hard to read
 * for long post titles and section headings. Switch to a humanist sans-serif
 * stack that lines up with modern OSes (San Francisco on macOS, Segoe UI on
 * Windows, Roboto on Android, Cantarell/Inter on Linux). */
:root {
  --kilo-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto",
               "Helvetica Neue", Arial, sans-serif;
  --kilo-mono: ui-monospace, "JetBrains Mono", "Fira Code", "SFMono-Regular",
               Menlo, Consolas, "Liberation Mono", monospace;
}

body {
  font-family: var(--kilo-sans);
  /* Keep the theme's original 18px body size, just swap the font. */
  font-size: 18px;
  line-height: 1.65;
  color: #2a2a2a;
}
/* Make the home-page summaries render at the same 18px as the article body
 * so a post's intro paragraph reads identically on the index and on the
 * post page itself. */
article, article p, article li,
.panel-body, .panel-body p, .panel-body li {
  font-size: 18px;
  line-height: 1.7;
  color: #2a2a2a;
}

/* NOTE: the theme sets `html { font-size: 10px }`, which means 1rem == 10px,
 * not the usual 16. So we use absolute px sizes for headings to keep things
 * predictable and avoid 10x-too-small bugs. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--kilo-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  line-height: 1.25;
}
h1, .h1 { font-size: 38px; margin: 1.3em 0 0.5em; }
h2, .h2 { font-size: 30px; margin: 1.6em 0 0.5em; }
h3, .h3 { font-size: 24px; margin: 1.4em 0 0.4em; }
h4, .h4 { font-size: 20px; }

/* Post title at the top of the post page. */
.post-title, .article-title, article h1:first-child,
main > header > h1 {
  font-size: 44px;
  line-height: 1.15;
  margin-top: 0.2em;
  margin-bottom: 0.6em;
}

/* Section headings inside posts get a subtle leading rule so the eye lands
 * on them when skimming. */
article h2, .post-content h2, .post h2 {
  border-top: 1px solid #e6e1d4;
  padding-top: 1.1em;
}

/* ---------- Tables ----------------------------------------------------- */
/* The theme zeros out td/th padding, which makes Markdown tables look like a
 * blob. Restore them. */
article table, .post-content table, .post table {
  width: 100%;
  margin: 1.4em 0;
  border-collapse: collapse;
  font-size: 1.15rem;
  line-height: 1.55;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  border: 1px solid #e6e1d4;
  color: #1a1a1a;
}
article table thead, .post-content table thead, .post table thead {
  background: #f5efe1;
}
article table th, .post-content table th, .post table th {
  text-align: left;
  font-weight: 700;
  padding: 14px 18px;
  border-bottom: 2px solid #d8d0bd;
  color: #2a2418;
  font-size: 1.15rem;
}
article table td, .post-content table td, .post table td {
  padding: 13px 18px;
  border-bottom: 1px solid #efe9da;
  vertical-align: top;
}
article table tbody tr:nth-child(even),
.post-content table tbody tr:nth-child(even),
.post table tbody tr:nth-child(even) {
  background: #faf7ee;
}
article table tbody tr:hover,
.post-content table tbody tr:hover,
.post table tbody tr:hover {
  background: #f1ecdb;
}
/* Numeric-looking columns: right align if the cell starts with a digit or a
 * known unit. CSS can't pattern-match content, so we just give all td a
 * tabular-numbers variant so columns line up cleanly. */
article table td, .post-content table td, .post table td {
  font-variant-numeric: tabular-nums;
}
/* Inline code inside table cells: lose the dramatic colored background that
 * the theme applies, it makes the cell look broken. */
article table code, .post-content table code, .post table code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: 0.95em;
}

/* ---------- Inline code & code blocks --------------------------------- */
code {
  font-family: var(--kilo-mono);
  font-size: 0.92em;
}
p code, li code {
  background: #f3eedf;
  padding: 1px 5px;
  border-radius: 3px;
}

/* ---------- Images / figures ------------------------------------------ */
article img, .post-content img, .post img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.2em auto;
}

/* ---------- Sidebar title (uses .h1 in the theme) --------------------- */
/* Keep it lighter so the post title remains the loudest element. */
.sidebar-about h1 { font-size: 26px; }

/* Match the existing subtitle palette (#81bbdc) so the workplace line
 * sits quietly below "Assel Meher" instead of shouting. */
.sidebar-workplace {
  display: block;
  margin-top: 2px;
  margin-bottom: 16px;
  color: #81bbdc;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.sidebar-workplace a {
  color: #81bbdc;
  text-decoration: none;
  border-bottom: 1px dotted rgba(129, 187, 220, 0.5);
}
.sidebar-workplace a:hover {
  color: #bddbed;
  border-bottom-color: #bddbed;
}

/* ---------- Home-page post summaries ---------------------------------- */
/* The theme wraps each post on the listing page in `<h3>` inside a
 * `.panel-header`. Bump it well above the body so titles are visibly the
 * loudest element on the row. */
.panel-header h3 {
  font-size: 34px;
  margin: 0.2em 0 0.3em;
  font-weight: 700;
  line-height: 1.2;
}
.panel-header h3 a {
  color: #1a1a1a;
  text-decoration: none;
}
.panel-header h3 a:hover {
  color: #59A5D1;
  text-decoration: none;
}
.panel-header h3 small {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #888;
  margin-top: 0.25em;
}
.panel { margin: 1.5em 0 2em; }
.panel-footer { margin-top: 0.4em; }
/* "Read More..." link */
.panel-body a {
  font-weight: 500;
}

/* The "What I'm Thinking" / site header at the top of the home page. */
header > h1 {
  font-size: 52px;
  font-weight: 700;
  margin: 0.6em 0 0.4em;
}
