/* ========================================
   DARA'S DIGITAL GARDEN
   Obsidian Publish — Custom Edition
======================================== */

/* ---------- FONTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alegreya+SC:wght@400;700&display=swap');

/* ---------- PRIMARY COLOR ---------- */
:root {
  --interactive-accent: #5A7BC9;
  --interactive-accent-hover: #7B9FE0;
  --interactive-accent-rgb: 90, 123, 201;
  --text-accent: #5A7BC9;
  --text-accent-hover: #7B9FE0;
}

body {
  --interactive-accent: #5A7BC9;
  --interactive-accent-hover: #7B9FE0;
  --text-accent: #5A7BC9;
  font-family: 'Spectral', serif;
  
  /* Link colors for Publish */
  --link-color: #5A7BC9;
  --link-color-hover: #7B9FE0;
  --link-external-color: #d97757;
  --link-unresolved-color: #6B7280;
}

.theme-light,
.theme-dark {
  --interactive-accent: #5A7BC9;
  --interactive-accent-hover: #7B9FE0;
  --text-accent: #5A7BC9;
}

/* Active navigation items */
.tree-item-self.is-active,
.nav-file-title.is-active {
  color: #5A7BC9 !important;
}

body {
  font-family: 'Spectral', serif;
  font-size: 16px !important;
  line-height: 1.8;
  color: #2f2f2f;

}

/* Ensure published content uses 17px */
.published-container,
.site-body-center-column,
.markdown-preview-view,
.markdown-rendered {
  font-size: 16px !important;
}

.site-body,
.nav-header,
.nav-folder-title,
.tree-item-inner,
.search-input,
.graph-controls,
.theme-toggle,
* {
  font-family: 'Spectral', serif;
}

/* Alegreya SC for subtle small caps accents */
.callout-title-inner,
.markdown-preview-view table th,
.table-of-contents,
.toc-item,
.site-header .site-title,
.site-nav .site-title,
.site-name,
.site-body-left-column-site-name {
  font-family: 'Alegreya SC', serif;
  letter-spacing: 0.02em;
}

/* ---------- LINK COLORS ---------- */
:root {
  --link-accent: #5A7BC9;
  --link-accent-hover: #7B9FE0;
  --link-unresolved: #6B7280;
  --link-unresolved-hover: #9CA3AF;
}

/* All links - accent color */
.published-container a,
.site-body a,
a.internal-link,
a[href^="http"],
a[data-href] {
  color: #5A7BC9 !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color 0.25s ease;
}

.published-container a:hover,
.site-body a:hover,
a.internal-link:hover,
a[href^="http"]:hover,
a[data-href]:hover {
  color: #7B9FE0 !important;
}

/* External links - pink accent */
a.external-link,
a.external-link[data-href],
a.external-link[href^="http"] {
  color: var(--link-external-color) !important;
}

a.external-link:hover,
a.external-link[data-href]:hover,
a.external-link[href^="http"]:hover {
  color: var(--link-external-color) !important;
}

/* All links - Alegreya SC font */
a.internal-link,
a.external-link,
a[data-href],
a[href^="http"] {
  font-family: 'Alegreya SC', serif !important;
  letter-spacing: 0.02em !important;
}

/* Unresolved links - grey tone */
.published-container .is-unresolved,
.site-body .is-unresolved,
a.is-unresolved {
  color: #6B7280 !important;
  opacity: 1 !important;
}

.published-container .is-unresolved:hover,
.site-body .is-unresolved:hover,
a.is-unresolved:hover {
  color: #9CA3AF !important;
}

/* Footnotes and references should not inherit link accent */
.markdown-preview-view sup a,
.markdown-preview-view .footnote-link,
.markdown-preview-view .footnote-ref,
.markdown-preview-view .footnote-item a {
  color: inherit !important;
  opacity: 0.7 !important;
  text-decoration: none !important;
}

.markdown-preview-view .footnote-backref {
  color: inherit !important;
  opacity: 0.4 !important;
}

/* Footnote hover stays neutral */
.markdown-preview-view sup a:hover,
.markdown-preview-view .footnote-ref:hover,
.markdown-preview-view .footnote-backref:hover,
.markdown-preview-view .footnote-item a:hover {
  color: inherit !important;
  opacity: 1 !important;
}

/* Focus-visible for accessibility */
.markdown-rendered a:focus-visible,
.markdown-preview-view a:focus-visible {
  outline: 2px solid var(--link-teal-hover);
  outline-offset: 2px;
  text-decoration: none;
}

/* Ensure external-link icons don't add extra underline decorations */
.external-link,
.internal-link { border-bottom: none !important; text-decoration-skip-ink: auto; }

/* ---------- HEADINGS ---------- */
:root {
  --h1-size: clamp(2.027em, calc(0.4rem + 5.1vw), 2.986em);
  --h2-size: clamp(1.802em, calc(0.6rem + 3.7vw), 2.488em);
  --h3-size: clamp(1.602em, calc(0.8rem + 2.5vw), 2.074em);
  --h4-size: clamp(1.424em, calc(1rem + 3vw), 1.728em);
  --h5-size: clamp(1.266em, calc(1rem + 3vw), 1.44em);
  --h6-size: clamp(1.125em, calc(1rem + 3vw), 1.2em);
}

.inline-title,
.markdown-preview-section h1 { 
  font-size: var(--h1-size);
}

.inline-title {
  margin-top: 0.2em !important;
  margin-bottom: 0.5em !important;
}

.markdown-preview-section h2 { font-size: var(--h2-size); }
.markdown-preview-section h3 { font-size: var(--h3-size); }
.markdown-preview-section h4 { font-size: var(--h4-size); }
.markdown-preview-section h5 { font-size: var(--h5-size); }
.markdown-preview-section h6 {
  font-size: var(--h6-size);
  font-family: 'Alegreya SC', serif;
  letter-spacing: 0.02em;
}

.published-container .markdown-rendered h1.page-header {
  margin-bottom: 0em !important;
  margin-top: 0.2em !important;
}




/* ---------- NAVIGATION (Sidebar) ---------- */
/* Use default sidebar backgrounds; no forced colors */

/* Navigation links should NOT use accent colors */
.nav-folder-children a,
.tree-item-self a,
.nav-file-title,
.nav-folder-title,
.tree-item-inner {
  color: inherit !important;
  font-family: 'Spectral', serif !important;
  font-size: 14px !important;
  letter-spacing: normal !important;
}

/* Navigation item borders */
.nav-view-outer .tree-item-self:not(.mod-collapsible):hover {
  border-left-color: #7B9FE0 !important;
}

.nav-view-outer .tree-item-self:not(.mod-collapsible).is-active {
  border-left-color: #5A7BC9 !important;
}

.nav-folder.mod-collapsible .nav-folder-children,
.nav-folder.is-collapsed .nav-folder-children {
  display: block !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.nav-folder.mod-collapsible .nav-folder-title::before {
  content: none !important;
}

.tree-item-self.mod-active .tree-item-inner,
.nav-file-title.is-active .nav-file-title-content,
.nav-folder-title.is-active {
  font-weight: 800 !important;
  color: inherit !important;
}

.nav-file-title:hover .nav-file-title-content,
.nav-folder-title:hover,
.tree-item-self:hover .tree-item-inner {
  text-decoration: none !important;
  color: inherit !important;
}

/* ---------- BLOCKQUOTES ---------- */
.markdown-preview-view blockquote {
  border: 1.2px solid transparent !important;
  padding: 1em !important;
  font-style: italic;
  border-radius: 1px;
  overflow: hidden;

  /* use purple gradient */
  border-image-source: linear-gradient(165deg,
    color-mix(in srgb, var(--link-color) 20%, transparent) 0%,
    color-mix(in srgb, var(--link-color) 80%, transparent) 100%
  ) !important;
  border-image-slice: 1 !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
}

.markdown-preview-view blockquote::before { content: none; }

/* ---------- IMAGES ---------- */
.published-container img {
  max-width: 100%;
  border-radius: 4px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Captions (from alt text) */
.published-container .image-embed[alt]:not([alt=""])::after {
  display: block;
  content: attr(alt);
  color: var(--text-muted);
  font-style: italic;
  opacity: 0.9;
  font-size: 0.85em;
  text-align: center;
}

/* ---------- CALLOUTS ---------- */
/* Info callout - periwinkle theme */
.callout[data-callout="info"] {
  background-color: rgba(237, 240, 255, 0.65) !important;
}

.callout[data-callout="info"] .callout-title-inner {
  color: #4d74cf !important;
}

.callout[data-callout="info"] .callout-icon .svg-icon {
  color: #4d74cf !important;
}

.theme-dark .callout[data-callout="info"] {
  background-color: rgba(77, 116, 207, 0.22) !important;
}

.theme-dark .callout[data-callout="info"] .callout-title-inner,
.theme-dark .callout[data-callout="info"] .callout-icon .svg-icon {
  color: #cbd5ff !important;
}

/* ---------- TAGS ---------- */
.tag,
a.tag {
  font-family: Alegreya SC;
  padding: 0.15em 0.4em;
  border-radius: 1em;
  border: 1px solid rgba(90, 123, 201, 0.35) !important;
  background-color: rgba(237, 240, 255, 0.65) !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tag:hover,
a.tag:hover {
  color: #7B9FE0 !important;
  border: 1px solid rgba(90, 123, 201, 0.35) !important;
  background-color: rgba(237, 240, 255, 0.65) !important;
}

.theme-dark .tag,
.theme-dark a.tag {
  color: #dde5ff !important;
  border: 1px solid rgba(77, 116, 207, 0.45) !important;
  background-color: rgba(77, 116, 207, 0.2) !important;
}

.theme-dark .tag:hover,
.theme-dark a.tag:hover {
  background-color: rgba(77, 116, 207, 0.3) !important;
  border-color: rgba(77, 116, 207, 0.55) !important;
}

/* ---------- HIGHLIGHT ---------- */
.markdown-preview-view mark, .markdown-rendered mark {
  background-color: transparent !important;
  color: var(--link-color) !important;
  /* Gradient reference:
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--link-external-color) 10%, #ffd369) 0%,
    color-mix(in srgb, var(--link-external-color) 3%, #fff9d6) 100%
  ) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  */
}

.theme-dark .markdown-preview-view mark,
.theme-dark .markdown-rendered mark {
  background-color: transparent !important;
  color: var(--link-color) !important;
}

::selection,
.published-container ::selection,
.site-body ::selection {
  background-color: rgba(237, 240, 255, 0.85);
  color: inherit;
}

.theme-dark ::selection,
.theme-dark .published-container ::selection,
.theme-dark .site-body ::selection {
  background-color: rgba(77, 116, 207, 0.45);
  color: inherit;
}

/* Reduce visual clutter inside lists */
ul li p,
ol li p {
  margin: 0.4em 0;
}

/* ---------- FOOTER ---------- */
.site-footer a { display: none !important; }
.site-footer {
  padding-top: 2rem;
  text-align: center;
}
.site-footer::after {
  content: 'Dara © 2025';
  color: #777;
  font-family: 'Alegreya SC', serif;
  font-size: 0.85em;
}

/* ------------------- LOGO -------------------*/

.site-body-left-column-site-logo {
    text-align: left;
    width: 180px;
    height: 60px;
    position: relative;
}

/* Hide the original img tag */
.site-body-left-column-site-logo img {
    display: none;
}

/* Create pseudo-element for background image */
.site-body-left-column-site-logo::before {
    content: '';
    display: block;
    width: 180px;
    height: 60px;
    background-image: url("logo-light.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
}

/* Dark mode logo */
.theme-dark .site-body-left-column-site-logo::before {
    background-image: url("logo-dark.png");
}

/* Footnote separator */
.footnotes hr {
  border: none !important;
  border-top: 1px solid var(--background-modifier-border) !important;
}

/* Hide page title in left column */
.site-body-left-column-site-name { display: none !important; }

/* Use default Obsidian Publish width and padding */


/* ---------- DROP CAP ---------- */
/* Case 1: Drop cap when el-p directly follows metadata el-p */
.markdown-preview-section .mod-header + .el-p + .el-p::first-letter {
  float: left !important;
  font-size: 3.0em !important;
  line-height: 0.8 !important;
  margin: 0.05em 0.1em 0 0 !important;
  font-weight: 600 !important;
}

/* Case 2: Drop cap when el-p follows metadata el-p, then a heading */
.markdown-preview-section .mod-header + .el-p + *[class^="el-h"] + .el-p::first-letter {
  float: left !important;
  font-size: 3.0em !important;
  line-height: 0.8 !important;
  margin: 0.05em 0.1em 0 0 !important;
  font-weight: 600 !important;
}


/* ------------ ANCHOR HIGHLIGHT ------------ */


.is-flashing {
    background-color: transparent !important;
}


.metadata-container {
  margin: 0 0 1.1rem 0;
  font-size: 12px;
  line-height: 1.4;
}

.metadata-container br {
  display: none;
}

.metadata-property-key {
  color: var(--tx2);
}

.metadata-property-value {
  color: var(--tx1);
  padding-left: 4px;
}


/* Style metadata line */
.markdown-preview-section .mod-header + .el-p {
  opacity: 0.7;
  font-size: 0.9em; /* Make it slightly smaller */
  padding-bottom: 1em;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* ---------- FIX SCROLLBAR ON SHORT PAGES ---------- */
/*
 * Fix: Remove overflow from .markdown-preview-sizer
 *
 * Obsidian's default CSS sets overflow-x: hidden on this element.
 * When overflow-x is hidden, browsers automatically change overflow-y to auto,
 * which creates a scrollable container that shows a scrollbar even on short pages.
 * Setting overflow: visible prevents this unwanted scroll container.
 */
.markdown-preview-sizer {
  overflow: visible !important;
}

/* Remove reserved scrollbar space */
.markdown-preview-view {
  scrollbar-gutter: auto !important;
}