/* ============================================================
   Editorial / textbook theme for manager-wiki
   ----------------------------------------------------------
   Built on top of MkDocs Material. Overrides the default
   indigo + Roboto look with a warm cream palette (light)
   plus a deep warm-dark (dark), Spectral serif body, and
   refined typography for long-form reading.
   ============================================================ */

/* ----- Color palette ---------------------------------------- */

/* Light mode: warm cream paper, ink text, oxblood accent */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        #7c2d12;  /* deep oxblood */
  --md-primary-fg-color--light: #9c4321;
  --md-primary-fg-color--dark:  #5a1f0d;
  --md-primary-bg-color:        #faf7f0;
  --md-primary-bg-color--light: #ffffff;

  --md-accent-fg-color:         #b45309;  /* warm amber for links + hover */
  --md-accent-fg-color--transparent: rgba(180, 83, 9, 0.1);
  --md-accent-bg-color:         #ffffff;
  --md-accent-bg-color--light:  #faf7f0;

  --md-default-bg-color:        #faf7f0;
  --md-default-fg-color:        #1f1c18;
  --md-default-fg-color--light: #4a4640;
  --md-default-fg-color--lighter: #8a8478;
  --md-default-fg-color--lightest: #d4cebe;

  --md-code-bg-color:           #f1ebdc;
  --md-code-fg-color:           #3a3631;
  --md-code-hl-color:           rgba(124, 45, 18, 0.08);

  --md-typeset-color:           #1f1c18;
  --md-typeset-a-color:         #7c2d12;

  --md-footer-bg-color:         #1f1c18;
  --md-footer-bg-color--dark:   #1a1714;
}

/* Dark mode: warm deep, cream text, muted gold accent */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #d4a574;  /* warm desaturated gold */
  --md-primary-fg-color--light: #e0b687;
  --md-primary-fg-color--dark:  #b8895a;
  --md-primary-bg-color:        #1a1714;
  --md-primary-bg-color--light: #232019;

  --md-accent-fg-color:         #f0c896;
  --md-accent-fg-color--transparent: rgba(240, 200, 150, 0.12);

  --md-default-bg-color:        #1a1714;
  --md-default-fg-color:        #ebe5d7;
  --md-default-fg-color--light: #c0b9a8;
  --md-default-fg-color--lighter: #8a8378;
  --md-default-fg-color--lightest: #4a4640;

  --md-code-bg-color:           #26221c;
  --md-code-fg-color:           #d8d2c2;

  --md-typeset-color:           #ebe5d7;
  --md-typeset-a-color:         #d4a574;
}

/* ----- Base typography -------------------------------------- */

.md-typeset {
  font-size:    0.78rem;     /* ~14px base */
  line-height:  1.75;         /* generous for serif body */
  letter-spacing: 0.005em;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* Headings — keep serif, weight + spacing carry the hierarchy */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: "Spectral", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--md-default-fg-color);
}

.md-typeset h1 {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 1.6rem;
  letter-spacing: -0.015em;
}

.md-typeset h2 {
  font-size: 1.55rem;
  margin-top: 2.4rem;
  margin-bottom: 0.9rem;
  line-height: 1.25;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset h3 {
  font-size: 1.18rem;
  margin-top: 1.8rem;
  margin-bottom: 0.6rem;
  line-height: 1.3;
}

.md-typeset h4 {
  font-size: 1.0rem;
  margin-top: 1.4rem;
  font-weight: 600;
}

/* Paragraphs — comfortable line breaks for serif reading */
.md-typeset p {
  margin-bottom: 0.95rem;
}

.md-typeset p,
.md-typeset li {
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Links — restrained, with a subtle underline */
.md-typeset a {
  color: var(--md-typeset-a-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--md-default-fg-color--lightest);
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

.md-typeset a:hover {
  text-decoration-color: var(--md-typeset-a-color);
  color: var(--md-accent-fg-color);
}

/* Bold + italic — slightly heavier weight for serif body */
.md-typeset strong { font-weight: 650; }
.md-typeset em     { font-style: italic; }

/* ----- Lists ------------------------------------------------ */

.md-typeset ul,
.md-typeset ol {
  margin-left: 1.2rem;
  padding-left: 0.4rem;
}

.md-typeset li {
  margin-bottom: 0.35rem;
}

/* ----- Tables — clean reference-table look, no full grid ---- */

.md-typeset table:not([class]) {
  font-size: 0.74rem;
  line-height: 1.5;
  border: none;
  border-top: 1.5px solid var(--md-default-fg-color);
  border-bottom: 1.5px solid var(--md-default-fg-color);
  border-radius: 0;
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  font-family: "Spectral", Georgia, serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background-color: transparent;
  color: var(--md-default-fg-color);
  border-bottom: 1px solid var(--md-default-fg-color);
  padding: 0.6rem 0.8rem;
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--md-default-fg-color--lightest);
  padding: 0.6rem 0.8rem;
  vertical-align: top;
}

.md-typeset table:not([class]) tr:first-child td {
  border-top: none;
}

.md-typeset table:not([class]) tr:hover {
  background-color: var(--md-code-bg-color);
}

/* ----- Code blocks + inline code ---------------------------- */

/* Inline code — subtle warm-gray tint, no pill */
.md-typeset code {
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: 0.82em;
  background-color: var(--md-code-bg-color);
  color: var(--md-code-fg-color);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-feature-settings: "calt" 1, "ss01" 1;
}

/* Block code — fenced fences feel like inset technical examples */
.md-typeset pre > code {
  font-size: 0.74rem;
  line-height: 1.65;
  padding: 1rem 1.1rem;
  background-color: var(--md-code-bg-color);
  border-radius: 4px;
  border-left: 3px solid var(--md-default-fg-color--lighter);
}

.md-typeset pre {
  margin: 1.2rem 0;
}

/* Code inside table cells — no extra padding pile-up */
.md-typeset table:not([class]) code {
  font-size: 0.78em;
}

/* ----- Admonitions — sidebar / pull-quote feel -------------- */

.md-typeset .admonition,
.md-typeset details {
  font-size: 0.76rem;
  line-height: 1.65;
  border-radius: 3px;
  border: none;
  border-left: 3px solid var(--md-default-fg-color--lighter);
  background-color: var(--md-code-bg-color);
  box-shadow: none;
  margin: 1.4rem 0;
  padding: 0.1rem 0;
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-family: "Spectral", Georgia, serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  background-color: transparent !important;
  border: none;
  padding: 0.8rem 1rem 0.2rem !important;
}

.md-typeset .admonition-title::before,
.md-typeset summary::before {
  background-color: var(--md-default-fg-color--light) !important;
}

.md-typeset .admonition > *:not(.admonition-title):not(summary),
.md-typeset details > *:not(summary) {
  padding-left: 1rem;
  padding-right: 1rem;
}

.md-typeset .admonition > p:last-child,
.md-typeset details > p:last-child {
  padding-bottom: 0.8rem;
}

/* Note + tip admonitions — warmer accent for editorial feel */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-left-color: var(--md-primary-fg-color);
}
.md-typeset .admonition.note > .admonition-title::before,
.md-typeset details.note > summary::before {
  background-color: var(--md-primary-fg-color) !important;
}

.md-typeset .admonition.tip,
.md-typeset details.tip,
.md-typeset .admonition.example,
.md-typeset details.example {
  border-left-color: var(--md-accent-fg-color);
}
.md-typeset .admonition.tip > .admonition-title::before,
.md-typeset details.tip > summary::before,
.md-typeset .admonition.example > .admonition-title::before,
.md-typeset details.example > summary::before {
  background-color: var(--md-accent-fg-color) !important;
}

/* Warning + danger — keep their saturation, just refine the shape */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-left-color: #c2410c;
}

/* ----- Blockquotes ------------------------------------------ */

.md-typeset blockquote {
  border-left: 3px solid var(--md-primary-fg-color);
  padding-left: 1.2rem;
  font-style: italic;
  color: var(--md-default-fg-color--light);
  margin: 1.2rem 0;
}

/* ----- Header / nav — quiet, lets content lead -------------- */

.md-header {
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: none;
}

.md-header__title {
  font-family: "Spectral", Georgia, serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  color: var(--md-default-fg-color);
}

/* Sidebar navigation */
.md-nav__title {
  font-family: "Spectral", Georgia, serif;
  font-weight: 600;
  font-size: 0.78rem;
}

.md-nav__link {
  font-size: 0.74rem;
  line-height: 1.45;
}

.md-nav__link--active {
  color: var(--md-primary-fg-color);
  font-weight: 600;
}

/* ----- Footer ----------------------------------------------- */

.md-footer-meta {
  font-size: 0.7rem;
  letter-spacing: 0.01em;
}

/* ----- Search ----------------------------------------------- */

.md-search__input {
  font-family: "Spectral", Georgia, serif;
}

/* ----- Page width — wider for textbook columns -------------- */

.md-grid {
  max-width: 64rem;
}

/* ============================================================
   Annotated screenshots — numbered callouts over images
   with a matching numbered legend beneath
   ============================================================ */

.md-typeset figure.annotated-image {
  position: relative;
  display: inline-block;
  margin: 1.6rem 0 0.4rem;
  max-width: 100%;
  line-height: 0;  /* prevent baseline whitespace under img */
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 4px;
  overflow: hidden;
}

.md-typeset figure.annotated-image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0;
}

.md-typeset figure.annotated-image .callout {
  position: absolute;
  width: 1.7rem;
  height: 1.7rem;
  background: var(--md-primary-fg-color);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Spectral", Georgia, serif;
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1;
  border: 2px solid var(--md-default-bg-color);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}

.md-typeset figure.annotated-image figcaption {
  display: none;  /* caption renders via the legend instead */
}

.md-typeset ol.callout-legend {
  list-style: none;
  counter-reset: cl-counter;
  padding-left: 0;
  margin: 0.6rem 0 1.6rem;
  font-size: 0.78rem;
  line-height: 1.55;
}

.md-typeset ol.callout-legend li {
  counter-increment: cl-counter;
  display: flex;
  gap: 0.7rem;
  margin-bottom: 0.55rem;
  padding-left: 0;
}

.md-typeset ol.callout-legend li::before {
  content: counter(cl-counter);
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  background: var(--md-primary-fg-color);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Spectral", Georgia, serif;
  font-weight: 700;
  font-size: 0.7rem;
  line-height: 1;
  margin-top: 0.1rem;
}

/* ============================================================
   Mermaid diagrams — editorial refinement on top of
   Material's auto-themed Mermaid
   ============================================================ */

.mermaid {
  font-family: "Spectral", Georgia, serif !important;
  font-size: 14px;
  text-align: center;
  margin: 1.6rem auto;
  max-width: 100%;
  overflow-x: auto;
}

/* SVG itself — scale down to fit column, allow horizontal scroll otherwise */
.mermaid svg {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* Slightly thicker, more deliberate node strokes */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon,
.mermaid .node path {
  stroke-width: 1.5px !important;
}

/* Edge labels — give them breathing room */
.mermaid .edgeLabel,
.mermaid .edgeLabel rect {
  padding: 2px 6px !important;
  font-size: 12px !important;
}

/* Inline edge label backgrounds — match palette */
[data-md-color-scheme="default"] .mermaid .edgeLabel {
  background-color: #faf7f0 !important;
  color: #1f1c18 !important;
}

[data-md-color-scheme="slate"] .mermaid .edgeLabel {
  background-color: #1a1714 !important;
  color: #ebe5d7 !important;
}

/* Cluster (subgraph) styling — light fill, accent border */
.mermaid .cluster rect {
  fill: transparent !important;
  stroke: var(--md-default-fg-color--lightest) !important;
  stroke-width: 1px !important;
  stroke-dasharray: 0 !important;
}

.mermaid .cluster .cluster-label,
.mermaid .cluster text {
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* ----- "What you'll learn" / list emphasis ------------------ */

.md-typeset h2 + ul,
.md-typeset h2 + ol {
  margin-top: 0.6rem;
}

/* ============================================================
   Chapter openers — h1 + lede paragraph styled as a chapter
   opening in a printed textbook
   ============================================================ */

/* Each content page's h1 gets the chapter-opener treatment */
.md-content__inner > h1:first-of-type {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 1.2rem 0 1.6rem;
  letter-spacing: -0.02em;
  padding-bottom: 0.8rem;
  border-bottom: 1.5px solid var(--md-default-fg-color);
}

/* Lede paragraph — the first paragraph immediately after the h1 */
.md-content__inner > h1:first-of-type + p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--md-default-fg-color);
  font-weight: 400;
  margin-bottom: 1.6rem;
}

/* Drop-cap-ish on the lede's first letter — only on chapter indexes
   (h1 starts with "Chapter ") via attr selector won't catch text, so
   we apply uniformly to all h1+p ledes. Subtle, not dramatic. */
.md-content__inner > h1:first-of-type + p::first-letter {
  font-family: "Spectral", Georgia, serif;
  font-weight: 700;
  font-size: 1.05em;
}

/* "What you'll learn" h2 — feels like a textbook learning-objectives box */
.md-typeset h2:first-of-type {
  margin-top: 1.8rem;
}

/* ============================================================
   Home page — distinct hero treatment
   ============================================================ */

/* The home page is .md-content with no chapter h1 visible in the source —
   the title comes from site_name. The first markdown h1 is the page's
   own title ("UGC Pipeline Wiki"). Center it like a book cover. */
.md-content__inner article > h1:first-child {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-align: center;
  margin: 2rem 0 0.8rem;
  padding: 0;
  border: none;
}

.md-content__inner article > h1:first-child + p {
  text-align: center;
  font-size: 1rem;
  font-style: italic;
  color: var(--md-default-fg-color--light);
  max-width: 36rem;
  margin: 0 auto 2.5rem;
  font-weight: 400;
}

.md-content__inner article > h1:first-child + p::first-letter {
  font-size: 1em;
  font-weight: 400;
}

/* Add a thin rule above + below the hero on the home page */
.md-content__inner article > h1:first-child::before {
  content: "";
  display: block;
  width: 3rem;
  height: 1.5px;
  background-color: var(--md-primary-fg-color);
  margin: 0 auto 1.2rem;
}

/* Grid cards (already on the home page) — refine for editorial */
.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 4px;
  background-color: var(--md-default-bg-color);
  padding: 1.2rem 1.3rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-primary-fg-color);
  transform: translateY(-1px);
}

/* ============================================================
   "Try this" exercise card — textbook chapter exercise
   ============================================================ */

.md-typeset section.try-this {
  margin: 3rem 0 2rem;
  padding: 1.6rem 1.8rem 1.4rem;
  background-color: var(--md-code-bg-color);
  border-left: 4px solid var(--md-primary-fg-color);
  border-radius: 0 4px 4px 0;
  position: relative;
}

[data-md-color-scheme="default"] .md-typeset section.try-this {
  background-color: #f4ecd8;  /* slightly warmer than inline code bg */
  border-left-color: #7c2d12;
}

[data-md-color-scheme="slate"] .md-typeset section.try-this {
  background-color: #2a241c;
  border-left-color: #d4a574;
}

/* "Try this" heading — small caps label, no h2 border */
.md-typeset section.try-this h2 {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--md-primary-fg-color);
  margin: 0 0 1rem 0;
  padding: 0;
  border: none;
  line-height: 1.2;
}

/* Hide auto-generated permalink on the Try this heading */
.md-typeset section.try-this h2 .headerlink {
  display: none;
}

/* Body paragraphs inside try-this — slightly tighter */
.md-typeset section.try-this p {
  margin-bottom: 0.7rem;
}

/* Steps + If you hit: subheads — use a smaller serif */
.md-typeset section.try-this p strong:first-child {
  font-family: "Spectral", Georgia, serif;
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.005em;
}

/* Lists inside the card — tighter spacing */
.md-typeset section.try-this ol,
.md-typeset section.try-this ul {
  margin: 0.4rem 0 0.9rem 1.2rem;
}

.md-typeset section.try-this li {
  margin-bottom: 0.3rem;
  font-size: 0.78rem;
}

/* Links inside the card — subtler underline (lots of links here) */
.md-typeset section.try-this a {
  text-decoration-color: var(--md-default-fg-color--lighter);
}

.md-typeset section.try-this a:hover {
  text-decoration-color: var(--md-primary-fg-color);
}