/* ============================================================
   SystemicWiki — Obsidian Publish custom CSS (v2 — major redesign)
   Place this file at the ROOT of your vault, named exactly:
   publish.css
   Then publish it via "Publish changes."

   IMPORTANT: replace the ENTIRE previous file with this one —
   don't paste on top of the old version.
   ============================================================ */

/* ---- 1. Fonts ----
   A serif for headings (gives the wiki a more "reference text"
   feel, fitting for a therapy knowledge base) paired with a clean
   sans for body text and UI chrome. Loaded from Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@600;700&family=Inter:wght@400;500;600&display=swap');

/* ---- 2. Palette ----
   A deeper, more editorial palette than v1 — indigo/teal accent
   pair, warm-neutral background, and one distinct color per
   content category for the folder-based link coding below. */
:root {
  --sw-accent: #4338ca;         /* indigo — primary links, H1/H2 */
  --sw-accent-soft: #eef0fe;
  --sw-teal: #0f766e;           /* secondary accent */
  --sw-bg: #fbfaf8;             /* warm off-white page background */
  --sw-border: #e6e2da;
  --sw-text: #24211c;
  --sw-text-muted: #6d675c;

  /* Category colors — one per top-level folder */
  --sw-cat-epistemology: #7c3aed;   /* violet */
  --sw-cat-school: #dc2626;         /* red */
  --sw-cat-concept: #2563eb;        /* blue */
  --sw-cat-method: #0f766e;         /* teal */
  --sw-cat-technique: #ea580c;      /* orange */
  --sw-cat-pathway: #4338ca;        /* indigo */
  --sw-cat-theorist: #57534e;       /* stone */
}

/* ---- 2b. Dark mode palette ----
   Obsidian Publish already has a built-in light/dark toggle
   (enable it via Change site options → Components). Without this
   section, the toggle would switch Obsidian's own UI chrome to
   dark while your custom colors above stayed hardcoded for light
   mode — this overrides them specifically when .theme-dark is
   active, so the whole site actually goes dark, not just half. */
.theme-dark {
  --sw-accent: #818cf8;
  --sw-accent-soft: #2a2a45;
  --sw-teal: #2dd4bf;
  --sw-bg: #1e1e1e;
  --sw-border: #3a3a3a;
  --sw-text: #e4e2dd;
  --sw-text-muted: #a8a29e;

  --sw-cat-epistemology: #a78bfa;
  --sw-cat-school: #f87171;
  --sw-cat-concept: #60a5fa;
  --sw-cat-method: #2dd4bf;
  --sw-cat-technique: #fb923c;
  --sw-cat-pathway: #818cf8;
  --sw-cat-theorist: #a8a29e;
}

.theme-dark .markdown-rendered h2 + ul li a.internal-link:hover,
.theme-dark .markdown-rendered h3 + ul li a.internal-link:hover {
  color: #1e1e1e;
}

.published-container {
  background-color: var(--sw-bg);
}

.markdown-preview-view,
.markdown-rendered {
  max-width: var(--page-width);
  line-height: 1.7;
  font-size: 16.5px;
  font-family: 'Inter', var(--font-default);
  color: var(--sw-text);
}

.markdown-preview-view p,
.markdown-rendered p {
  margin-bottom: 1.15em;
}

/* ---- 4. Headings — serif, editorial ---- */
.markdown-rendered h1 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2.4em;
  font-weight: 700;
  color: var(--sw-text);
  border-bottom: none;
  margin-bottom: 0.6em;
  line-height: 1.15;
}

.markdown-rendered h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.4em;
  font-weight: 600;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sw-accent);
  margin-top: 2em;
  margin-bottom: 0.5em;
  border-left: none;
  padding-left: 0;
  border-bottom: 1px solid var(--sw-border);
  padding-bottom: 0.3em;
}

.markdown-rendered h3 {
  font-family: 'Inter', var(--font-default);
  font-size: 0.95em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sw-teal);
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

/* ---- 5. Internal links — base style ---- */
.markdown-rendered a.internal-link {
  color: var(--sw-accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--sw-accent) 35%, transparent);
  transition: all 0.15s ease;
}

.markdown-rendered a.internal-link:hover {
  border-bottom-color: var(--sw-accent);
  background-color: var(--sw-accent-soft);
}

.markdown-rendered a.internal-link.is-unresolved {
  color: var(--sw-text-muted);
  border-bottom: 1px dashed var(--sw-border);
}

/* ---- 6. Category color-coding by folder ----
   Obsidian Publish mirrors your vault's folder structure in the
   URL by default, so we can color-code links by which folder
   they point to. VERIFY after publishing: right-click a link on
   the live site → Inspect → check the href actually contains the
   folder name below. If your permalinks are customized, these
   won't match — tell me the real href pattern and I'll adjust. */

.markdown-rendered a.internal-link[href*="Epistemologies"] {
  color: var(--sw-cat-epistemology);
  border-bottom-color: color-mix(in srgb, var(--sw-cat-epistemology) 35%, transparent);
}

.markdown-rendered a.internal-link[href*="Schools"] {
  color: var(--sw-cat-school);
  border-bottom-color: color-mix(in srgb, var(--sw-cat-school) 35%, transparent);
}

.markdown-rendered a.internal-link[href*="Concepts"] {
  color: var(--sw-cat-concept);
  border-bottom-color: color-mix(in srgb, var(--sw-cat-concept) 35%, transparent);
}

.markdown-rendered a.internal-link[href*="Methods"] {
  color: var(--sw-cat-method);
  border-bottom-color: color-mix(in srgb, var(--sw-cat-method) 35%, transparent);
}

.markdown-rendered a.internal-link[href*="Techniques"] {
  color: var(--sw-cat-technique);
  border-bottom-color: color-mix(in srgb, var(--sw-cat-technique) 35%, transparent);
}

.markdown-rendered a.internal-link[href*="Pathways"] {
  color: var(--sw-cat-pathway);
  border-bottom-color: color-mix(in srgb, var(--sw-cat-pathway) 35%, transparent);
}

.markdown-rendered a.internal-link[href*="Theorists"] {
  color: var(--sw-cat-theorist);
  border-bottom-color: color-mix(in srgb, var(--sw-cat-theorist) 35%, transparent);
}

/* ---- 7. "Related X" sections as chip/pill lists ----
   Turns the plain bullet lists under Related concepts/methods/etc.
   into wrapping rows of small pill-style tags — much easier to
   scan than a long vertical list, especially for sections with
   10-20 links. */
.markdown-rendered h2 + ul,
.markdown-rendered h3 + ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  list-style: none;
  padding: 0;
  margin: 0.6em 0 1.4em 0;
}

.markdown-rendered h2 + ul li,
.markdown-rendered h3 + ul li {
  margin: 0;
  padding: 0;
}

.markdown-rendered h2 + ul li a.internal-link,
.markdown-rendered h3 + ul li a.internal-link {
  display: inline-block;
  background-color: var(--sw-accent-soft);
  border: 1px solid var(--sw-border);
  border-bottom: 1px solid var(--sw-border);
  border-radius: 999px;
  padding: 0.25em 0.9em;
  font-size: 0.85em;
  font-weight: 500;
}

.markdown-rendered h2 + ul li a.internal-link:hover,
.markdown-rendered h3 + ul li a.internal-link:hover {
  background-color: var(--sw-accent);
  color: white;
  border-color: var(--sw-accent);
}

/* Regular prose lists (not directly under a heading) stay as
   normal bullets so step-by-step process lists aren't affected */
.markdown-rendered ul {
  margin-bottom: 1em;
}

.markdown-rendered li {
  margin-bottom: 0.3em;
}

/* ---- 8. Blockquotes / notes ---- */
.markdown-rendered blockquote {
  border-left: 3px solid var(--sw-teal);
  background: color-mix(in srgb, var(--sw-teal) 6%, transparent);
  padding: 0.7em 1.1em;
  color: var(--sw-text-muted);
  border-radius: 0 6px 6px 0;
  font-style: italic;
}

/* ---- 9. Tables ---- */
.markdown-rendered table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1.2em;
  font-size: 0.95em;
}

.markdown-rendered th,
.markdown-rendered td {
  border: 1px solid var(--sw-border);
  padding: 0.6em 0.9em;
  text-align: left;
}

.markdown-rendered th {
  background: var(--sw-accent-soft);
  font-family: 'Inter', var(--font-default);
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.04em;
  color: var(--sw-accent);
}

/* ---- 10. Sidebar navigation accent ---- */
.nav-view-outer .tree-item-self.mod-active {
  color: var(--sw-accent) !important;
  border-left-color: var(--sw-accent) !important;
  font-weight: 600;
}

.nav-view-outer .tree-item-self:hover:not(.mod-collapsible):not(.mod-active) {
  border-left-color: var(--sw-accent) !important;
}

/* ---- 12. Layout — give the main content more room ----
   Obsidian Publish reserves fixed-width side columns (nav +
   graph/outline) regardless of window size, which can crowd the
   main reading column on typical laptop screens. This keeps the
   graph panel visible at all times, just narrower and shorter,
   and gives the reading column more width to work with. */
:root {
  --sidebar-left-width: 240px;
  --sidebar-right-width: 220px;
  --page-width: 900px;
  --graph-height: 180px;
  --graph-controls-width: 200px;
}

.graph-view-container {
  padding: 2px;
}

/* ---- 11. Site header ---- */
.site-header {
  border-bottom: 1px solid var(--sw-border);
}

.site-body-left-column-site-name,
.site-header-text {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 700;
}

/* ---- 13. RGB versions of accent colors ----
   Some of Obsidian's own components (callouts, highlights) expect
   an "R, G, B" string rather than a hex value, so they can build
   rgba() colors with adjustable opacity. Needed for section 14. */
:root {
  --sw-accent-rgb: 67, 56, 202;
}

.theme-dark {
  --sw-accent-rgb: 129, 140, 248;
}

/* ---- 14. Callouts ----
   Obsidian's callout blocks (> [!note], > [!tip], etc.) already
   work out of the box — this just ties the two most commonly
   used types to your accent color instead of Obsidian's defaults,
   so they feel like part of the site rather than an unstyled
   extra. Leaves warning/danger/etc. colors untouched since those
   should probably stay conventionally red/orange for clarity. */
.callout[data-callout="info"],
.callout[data-callout="tip"],
.callout[data-callout="hint"],
.callout[data-callout="summary"],
.callout[data-callout="abstract"] {
  --callout-color: var(--sw-accent-rgb);
}

/* ---- 15. Highlighted text (==like this==) ---- */
.markdown-rendered mark {
  background-color: rgba(var(--sw-accent-rgb), 0.18);
  color: var(--sw-text);
  padding: 0.05em 0.15em;
  border-radius: 3px;
}

/* ---- 16. Code blocks and inline code ---- */
.markdown-rendered code {
  background-color: var(--sw-accent-soft);
  color: var(--sw-teal);
  border: none;
  border-radius: 4px;
  font-size: 0.88em;
}

.markdown-rendered pre {
  background-color: var(--sw-accent-soft);
  border: 1px solid var(--sw-border);
  border-radius: 8px;
}

.markdown-rendered pre code {
  background-color: transparent;
  color: var(--sw-text);
}

/* ---- 17. External links ----
   Slightly quieter than internal links, so the internal category
   color-coding (section 6) stays the visually dominant signal. */
.markdown-rendered .external-link {
  color: var(--sw-teal);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--sw-teal) 40%, transparent);
}

/* ---- 18. Backlinks ("Linked mentions") ----
   Every page has a backlinks panel at the bottom listing other
   pages that link to it. Restyled to feel like part of the site
   rather than Obsidian's unstyled default list. */
.backlinks {
  margin-top: 56px;
  border-top: 1px solid var(--sw-border);
  padding-top: 24px;
}

.backlinks .published-section-header {
  font-family: 'Inter', var(--font-default);
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--sw-text-muted);
}

.backlink-items-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 10px;
}

.backlink-item {
  background-color: var(--sw-accent-soft);
  border: 1px solid var(--sw-border);
  border-radius: 999px;
  padding: 0.25em 0.9em;
  font-size: 0.85em;
}

.backlink-item .internal-link {
  border-bottom: none !important;
}

/* ---- 19. Footer ---- */
.site-footer {
  opacity: 0.6;
  font-family: 'Inter', var(--font-default);
}

/* ---- 20. Drop cap on the opening paragraph ----
   Purely decorative — gives long-form concept and method pages a
   slightly more editorial, "reference text" feel. Targets the
   first paragraph on the page (typically the Short definition),
   wherever it falls after the title and first heading. */
.markdown-rendered > p:first-of-type::first-letter {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 3.2em;
  font-weight: 700;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.08em 0 0;
  color: var(--sw-accent);
}

/* ---- 21. Text selection ---- */
::selection {
  background-color: rgba(var(--sw-accent-rgb), 0.25);
}

/* ---- 22. Scrollbar (WebKit browsers only — Chrome, Edge, Safari) ---- */
body.styled-scrollbars ::-webkit-scrollbar-thumb {
  background-color: rgba(var(--sw-accent-rgb), 0.3);
}

body.styled-scrollbars ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--sw-accent-rgb), 0.5);
}