/* ============================================================
   publish.css — custom styles for Obsidian Publish
   Vault: mndoci_PARA
   Look: warm personal notebook — serif, cozy, paper-toned
     - Body: Newsreader (literary, on-screen serif)
     - Headings: Fraunces (soft-serif, handwritten warmth)
   Structure follows the official Publish pattern:
     - layout vars on .published-container (mode-neutral)
     - color vars split into .theme-light / .theme-dark
   Reader's light/dark toggle is respected.
   Docs: https://help.obsidian.md/Obsidian+Publish/Customize+the+appearance+of+your+published+site
   ============================================================ */

/* ----- Web fonts (Google Fonts) ----------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500&display=swap');

/* ----- Layout + typography (mode-neutral) ------------------- */
.published-container {
  --page-width: 720px;          /* narrower = more book-like line length */
  --page-side-padding: 56px;

  --font-text: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;
  --font-heading: "Fraunces", "Newsreader", Palatino, Georgia, serif;
  --font-monospace: "SF Mono", "Fira Code", ui-monospace, monospace;

  --font-text-size: 19px;
  --line-height: 1.75;
}

/* Apply the serif body to the reading area */
.markdown-preview-view,
.markdown-preview-view p,
.markdown-preview-view li {
  font-family: var(--font-text);
  font-optical-sizing: auto;
}

/* Headings get the soft display serif + notebook spacing */
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.markdown-preview-view h1 { font-size: 2.4em;  margin-bottom: 0.5em; }
.markdown-preview-view h2 { font-size: 1.6em;  margin-top: 2em; }
.markdown-preview-view h3 { font-size: 1.28em; margin-top: 1.5em; }

/* Air between paragraphs and looser lists */
.markdown-preview-view p  { margin: 0 0 1.15em; }
.markdown-preview-view ul,
.markdown-preview-view ol { margin: 0 0 1.15em; }
.markdown-preview-view li { margin: 0.35em 0; }

/* ----- Light mode: warm paper ------------------------------- */
.theme-light {
  --background-primary: #f7f2e9;      /* warm cream paper */
  --background-primary-alt: #efe7d8;
  --background-secondary: #efe7d8;
  --background-secondary-alt: #e7dcc8;

  --text-normal: #33302a;             /* soft near-black ink */
  --text-muted: #6b655b;
  --text-faint: #a29a8b;

  --h1-color: #2a2620;
  --h2-color: #322d25;
  --h3-color: #3a342b;

  --text-accent: #a8631f;             /* muted amber/terracotta */
  --text-accent-hover: #8a4f16;
  --interactive-accent: #a8631f;

  --background-modifier-border: #ddd2bd;
  --text-highlight-bg: rgba(216, 168, 74, 0.35);   /* highlighter */
  --text-selection: rgba(168, 99, 31, 0.18);
}

/* ----- Dark mode: warm lamplight ---------------------------- */
.theme-dark {
  --background-primary: #211d18;      /* warm dark brown-black */
  --background-primary-alt: #292420;
  --background-secondary: #292420;
  --background-secondary-alt: #322c26;

  --text-normal: #e8ddcb;             /* warm off-white */
  --text-muted: #b3a690;
  --text-faint: #7d735f;

  --h1-color: #f2e8d6;
  --h2-color: #ece1cd;
  --h3-color: #e0d4bd;

  --text-accent: #d99a54;             /* warm amber, glows on dark */
  --text-accent-hover: #eab472;
  --interactive-accent: #d99a54;

  --background-modifier-border: #3a332b;
  --text-highlight-bg: rgba(217, 154, 84, 0.28);
  --text-selection: rgba(217, 154, 84, 0.20);
}

/* ----- Selection: like a highlighter pen -------------------- */
.markdown-preview-view ::selection {
  background: var(--text-selection);
}

/* ----- Links: subtle ink underline -------------------------- */
.markdown-preview-view a {
  color: var(--text-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--background-modifier-border);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.markdown-preview-view a:hover {
  color: var(--text-accent-hover);
  border-bottom-color: var(--text-accent-hover);
}

/* ----- Blockquotes: a margin note --------------------------- */
.markdown-preview-view blockquote {
  border-left: 3px solid var(--text-accent);
  color: var(--text-muted);
  font-style: italic;
  padding-left: 1.1em;
  margin-left: 0.2em;
}

/* ----- Code: warm-tinted monospace -------------------------- */
.markdown-preview-view code,
.markdown-preview-view pre {
  font-family: var(--font-monospace);
  background-color: var(--background-secondary-alt);
  border-radius: 6px;
}
.markdown-preview-view pre {
  border: 1px solid var(--background-modifier-border);
}

/* ----- Images: like taped-in prints ------------------------- */
.markdown-preview-view img {
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* ----- Tables: soft, framed --------------------------------- */
.markdown-preview-view table {
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  overflow: hidden;
}
.markdown-preview-view th {
  background-color: var(--background-secondary-alt);
}

/* ----- Horizontal rule: a soft divider ---------------------- */
.markdown-preview-view hr {
  border: none;
  border-top: 1px solid var(--background-modifier-border);
  margin: 2.4em auto;
  width: 40%;
}

/* ----- Sidebar / navigation --------------------------------- */
.nav-file-title,
.nav-folder-title {
  color: var(--text-muted);
}
.nav-file-title.is-active {
  color: var(--text-accent);
}

/* ----- Hide the "Powered by Obsidian Publish" badge --------- */
.published-info { display: none; }