/* ============================================================
   BOTG BOOTS BRAND — Obsidian Publish stylesheet
   Boots On The Ground AI · claude.bootsagent.com
   Install: place this file named exactly `publish.css` in the
   VAULT ROOT (next to your top-level folders), then open the
   Publish dialog and publish it like any other file.
   Note: Obsidian Publish does not run plugins, so this file
   carries the same branding as the botg-brand.css app snippet
   with the values written in directly. To change a value here,
   edit it and re-publish this file.
   ============================================================ */

:root {
  --botg-navy: #182848;
  --botg-cyan: #0CB4EC;
  --botg-teal: #2C84A8;
  --botg-gold: #D4A840;
  --botg-mist: #F4F4F8;
  /* Diagram size: lower this to make all Mermaid diagrams smaller */
  --botg-mermaid-max-width: 640px;
  --botg-edge-label-text: #182848;
  --botg-edge-label-bg: #F4F4F8;
}

/* ---------- Site branding ---------- */

/* Headings */
.markdown-rendered h1, .markdown-preview-view h1,
.markdown-rendered h2, .markdown-preview-view h2,
.markdown-rendered h3, .markdown-preview-view h3 {
  color: var(--botg-navy);
}
.theme-dark .markdown-rendered h1, .theme-dark .markdown-preview-view h1,
.theme-dark .markdown-rendered h2, .theme-dark .markdown-preview-view h2,
.theme-dark .markdown-rendered h3, .theme-dark .markdown-preview-view h3 {
  color: #A8DCF5;
}
.markdown-rendered h1, .markdown-preview-view h1 {
  border-bottom: 2px solid var(--botg-gold);
  padding-bottom: 0.15em;
}

/* Links */
body {
  --link-color: var(--botg-teal);
  --link-color-hover: var(--botg-cyan);
  --link-external-color: var(--botg-teal);
  --link-external-color-hover: var(--botg-cyan);
}

/* Site header / accents on the published site */
.published-container {
  --site-name-color: var(--botg-navy);
}
.theme-dark .published-container {
  --site-name-color: #A8DCF5;
}

/* Tables: navy header row, mist zebra stripes.
   Painted three ways so empty header cells (e.g. | Feature | | Use it when |)
   can't show a white gap: native Obsidian variables, the row itself,
   and every element inside the header row. */
body {
  --table-header-background: var(--botg-navy);
  --table-header-color: #FFFFFF;
  --table-header-border-color: var(--botg-navy);
}
.markdown-rendered thead tr, .markdown-preview-view thead tr {
  background-color: var(--botg-navy);
}
.markdown-rendered thead tr > th, .markdown-preview-view thead tr > th,
.markdown-rendered thead tr > td, .markdown-preview-view thead tr > td,
.markdown-rendered th:empty, .markdown-preview-view th:empty {
  background-color: var(--botg-navy) !important;
  color: #FFFFFF;
  border-color: var(--botg-navy);
}
.markdown-rendered tbody tr:nth-child(even) td,
.markdown-preview-view tbody tr:nth-child(even) td {
  background-color: var(--botg-mist);
}
.theme-dark .markdown-rendered tbody tr:nth-child(even) td,
.theme-dark .markdown-preview-view tbody tr:nth-child(even) td {
  background-color: rgba(44, 132, 168, 0.12);
}

/* Blockquotes: gold bar */
.markdown-rendered blockquote, .markdown-preview-view blockquote {
  border-left: 3px solid var(--botg-gold);
}

/* Horizontal rules */
.markdown-rendered hr, .markdown-preview-view hr {
  border-color: var(--botg-gold);
}

/* Callouts pick up the cyan accent */
.callout {
  --callout-color: 12, 180, 236;
}

/* ---------- Mermaid diagrams ---------- */

/* Size: cap the rendered SVG and keep proportions */
.markdown-rendered .mermaid svg,
.markdown-preview-view .mermaid svg,
.mermaid svg {
  max-width: var(--botg-mermaid-max-width) !important;
  height: auto !important;
  background-color: transparent !important;
}

/* Center diagrams in the page */
.markdown-rendered .mermaid,
.markdown-preview-view .mermaid,
.mermaid {
  display: flex;
  justify-content: center;
}

/* Edge labels: readable navy text on a mist chip
   (covers both HTML labels and plain SVG text labels) */
.mermaid .edgeLabel,
.mermaid .edgeLabel p,
.mermaid .edgeLabel span,
.mermaid .edgeLabel foreignObject div {
  color: var(--botg-edge-label-text) !important;
}
.mermaid .edgeLabel,
.mermaid .edgeLabel .labelBkg {
  background-color: var(--botg-edge-label-bg) !important;
}
.mermaid .edgeLabels .label text,
.mermaid g.edgeLabel text {
  fill: var(--botg-edge-label-text) !important;
}
.mermaid .edgeLabels .label rect,
.mermaid g.edgeLabel rect {
  fill: var(--botg-edge-label-bg) !important;
  opacity: 1;
}