/* ============================================================
   JUNOPEDIA — Obsidian Publish Stylesheet
   Schrift: Oranienbaum (headings) + Quicksand (body)
   Palette: Soft Autumn / Crème
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oranienbaum&family=Quicksand:wght@300;400;500;600&display=swap');

/* --- Obsidian Publish CSS Variables ----------------------- */
/* Diese werden von Obsidian intern verwendet — stabiler als Klassen */

body {
  --color-base-00: #f0ebe3;
  --color-base-05: #f0ebe3;
  --color-base-10: #f0ebe3;
  --color-base-20: #e8e1d7;
  --color-base-25: #e8e1d7;
  --color-base-30: #e8e1d7;
  --color-base-35: #d4ccc0;
  --color-base-40: #7a7a72;
  --color-base-50: #7a7a72;
  --color-base-60: #3a3a36;
  --color-base-70: #1a1a18;
  --color-base-100: #1a1a18;

  --color-accent-1: #c9a96e;
  --color-accent-2: #b8944f;
  --interactive-accent: #c9a96e;
  --interactive-accent-hover: #b8944f;

  --font-text-theme: 'Quicksand', sans-serif;
  --font-interface-theme: 'Quicksand', sans-serif;
  --font-monospace-theme: 'Courier New', monospace;

  --font-text-size: 17px;
  --line-height-normal: 1.85;

  --creme:      #f0ebe3;
  --creme-dark: #e8e1d7;
  --ink:        #1a1a18;
  --ink-soft:   #3a3a36;
  --ink-muted:  #7a7a72;
  --accent:     #c9a96e;
  --white:      #faf8f5;
  --font-serif: 'Oranienbaum', Georgia, serif;
  --font-sans:  'Quicksand', sans-serif;
}

/* --- Alles auf Crème setzen ------------------------------- */

html, body {
  background-color: var(--creme) !important;
  font-family: var(--font-sans) !important;
  color: var(--ink) !important;
}

/* Alle möglichen Container die weiß sein könnten */
.site-body,
.site-body-left-column,
.site-body-right-column,
.site-body-center,
.published-container,
.publish-article,
.page-header,
.site-header,
.nav-view-outer,
.tree-scroll-area,
.outline-view-outer,
.sidebar-toggle-button,
.site-footer,
.mod-left-split,
.workspace-leaf,
.workspace-leaf-content,
.view-content,
.nav-files-container {
  background-color: var(--creme) !important;
}

/* Trennlinien */
.site-body-left-column {
  border-right: 1px solid var(--creme-dark) !important;
}

.site-body-right-column {
  border-left: 1px solid var(--creme-dark) !important;
}

/* --- Site-Name / Logo ------------------------------------- */

/* --- Site-Name linke Sidebar + mobiler Header ------------- */

a.site-body-left-column-site-name,
a.site-header-text {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-size: 1.5rem !important;
  letter-spacing: -0.09em !important;
  color: var(--ink) !important;
  text-transform: none !important;
}

/* --- Navigation (linke Sidebar) --------------------------- */

.nav-file-title,
.nav-folder-title {
  font-family: var(--font-sans) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: var(--ink-soft) !important;
  border-radius: 2px !important;
}

.nav-file-title:hover,
.nav-folder-title:hover {
  background-color: var(--creme-dark) !important;
  color: var(--ink) !important;
}

.nav-file-title.is-active,
.nav-file-title.is-being-renamed {
  background-color: rgba(201, 169, 110, 0.15) !important;
  border-left: 2px solid var(--accent) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
}

/* Nav Links lila entfernen */
.nav-file-title a,
.tree-item-inner a {
  color: var(--ink-soft) !important;
  text-decoration: none !important;
}

.nav-file-title a:hover,
.tree-item-inner a:hover {
  color: var(--ink) !important;
}

/* Folder labels */
.nav-folder-title-content {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink-muted) !important;
}

/* --- Hauptbereich ----------------------------------------- */

.markdown-preview-view,
.markdown-rendered,
.publish-article-content {
  background-color: var(--creme) !important;
  font-family: var(--font-sans) !important;
  color: var(--ink-soft) !important;
}

/* --- Headings --------------------------------------------- */

.markdown-rendered h1,
.markdown-preview-view h1,
h1 {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.04em !important;
  color: var(--ink) !important;
  margin-bottom: 1.5rem !important;
  margin-top: 2rem !important;
}

.markdown-rendered h2,
.markdown-preview-view h2,
h2 {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(1.4rem, 3vw, 2rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.04em !important;
  color: var(--ink) !important;
  margin-top: 3rem !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid var(--creme-dark) !important;
}

.markdown-rendered h3,
.markdown-preview-view h3,
h3 {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(1.15rem, 2.5vw, 1.5rem) !important;
  color: var(--ink) !important;
  margin-top: 2.2rem !important;
  margin-bottom: 0.8rem !important;
}

.markdown-rendered h4,
.markdown-preview-view h4,
h4 {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ink-muted) !important;
  margin-top: 2rem !important;
  margin-bottom: 0.5rem !important;
}

/* --- Paragraphen ------------------------------------------ */

.markdown-rendered p,
.markdown-preview-view p {
  font-family: var(--font-sans) !important;
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
  color: var(--ink-soft) !important;
  margin-bottom: 1.4rem !important;
}

strong { font-weight: 600 !important; color: var(--ink) !important; }

/* --- Links ------------------------------------------------ */

/* Lila Links komplett entfernen */
a, a:visited {
  color: var(--ink) !important;
  text-decoration: none !important;
}

.markdown-rendered a,
.markdown-preview-view a,
.internal-link,
.external-link {
  color: var(--ink) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--creme-dark) !important;
  padding-bottom: 1px !important;
  transition: border-color 0.2s ease !important;
}

.markdown-rendered a:hover,
.markdown-preview-view a:hover,
.internal-link:hover,
.external-link:hover {
  border-color: var(--accent) !important;
  color: var(--ink) !important;
}

/* --- Blockquote ------------------------------------------- */

.markdown-rendered blockquote,
.markdown-preview-view blockquote {
  border-left: 2px solid var(--accent) !important;
  padding: 1.2rem 1.8rem !important;
  margin: 2rem 0 !important;
  background: rgba(255,255,255,0.4) !important;
  border-radius: 0 4px 4px 0 !important;
}

.markdown-rendered blockquote p,
.markdown-preview-view blockquote p {
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  margin-bottom: 0 !important;
}

/* --- Listen ----------------------------------------------- */

.markdown-rendered ul,
.markdown-rendered ol,
.markdown-preview-view ul,
.markdown-preview-view ol {
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  color: var(--ink-soft) !important;
  line-height: 1.8 !important;
  margin: 0 0 1.4rem 1.4rem !important;
}

.markdown-rendered ul li::marker,
.markdown-preview-view ul li::marker {
  color: var(--accent) !important;
}

/* --- Tabellen --------------------------------------------- */

.markdown-rendered table,
.markdown-preview-view table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--font-sans) !important;
  font-size: 0.88rem !important;
  margin: 2rem 0 !important;
}

.markdown-rendered th,
.markdown-preview-view th {
  font-weight: 600 !important;
  padding: 0.7rem 1rem !important;
  border-bottom: 2px solid var(--creme-dark) !important;
  color: var(--ink) !important;
}

.markdown-rendered td,
.markdown-preview-view td {
  padding: 0.65rem 1rem !important;
  border-bottom: 1px solid var(--creme-dark) !important;
  color: var(--ink-soft) !important;
}

/* --- Code ------------------------------------------------- */

.markdown-rendered code,
.markdown-preview-view code {
  background: rgba(255,255,255,0.6) !important;
  border: 1px solid var(--creme-dark) !important;
  border-radius: 3px !important;
  padding: 0.15em 0.4em !important;
  color: var(--ink) !important;
  font-size: 0.85rem !important;
}

.markdown-rendered pre,
.markdown-preview-view pre {
  background: var(--white) !important;
  border: 1px solid var(--creme-dark) !important;
  border-radius: 4px !important;
  padding: 1.4rem 1.6rem !important;
  margin: 2rem 0 !important;
}

/* --- HR --------------------------------------------------- */

.markdown-rendered hr,
.markdown-preview-view hr {
  border: none !important;
  border-top: 1px solid var(--creme-dark) !important;
  margin: 3rem auto !important;
  width: 40px !important;
}

/* --- Tags ------------------------------------------------- */

.tag, a.tag {
  font-family: var(--font-sans) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink-muted) !important;
  background: var(--creme-dark) !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 2px !important;
  padding: 0.2em 0.6em !important;
}

/* --- Callouts --------------------------------------------- */

.callout {
  background: var(--white) !important;
  border: 1px solid var(--creme-dark) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 0 4px 4px 0 !important;
  padding: 1.2rem 1.6rem !important;
  margin: 2rem 0 !important;
}

/* --- Suchfeld --------------------------------------------- */

.search-input-container input,
input[type="search"] {
  font-family: var(--font-sans) !important;
  background: var(--white) !important;
  border: 1px solid var(--creme-dark) !important;
  color: var(--ink) !important;
  border-radius: 2px !important;
}


/* --- Hide Obsidian footer --------------------------------- */
.site-footer { display: none !important; }

/* --- Footer in rechter Spalte ----------------------------- */
.site-body-right-column-inner::after {
  content: "© Aleksandra Juno · aleksandrajuno.com";
  display: block;
  text-align: center;
  padding: 1.5rem 1rem;
  font-family: "Quicksand", sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #7a7a72;
  border-top: 1px solid #e8e1d7;
  margin-top: 4rem;
}

/* --- Hide English UI labels ------------------------------- */
.graph-view-outer .published-section-header,
.outline-view-outer .published-section-header {
  display: none !important;
}

/* --- Outline / On this page aktiver Link ------------------ */
.outline-view .tree-item-self.is-active,
.outline-view .tree-item-self.is-active .tree-item-inner,
.outline-view .tree-item-self.is-active a {
  color: var(--ink) !important;
  font-weight: 600 !important;
  background: none !important;
}

/* --- Outline aktive Farbe fix ----------------------------- */
.outline-view-outer .tree-item-inner,
.outline-view-outer .tree-item-self,
.outline-view-outer a {
  color: var(--ink-muted) !important;
}

.outline-view-outer .tree-item-self.is-active .tree-item-inner,
.outline-view-outer .tree-item-self.is-active {
  color: var(--ink) !important;
  font-weight: 600 !important;
}

.outline-view-outer * {
  --interactive-accent: var(--ink) !important;
  --color-accent-1: var(--ink) !important;
  --color-accent-2: var(--ink) !important;
}