/* ============================================================
   Minimal Blog Theme for Obsidian Publish
   Drop this file into your Vault root and publish it.
   Tested against Obsidian Publish as of 2025.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;1,300;1,400&family=Geist+Mono:wght@300;400&display=swap');

/* ── TOKENS ── */
:root {
  --ink:          #1a1a18;
  --ink-muted:    #6b6b67;
  --ink-faint:    #b5b5b0;
  --paper:        #faf9f7;
  --paper-warm:   #f4f2ee;
  --rule:         #e8e6e1;
  --accent:       #2d5016;
  --accent-soft:  #4a7c24;
  --tag-bg:       #eef2e8;
  --tag-text:     #2d5016;
  --code-bg:      #f0ede8;
  --link:         #1e3a8a;

  /* Override Obsidian Publish CSS variables */
  --background-primary:           var(--paper);
  --background-primary-alt:       var(--paper-warm);
  --background-secondary:         var(--paper-warm);
  --background-secondary-alt:     var(--paper-warm);
  --background-modifier-border:   var(--rule);
  --text-normal:                  var(--ink);
  --text-muted:                   var(--ink-muted);
  --text-faint:                   var(--ink-faint);
  --text-accent:                  var(--accent-soft);
  --text-accent-hover:            var(--accent);
  --interactive-accent:           var(--accent-soft);
  --interactive-accent-hover:     var(--accent);
  --font-text-theme:              'Spectral', Georgia, serif;
  --font-monospace-theme:         'Geist Mono', 'Courier New', monospace;
  --font-text-size:               17px;
  --line-width:                   680px;
  --line-height-normal:           1.8;
}

/* ── GLOBAL RESET ── */
* { box-sizing: border-box; }

body {
  font-family: var(--font-text-theme);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--font-text-size);
  line-height: var(--line-height-normal);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* ── LAYOUT ── */
.publish-renderer,
.site-body,
#app {
  background: var(--paper) !important;
}

.publish-article-header,
.page-header {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Site name / logo */
.site-header-text,
.site-name {
  font-family: 'Geist Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
}

/* ── LEFT SIDEBAR / NAV ── */
.nav-view-outer,
.nav-folder-title,
.tree-item-self {
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-muted);
}

.nav-folder-title {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint) !important;
  font-weight: 400;
  padding: 16px 16px 6px;
}

.tree-item-self {
  border-radius: 3px;
  padding: 4px 8px !important;
  transition: color 0.15s, background 0.15s;
}

.tree-item-self:hover {
  color: var(--ink);
  background: var(--paper-warm);
}

.tree-item-self.is-active {
  color: var(--ink) !important;
  background: var(--paper-warm) !important;
  font-weight: 400;
}

/* Nav sidebar background */
.nav-view-outer {
  background: var(--paper) !important;
  border-right: 1px solid var(--rule) !important;
}

/* ── HEADINGS ── */
h1, .markdown-rendered h1 {
  font-family: var(--font-text-theme);
  font-size: 32px;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 24px;
  border-bottom: none !important;
}

h2, .markdown-rendered h2 {
  font-family: var(--font-text-theme);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 52px 0 16px;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

h3, .markdown-rendered h3 {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 36px 0 12px;
}

h4, .markdown-rendered h4 {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 28px 0 10px;
}

/* ── BODY TEXT ── */
.markdown-rendered p,
.markdown-preview-view p {
  margin-bottom: 24px;
  font-weight: 300;
  line-height: 1.8;
}

/* ── LINKS ── */
a,
.markdown-rendered a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}

a:hover,
.markdown-rendered a:hover {
  text-decoration-color: var(--link);
}

/* Internal / wiki links */
.internal-link {
  color: var(--accent-soft) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

.internal-link:hover {
  border-bottom-color: var(--accent-soft) !important;
}

/* ── BLOCKQUOTE ── */
blockquote,
.markdown-rendered blockquote {
  border-left: 2px solid var(--ink-faint) !important;
  border-right: none;
  background: transparent !important;
  padding: 4px 0 4px 20px !important;
  margin: 32px 0 !important;
  color: var(--ink-muted);
  font-style: italic;
  font-weight: 300;
}

/* ── CODE ── */
code,
.markdown-rendered code {
  font-family: 'Geist Mono', monospace !important;
  font-size: 13px !important;
  background: var(--code-bg) !important;
  color: var(--ink) !important;
  padding: 2px 5px !important;
  border-radius: 2px !important;
  border: none !important;
}

pre,
.markdown-rendered pre {
  background: var(--code-bg) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 4px !important;
  padding: 20px 24px !important;
  margin: 28px 0 !important;
}

pre code,
.markdown-rendered pre code {
  background: transparent !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--ink-muted) !important;
}

/* ── HORIZONTAL RULE ── */
hr, .markdown-rendered hr {
  border: none !important;
  border-top: 1px solid var(--rule) !important;
  margin: 48px 0 !important;
}

/* ── LISTS ── */
ul, ol,
.markdown-rendered ul,
.markdown-rendered ol {
  padding-left: 20px;
  margin-bottom: 24px;
}

li,
.markdown-rendered li {
  margin-bottom: 6px;
  font-weight: 300;
}

/* ── TAGS ── */
.tag,
a.tag {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  background: var(--tag-bg) !important;
  color: var(--tag-text) !important;
  border: none !important;
  padding: 2px 8px !important;
  border-radius: 2px !important;
  text-decoration: none !important;
  font-weight: 400 !important;
}

.tag:hover,
a.tag:hover {
  background: #dde8cc !important;
  color: var(--accent) !important;
}

/* ── CALLOUTS (Obsidian native) ── */
.callout {
  border: 1px solid var(--rule) !important;
  border-left: 3px solid var(--accent-soft) !important;
  background: #f5f8f0 !important;
  border-radius: 0 4px 4px 0 !important;
  padding: 16px 20px !important;
  margin: 28px 0 !important;
}

.callout-title {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--accent) !important;
  font-weight: 400 !important;
}

.callout-title-icon {
  color: var(--accent) !important;
}

.callout-content {
  font-size: 15px !important;
  color: var(--ink-muted) !important;
  font-weight: 300 !important;
}

/* Specific callout types */
.callout[data-callout="note"] { border-left-color: var(--accent-soft) !important; background: #f5f8f0 !important; }
.callout[data-callout="warning"] { border-left-color: #b07d2a !important; background: #faf6ee !important; }
.callout[data-callout="danger"],
.callout[data-callout="error"] { border-left-color: #a33030 !important; background: #faf0f0 !important; }
.callout[data-callout="info"] { border-left-color: #2a5ea8 !important; background: #f0f3fa !important; }

/* ── TABLES ── */
table,
.markdown-rendered table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 28px 0;
}

th,
.markdown-rendered th {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule) !important;
  padding: 8px 12px !important;
  text-align: left;
  background: transparent !important;
}

td,
.markdown-rendered td {
  border-bottom: 1px solid var(--rule) !important;
  padding: 10px 12px !important;
  font-weight: 300;
  color: var(--ink-muted);
}

tr:hover td {
  background: var(--paper-warm);
}

/* ── IMAGES ── */
img,
.markdown-rendered img {
  border-radius: 4px;
  max-width: 100%;
  margin: 20px 0;
}

/* ── FRONTMATTER / PROPERTIES ── */
.metadata-container,
.frontmatter {
  display: none !important; /* Hide raw frontmatter from readers */
}

/* ── PUBLISH PAGE TITLE ── */
.publish-article-header .page-title,
.mod-header .page-title {
  font-family: var(--font-text-theme) !important;
  font-size: 32px !important;
  font-weight: 300 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
  line-height: 1.25 !important;
  padding: 64px 0 24px !important;
}

/* ── BREADCRUMBS ── */
.breadcrumb-container,
.nav-breadcrumb {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

/* ── SEARCH ── */
.search-input-container input {
  font-family: 'Geist Mono', monospace !important;
  font-size: 13px !important;
  background: var(--paper-warm) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 3px !important;
  color: var(--ink) !important;
  padding: 6px 12px !important;
}

.search-result-file-title {
  font-family: var(--font-text-theme);
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
}

.search-result-file-match {
  font-size: 13px;
  color: var(--ink-muted);
}

/* ── BACKLINKS (if shown) ── */
.backlinks-pane,
.mod-backlinks {
  border-top: 1px solid var(--rule);
  padding-top: 28px;
  margin-top: 72px;
}

.backlinks-pane .tree-item-self {
  font-size: 14px;
  font-weight: 300;
}

/* ── GRAPH VIEW ── */
.graph-view.color-fill {
  color: var(--accent-soft);
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

/* ── MOBILE ── */
@media (max-width: 768px) {
  :root {
    --font-text-size: 16px;
    --line-width: 100%;
  }

  h1, .markdown-rendered h1 { font-size: 26px; }
  h2, .markdown-rendered h2 { font-size: 20px; margin-top: 40px; }

  .publish-article-header .page-title,
  .mod-header .page-title {
    font-size: 26px !important;
    padding: 40px 0 20px !important;
  }
}

/* 隐藏自动生成的文件名标题 */
.publish-article-header,
.mod-header .view-header-title-container,
.page-header {
  display: none !important;
}

/* 去掉标题红框 / 边框 */
h1, .markdown-rendered h1 {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 让正文第一个 H1 承担标题角色，增加顶部间距 */
.markdown-preview-view h1:first-of-type,
.markdown-rendered h1:first-of-type {
  margin-top: 48px;
  font-size: 32px;
  font-weight: 300;
}