/* ============================================================
   inquisitor.dev Gruvbox theme for Obsidian Publish
   Place this file (publish.css) in your vault ROOT and publish it.
   Matches inquisitor.dev: Gruvbox dark + IBM Plex Mono TUI style.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

.published-container {
  --page-width: 780px;
  --page-side-padding: 48px;

  /* fonts */
  --font-text-theme: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-monospace-theme: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --font-interface-theme: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --font-text-size: 15px;

  /* site header */
  --site-name-color: #ebdbb2;
  --site-name-color-hover: #ebdbb2;
  --site-name-font: 'IBM Plex Mono', monospace;
  --site-name-weight: 700;

  /* left nav / file explorer */
  --nav-item-color: #928374;
  --nav-item-color-hover: #ebdbb2;
  --nav-item-color-active: #fe8019;
  --nav-item-weight-active: 700;
  --nav-item-background-hover: transparent;
  --nav-item-background-active: transparent;
  --nav-collapse-icon-color: #665c54;
  --nav-collapse-icon-color-hover: #928374;

  /* sidebars */
  --sidebar-left-width: 300px;
  --sidebar-left-background: #1d2021;
  --sidebar-left-border-width: 1px;
  --sidebar-left-border-color: #3c3836;
  --sidebar-right-background: #1d2021;
  --sidebar-right-border-width: 1px;
  --sidebar-right-border-color: #3c3836;

  /* outline (table of contents) */
  --outline-heading-color: #928374;
  --outline-heading-color-hover: #ebdbb2;
}

/* ---------- gruvbox dark palette ---------- */
.theme-dark {
  --background-primary: #1d2021;
  --background-primary-alt: #282828;
  --background-secondary: #1d2021;
  --background-secondary-alt: #282828;
  --background-modifier-border: #3c3836;
  --background-modifier-hover: #282828;

  --text-normal: #ebdbb2;
  --text-muted: #928374;
  --text-faint: #665c54;
  --text-accent: #fe8019;
  --text-accent-hover: #fabd2f;
  --text-on-accent: #1d2021;
  --text-selection: #504945;

  --link-color: #83a598;
  --link-color-hover: #8ec07c;
  --link-external-color: #83a598;
  --link-external-color-hover: #8ec07c;
  --link-unresolved-color: #665c54;

  --interactive-accent: #fe8019;
  --interactive-accent-hover: #fabd2f;

  --h1-color: #ebdbb2;
  --h2-color: #fe8019;
  --h3-color: #fabd2f;
  --h4-color: #8ec07c;
  --h5-color: #83a598;
  --h6-color: #928374;

  --code-background: #282828;
  --code-normal: #d5c4a1;
  --blockquote-border-color: #504945;
  --blockquote-color: #d5c4a1;
  --hr-color: #504945;
  --table-border-color: #3c3836;
  --table-header-background: #282828;
  --tag-color: #8ec07c;
  --tag-background: #282828;
  --callout-default: 254, 128, 25; /* gruvbox orange */
  --scrollbar-thumb-bg: #504945;
  --scrollbar-bg: #1d2021;
}

/* light mode fallback: gruvbox light, if a visitor toggles it */
.theme-light {
  --background-primary: #fbf1c7;
  --background-primary-alt: #f2e5bc;
  --background-secondary: #fbf1c7;
  --background-secondary-alt: #f2e5bc;
  --background-modifier-border: #d5c4a1;
  --text-normal: #3c3836;
  --text-muted: #7c6f64;
  --text-faint: #a89984;
  --text-accent: #d65d0e;
  --text-accent-hover: #b57614;
  --link-color: #076678;
  --link-color-hover: #427b58;
  --h1-color: #3c3836;
  --h2-color: #d65d0e;
  --h3-color: #b57614;
  --code-background: #f2e5bc;
  --code-normal: #504945;
}

/* ---------- structural touches (TUI feel) ---------- */

/* headings: prefix h2 like the site's section markers */
.published-container .markdown-preview-view h1,
.published-container .markdown-rendered h1 {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.published-container .markdown-preview-view h2,
.published-container .markdown-rendered h2 {
  font-size: 1.05em;
  border-bottom: 1px dashed #504945;
  padding-bottom: 8px;
}
.published-container .markdown-preview-view h2::before,
.published-container .markdown-rendered h2::before {
  content: '// ';
  color: #928374;
}

/* site name: orange .dev-style accent on hover */
.published-container .site-body-left-column-site-name {
  font-size: 17px;
}

/* nav: '>' marker on the active file, like the site's sidebar */
.published-container .tree-item-self.is-active::before {
  content: '> ';
  color: #fe8019;
  font-weight: 700;
}

/* links: dotted underline like a terminal hyperlink */
.published-container a {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.published-container a:hover { border-bottom-style: solid; }
.published-container a.tree-item-self,
.published-container .site-body-left-column a,
.published-container a.site-body-left-column-site-name { border-bottom: none; }

/* inline code + code blocks */
.published-container code {
  border: 1px solid #3c3836;
  border-radius: 0;
}
.published-container pre {
  border: 1px solid #504945;
  border-radius: 0;
  background: #282828;
}

/* blockquotes: solid gruvbox bar, no rounding */
.published-container blockquote {
  border-radius: 0;
  border-left: 2px solid #504945;
}

/* callouts: square corners, gruvbox surface */
.published-container .callout {
  border-radius: 0;
  border: 1px solid #504945;
  background: #282828;
}

/* background: subtle CRT scanlines over the whole site, like inquisitor.dev */
.published-container.theme-dark::after,
body.theme-dark .published-container::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: multiply;
}
/* faint radial vignette to give the flat #1d2021 some depth */
.published-container.theme-dark::before,
body.theme-dark .published-container::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(ellipse at 50% 35%, transparent 55%, rgba(0,0,0,0.25) 100%);
}

/* selection */
.published-container ::selection { background: #504945; color: #ebdbb2; }

/* scrollbars */
.published-container * { scrollbar-width: thin; scrollbar-color: #504945 #1d2021; }