/* ============================================================
   Blog-specific styles — article typography, editor layout,
   index / tag / pagination components.
   Uses CSS variables from site.css.
   ============================================================ */

/* ——— Container width overrides ——— */
.page-blog .site-main.container  { max-width: 1060px; }
.page-editor .site-main.container { max-width: 1680px; }
.page-editor .page-header { display: none; }

/* ——— Article body typography ——— */
.blog-content {
  font-family: var(--site-font-serif);
  font-size: 1.8rem;
  line-height: 1.78;
  color: var(--site-text);
}

.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
  font-family: var(--site-font-sans);
  font-weight: 700;
  color: var(--site-text);
  margin-top: 2.2em;
  margin-bottom: 0.6em;
  letter-spacing: -0.02em;
}

.blog-content h1 { font-size: 2.6rem; }
.blog-content h2 { font-size: 2.2rem; border-bottom: 1px solid var(--site-border); padding-bottom: 0.3em; }
.blog-content h3 { font-size: 1.9rem; }
.blog-content h4 { font-size: 1.7rem; }

.blog-content p { margin-bottom: 1.3em; }

.blog-content a {
  color: var(--site-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.blog-content a:hover { color: var(--site-accent-hover); }

.blog-content blockquote {
  border-left: 3px solid var(--site-accent);
  margin: 1.6em 0;
  padding: 0.6em 1.6em;
  color: var(--site-text-muted);
  background: var(--site-overlay);
  border-radius: 0 8px 8px 0;
}

.blog-content img {
  max-width: 100%;
  border-radius: 8px;
  margin: 1.6em 0;
}

.blog-content hr {
  border: none;
  border-top: 1px solid var(--site-border);
  margin: 2.4em 0;
}

/* Inline code — override Bootstrap 3 defaults */
.blog-content code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.88em;
  color: var(--site-code-color);
  background: var(--site-elevated);
  padding: 0.15em 0.45em;
  border-radius: 5px;
  word-break: break-word;
}

/* Undo inline-code styles inside highlighted blocks */
.blog-content pre.highlight code,
.blog-content pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 1em;
  color: inherit;
}
.blog-content pre {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

/* Tables */
.blog-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 0.95em;
}
.blog-content th,
.blog-content td {
  padding: 0.65em 1em;
  border: 1px solid var(--site-border);
  text-align: left;
}
.blog-content th {
  background: var(--site-elevated);
  font-family: var(--site-font-sans);
  font-weight: 600;
}
.blog-content tr:nth-child(even) td {
  background: var(--site-overlay);
}

/* Math */
.blog-content .math-inline { display: inline; }
.blog-content .math-display {
  display: block;
  text-align: center;
  margin: 1.6em 0;
  overflow-x: auto;
  padding: 0.4em 0;
}

/* Task lists */
.blog-content .contains-task-list { list-style: none; padding-left: 0; }
.blog-content .task-list-item { position: relative; padding-left: 1.8em; }
.blog-content .task-list-item-checkbox { position: absolute; left: 0; top: 0.35em; }

/* Footnotes */
.blog-content .footnote-ref { vertical-align: super; font-size: 0.75em; }
.blog-content section.footnotes { margin-top: 3em; padding-top: 1.5em; border-top: 1px solid var(--site-border); font-size: 0.9em; color: var(--site-text-muted); }


/* ——— Article header / meta ——— */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.6rem;
  color: var(--site-text-muted);
  font-family: var(--site-font-sans);
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
.article-meta .btn-edit {
  font-size: 1.2rem;
  padding: 0.3em 1em;
  border-radius: 999px;
  border: 1px solid var(--site-border);
  background: var(--site-elevated);
  color: var(--site-text-muted);
  text-decoration: none;
}
.article-meta .btn-edit:hover {
  background: var(--site-accent-soft);
  color: var(--site-accent);
  border-color: var(--site-accent);
}


/* ——— Tags ——— */
.tag-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0 0 1.6rem;
}
.tag-pill {
  display: inline-block;
  font-family: var(--site-font-sans);
  font-size: 1.2rem;
  font-weight: 500;
  padding: 0.3em 0.9em;
  border-radius: 999px;
  background: var(--site-elevated);
  color: var(--site-text-muted);
  text-decoration: none;
  border: 1px solid var(--site-border);
  transition: background 0.15s, color 0.15s;
}
.tag-pill:hover {
  background: var(--site-accent-soft);
  color: var(--site-accent);
  border-color: var(--site-accent);
}


/* ——— Post index cards ——— */
.post-card {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--site-border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.post-card:last-child { border-bottom: none; }
.post-card h2 {
  font-family: var(--site-font-sans);
  font-size: 1.9rem;
  font-weight: 600;
  margin: 0;
}
.post-card h2 a { color: var(--site-text); text-decoration: none; }
.post-card h2 a:hover { color: var(--site-accent); }
.post-card time {
  white-space: nowrap;
  font-family: var(--site-font-sans);
  font-size: 1.2rem;
  color: var(--site-text-muted);
}
.post-card .btn-delete {
  background: none;
  border: none;
  color: var(--site-alert-danger-fg);
  opacity: 0.6;
  cursor: pointer;
  font-size: 1.8rem;
  padding: 0 0.4rem;
  transition: opacity 0.15s;
}
.post-card .btn-delete:hover { opacity: 1; }

.empty-state {
  text-align: center;
  padding: 4rem 0;
  color: var(--site-text-muted);
  font-size: 1.6rem;
}


/* ——— Blog search bar ——— */
.blog-search {
  margin: 0;
  padding: 0;
}
.blog-search input {
  background: var(--site-elevated);
  border: 1px solid var(--site-border);
  color: var(--site-text);
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  font-size: 1.4rem;
  min-width: 16rem;
  outline: none;
  font-family: var(--site-font-sans);
}
.blog-search input:focus {
  border-color: var(--site-accent);
  box-shadow: 0 0 0 2px var(--site-accent-soft);
}
.blog-search input::placeholder { color: var(--site-text-muted); }


/* ——— Pagination ——— */
.blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 2rem 0;
  font-family: var(--site-font-sans);
  font-size: 1.3rem;
}
.blog-pagination a {
  padding: 0.5em 1.2em;
  border-radius: 999px;
  border: 1px solid var(--site-border);
  color: var(--site-text-muted);
  text-decoration: none;
  transition: all 0.15s;
}
.blog-pagination a:hover {
  background: var(--site-accent-soft);
  color: var(--site-accent);
  border-color: var(--site-accent);
}
.blog-pagination .disabled {
  opacity: 0.35;
  pointer-events: none;
}
.blog-pagination .page-info {
  color: var(--site-text-muted);
}


/* ——— Split-pane editor ——— */
.editor-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.editor-title {
  flex: 1 1 300px;
  font-family: var(--site-font-sans);
  font-size: 2.2rem;
  font-weight: 700;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--site-border);
  color: var(--site-text);
  padding: 0.4rem 0;
  outline: none;
  transition: border-color 0.15s;
}
.editor-title:focus { border-bottom-color: var(--site-accent); }
.editor-title::placeholder { color: var(--site-text-muted); }

.editor-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--site-font-sans);
  font-size: 1.3rem;
}
.editor-controls label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--site-text-muted);
  cursor: pointer;
}
.editor-controls .btn-save {
  padding: 0.6em 1.6em;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #c9a227, #a67c1a);
  color: #0f1419;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.editor-controls .btn-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(201,162,39,0.35);
}
.editor-controls .btn-cancel {
  padding: 0.6em 1.4em;
  border-radius: 999px;
  border: 1px solid var(--site-border);
  background: var(--site-elevated);
  color: var(--site-text-muted);
  text-decoration: none;
  font-size: 1.3rem;
}
.editor-controls .btn-cancel:hover {
  background: var(--site-overlay);
  color: var(--site-text);
}

/* Tag multi-select (Tom Select) */
.ts-wrapper .ts-control {
  background: var(--site-elevated) !important;
  border-color: var(--site-border) !important;
  color: var(--site-text);
  border-radius: 8px;
  min-height: 3.4rem;
  padding: 0.3rem 0.6rem;
}
.ts-wrapper.focus .ts-control {
  border-color: var(--site-accent) !important;
  box-shadow: 0 0 0 2px var(--site-accent-soft) !important;
}
.ts-wrapper .ts-dropdown {
  background: var(--site-surface);
  border-color: var(--site-border);
  color: var(--site-text);
  border-radius: 8px;
  margin-top: 4px;
}
.ts-wrapper .ts-dropdown .option:hover,
.ts-wrapper .ts-dropdown .active {
  background: var(--site-accent-soft);
  color: var(--site-text);
}
.ts-wrapper .ts-control .item {
  background: var(--site-accent-soft) !important;
  color: var(--site-accent) !important;
  border: 1px solid var(--site-accent) !important;
  border-radius: 999px;
  font-size: 1.2rem;
  padding: 0.15em 0.7em;
}
.ts-wrapper .ts-control .item .remove {
  border-left-color: var(--site-accent) !important;
}
.ts-wrapper .ts-control input { color: var(--site-text) !important; }

/* Editor panes */
.editor-panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--site-border);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
  overflow: hidden;
  min-height: 72vh;
}
@media (max-width: 768px) {
  .editor-panes { grid-template-columns: 1fr; min-height: 50vh; }
}
.editor-pane {
  background: var(--site-surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.editor-pane-label {
  font-family: var(--site-font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--site-text-muted);
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--site-border);
  background: var(--site-elevated);
  flex-shrink: 0;
}
/* Editor toolbar */
.editor-pane-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
}
.editor-toolbar button {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--site-text-muted);
  cursor: pointer;
  padding: 0.25em 0.45em;
  font-family: var(--site-font-sans);
  font-size: 1.15rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.editor-toolbar button:hover {
  background: var(--site-accent-soft);
  color: var(--site-accent);
  border-color: var(--site-accent);
}
.editor-toolbar button svg { pointer-events: none; }
.toolbar-sep {
  width: 1px;
  height: 1.6rem;
  background: var(--site-border);
  margin: 0 0.3rem;
}

.editor-cm-wrap {
  flex: 1;
  overflow: auto;
}
#preview-pane {
  flex: 1;
  padding: 1.6rem;
  overflow-y: auto;
}
#preview-pane .empty-preview {
  color: var(--site-text-muted);
  font-style: italic;
  text-align: center;
  padding-top: 3rem;
}

/* CodeMirror 6 overrides */
.cm-editor { height: 100%; }
.cm-editor .cm-scroller { overflow: auto; }
.cm-editor .cm-content {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 1.42rem;
  line-height: 1.65;
  padding: 1rem 0;
}
.cm-editor .cm-gutters {
  background: var(--site-surface);
  border-right: 1px solid var(--site-border);
  color: var(--site-text-muted);
  font-size: 1.2rem;
}
.cm-editor .cm-activeLineGutter { background: var(--site-overlay); }
.cm-editor .cm-activeLine { background: var(--site-overlay); }