/*
 * custom.css — 流浪的小张 personal theme overrides
 * Loaded after the theme's own stylesheet via EXTRA_HEAD_DATA in conf.py.
 *
 * Direction: stay close to the plain, content-first structure of
 * danluu.com/jvns.ca (no colored navbar block, no card boxes), but with
 * two things borrowed from joshwcomeau.com's more personal feel —
 * (1) more generous spacing/breathing room, (2) small personality
 * touches (bolder accent color on titles/hover, a small hiking-themed
 * divider mark, a warmer pull-quote) — without illustration or motion.
 *
 * IMPORTANT — why every font-size below is in px, not rem:
 * the theme's own base stylesheet sets `html { font-size: 62.5% }`
 * (i.e. 1rem = 10px here, not the usual 16px), a classic old trick so
 * *its own* CSS can write "1.6rem" to mean 16px. Any rem value written
 * here without knowing that comes out 62.5% smaller than intended —
 * that's exactly what caused the previous "every module is a
 * different, inconsistent scale" bug. Using px everywhere sidesteps
 * that theme quirk entirely. line-height/letter-spacing stay unitless
 * or em, since those are relative to the element's own (correct) font
 * size, not the root, so they're unaffected by this quirk.
 */

:root {
  --brand-green: #33513f;
  --brand-green-dark: #223a2c;
  --brand-sand: #b5673e;
  --brand-sand-dark: #96502e;
  --page-bg: #faf7f2;
  --text-main: #2b2b28;
  --text-muted: #767569;
  --border-soft: #e7e2d8;
  --quote-bg: #f6f1e9;
  --measure: 680px;
}

html, body {
  background: var(--page-bg);
  color: var(--text-main);
}

body {
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.75;
  font-size: 16px;
}

a {
  color: var(--brand-sand-dark);
  text-decoration: underline;
  text-decoration-color: var(--border-soft);
  text-underline-offset: 2px;
}
a:hover,
a:focus {
  color: var(--brand-green);
  text-decoration-color: currentColor;
}

/* ---------- Navbar: plain text header, no color block ---------- */
.navbar.navbar-inverse {
  background: var(--page-bg);
  border: none;
  border-bottom: 1px solid var(--border-soft);
  box-shadow: none;
  margin-bottom: 48px;
}
.navbar.navbar-inverse .navbar-brand,
.navbar.navbar-inverse #blog-title {
  color: var(--text-main);
  font-weight: 700;
  font-size: 18px;
}
.navbar.navbar-inverse .nav > li > a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 15px;
}
.navbar.navbar-inverse .nav > li > a:hover,
.navbar.navbar-inverse .nav > li > a:focus {
  color: var(--brand-sand-dark);
  background: none;
}
.navbar-toggle .icon-bar {
  background-color: var(--text-main);
}

/* ---------- Reading column, with more room to breathe ---------- */
.container {
  max-width: 860px;
}

article.h-entry {
  max-width: var(--measure);
  margin: 0 auto 64px;
  padding: 0;
}

article.h-entry header {
  margin-bottom: 32px;
}

/* ---------- Homepage: excerpt + sidebar layout ---------- */
/* Only the homepage/index listing uses templates/index.tmpl with a
   two-column row; single post pages keep the centered narrow column
   above untouched. Widen the container and let articles fill their
   (wider) column instead of the fixed --measure. */
.container:has(.row) {
  max-width: 1080px;
}
.row .col-md-8 article.h-entry {
  max-width: none;
  margin: 0 0 56px;
}
.row .col-md-8 article.h-entry + article.h-entry {
  padding-top: 48px;
}
/* "Read more" link that Nikola appends to teasers */
.p-summary.entry-summary p.more a {
  font-size: 15px;
  font-weight: 600;
}

.site-sidebar {
  padding-top: 4px;
}
.sidebar-block {
  margin-bottom: 36px;
}
.sidebar-block h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-sand-dark);
  margin-bottom: 16px;
}
.sidebar-postlist,
.sidebar-taglist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar-postlist li {
  margin-bottom: 14px;
}
.sidebar-postlist a,
.sidebar-taglist a {
  display: block;
  color: var(--text-main);
  text-decoration: none;
  font-size: 16px;
  line-height: 1.4;
}
.sidebar-postlist a:hover,
.sidebar-taglist a:hover {
  color: var(--brand-sand-dark);
}
.sidebar-postlist time {
  display: block;
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 3px;
}
.sidebar-taglist li {
  margin-bottom: 12px;
}
.sidebar-more a {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: underline;
}

@media (max-width: 991px) {
  .site-sidebar {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border-soft);
  }
}

/* A small personal touch instead of a generic title: a thin
   hiking-themed rule under the title, in the accent color, rather
   than a plain hairline. */
article.h-entry .entry-title {
  font-size: 26px;
  line-height: 1.3;
  margin-bottom: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
article.h-entry .entry-title a {
  color: var(--text-main);
  text-decoration: none;
}
article.h-entry .entry-title a:hover {
  color: var(--brand-green);
}
article.h-entry header::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 18px;
  background: var(--brand-sand);
  border-radius: 2px;
}

.metadata {
  color: var(--text-muted);
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.metadata a {
  color: var(--text-muted);
  text-decoration: none;
}

/* Post body: single-post pages render .e-content.entry-content;
   the homepage/teaser view renders .p-summary.entry-summary instead —
   both need the same rules or the teaser view silently falls back to
   the theme's unstyled (and much larger) defaults. */
.e-content.entry-content,
.p-summary.entry-summary {
  font-size: 16px;
}
.e-content.entry-content p,
.p-summary.entry-summary p {
  margin-bottom: 1.4em;
}
.e-content.entry-content h1,
.p-summary.entry-summary h1 { font-size: 24px; }
.e-content.entry-content h2,
.p-summary.entry-summary h2 { font-size: 22px; }
.e-content.entry-content h3,
.p-summary.entry-summary h3 { font-size: 19px; }
.e-content.entry-content h4,
.p-summary.entry-summary h4 { font-size: 18px; }
.e-content.entry-content h1,
.e-content.entry-content h2,
.e-content.entry-content h3,
.e-content.entry-content h4,
.p-summary.entry-summary h1,
.p-summary.entry-summary h2,
.p-summary.entry-summary h3,
.p-summary.entry-summary h4 {
  color: var(--brand-green-dark);
  margin-top: 2em;
  margin-bottom: 0.7em;
  font-weight: 700;
  line-height: 1.4;
}

/* Warmer pull-quote treatment — a bit of color back, for personality,
   distinguishing "quoted source material" from your own writing.
   Font-size is set explicitly because the theme's own blockquote
   default (17.5px, fixed) ignores our 16px baseline otherwise. */
.e-content.entry-content blockquote,
.p-summary.entry-summary blockquote {
  border-left: 3px solid var(--brand-sand);
  background: var(--quote-bg);
  padding: 14px 20px;
  margin: 1.8em 0;
  color: var(--text-main);
  border-radius: 0 8px 8px 0;
  font-size: 16px;
}
.e-content.entry-content blockquote p,
.p-summary.entry-summary blockquote p {
  font-size: inherit;
}

/* ---------- Media & tables always fit the column ---------- */
.e-content.entry-content img,
.e-content.entry-content video,
.e-content.entry-content iframe,
.p-summary.entry-summary img,
.p-summary.entry-summary video,
.p-summary.entry-summary iframe {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.e-content.entry-content table,
.p-summary.entry-summary table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

/* Divider between posts on listing pages: a little hiking-trail mark
   (⛺) instead of a plain line — the one playful detail on the page. */
article.h-entry + article.h-entry {
  position: relative;
  padding-top: 56px;
}
article.h-entry + article.h-entry::before {
  content: "⛺";
  position: absolute;
  top: 8px;
  left: 0;
  font-size: 16px;
  opacity: 0.6;
}

/* ---------- Footer ---------- */
#footer {
  color: var(--text-muted);
  border-top: 1px solid var(--border-soft);
  padding: 24px 0;
  margin-top: 56px;
  font-size: 13px;
  text-align: center;
}
#footer a {
  color: var(--text-muted);
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .container {
    padding-left: 18px;
    padding-right: 18px;
  }
  article.h-entry {
    margin: 0 auto 40px;
  }
  article.h-entry .entry-title {
    font-size: 22px;
  }
  .navbar.navbar-inverse {
    margin-bottom: 32px;
  }
  .navbar.navbar-inverse .nav > li > a {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}