/* ============================================================
   FONT LOADING — Obsidian Publish needs absolute URLs
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&family=Source+Code+Pro:wght@400;500;700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/liberation-mono.min.css");

/* ============================================================
   THEME COLOURS — LIGHT MODE
   ============================================================ */
.theme-light {
  --background-primary: #f2f0ea;
  --background-primary-alt: #edebe3;
  --background-secondary: #e9e5dc;
  --background-secondary-alt: #e4e0d6;
  --background-modifier-hover: #ebe8df;
  --background-modifier-active-hover: #e6e2d8;
  --background-modifier-border: #d8d3c6;

  --text-normal: #1c1b1a;
  --text-muted: #655e56;
  --text-faint: #8d8475;

  --interactive-accent: #a65430;
  --interactive-accent-hover: #914727;
  --text-on-accent: #f7f6f3;
  --text-accent: var(--interactive-accent);
  --text-accent-hover: var(--interactive-accent-hover);

  --link-color: var(--interactive-accent);
  --link-color-hover: var(--interactive-accent-hover);
  --link-decoration: underline;
  --link-decoration-hover: underline;

  --link-unresolved-color: #1c1b1a;
  --link-unresolved-opacity: 0.7;
  --link-unresolved-filter: none;
  --link-unresolved-decoration-style: dashed;
  --link-unresolved-decoration-color: #1c1b1a;

  --link-external-color: var(--interactive-accent);
  --link-external-color-hover: var(--interactive-accent-hover);
  --link-external-decoration: underline;
  --link-external-decoration-hover: underline;

  --code-background: #e9e5dc;
  --code-normal: #655e56;
  --code-comment: #8d8475;
  --code-punctuation: #655e56;
  --code-operator: #6c71c4;
  --code-keyword: #627000;
  --code-string: #1f7972;
  --code-function: #1f71ab;
  --code-property: #6c71c4;
  --code-tag: #dc322f;
  --code-value: #cb4b16;
  --code-important: #d33682;

  --callout-default: 31, 113, 171;
  --callout-warning: 203, 75, 22;
  --callout-error: 220, 50, 47;
  --callout-tip: 31, 121, 114;
  --callout-success: 29, 96, 6;
/*  --callout-example: 66, 71, 164; */
  --callout-example: 96, 89, 82;
  --callout-quote: 96, 89, 82;

  --outline-heading-color: #655e56;
  --outline-heading-color-hover: #1c1b1a;
  --outline-heading-color-active: #a65430;
  
  --color-accent: var(--interactive-accent);
}

/* ============================================================
   THEME COLOURS — DARK MODE
   ============================================================ */
.theme-dark {
  --background-primary: #1c1b1a;
  --background-primary-alt: #232120;
  --background-secondary: #2a2826;
  --background-secondary-alt: #312e2b;
  --background-modifier-hover: #272523;
  --background-modifier-active-hover: #2e2c29;
  --background-modifier-border: #443f39;

  --text-normal: #f2f0ea;
  --text-muted: #b2a487;
  --text-faint: #8a7a5d;

  --interactive-accent: #d18361;
  --interactive-accent-hover: #d79375;
  --text-on-accent: #1c1b1a;
  --text-accent: var(--interactive-accent);
  --text-accent-hover: var(--interactive-accent-hover);

  --link-color: var(--interactive-accent);
  --link-color-hover: var(--interactive-accent-hover);
  --link-decoration: underline;
  --link-decoration-hover: underline;

  --link-unresolved-color: #f2f0ea;
  --link-unresolved-opacity: 0.7;
  --link-unresolved-filter: none;
  --link-unresolved-decoration-style: dashed;
  --link-unresolved-decoration-color: #f2f0ea;

  --link-external-color: var(--interactive-accent);
  --link-external-color-hover: var(--interactive-accent-hover);
  --link-external-decoration: underline;
  --link-external-decoration-hover: underline;

  --code-background: #2a2826;
  --code-normal: #b2a487;
  --code-comment: #8a7a5d;
  --code-punctuation: #b2a487;
  --code-operator: #7b7fca;
  --code-keyword: #859900;
  --code-string: #2aa198;
  --code-function: #268bd2;
  --code-property: #7b7fca;
  --code-tag: #e25452;
  --code-value: #e65519;
  --code-important: #d95394;

  --callout-default: 38, 139, 210;
  --callout-warning: 230, 85, 25;
  --callout-error: 226, 84, 82;
  --callout-tip: 42, 161, 152;
  --callout-success: 77, 189, 40;
/*  
  --callout-example: 123, 127, 202; */
  --callout-example: 149, 140, 131;
  --callout-quote: 149, 140, 131;

  --outline-heading-color: #b2a487;
  --outline-heading-color-hover: #f2f0ea;
  --outline-heading-color-active: #d18361;
  
  --color-accent: var(--interactive-accent);
}

/* ============================================================
   OBSIDIAN PUBLISH VARIABLES
   (theme-agnostic — fonts, sizing, layout; not colour)
   ============================================================ */
.published-container {
  --logo-width: 72px;
  --logo-height: 72px;
  --logo-max-width: 72px;
  --logo-max-height: 72px;

  --outline-heading-weight-active: 600;

  --font-text: 'Source Sans 3', -apple-system, sans-serif;
  --font-text-size: 19px;
  --line-height-normal: 1.65;

  --font-interface: 'Source Sans 3', -apple-system, sans-serif;

  --font-monospace: 'Source Code Pro', monospace;
  --code-white-space: pre;
  --code-size: var(--font-smaller);

  --h1-size: 2.0em;
  --h2-size: 1.5em;
  --h3-size: 1.25em;
  --h4-size: 1.1em;
  --h5-size: 1em;
  --h6-size: 0.9em;
  --h1-weight: 700;
  --h2-weight: 700;
  --h3-weight: 600;
  --h4-weight: 600;
  --h5-weight: 600;
  --h6-weight: 600;

  --site-name-font: 'Liberation Mono', Consolas, Menlo, monospace;
  --site-name-size: 28px;
  --site-name-weight: 700;

  --sidebar-font-size: 16px;
  --page-width: 900px;
}

/* ============================================================
   NAV / SIDEBAR TYPOGRAPHY OVERRIDES
   ============================================================ */
.site-body-left-column .tree-item-inner,
.site-body-right-column .tree-item-inner,
.site-body-left-column .tree-item-inner a,
.site-body-right-column .tree-item-inner a {
  font-family: 'Source Sans 3', -apple-system, sans-serif;
}

.published-section-header {
  text-transform: none;
  font-size: 16px;
  letter-spacing: normal;
}

.search-view-container .search-bar::placeholder {
  font-size: 16px;
}

/* ============================================================
   SIDEBAR HEADER LAYOUT — left-aligned logo/name, fixed corner toggle
   ============================================================ */
.site-body-left-column-inner {
  position: relative;
}

.site-body-left-column-site-logo {
  display: block;
  width: 72px;
  height: 72px;
  margin: 1.5rem 0 0.75rem 0;
  overflow: hidden;
  border-radius: 14px;
  flex-shrink: 0;
}

.site-body-left-column-site-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease-in-out;
}

.site-body-left-column-site-logo:hover img {
  transform: scale(1.15);
}

.site-body-left-column-site-name {
  display: block;
  text-align: left;
  font-weight: 600;
  text-decoration: none;
  padding: 0;
  height: auto;
  line-height: 1.2;
  margin: 0 0 0.75rem 0;
}

.site-body-left-column-site-name,
.site-header-text {
  font-family: var(--site-name-font);
  text-transform: lowercase;
}

.site-body-left-column-site-theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  margin: 0;
  z-index: 50;
}

.search-view-outer {
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--background-modifier-border);
}

/* ============================================================
   MISC
   ============================================================ */
.footnotes hr {
  display: none;
}

code[class*="language-"] {
  white-space: pre;
}

.site-body-left-column.no-resize-transition {
  transition: none !important; /* must beat Obsidian's own inline-equivalent transition; kept deliberately */
}

.copy-code-button svg {
  color: var(--interactive-accent);
}

.site-footer {
  display: none !important;
}

:root {
  --color-accent: #a65430;
}

::selection {
  background-color: var(--interactive-accent);
  color: var(--text-on-accent);
}

/* ============================================================
   MOBILE OVERRIDES (kept last — must win on source order)
   ============================================================ */
@media screen and (max-width: 750px) {
  body {
    contain: none;
  }

  .published-container {
    --site-name-size: 22px;
  }

  .site-header-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin-right: 8px;
  }

  .site-header-logo img {
    display: block;
    width: 36px;
    height: 36px;
    max-width: none;
    max-height: none;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .site-body-left-column-site-name {
    display: none;
  }

  .published-container .markdown-rendered h1.page-header {
    margin-bottom: 0;
  }

  .site-header .site-body-left-column-site-theme-toggle {
    position: relative;
    top: auto;
    right: auto;
    align-self: center;
    padding: 6px 0;
    margin-left: auto;
    margin-right: 6px;
  }

  .site-header-text {
    flex: 0 0 auto;
  }

  /* YouTube-comments-style drawer: the header slides up out of view
     as you scroll down (as if the content is pushing it closed) and
     slides back down when you scroll up. --header-cover is driven by
     JS: 0 = fully open, 1 = fully closed. No transition while
     tracking the finger — the snap animation is opt-in via
     .is-settling (set by JS). */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    transform: translateY(calc(var(--header-cover, 0) * -100%));
    border-bottom: 1px solid var(--background-modifier-border);
  }

  .site-header.is-settling {
    transition: transform 0.2s ease-out;
  }

  /* When fully closed, let taps pass through to the page content */
  .site-header.is-covered {
    pointer-events: none;
  }

  /* The header-height offset lives INSIDE the scrolling content
     (not on the column that contains the scroller) so the scrollport
     spans the full screen. At the top of the page, content starts
     below the header as normal; as you scroll, it travels up into
     the header zone and that space becomes usable reading area. */
  .site-body-center-column {
    padding-top: 0;
  }

  .site-body-center-column .markdown-preview-sizer {
    padding-top: var(--header-height) !important;
  }
}

/* ============================================================
   MERMAID DIAGRAM THEMING
   ============================================================ */
   
.mermaid {
  display: flex;
  justify-content: center;
}

.mermaid svg {
  filter: none !important;
}

.mermaid text,
.mermaid .nodeLabel,
.mermaid .edgeLabel {
  font-family: "Source Code Pro", monospace !important;
}

.theme-light .mermaid .nodeLabel,
.theme-light .mermaid .edgeLabel {
  color: #1c1b1a !important;
}

.theme-dark .mermaid .nodeLabel,
.theme-dark .mermaid .edgeLabel {
  color: #f2f0ea !important;
}

.theme-light .mermaid .edgeLabel,
.theme-light .mermaid .edgeLabel p {
  background-color: var(--background-primary) !important;
}

.theme-dark .mermaid .edgeLabel,
.theme-dark .mermaid .edgeLabel p {
  background-color: var(--background-primary) !important;
}

.mermaid .methods-group foreignObject div,
.mermaid .members-group foreignObject div {
  text-align: left !important;
  padding-left: 4ch !important;
  text-indent: -4ch !important;
}

/* ============================================================
   TABLE STYLING — larger font, zebra striping, clearer borders
   ============================================================ */
.markdown-rendered table {
  font-size: 0.95em;
  border-collapse: collapse;
  width: 100%;
  margin: 1.5em 0;
}

.markdown-rendered th,
.markdown-rendered td {
  padding: 0.6em 0.9em;
  border: 1px solid var(--background-modifier-border);
  line-height: 1.5;
}

.markdown-rendered th {
  background-color: var(--background-secondary) !important;
  font-weight: 600;
  text-align: left;
  border-bottom: 2px solid var(--interactive-accent);
}

.markdown-rendered tbody tr:nth-child(even) {
  background-color: var(--background-secondary);
}

.markdown-rendered tbody tr:nth-child(odd) {
  background-color: var(--background-primary);
}