/* ==========================================================================
   The Wish Giving Jewel — Obsidian Publish theme  (wish.giving)
   Matches Benji's vault look: cream page, plum-charcoal sidebar,
   rose H1, blue H2, H3/H4 swap, olive quotes, indigo accents.

   HOW TO USE
   1. Keep this file named exactly "publish.css" in your VAULT ROOT.
   2. In Obsidian, open the Publish panel and publish this file.
   3. Tune colors/fonts in the ":root" block below — all in one place.
   ========================================================================== */

:root {
  /* --- COLORS (from your benji-color-theme) --------------------------- */
  --ink:            #3a332c;  /* body text — warm ink                    */
  --ink-soft:       #8a7c6a;  /* muted text, captions                    */
  --cream:          #efe6da;  /* page background                         */
  --cream-2:        #e7dccd;  /* cards, blockquotes                      */
  --charcoal:       #34303c;  /* sidebar / frame — plum-charcoal         */
  --charcoal-2:     #4a4453;  /* active nav row                          */
  --sidebar-text:   #e6dccb;  /* cream text on the dark sidebar          */
  --sidebar-link:   #f5e27a;  /* pale-bright yellow — sidebar nav links   */
  --rose:           #c13b61;  /* H1 headings                             */
  --blue:           #1e4d7b;  /* H2 headings                             */
  --link-blue:      #4d9de0;  /* light blue — links                      */
  --green:          #40a02b;  /* H4 headings                             */
  --indigo:         #3c3470;  /* titles, inline accents                  */
  --olive:          #6e7d3a;  /* italics, blockquotes                    */
  --line:           #d9ccb8;  /* hairline borders                        */

  /* --- TYPE ------------------------------------------------------------ */
  --font-reading:  'New York', Georgia, 'Iowan Old Style', serif;
  --font-ui:       -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --reading-width: 46rem;
  --reading-size:  1.075rem;
  --reading-lead:  1.85;
}

/* ---- Page canvas --------------------------------------------------------- */
body,
.published-container {
  background: var(--cream);
  color: var(--ink);
  --background-primary: var(--cream);
  --background-secondary: var(--cream-2);
  --text-normal: var(--ink);
  --text-muted: var(--ink-soft);
  --text-accent: var(--rose);
  --text-accent-hover: var(--indigo);
  --interactive-accent: var(--rose);
}

/* ---- Reading column ------------------------------------------------------ */
.markdown-preview-view,
.markdown-rendered {
  font-family: var(--font-reading);
  font-size: var(--reading-size);
  line-height: var(--reading-lead);
  color: var(--ink);
}
.markdown-preview-sizer,
.markdown-preview-section {
  max-width: var(--reading-width);
  margin-left: auto;
  margin-right: auto;
}

/* ---- Headings — mirrors your vault ------------------------------------- */
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4 {
  font-family: var(--font-reading);
  font-weight: 800;
  line-height: 1.25;
}
/* H1 — rose with matching underline */
.markdown-rendered h1 {
  font-size: calc(2rem + 2pt);
  color: var(--rose);
  padding-bottom: 0.15em;
  border-bottom: 2px solid var(--rose);
}
/* H2 — darker blue, two points smaller, no underline */
.markdown-rendered h2 {
  font-size: calc(1.5rem + 2pt);
  color: var(--blue);
  border-bottom: none !important;
}
/* H3 — default ink (took H4's old color) */
.markdown-rendered h3 { font-size: calc(1.5rem + 2pt); color: var(--ink); }
/* H4 — blue (matches your vault heading blue) */
.markdown-rendered h4 { font-size: 1.08rem; color: var(--blue); }

/* ---- Note title ---------------------------------------------------------- */
.page-header,
.markdown-rendered .inline-title {
  font-family: var(--font-reading);
  color: var(--indigo);
  font-weight: 800;
}

/* ---- Site name — cream, matching the page background ------------------- */
.site-body-left-column-site-name,
.site-name {
  font-family: var(--font-reading);
  color: var(--cream) !important;
  font-weight: 800;
}

/* ---- Links --------------------------------------------------------------- */
.markdown-rendered a,
a.internal-link {
  color: var(--link-blue);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color .15s ease, border-color .15s ease;
}
.markdown-rendered a:hover,
a.internal-link:hover {
  color: #2f7fc0;
  border-bottom-color: #2f7fc0;
}

/* ---- Bold — rose (the color your links were using) -------------------- */
.markdown-rendered strong,
.markdown-rendered b {
  color: var(--rose);
  font-weight: 700;
}

/* ---- Italics + blockquotes — olive ------------------------------------- */
.markdown-rendered em { color: var(--olive); }
.markdown-rendered blockquote {
  border-left: 3px solid var(--olive);
  background: var(--cream-2);
  color: var(--olive);
  font-style: italic;
  padding: 0.6em 1.2em;
  border-radius: 0 6px 6px 0;
}

/* ---- Callouts ------------------------------------------------------------ */
.markdown-rendered .callout {
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--cream-2);
}

/* ---- Code ---------------------------------------------------------------- */
.markdown-rendered code,
.markdown-rendered pre {
  font-family: 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  background: var(--cream-2);
  border-radius: 6px;
}

/* ---- Images — soft rounded --------------------------------------------- */
.markdown-rendered img {
  border-radius: 10px;
  box-shadow: 0 2px 14px rgba(46, 38, 32, 0.12);
}

/* ---- GIFs keep natural aspect ratio ------------------------------------ */
.markdown-rendered img[src*=".gif"] {
  object-fit: contain;
  aspect-ratio: auto;
  height: auto;
  max-height: none;
  box-shadow: none;
}

/* ---- Responsive embeds (iframes) — never overflow the screen ----------- */
.markdown-rendered iframe {
  max-width: 100%;
}
@media (max-width: 700px) {
  .markdown-rendered iframe {
    width: 100%;   /* fill the phone width instead of a fixed 640/800px */
  }
}

/* ---- Left sidebar — plum-charcoal, right-aligned yellow nav ------------ */
.site-body-left-column,
.site-body-left-column-nav,
.nav-header {
  background: var(--charcoal);
  font-family: var(--font-ui);
}

/* Mobile menu — force the same plum-charcoal as the desktop menu */
@media (max-width: 750px) {
  .site-body-left-column,
  .site-body-left-column-nav,
  .site-menu,
  .nav-header,
  .site-body-left-column.is-active {
    background: var(--charcoal) !important;
  }
}

/* Page links (files) — pale-bright yellow */
.site-body-left-column .tree-item-self,
.site-body-left-column .tree-item-inner,
.site-body-left-column .nav-file-title,
.site-body-left-column .nav-file-title *,
.site-body-left-column a {
  color: var(--sidebar-link) !important;
}

/* Folders + subfolders — olive green (the italic-text color) */
.site-body-left-column .tree-item-self.mod-collapsible,
.site-body-left-column .tree-item-self.mod-collapsible *,
.site-body-left-column .nav-folder-title,
.site-body-left-column .nav-folder-title * {
  color: var(--olive) !important;
}

/* Left-align the nav rows and the site name */
.site-body-left-column-site-name,
.site-body-left-column .tree-item-self,
.site-body-left-column .tree-item-inner {
  text-align: left;
  justify-content: flex-start;
}

/* Remove the vertical indentation guide lines */
.site-body-left-column .tree-item,
.site-body-left-column .tree-item-children,
.site-body-left-column .tree-item-self {
  border-left: none !important;
  border-inline-start: none !important;
  --nav-indentation-guide-width: 0px;
}
.site-body-left-column .tree-item-children::before,
.site-body-left-column .tree-item-self::before {
  display: none !important;
}

/* Hover / active */
.site-body-left-column .tree-item-self:hover,
.site-body-left-column .tree-item-self.is-active {
  background: var(--charcoal-2);
  border-radius: 6px;
}
.site-body-left-column .tree-item-self.is-active,
.site-body-left-column .tree-item-self.is-active * {
  color: #fff4b8 !important;
}

/* ---- Search -------------------------------------------------------------- */
.search-input-container input {
  font-family: var(--font-ui);
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
}

/* ---- Graph view — softened --------------------------------------------- */
.graph-view.color-fill { color: var(--rose); }
.graph-view.color-line { color: var(--line); }
.graph-view.color-text { color: var(--ink-soft); }
.graph-view.color-circle { color: var(--indigo); }

/* ---- Right column / TOC -------------------------------------------------- */
.site-body-right-column {
  font-family: var(--font-ui);
  color: var(--ink-soft);
}

/* ---- Rules --------------------------------------------------------------- */
.markdown-rendered hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 2.4em 0;
}

/* ==========================================================================
   OPTIONAL — full-width animated hero banner
   Activate on any note by adding to its frontmatter:
       cssclasses: [banner]
   and placing an image as the FIRST thing in the note. The first embed
   becomes an edge-of-column hero with a slow Ken Burns zoom.
   ========================================================================== */
@keyframes iv-kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }

.banner .markdown-preview-sizer > .el-embed-image:first-child,
.banner .markdown-preview-sizer > .el-p:first-child {
  max-width: none;
  width: 100%;
  margin: -1.5rem 0 1.5rem 0;
}
.banner .markdown-preview-sizer > .el-embed-image:first-child img,
.banner .markdown-preview-sizer > .el-p:first-child img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  animation: iv-kenburns 24s ease-in-out infinite alternate;
}