/* ============================================================
   Site-wide theme — mirrors the landing page design language
   across all Quarto-rendered content pages.

   Replaces Quarto's navbar with a custom one injected via
   include-before-body, matching the landing page exactly.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;1,400&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

:root {
  --kiel-blue: #194ABB;
  --kiel-blue-dark: #0e2d7a;
  --kiel-blue-light: rgba(25,74,187,0.06);
  --kiel-orange: #FF6A00;
  --kiel-orange-glow: rgba(255,106,0,0.12);
  --text-primary: #0f1729;
  --text-secondary: #4a5568;
  --text-muted: #8896ab;
  --border-color: #e2e8f0;
  --mono: "JetBrains Mono","Fira Code",monospace;
  --sans: "Source Sans 3","Source Sans Pro",-apple-system,sans-serif;
  --display: "Space Grotesk","Source Sans 3",sans-serif;
}


/* ============================================================
   1. PAGE SHELL
   ============================================================ */

body {
  background: #f0f0f0 !important;
  font-family: var(--sans) !important;
  color: var(--text-primary) !important;
  -webkit-font-smoothing: antialiased;
}

#quarto-content {
  max-width: 1100px !important;
  margin: 0 auto !important;
  background: white !important;
  box-shadow: 0 0 80px rgba(0,0,0,0.06) !important;
  min-height: calc(100vh - 52px) !important;
  padding-top: 52px !important; /* space for fixed navbar */
}

main.content {
  background: transparent !important;
  padding-top: 0 !important;
  padding-left: 56px !important;
  padding-right: 56px !important;
  max-width: 100% !important;
}

/* Full-width content — no sidebar eating space */
#quarto-margin-sidebar { display: none !important; }
.page-columns { display: block !important; }

/* Hide Quarto's auto-generated header entirely */
#quarto-header { display: none !important; }


/* ============================================================
   2. CUSTOM NAVBAR — identical to landing page .site-navbar
   ============================================================ */

.custom-navbar {
  display: flex;
  align-items: center;
  padding: 0 40px;
  height: 52px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-color);
  font-size: 13.5px;
  font-weight: 500;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1100px;
  z-index: 1000;
  box-sizing: border-box;
}

.custom-navbar .brand {
  font-family: var(--display);
  font-weight: 700;
  color: var(--kiel-blue) !important;
  margin-right: 40px;
  font-size: 14px;
  letter-spacing: -0.3px;
  white-space: nowrap;
  text-decoration: none !important;
}

.custom-navbar .nav-links {
  display: flex;
  align-items: center;
}

.custom-navbar .nav-links a {
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  margin-right: 24px;
  transition: color 0.15s;
  white-space: nowrap;
}

.custom-navbar .nav-links a:hover {
  color: var(--kiel-blue) !important;
}

.custom-navbar .nav-disabled {
  color: var(--text-muted);
  opacity: 0.4;
  margin-right: 24px;
  white-space: nowrap;
  cursor: default;
  font-size: 13.5px;
  font-weight: 500;
}


/* ============================================================
   3. PAGE HEADER — clean heading, matching landing typography
   ============================================================ */

#title-block-header {
  background: transparent !important;
  margin: 0 !important;
  padding: 48px 0 36px !important;
  margin-bottom: 32px !important;
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(90deg, var(--kiel-blue) 0%, var(--kiel-blue) 40%, var(--kiel-orange) 100%) 1 !important;
}

#title-block-header .title {
  font-family: var(--display) !important;
  font-size: 2.6rem !important;
  font-weight: 700 !important;
  letter-spacing: -1.5px !important;
  color: var(--text-primary) !important;
  margin-bottom: 4px !important;
  line-height: 1.1 !important;
}

#title-block-header .subtitle,
#title-block-header p.subtitle {
  font-family: var(--display) !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  color: var(--text-secondary) !important;
  letter-spacing: -0.2px !important;
  margin-top: 6px !important;
}

/* Hide empty metadata block */
.quarto-title-meta {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}


/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6, .title, .subtitle {
  font-family: var(--display) !important;
}

h1, .title {
  color: var(--kiel-blue) !important;
  font-weight: 700 !important;
}

/* H2 — display heading with blue left accent bar */
h2 {
  font-family: var(--display) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.5px !important;
  color: var(--text-primary) !important;
  padding: 0 0 0 16px !important;
  margin-top: 2.4rem !important;
  margin-bottom: 0.8rem !important;
  border-bottom: none !important;
  border-left: 3px solid var(--kiel-blue) !important;
  line-height: 1.3 !important;
}

h3 {
  color: var(--kiel-blue) !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  margin-top: 1.8rem !important;
  letter-spacing: -0.3px !important;
}

h4 {
  color: var(--kiel-blue-dark) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}

.subtitle, .lead {
  color: var(--text-secondary) !important;
  font-size: 1.1rem !important;
}

p { line-height: 1.7 !important; }

.anchorjs-link { display: none !important; }


/* ============================================================
   5. CODE
   ============================================================ */

code, pre code, .sourceCode {
  font-family: var(--mono) !important;
}

p code, li code, td code {
  background: var(--kiel-blue-light) !important;
  color: var(--kiel-blue) !important;
  padding: 0.15em 0.4em !important;
  border-radius: 4px !important;
  font-size: 0.86em !important;
  font-weight: 500 !important;
}

pre {
  background: #f8f9fc !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 10px !important;
  padding: 20px 24px !important;
  font-size: 0.88rem !important;
  line-height: 1.7 !important;
}

div.sourceCode {
  border-radius: 10px !important;
  border: 1px solid var(--border-color) !important;
  overflow: hidden !important;
}


/* ============================================================
   6. LINKS
   ============================================================ */

a {
  color: var(--kiel-blue) !important;
  transition: color 0.15s;
  text-decoration: none !important;
}
a:hover { color: var(--kiel-orange) !important; }

main.content p a,
main.content li a {
  text-decoration: underline !important;
  text-decoration-color: rgba(25,74,187,0.3) !important;
  text-underline-offset: 2px !important;
  text-decoration-thickness: 1px !important;
}
main.content p a:hover,
main.content li a:hover {
  text-decoration-color: var(--kiel-orange) !important;
}


/* ============================================================
   7. CALLOUTS — card-style with visible presence
   ============================================================ */

.callout {
  border-radius: 12px !important;
  border: 1px solid var(--border-color) !important;
  border-left-width: 3px !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.05) !important;
  background: #fafbfd !important;
  margin: 1.5rem 0 !important;
  overflow: hidden !important;
}

.callout .callout-header,
.callout .callout-header.d-flex {
  background: transparent !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 14px 20px 12px !important;
}

.callout .callout-title-container,
.callout .callout-title {
  font-family: var(--display) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}

.callout .callout-body-container,
.callout .callout-body {
  padding: 16px 20px !important;
  font-size: 0.95rem !important;
}

.callout-tip { border-left-color: var(--kiel-orange) !important; }
.callout-tip .callout-icon::before,
.callout-tip .callout-title-container,
.callout-tip .callout-title { color: var(--kiel-orange) !important; }

.callout-note { border-left-color: var(--kiel-blue) !important; }
.callout-note .callout-icon::before,
.callout-note .callout-title-container,
.callout-note .callout-title { color: var(--kiel-blue) !important; }

.callout-important,
.callout-warning { border-left-color: var(--kiel-orange) !important; }


/* ============================================================
   8. BLOCKQUOTES
   ============================================================ */

blockquote {
  border-left: 3px solid var(--kiel-blue) !important;
  background: var(--kiel-blue-light) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 16px 24px !important;
  margin: 1.5rem 0 !important;
  color: var(--text-secondary) !important;
}

blockquote p { margin-bottom: 0 !important; }


/* ============================================================
   9. LISTS
   ============================================================ */

ul, ol { padding-left: 1.3em !important; }

li {
  margin-bottom: 0.4em !important;
  line-height: 1.65 !important;
}

li strong { color: var(--text-primary) !important; }


/* ============================================================
   10. TABLES
   ============================================================ */

.table {
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid var(--border-color) !important;
  margin: 1.5rem 0 !important;
}

.table > thead {
  border-bottom: 2px solid var(--kiel-blue) !important;
}

.table > thead th {
  color: var(--kiel-blue) !important;
  font-family: var(--display) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  padding: 12px 16px !important;
  background: var(--kiel-blue-light) !important;
  border-bottom: none !important;
}

.table > tbody td {
  padding: 10px 16px !important;
  font-size: 0.92rem !important;
  border-bottom-color: var(--border-color) !important;
}

.table > tbody tr:last-child td { border-bottom: none !important; }


/* ============================================================
   11. TAB PANELS
   ============================================================ */

.nav-tabs {
  border-bottom: 2px solid var(--border-color) !important;
  gap: 4px !important;
}

.nav-tabs .nav-link {
  color: var(--text-muted) !important;
  font-family: var(--mono) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 8px 18px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  border-radius: 0 !important;
  transition: all 0.15s !important;
  background: transparent !important;
}

.nav-tabs .nav-link:hover {
  color: var(--kiel-blue) !important;
  border-bottom-color: rgba(25,74,187,0.3) !important;
  background: transparent !important;
}

.nav-tabs .nav-link.active {
  color: var(--kiel-blue) !important;
  border-bottom-color: var(--kiel-blue) !important;
  background: transparent !important;
  font-weight: 600 !important;
}

.tab-content { padding-top: 1rem !important; }


/* TOC sidebar hidden globally — content goes full width */


/* ============================================================
   13. GRID LAYOUTS
   ============================================================ */

.grid .g-col-6 {
  background: white !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  padding: 28px !important;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.grid .g-col-6::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  opacity: 0 !important;
  transition: opacity 0.25s !important;
}

.grid .g-col-6:first-child::before { background: var(--kiel-blue) !important; }
.grid .g-col-6:last-child::before { background: var(--kiel-orange) !important; }

.grid .g-col-6:hover {
  border-color: rgba(25,74,187,0.3) !important;
  box-shadow: 0 4px 24px rgba(25,74,187,0.06), 0 1px 4px rgba(0,0,0,0.04) !important;
  transform: translateY(-2px) !important;
}

.grid .g-col-6:hover::before { opacity: 1 !important; }


/* ============================================================
   14. FOOTER
   ============================================================ */

footer.footer {
  background: #f0f0f0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-footer {
  max-width: 1100px !important;
  margin: 0 auto !important;
  background: white !important;
  border-top: 1px solid var(--border-color) !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
  box-shadow: 0 0 80px rgba(0,0,0,0.06) !important;
  padding: 16px 40px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.nav-footer p { margin: 0 !important; font-size: 12px !important; }
.nav-footer a { color: var(--kiel-blue) !important; text-decoration: none !important; }
.nav-footer a:hover { color: var(--kiel-orange) !important; }

.nav-footer::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--kiel-blue) 0%, var(--kiel-blue) 40%, var(--kiel-orange) 100%);
  margin-top: 12px;
}


/* ============================================================
   15. HORIZONTAL RULES
   ============================================================ */

hr {
  border-color: var(--border-color) !important;
  opacity: 1 !important;
  margin: 2.5rem 0 !important;
}


/* ============================================================
   16. ANIMATIONS
   ============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

main.content > section { animation: fadeUp 0.5s ease-out 0.1s both; }


/* ============================================================
   17. RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
  .custom-navbar { padding: 0 24px; }
  #title-block-header { padding: 40px 36px 32px !important; }
  #title-block-header .title { font-size: 2.2rem !important; }
  .nav-footer { padding: 16px 24px !important; }
}

@media (max-width: 680px) {
  .custom-navbar {
    padding: 0 16px;
    height: 48px;
  }
  .custom-navbar .brand {
    margin-right: 16px;
    font-size: 13px;
  }
  .custom-navbar .nav-links {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .custom-navbar .nav-links::-webkit-scrollbar { display: none; }
  .custom-navbar .nav-links a,
  .custom-navbar .nav-disabled {
    margin-right: 16px;
    font-size: 12.5px;
  }

  #title-block-header {
    padding: 32px 24px 24px !important;
  }
  #title-block-header .title {
    font-size: 1.8rem !important;
    letter-spacing: -0.8px !important;
  }

  h2 { font-size: 1.15rem !important; }
  .grid .g-col-6 { padding: 20px !important; }
  .nav-footer { padding: 12px 16px !important; }
}