/*
 * Media-Techport TriliumNext share theme overrides.
 * Mounted as a read-only Docker volume so image updates do not overwrite it.
 */

:root {
  color-scheme: dark;
  --mtp-radius: 8px;
  --mtp-radius-sm: 6px;
  --mtp-shadow: 0 18px 48px rgb(0 0 0 / 18%);
  --mtp-content-width: 980px;
  --mtp-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mtp-font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --mtp-share-background: url("share-background.jpg?v=20260605");
}

html.theme-light,
html.theme-dark {
  --background-primary: #11110f;
  --background-secondary: #191816;
  --background-highlight: #2b2924;
  --background-active: #d2a84a;
  --text-primary: #e8e2d6;
  --text-heading: #fff6e5;
  --text-menu: #cfc6b8;
  --text-link: #69d5c3;
  --text-menu-active: #171411;
}

html.theme-light .light-icon,
html.theme-light .dark-icon,
html.theme-dark .light-icon,
html.theme-dark .dark-icon {
  display: none;
}

body {
  font-family: var(--mtp-font-sans);
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  background: var(--background-primary);
}

a {
  color: var(--text-link);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration: underline;
}

#header {
  min-height: 56px;
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgb(255 255 255 / 6%);
}

#header-logo {
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

#header-logo img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: var(--mtp-radius-sm);
}

#left-pane {
  border-right-width: 1px;
  box-shadow: 12px 0 40px rgb(0 0 0 / 10%);
}

#navigation {
  gap: 18px;
}

.theme-selection {
  display: none;
}

.search-input {
  min-height: 36px;
  border: 1px solid transparent;
}

.search-input:focus {
  border-color: var(--text-link);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-link) 22%, transparent);
}

#menu a {
  min-height: 30px;
  padding: 4px 8px;
  border-radius: var(--mtp-radius-sm);
}

#menu a:hover {
  background: color-mix(in srgb, var(--background-highlight) 72%, var(--text-link));
  border-color: transparent;
  text-decoration: none;
}

#menu a.active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--background-active) 65%, white);
}

#right-pane {
  background:
    linear-gradient(90deg, rgb(17 17 15 / 72%), rgb(17 17 15 / 52%) 42%, rgb(17 17 15 / 78%)),
    linear-gradient(180deg, rgb(17 17 15 / 28%), rgb(17 17 15 / 86%) 78%),
    var(--mtp-share-background) center / cover fixed,
    var(--background-primary);
}

#main {
  max-width: var(--mtp-content-width);
  padding: 34px clamp(18px, 4vw, 56px) 42px;
}

#content {
  font-size: 1rem;
  line-height: 1.72;
}

#title {
  margin-bottom: 0.85em;
  padding-top: 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.08;
}

#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
  margin-top: 1.45em;
  margin-bottom: 0.55em;
  padding-bottom: 0.25em;
  line-height: 1.22;
  border-bottom-color: color-mix(in srgb, var(--background-highlight) 76%, transparent);
}

#content p,
#content ul,
#content ol {
  margin-block: 0.75em;
}

#content li + li {
  margin-top: 0.25em;
}

#content blockquote {
  margin: 1.1em 0;
  padding: 0.8em 1em;
  color: color-mix(in srgb, var(--text-primary) 84%, var(--text-link));
  background: color-mix(in srgb, var(--background-secondary) 82%, var(--text-link));
  border-left: 4px solid var(--text-link);
  border-radius: var(--mtp-radius-sm);
}

.ck-content code,
.ck-content pre {
  font-family: var(--mtp-font-mono);
  background: color-mix(in srgb, var(--background-secondary) 88%, black);
  border-color: color-mix(in srgb, var(--background-highlight) 70%, var(--text-link));
}

.ck-content code {
  font-size: 0.92em;
}

.ck-content pre {
  padding: 14px 16px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
}

.mtp-code-block {
  position: relative;
  margin: 1em 0;
}

.mtp-code-block > pre {
  margin: 0;
  padding-top: 42px;
}

.mtp-copy-code-button {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--background-highlight) 78%, var(--text-link));
  border-radius: var(--mtp-radius-sm);
  color: var(--text-menu);
  background: color-mix(in srgb, var(--background-secondary) 88%, black);
  font: 600 0.78rem/1 var(--mtp-font-sans);
  cursor: pointer;
  opacity: 0.86;
  transition:
    opacity 160ms ease,
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
}

.mtp-copy-code-button:hover,
.mtp-copy-code-button:focus-visible {
  opacity: 1;
  color: var(--text-heading);
  background: color-mix(in srgb, var(--background-highlight) 72%, var(--text-link));
  border-color: var(--text-link);
  outline: none;
}

.mtp-copy-code-button.is-copied {
  color: var(--text-menu-active);
  background: var(--background-active);
  border-color: var(--background-active);
}

.ck-content table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: var(--mtp-radius-sm);
}

.ck-content table td,
.ck-content table th {
  border-color: var(--background-highlight);
  padding: 0.55em 0.7em;
}

.ck-content table th {
  color: var(--text-heading);
  background: var(--background-secondary);
}

#content img {
  border-radius: var(--mtp-radius);
  box-shadow: var(--mtp-shadow);
}

#childLinks {
  margin-top: 2rem;
  padding-top: 1.2rem;
}

#childLinks li,
#childLinks li a {
  border-radius: var(--mtp-radius-sm);
}

#toc-pane {
  border-left: 1px solid var(--background-highlight);
  padding-left: 18px;
}

#toc-pane h3 {
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--text-menu) 82%, var(--text-link));
}

#content-footer {
  margin-top: 2.5rem;
  border-top: 1px solid var(--background-highlight);
}

#content-footer .navigation a {
  border-radius: var(--mtp-radius-sm);
}

html.theme-light #header,
html.theme-light #left-pane,
html.theme-dark #header,
html.theme-dark #left-pane {
  background: rgb(25 24 22 / 94%);
}

html.theme-light .search-results,
html.theme-dark .search-results {
  box-shadow: var(--mtp-shadow);
}

html.theme-light ::selection,
html.theme-dark ::selection {
  color: #11110f;
  background: #69d5c3;
}

@media (max-width: 900px) {
  #main {
    padding: 22px 18px 34px;
  }

  #title {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
  }

  #content {
    font-size: 0.98rem;
  }
}

@media print {
  #header,
  #left-pane,
  #toc-pane {
    display: none !important;
  }

  html,
  body,
  #split-pane,
  #right-pane {
    overflow: visible !important;
    height: auto !important;
  }

  #main {
    max-width: none;
    padding: 0;
  }
}