/*
 * kmp.tw — Tranquilpeak theme override, following taste-skill's minimalist-skill/SKILL.md
 * (editorial "high-end practical minimalism" ruleset).
 *
 * Loaded via Hugo's official customCSS hook (params.customCSS in config.toml) —
 * this file is loaded AFTER the theme's own compiled CSS and never touches
 * anything inside themes/hugo-tranquilpeak-theme/, so a theme update won't
 * clobber it and it's a one-line revert (remove the customCSS block).
 *
 * Selectors below were read directly out of the theme's actual compiled CSS
 * and layout partials (post-title, tag--primary, post-content.markdown, etc.),
 * not guessed — see Study/docs/topics/taste-skill/note.md for the source rules.
 */

/* ---- base: body background/text/font — SKILL.md bans Open Sans + pure-white bg ---- */
body {
  background: #FBFBFA !important;
  color: #111111 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
}

/* ---- post title: serif display face, tight tracking (SKILL.md: -0.02em to -0.04em) ---- */
.post-title {
  font-family: Charter, Georgia, "Iowan Old Style", ui-serif, serif !important;
  letter-spacing: -0.03em !important;
  color: #111111 !important;
}

/* ---- meta line (date/category): secondary text color from SKILL.md palette ---- */
.post-meta,
.postShorten-meta,
.post-meta time {
  color: #787774 !important;
}

/* ---- tags: pill shape + pale color-coded background (SKILL.md tag/badge spec) ---- */
.tag.tag--primary {
  background: #E1F3FE !important;
  color: #1F6C9F !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  padding: 0.3rem 1rem !important;
}
.tag.tag--primary:hover {
  background: #d4edfc !important;
}

/* ---- body copy: warm dark gray instead of near-black, comfortable line-height ---- */
.post-content.markdown p,
.post-content.markdown li {
  color: #111111 !important;
  line-height: 1.65 !important;
}
.post-content.markdown a {
  color: #1F6C9F !important;
  text-decoration: underline;
  text-decoration-color: rgba(31, 108, 159, 0.35);
}

/* ---- code blocks: card container (1px border, ≤12px radius, per Bento-card spec) ---- */
.post-content.markdown pre {
  background: #F7F6F3 !important;
  border: 1px solid #EAEAEA !important;
  border-radius: 10px !important;
  padding: 18px 20px !important;
}
.post-content.markdown pre code {
  background: transparent !important;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace !important;
}
.post-content.markdown code {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace !important;
  background: #F7F6F3 !important;
  color: #111111 !important;
  border-radius: 4px !important;
}

/* ---------------------------------------------------------------------
 * Homepage / list view — uses a DIFFERENT template (summary.html) with
 * its own class names (postShorten-*), not post-title/post-content.markdown.
 * Everything above only ever applied to single post pages; without this
 * block the homepage keeps the theme's default look almost entirely.
 * ------------------------------------------------------------------- */

/* list-view post title */
.postShorten-title {
  font-family: Charter, Georgia, "Iowan Old Style", ui-serif, serif !important;
  letter-spacing: -0.03em !important;
  color: #111111 !important;
}
.postShorten-title a {
  color: #111111 !important;
}
/* now the only entry point into the article (button removed below), so it
 * needs its own clear hover signal */
.postShorten-title a:hover {
  color: #1F6C9F !important;
}

/* excerpt body text + inline headings (e.g. "Situation") inside the summary */
.postShorten-excerpt {
  color: #111111 !important;
  line-height: 1.65 !important;
}
.postShorten-excerpt h1,
.postShorten-excerpt h2,
.postShorten-excerpt h3 {
  font-family: Charter, Georgia, "Iowan Old Style", ui-serif, serif !important;
  letter-spacing: -0.02em !important;
}
.postShorten-excerpt code {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace !important;
  background: #F7F6F3 !important;
  border-radius: 4px !important;
}

/* "Continue reading" button removed entirely — the post title is already a
 * link into the full article (see .postShorten-title a above), so this was
 * a second, redundant entry point. It was also the thing most exposed by
 * the thumbnailImagePosition inconsistency (sits right before a thumbnail
 * that may or may not immediately follow it, depending on excerpt length
 * and whether the post has an image at all) — removing it sidesteps that
 * inconsistency instead of patching around it. Reading time is hidden too
 * since it was in the same line as the button ("- 5 min read" reads oddly
 * floating on its own with nothing before it).
 */
.postShorten-excerpt_link,
.postShorten-readingtime {
  display: none !important;
}

/* category link in the meta line (date + category) — a separate partial from
 * tags (.tag.tag--primary), so it never inherited the pill treatment; it was
 * only getting a plain color swap, which barely reads as changed next to
 * the fully-restyled tag pills elsewhere. Give it the same pill shape, in
 * green instead of blue so category and tag are still visually distinct. */
.category-link {
  display: inline-block !important;
  background: #EDF3EC !important;
  color: #346538 !important;
  border-radius: 999px !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  padding: 0.2rem 0.8rem !important;
  text-decoration: none !important;
}
.category-link:hover {
  background: #dcebda !important;
}

/* /categories/ archive page uses a THIRD, different class for the same
 * concept (.category-anchor, taxonomy/category.terms.html) — not
 * .category-link at all, so it was invisible to every rule above and still
 * showed the theme's plain default link color. */
.category-anchor {
  display: inline-block !important;
  background: #EDF3EC !important;
  color: #346538 !important;
  border-radius: 999px !important;
  font-size: 1.2rem !important;
  letter-spacing: 0.03em !important;
  padding: 0.3rem 1rem !important;
  text-decoration: none !important;
  margin: 4px !important;
}
.category-anchor:hover {
  background: #dcebda !important;
}

/* reading time, next to the "Continue reading" button — was still Open Sans
 * in the theme's own grayish-blue (#9eabb3), sitting oddly next to the new
 * button and the rest of the warm-gray secondary text. Match the same token. */
.postShorten-readingtime {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  color: #787774 !important;
}

/* ---------------------------------------------------------------------
 * Syntax highlighting — the theme loads highlight.js's JS but ships no
 * color theme CSS at all (checked layouts/partials/script.html), so code
 * blocks render with zero syntax coloring today. Rather than bolt on a
 * mismatched off-the-shelf hljs theme, this reuses the exact same pale
 * accent palette already used for tags, so code reads as part of the same
 * design system instead of a second, unrelated color scheme.
 *
 * IMPORTANT: script.html calls hljs.configure({ classPrefix: '' }), which
 * strips the usual "hljs-" prefix off every token span (so it emits
 * class="keyword", not class="hljs-keyword"). That makes the token class
 * names dangerously generic on their own (.title, .name, .link, .number,
 * .meta, .section, .type all already mean something else elsewhere on this
 * site — .link in particular is the theme's own general-purpose link
 * utility class). Every rule below is scoped as a descendant of .hljs
 * (the block itself, which hljs.highlightBlock adds regardless of
 * classPrefix), so it only ever matches spans actually inside a
 * highlighted code block — never a random `.title`/`.link`/`.number`
 * somewhere else on the page. Both prefixed and unprefixed variants are
 * kept in case classPrefix is ever restored.
 * ------------------------------------------------------------------- */
.hljs {
  color: #111111 !important;
  background: transparent !important;
}
.hljs .keyword, .hljs .selector-tag, .hljs .literal, .hljs .section, .hljs .link, .hljs .built_in,
.hljs .hljs-keyword, .hljs .hljs-selector-tag, .hljs .hljs-literal, .hljs .hljs-section, .hljs .hljs-link, .hljs .hljs-built_in {
  color: #1F6C9F !important; /* same blue as tag--primary */
}
.hljs .string, .hljs .title, .hljs .name, .hljs .type, .hljs .attribute, .hljs .symbol,
.hljs .bullet, .hljs .addition, .hljs .variable, .hljs .template-tag, .hljs .template-variable,
.hljs .hljs-string, .hljs .hljs-title, .hljs .hljs-name, .hljs .hljs-type, .hljs .hljs-attribute, .hljs .hljs-symbol,
.hljs .hljs-bullet, .hljs .hljs-addition, .hljs .hljs-variable, .hljs .hljs-template-tag, .hljs .hljs-template-variable {
  color: #346538 !important; /* same green as the green tag token */
}
.hljs .number, .hljs .regexp, .hljs .meta,
.hljs .hljs-number, .hljs .hljs-regexp, .hljs .hljs-meta {
  color: #956400 !important; /* same amber as the yellow tag token */
}
.hljs .comment, .hljs .quote, .hljs .deletion,
.hljs .hljs-comment, .hljs .hljs-quote, .hljs .hljs-deletion {
  color: #787774 !important;
  font-style: italic;
}

/* ---------------------------------------------------------------------
 * /archives/ page — a third template (taxonomy/archive.terms.html) with
 * its own class names (archive-title, archive-post-title), untouched by
 * everything above.
 * ------------------------------------------------------------------- */
.archive-result {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  color: #787774 !important;
}
.archive-title {
  font-family: Charter, Georgia, "Iowan Old Style", ui-serif, serif !important;
  letter-spacing: -0.02em !important;
  color: #111111 !important;
}
.archive-post-title {
  color: #111111 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
}
.archive-post-title:hover {
  color: #1F6C9F !important;
}
/* the theme's own .form-control is deliberately borderless/oversized
 * (padding: 10px 0 — no horizontal padding at all — font-size: 25px), meant
 * to sit flush against the page with no visible box. Boxing it with a
 * border/background but keeping that padding/font-size crams 25px text
 * right against the edge. Since it's now a bordered field, give it real
 * padding and dial the size down to something a boxed input should be. */
#filter-form {
  margin-bottom: 24px !important;
}
#filter-form .form-control {
  background: #F7F6F3 !important;
  border: 1px solid #EAEAEA !important;
  border-radius: 8px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  padding: 10px 16px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #111111 !important;
  transition: border-color 0.15s ease;
}
#filter-form .form-control:focus {
  border-color: #1F6C9F !important;
  outline: none !important;
}
#filter-form .form-control::placeholder {
  color: #787774 !important;
}