/* ============================================================
   Quant Portfolio Management — Ebook
   Corporate Design: Navy/Gold, konsistent mit den Seminarseiten
   von Prof. Dr. Thomas Mählmann
   ============================================================ */

/* ---- Design Tokens (aus der Seminarseite übernommen) -------- */
:root {
  --navy:      #1A2E4A;
  --navy2:     #243D5C;
  --gold:      #B8972A;
  --gold-lt:   #F5EDD0;
  --green:     #2E7D4F;
  --green-lt:  #EAF4EC;
  --amber:     #C46E00;
  --amber-lt:  #FFF8E8;
  --gray-dk:   #4A5568;
  --gray-md:   #718096;
  --gray-lt:   #F0F4F8;
  --border:    #CBD5E0;
  --white:     #FFFFFF;
  --ff-head:   'Georgia', 'Times New Roman', serif;
  --ff-body:   'Arial', 'Helvetica Neue', sans-serif;
  --ff-mono:   'Courier New', monospace;

  /* Bootstrap-Variablen überschreiben (Light Mode / Flatly) */
  --bs-body-bg: var(--white);
  --bs-body-color: var(--navy);
  --bs-body-font-family: var(--ff-body);
  --bs-link-color: var(--gold);
  --bs-link-hover-color: var(--navy);
  --bs-border-color: var(--border);
  --bs-heading-color: var(--navy);
}

/* ---- Grundtypografie ------------------------------------------------ */
body {
  font-family: var(--ff-body);
  color: var(--navy);
  background-color: var(--white);
}

h1, h2, h3, h4, h5, h6,
.title, .quarto-title h1 {
  font-family: var(--ff-head) !important;
  font-weight: 400 !important;
  color: var(--navy) !important;
}

h1 { border-bottom: 3px solid var(--gold); padding-bottom: 0.3em; }
h2 { color: var(--navy2) !important; margin-top: 1.6em; }

a { color: var(--gold); }
a:hover { color: var(--navy2); text-decoration: underline; }

p { color: var(--gray-dk); }

/* Kapitelnummern im Fließtext / TOC im Gold-Akzent */
.header-section-number, .chapter-number {
  color: var(--gold) !important;
}

/* ---- Top-Navigation (analog zur Sticky-Nav der Seminarseite) -------- */
#quarto-header, .navbar, .quarto-secondary-nav {
  background-color: var(--navy) !important;
  border-bottom: 3px solid var(--gold) !important;
}
.navbar .navbar-brand, .navbar-title,
.quarto-secondary-nav-title, .quarto-secondary-nav .bi {
  color: var(--white) !important;
}
.quarto-color-scheme-toggle i, .quarto-color-scheme-toggle .bi {
  color: var(--gold) !important;
}

/* ---- Sidebar (floating Navigation) ----------------------------------- */
.sidebar-navigation, #quarto-sidebar {
  background-color: var(--gray-lt);
  border-right: 1px solid var(--border);
}
.sidebar-title { font-family: var(--ff-head); color: var(--navy); font-weight: 700; }

.sidebar-item-text.sidebar-link, .sidebar-item-text {
  color: var(--navy);
}
.sidebar-item-text.sidebar-link:hover {
  color: var(--gold);
}
.sidebar-item-text.sidebar-link.active,
.sidebar-item .sidebar-link.active {
  color: var(--gold) !important;
  font-weight: 700;
  border-left: 3px solid var(--gold);
  padding-left: 8px;
}

.sidebar-search input, .quarto-search-button {
  border-color: var(--border) !important;
}

/* ---- Code-Blöcke ------------------------------------------------------ */
pre, pre code, div.sourceCode {
  font-family: var(--ff-mono);
  background-color: var(--gray-lt) !important;
  border: 1px solid var(--border);
  border-radius: 6px;
}
code:not(pre code) {
  background-color: var(--gold-lt);
  color: var(--navy2);
  border-radius: 4px;
  padding: 2px 5px;
}
.code-copy-button, .code-fold summary {
  color: var(--navy2);
}

/* ---- Tabellen --------------------------------------------------------- */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5em 0;
}
th, td { border: 1px solid var(--border); padding: 0.6em; }
th {
  background-color: var(--navy);
  color: var(--white);
  font-family: var(--ff-head);
  font-weight: 400;
  text-align: left;
}
tr:nth-child(even) td { background-color: var(--gray-lt); }

/* ---- Bilder / Grafiken -------------------------------------------------- */
img {
  border-radius: 6px;
  max-width: 100%;
  display: block;
  margin: 1.5em auto;
  border: 1px solid var(--border);
}

/* ---- Callouts (note/tip/warning/important) ----------------------------- */
div.callout, .callout {
  border-left: 4px solid var(--gold);
  background-color: var(--gold-lt);
  border-radius: 4px;
}
div.callout-note   { border-left-color: var(--navy2); background-color: var(--gray-lt); }
div.callout-tip     { border-left-color: var(--green); background-color: var(--green-lt); }
div.callout-warning,
div.callout-important { border-left-color: var(--amber); background-color: var(--amber-lt); }

.callout-title, .callout-header {
  font-family: var(--ff-head);
  color: var(--navy);
}

/* ---- Kapitel-Navigation unten (prev/next) ------------------------------ */
.page-navigation .nav-page-text,
.page-navigation .chapter-title {
  color: var(--navy);
  font-family: var(--ff-head);
}
.page-navigation a:hover .chapter-title { color: var(--gold); }

/* ---- Breadcrumbs -------------------------------------------------------- */
.quarto-page-breadcrumbs .breadcrumb-item a { color: var(--gray-md); }
.quarto-page-breadcrumbs .breadcrumb-item.active { color: var(--navy); font-weight: 700; }

/* ---- Footer / TOC rechts ------------------------------------------------ */
#TOC .toc-active, .sidebar nav[role="doc-toc"] ul li a.active {
  color: var(--gold) !important;
  font-weight: 700;
}
.sidebar nav[role="doc-toc"] ul li a { color: var(--gray-dk); }
.sidebar nav[role="doc-toc"] ul li a:hover { color: var(--gold); }

/* ---- Seminar-Callout am Kapitelende ------------------------------------ */
.seminar-callout {
  margin: 3em 0 1em 0;
  border: 2px solid var(--gold);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%);
  padding: 2px;
}
.seminar-callout-inner {
  background: var(--navy);
  border-radius: 6px;
  padding: 2em 2.2em;
  text-align: left;
}
.seminar-callout-eyebrow {
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold) !important;
  margin-bottom: 8px;
}
.seminar-callout-inner h3 {
  font-family: var(--ff-head) !important;
  font-weight: 400 !important;
  color: var(--white) !important;
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.4rem;
}
.seminar-callout-inner p {
  color: #D9E0EC !important;
  margin-bottom: 16px;
  line-height: 1.6;
}
.seminar-callout-btn {
  display: inline-block;
  background: var(--gold);
  color: var(--navy) !important;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 4px;
  text-decoration: none !important;
  transition: background 0.15s ease;
}
.seminar-callout-btn:hover {
  background: var(--gold-lt);
  text-decoration: none !important;
}

body.quarto-dark .seminar-callout-inner {
  background: #0C1524;
}
body.quarto-dark .seminar-callout {
  background: linear-gradient(135deg, #0C1524 0%, #17223A 100%);
}

/* ============================================================
   DARK MODE (Quarto schaltet <body class="quarto-dark"> um)
   ============================================================ */
body.quarto-dark {
  background-color: #10192B;
  color: #E5E9F0;
}
body.quarto-dark h1, body.quarto-dark h2, body.quarto-dark h3,
body.quarto-dark h4, body.quarto-dark .title {
  color: var(--gold-lt) !important;
}
body.quarto-dark h1 { border-bottom-color: var(--gold); }
body.quarto-dark p { color: #C3CAD9; }
body.quarto-dark a { color: var(--gold); }
body.quarto-dark a:hover { color: var(--gold-lt); }

body.quarto-dark #quarto-header,
body.quarto-dark .navbar,
body.quarto-dark .quarto-secondary-nav {
  background-color: #0C1524 !important;
  border-bottom-color: var(--gold) !important;
}

body.quarto-dark .sidebar-navigation,
body.quarto-dark #quarto-sidebar {
  background-color: #17223A;
  border-right-color: #2A3B58;
}
body.quarto-dark .sidebar-item-text.sidebar-link { color: #C3CAD9; }
body.quarto-dark .sidebar-item-text.sidebar-link.active {
  color: var(--gold) !important;
  border-left-color: var(--gold);
}

body.quarto-dark pre, body.quarto-dark pre code, body.quarto-dark div.sourceCode {
  background-color: #17223A !important;
  border-color: #2A3B58;
}
body.quarto-dark code:not(pre code) {
  background-color: #2A3B58;
  color: var(--gold-lt);
}
body.quarto-dark th { background-color: #0C1524; }
body.quarto-dark tr:nth-child(even) td { background-color: #17223A; }
body.quarto-dark img { border-color: #2A3B58; }

body.quarto-dark div.callout { background-color: #17223A; }