/* ============================================================
   publish.css — chris's digital garden
   Warm cream paper, slate-grey ink, moss-green links,
   set in a gentle serif. Matches the Obsidian desktop theme.
   Place in the ROOT of your vault, then publish it.
   ============================================================ */

/* Fonts (Newsreader, Fraunces, Shippori Mincho) are loaded by publish.js,
   so this stylesheet can apply instantly instead of waiting on Google Fonts. */

/* ---------- Fonts & sizing (shared by both modes) ---------- */
body {
  --font-text-theme: 'Newsreader', 'Shippori Mincho', Georgia, serif;
  --font-interface-theme: 'Newsreader', 'Shippori Mincho', Georgia, serif;
  --font-monospace-theme: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font-text-size: 19px;
  --line-height-normal: 1.7;
}

/* ---------- Publish-specific layout variables ---------- */
.published-container {
  --page-width: 720px;
  --page-padding: 48px;

  /* page title */
  --page-title-font: 'Fraunces', 'Shippori Mincho', Georgia, serif;
  --page-title-size: 2.4em;
  --page-title-weight: 500;
  --page-title-line-height: 1.2;
  --page-title-color: var(--text-normal);

  /* site name (top of left sidebar) */
  --site-name-font: 'Fraunces', 'Shippori Mincho', Georgia, serif;
  --site-name-size: 1.35em;
  --site-name-weight: 500;
  --site-name-color: var(--text-normal);
  --site-name-color-hover: var(--text-accent);

  --logo-radius: 0%;

  /* navigation */
  --nav-parent-item-weight: 500;
  --nav-parent-item-color: var(--text-muted);
  --nav-parent-item-color-active: var(--text-accent);
  --nav-item-color: var(--text-muted);
  --nav-item-color-hover: var(--text-normal);
  --nav-item-color-active: var(--text-normal);
  --nav-item-weight-active: 600;
  --nav-item-border-color: transparent;
  --nav-item-border-color-hover: var(--background-modifier-border);
  --nav-item-border-color-active: var(--text-accent);
  --nav-collapse-icon-color: var(--text-faint);
  --nav-collapse-icon-color-hover: var(--text-accent);
}

/* ---------- Light mode: cream paper + moss ---------- */
.theme-light {
  --background-primary: #fdf6e3;
  --background-primary-alt: #f7efd8;
  --background-secondary: #f9f1dc;
  --background-secondary-alt: #efe8d3;
  --background-modifier-border: #e6dec6;
  --background-modifier-hover: rgba(92, 106, 114, 0.07);

  --text-normal: #5c6a72;
  --text-muted: #7a8478;
  --text-faint: #a6b0a0;
  --text-accent: #5a8231;
  --text-accent-hover: #3f6421;
  --text-highlight-bg: rgba(167, 192, 128, 0.35);
  --text-selection: rgba(167, 192, 128, 0.35);

  --interactive-accent: #5a8231;
  --link-color: #5a8231;
  --link-color-hover: #3f6421;
  --link-external-color: #5a8231;
  --link-external-color-hover: #3f6421;
  --link-unresolved-color: #a6b0a0;

  --h1-color: #545f65;
  --h2-color: #545f65;
  --h3-color: #5c6a72;
  --h4-color: #5c6a72;
  --h5-color: #7a8478;
  --h6-color: #7a8478;

  --blockquote-border-color: #a7c080;
  --code-background: #f2ebd3;
  --code-normal: #5c6a72;
  --hr-color: #e6dec6;
  --list-marker-color: #a6b0a0;
  --checkbox-color: #5a8231;
}

/* ---------- Dark mode: forest night ---------- */
.theme-dark {
  --background-primary: #2d353b;
  --background-primary-alt: #272e33;
  --background-secondary: #272e33;
  --background-secondary-alt: #232a2e;
  --background-modifier-border: #3d484d;
  --background-modifier-hover: rgba(211, 198, 170, 0.07);

  --text-normal: #d3c6aa;
  --text-muted: #9da9a0;
  --text-faint: #7a8478;
  --text-accent: #a7c080;
  --text-accent-hover: #bfd49c;
  --text-highlight-bg: rgba(167, 192, 128, 0.25);
  --text-selection: rgba(167, 192, 128, 0.25);

  --interactive-accent: #a7c080;
  --link-color: #a7c080;
  --link-color-hover: #bfd49c;
  --link-external-color: #a7c080;
  --link-external-color-hover: #bfd49c;
  --link-unresolved-color: #7a8478;

  --h1-color: #e1d6bc;
  --h2-color: #e1d6bc;
  --h3-color: #d3c6aa;
  --h4-color: #d3c6aa;
  --h5-color: #9da9a0;
  --h6-color: #9da9a0;

  --blockquote-border-color: #a7c080;
  --code-background: #343f44;
  --code-normal: #d3c6aa;
  --hr-color: #3d484d;
  --list-marker-color: #7a8478;
  --checkbox-color: #a7c080;
}

/* ============================================================
   Small finishing touches
   ============================================================ */

/* Headings in the soft display serif */
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4 {
  font-family: 'Fraunces', 'Shippori Mincho', Georgia, serif;
  font-variation-settings: 'SOFT' 100;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* Links: underlined like in the vault, with a gentle offset */
.markdown-rendered a.internal-link,
.markdown-rendered a.external-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--link-color) 55%, transparent);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.markdown-rendered a.internal-link:hover,
.markdown-rendered a.external-link:hover {
  text-decoration-color: currentColor;
}
/* hide the little external-link arrow for a calmer page */
.markdown-rendered a.external-link {
  background-image: none;
  padding-right: 0;
}

/* Left sidebar: a touch darker than the page, with a hairline divider */
.site-body-left-column {
  background-color: var(--background-secondary);
  border-right: 1px solid var(--background-modifier-border);
}

/* Folder names in small caps, echoing the vault's uppercase folders */
.nav-view-outer .tree-item.mod-collapsible > .tree-item-self {
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

/* Active note gets a soft rounded pill, like the vault sidebar */
.nav-view-outer .tree-item-self.mod-active {
  background-color: var(--background-secondary-alt);
  border-radius: 6px;
}

/* Blockquotes: quiet italic */
.markdown-rendered blockquote {
  font-style: italic;
  color: var(--text-muted);
  border-left-width: 3px;
}

/* Softer highlight marks */
.markdown-rendered mark {
  background-color: var(--text-highlight-bg);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}

/* Code stays readable next to the serif */
.markdown-rendered code {
  font-size: 0.85em;
  border-radius: 4px;
}

/* Images: gently rounded corners */
.markdown-rendered img {
  border-radius: 6px;
}

::selection {
  background-color: var(--text-selection);
}

/* Slightly smaller type on phones */
@media (max-width: 750px) {
  body { --font-text-size: 17px; }
  .published-container { --page-padding: 20px; }
}

/* ============================================================
   Social links in the bottom-right corner
   ============================================================ */
.kt-footer {
  position: fixed;
  right: 24px;
  bottom: 18px;
  z-index: 20;
  text-align: right;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 13px;
  color: var(--text-faint);
}
.kt-socials {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 4px;
}
.kt-socials a {
  display: flex;
  color: var(--text-muted);
  transition: color 0.15s ease, transform 0.15s ease;
}
.kt-socials a:hover {
  color: var(--text-accent);
  transform: translateY(-1px);
}
@media (max-width: 1000px) {
  .kt-footer { display: none; }
}