/* ============================================================
   Danforth Center — Material for MkDocs theme overrides
   Drop into:  docs/stylesheets/danforth.css
   Wire in mkdocs.yml:
     extra_css: [stylesheets/danforth.css]
   Source of truth: 2023 Danforth Brand Guidelines
   ============================================================ */

/* ---------- Brand fonts ----------
   Material's font.text / font.code keys load Google Fonts. We use
   Source Serif 4 as the open-source stand-in for Poynter Oldstyle
   (paid Commercial Type license). If you license Poynter, swap the
   @font-face block below. Open Sans is supplied via brand assets;
   if you serve them yourself, point the @font-face src at your own
   files (we default to Google Fonts so the kit works out-of-the-box
   when added to mkdocs.yml -> theme.font). */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,600&display=swap');

/* ============================================================
   1. PALETTE  ·  Material's CSS-var hooks
   Every Material color comes from a small set of CSS vars; we
   redefine them so the whole UI inherits Danforth color.
   Reference: https://squidfunk.github.io/mkdocs-material/customization/
   ============================================================ */
:root,
[data-md-color-scheme="default"],
[data-md-color-scheme="danforth"] {
  /* --- Brand primaries --- */
  --ddpsc-regal-blue:    #004F6B;
  --ddpsc-vibrant-green: #8FCB24;
  --ddpsc-sky-blue:      #3DA8D5;
  --ddpsc-clay-red:      #E8553B;
  --ddpsc-moss-green:    #2B410D;
  --ddpsc-lichen-green:  #BACBC3;
  --ddpsc-bark-gray:     #707070;
  --ddpsc-prairie-purple:#5F249F;

  /* Tints */
  --regal-blue-80: #337289;  --regal-blue-60: #6695A7;
  --regal-blue-40: #99B9C5;  --regal-blue-20: #CCDCE2;
  --vibrant-green-80: #A5D550; --vibrant-green-60: #BCE07C;
  --vibrant-green-40: #D2EAA7; --vibrant-green-20: #E9F5D3;

  --paper:      #FAFAF7;
  --paper-warm: #F4F0E8;
  --ink:        #1A1A1A;
  --ink-soft:   #4A4A4A;
  --rule:       #E2E2DD;

  /* --- Material primary (header, nav-active, links) --- */
  --md-primary-fg-color:        var(--ddpsc-regal-blue);
  --md-primary-fg-color--light: var(--regal-blue-60);
  --md-primary-fg-color--dark:  #003a50;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255,255,255,0.7);

  /* --- Accent (interactive: search highlight, scroll, kbd) --- */
  --md-accent-fg-color:         var(--ddpsc-vibrant-green);
  --md-accent-fg-color--transparent: rgba(143,203,36,0.10);
  --md-accent-bg-color:         var(--ddpsc-regal-blue);
  --md-accent-bg-color--light:  rgba(143,203,36,0.40);

  /* --- Foreground / background ramp --- */
  --md-default-fg-color:         var(--ink);
  --md-default-fg-color--light:  var(--ink-soft);
  --md-default-fg-color--lighter:#7d7d77;
  --md-default-fg-color--lightest:#dededb;
  --md-default-bg-color:         var(--paper);
  --md-default-bg-color--light:  rgba(0,79,107,0.04);
  --md-default-bg-color--lighter:rgba(0,79,107,0.02);
  --md-default-bg-color--lightest:rgba(0,79,107,0.01);

  /* --- Code surfaces --- */
  --md-code-fg-color: var(--ddpsc-regal-blue);
  --md-code-bg-color: #F2EEE5;        /* warm paper, sits on cream pages */
  --md-code-hl-color: var(--vibrant-green-40);
  --md-code-hl-color--light: var(--vibrant-green-20);

  --md-code-hl-comment-color:  #6B7A6B;
  --md-code-hl-keyword-color:  var(--ddpsc-prairie-purple);
  --md-code-hl-name-color:     var(--ink);
  --md-code-hl-string-color:   var(--ddpsc-moss-green);
  --md-code-hl-number-color:   var(--ddpsc-clay-red);
  --md-code-hl-operator-color: var(--ddpsc-bark-gray);
  --md-code-hl-punctuation-color: var(--ddpsc-bark-gray);
  --md-code-hl-special-color:  var(--ddpsc-clay-red);
  --md-code-hl-function-color: var(--ddpsc-sky-blue);
  --md-code-hl-variable-color: var(--ddpsc-regal-blue);
  --md-code-hl-constant-color: var(--ddpsc-prairie-purple);

  /* --- Typeset (body type system) --- */
  --md-text-font: "Open Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --md-code-font: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --md-text-font-family: var(--md-text-font);
  --md-code-font-family: var(--md-code-font);

  /* --- Admonition / callout colors (notes, warning, etc.) --- */
  --md-admonition-fg-color: var(--md-default-fg-color);
  --md-admonition-bg-color: var(--md-default-bg-color);

  /* --- Footer --- */
  --md-footer-fg-color:           #ffffff;
  --md-footer-fg-color--light:    rgba(255,255,255,0.85);
  --md-footer-fg-color--lighter:  rgba(255,255,255,0.55);
  --md-footer-bg-color:           var(--ddpsc-regal-blue);
  --md-footer-bg-color--dark:     #003a50;

  /* --- Typeset block colors --- */
  --md-typeset-color:           var(--ink);
  --md-typeset-a-color:         var(--ddpsc-regal-blue);
  --md-typeset-mark-color:      var(--vibrant-green-40);
  --md-typeset-del-color:       rgba(232,85,59,0.15);
  --md-typeset-ins-color:       rgba(143,203,36,0.20);
  --md-typeset-kbd-color:       #ffffff;
  --md-typeset-kbd-accent-color:#ffffff;
  --md-typeset-kbd-border-color:var(--rule);
  --md-typeset-table-color:     var(--rule);
  --md-typeset-table-color--light: rgba(0,79,107,0.04);
}

/* ---------- Dark scheme (slate) ---------- */
[data-md-color-scheme="slate"] {
  --md-default-fg-color:         #E8EAE5;
  --md-default-fg-color--light:  #B4B7B0;
  --md-default-fg-color--lighter:#7c8079;
  --md-default-fg-color--lightest:#4b4f49;
  --md-default-bg-color:         #0e1f27;     /* deep regal-blue-tinted ink */
  --md-default-bg-color--light:  rgba(255,255,255,0.04);
  --md-default-bg-color--lighter:rgba(255,255,255,0.02);
  --md-default-bg-color--lightest:rgba(255,255,255,0.01);

  --md-primary-fg-color:        #0e1f27;
  --md-primary-fg-color--light: #16323e;
  --md-primary-fg-color--dark:  #081218;
  --md-accent-fg-color:         var(--ddpsc-vibrant-green);

  --md-code-fg-color: #E8EAE5;
  --md-code-bg-color: #16323e;

  --md-typeset-a-color: var(--ddpsc-vibrant-green);
  --md-typeset-mark-color: rgba(143,203,36,0.35);

  --md-footer-bg-color:        #081218;
  --md-footer-bg-color--dark:  #050b0f;
}

/* ============================================================
   2. TYPOGRAPHY  ·  editorial register
   ============================================================ */

/* Base body — Open Sans Light (300) per brand */
.md-typeset {
  font-size: 0.85rem;          /* 16.32px @ 16px root */
  font-weight: 300;
  line-height: 1.65;
  color: var(--md-typeset-color);
}
.md-typeset p { text-wrap: pretty; }

/* Display & headings — Source Serif 4 (Poynter substitute) */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: "Source Serif 4", "Poynter Oldstyle Display", Georgia, serif;
  color: var(--ddpsc-regal-blue);
  font-weight: 600;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.md-typeset h1 {
  font-size: 2.4em;
  line-height: 1.05;
  margin: 0 0 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.md-typeset h2 {
  font-size: 1.6em;
  line-height: 1.15;
  margin: 2.4rem 0 0.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}
.md-typeset h3 {
  font-size: 1.2em;
  line-height: 1.3;
  margin: 1.8rem 0 0.6rem;
}
.md-typeset h4 {
  font-size: 1em;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  margin: 1.4rem 0 0.4rem;
}
.md-typeset h5,
.md-typeset h6 {
  font-family: var(--md-text-font);
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ddpsc-regal-blue);
}

/* Lead paragraph — first <p> after h1 sits larger, lighter */
.md-typeset h1 + p {
  font-size: 1.125em;
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 64ch;
}

/* Anchor underline — editorial */
.md-typeset a {
  color: var(--md-typeset-a-color);
  text-decoration: underline;
  text-decoration-color: var(--vibrant-green-40);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color 160ms;
}
.md-typeset a:hover {
  text-decoration-color: var(--ddpsc-vibrant-green);
}

/* ============================================================
   3. HEADER  ·  Frond stamp + tighter chrome
   ============================================================ */
.md-header {
  background: var(--md-primary-fg-color);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.md-header__title {
  font-family: var(--md-text-font);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.85rem;
}
.md-header__topic:first-child {
  font-weight: 700;
}

/* Inject the Frond as an SVG stamp before the site title.
   Override the Material logo block in mkdocs.yml or use this. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: auto;
}

/* Tabs row — use serif for primary nav tabs */
.md-tabs {
  background: var(--md-primary-fg-color);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.md-tabs__link {
  font-family: var(--md-text-font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.85;
  margin-top: 0.6rem;
}
.md-tabs__link:hover,
.md-tabs__link--active {
  opacity: 1;
  color: var(--ddpsc-vibrant-green);
}

/* ============================================================
   4. SIDEBAR  ·  hairline rules, tight type
   ============================================================ */
.md-nav__title {
  font-family: var(--md-text-font);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ddpsc-regal-blue);
}
.md-nav__item {
  padding-top: 2px;
  padding-bottom: 2px;
}
.md-nav__link {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-soft);
  transition: color 120ms, border-color 120ms;
  border-left: 2px solid transparent;
  padding-left: 0.6rem;
  margin-left: -0.6rem;
}
.md-nav__link:hover {
  color: var(--ddpsc-regal-blue);
}
.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  color: var(--ddpsc-regal-blue);
  font-weight: 600;
  border-left-color: var(--ddpsc-vibrant-green);
}

/* Right-rail TOC */
.md-nav--secondary .md-nav__title {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.6rem;
}
.md-nav--secondary .md-nav__link--active {
  border-left-color: var(--ddpsc-regal-blue);
}

/* ============================================================
   5. SEARCH
   ============================================================ */
.md-search__form {
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
  transition: background 160ms;
}
.md-search__form:hover {
  background: rgba(255,255,255,0.18);
}
.md-search-result__article--document .md-search-result__title {
  font-family: "Source Serif 4", Georgia, serif;
  color: var(--ddpsc-regal-blue);
  font-weight: 600;
}
.md-search-result mark {
  color: var(--ddpsc-regal-blue);
  background: var(--vibrant-green-40);
  padding: 0 2px;
  border-radius: 2px;
}

/* ============================================================
   6. ADMONITIONS  ·  notes, warnings, tips, etc.
   Use Danforth secondary palette for variety, hairline-led design.
   ============================================================ */
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ddpsc-regal-blue);
  border-radius: 2px;
  background: #fff;
  box-shadow: none;
  font-size: 0.78rem;
  padding: 0.8rem 1rem 0.8rem 2.8rem;
  margin: 1.5rem 0;
}
.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
  font-family: var(--md-text-font);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ddpsc-regal-blue);
  background: transparent;
  margin: 0 0 0.4rem -1.8rem;
  padding: 0 0 0 1.8rem;
  border-bottom: 0;
}
.md-typeset .admonition > .admonition-title::before,
.md-typeset details > summary::before {
  background: var(--ddpsc-regal-blue);
}

/* Note — default blue */
.md-typeset .admonition.note,
.md-typeset details.note { border-left-color: var(--ddpsc-regal-blue); }

/* Tip / hint — green */
.md-typeset .admonition.tip,
.md-typeset .admonition.hint,
.md-typeset .admonition.important,
.md-typeset details.tip {
  border-left-color: var(--ddpsc-vibrant-green);
}
.md-typeset .admonition.tip > .admonition-title,
.md-typeset .admonition.hint > .admonition-title,
.md-typeset .admonition.important > .admonition-title {
  color: var(--ddpsc-moss-green);
}
.md-typeset .admonition.tip > .admonition-title::before,
.md-typeset .admonition.hint > .admonition-title::before {
  background: var(--ddpsc-vibrant-green);
}

/* Warning — clay */
.md-typeset .admonition.warning,
.md-typeset .admonition.caution,
.md-typeset details.warning {
  border-left-color: var(--ddpsc-clay-red);
}
.md-typeset .admonition.warning > .admonition-title,
.md-typeset .admonition.caution > .admonition-title {
  color: var(--ddpsc-clay-red);
}
.md-typeset .admonition.warning > .admonition-title::before,
.md-typeset .admonition.caution > .admonition-title::before {
  background: var(--ddpsc-clay-red);
}

/* Danger / failure — clay deeper */
.md-typeset .admonition.danger,
.md-typeset .admonition.failure,
.md-typeset .admonition.error,
.md-typeset details.danger {
  border-left-color: #b53d28;
}

/* Info / abstract — sky */
.md-typeset .admonition.info,
.md-typeset .admonition.abstract,
.md-typeset .admonition.summary {
  border-left-color: var(--ddpsc-sky-blue);
}

/* Example / quote — purple */
.md-typeset .admonition.example,
.md-typeset .admonition.quote,
.md-typeset .admonition.cite {
  border-left-color: var(--ddpsc-prairie-purple);
}

/* ============================================================
   7. CODE  ·  warm paper bg, JetBrains Mono
   ============================================================ */
.md-typeset code {
  font-size: 0.82em;
  padding: 0.12em 0.36em;
  border-radius: 2px;
  background: var(--md-code-bg-color);
  color: var(--md-code-fg-color);
  font-weight: 500;
}
.md-typeset pre > code {
  display: block;
  overflow-x: auto;
  font-size: 0.78em;
  line-height: 1.6;
  border: 1px solid var(--rule);
  background: var(--md-code-bg-color);
  border-radius: 4px;
  padding: 1rem 1.2rem;
}
.md-typeset pre {
  margin: 1.2rem 0;
}
/* Line-numbered code — sober gutter */
.md-typeset .highlight .linenos {
  color: rgba(0,79,107,0.40);
  border-right: 1px solid var(--rule);
  padding-right: 0.8rem;
  user-select: none;
}
/* Highlighted line marker */
.md-typeset .highlight .hll {
  background: var(--vibrant-green-20);
  margin-left: -1.2rem;
  padding-left: 1.2rem;
  border-left: 2px solid var(--ddpsc-vibrant-green);
}

/* Copy button restraint */
.md-clipboard {
  color: var(--ddpsc-bark-gray);
  opacity: 0.5;
}
.md-clipboard:hover {
  color: var(--ddpsc-vibrant-green);
  opacity: 1;
}

/* ============================================================
   8. TABLES  ·  hairline editorial
   ============================================================ */
.md-typeset table:not([class]) {
  font-size: 0.78rem;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  box-shadow: none;
  border-top: 2px solid var(--ddpsc-regal-blue);
  border-bottom: 1px solid var(--ddpsc-regal-blue);
}
.md-typeset table:not([class]) th {
  background: transparent;
  color: var(--ddpsc-regal-blue);
  font-family: var(--md-text-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--ddpsc-regal-blue);
  text-align: left;
}
.md-typeset table:not([class]) td {
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--rule);
}
.md-typeset table:not([class]) tr:hover {
  background: rgba(0,79,107,0.025);
}

/* ============================================================
   9. BUTTONS, BLOCKQUOTES, KBD, TABS
   ============================================================ */

/* CTA buttons (.md-button) */
.md-typeset .md-button {
  font-family: var(--md-text-font);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  border: 1px solid var(--ddpsc-regal-blue);
  color: var(--ddpsc-regal-blue);
  border-radius: 2px;
  padding: 0.6rem 1.2rem;
  transition: background 160ms, color 160ms;
}
.md-typeset .md-button:hover {
  background: var(--ddpsc-regal-blue);
  color: #fff;
  border-color: var(--ddpsc-regal-blue);
}
.md-typeset .md-button--primary {
  background: var(--ddpsc-regal-blue);
  color: #fff;
}
.md-typeset .md-button--primary:hover {
  background: var(--ddpsc-vibrant-green);
  border-color: var(--ddpsc-vibrant-green);
  color: var(--ddpsc-regal-blue);
}

/* Blockquote — pulled into editorial pull-quote when no inline class */
.md-typeset blockquote {
  border-left: 3px solid var(--ddpsc-vibrant-green);
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-size: 1.1em;
  line-height: 1.5;
  color: var(--ddpsc-regal-blue);
  padding: 0.4rem 0 0.4rem 1.2rem;
  margin: 1.6rem 0;
}

/* Keyboard keys */
.md-typeset kbd {
  font-family: var(--md-code-font);
  font-size: 0.72em;
  background: #fff;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 0.1em 0.45em;
  box-shadow: none;
  color: var(--ddpsc-regal-blue);
}

/* Content tabs */
.md-typeset .tabbed-set > input:checked + label {
  color: var(--ddpsc-regal-blue);
  border-color: var(--ddpsc-vibrant-green);
}
.md-typeset .tabbed-labels > label {
  font-family: var(--md-text-font);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
}

/* ============================================================
   10. HOMEPAGE / HERO  ·  utility classes you can drop in MD
   Usage in markdown:
     <div class="ddpsc-hero" markdown>
       <span class="ddpsc-eyebrow">Documentation</span>
       # Stargate Phenotyping Pipeline
       Lead paragraph...
       [Get started](#){.md-button .md-button--primary}
     </div>
   ============================================================ */

.ddpsc-eyebrow {
  display: inline-block;
  font-family: var(--md-text-font);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ddpsc-regal-blue);
  margin-bottom: 0.6rem;
}

.ddpsc-hero {
  position: relative;
  padding: 2.4rem 0 3rem;
  margin: 0 0 2.4rem;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.ddpsc-hero::after {
  /* Frond watermark — base64'd in danforth.js to avoid extra HTTP. */
  content: "";
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  height: 200px;
  opacity: 0.06;
  background: var(--ddpsc-frond-bg) center/contain no-repeat;
  pointer-events: none;
}
.ddpsc-hero h1 {
  font-size: 3em;
  margin-top: 0;
}

/* Two-column grid for landing pages */
.ddpsc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  margin: 1.6rem 0;
}
.ddpsc-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ddpsc-regal-blue);
  padding: 1.2rem 1.2rem 1.4rem;
  border-radius: 2px;
  transition: border-color 160ms, transform 160ms;
}
.ddpsc-card:hover {
  border-top-color: var(--ddpsc-vibrant-green);
  transform: translateY(-2px);
}
.ddpsc-card h3 {
  font-size: 1rem;
  margin: 0 0 0.4rem;
}
.ddpsc-card p {
  font-size: 0.82rem;
  margin: 0;
  color: var(--ink-soft);
}

/* Stat callout */
.ddpsc-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.8rem 0;
}
.ddpsc-stat__value {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 2.4em;
  font-weight: 600;
  color: var(--ddpsc-vibrant-green);
  line-height: 1;
}
.ddpsc-stat__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ============================================================
   11. FOOTER
   ============================================================ */
.md-footer-meta {
  background: var(--md-footer-bg-color--dark);
  font-size: 0.74rem;
}
.md-footer__inner {
  padding: 1.6rem 0;
}
.md-footer__title {
  font-family: var(--md-text-font);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.md-footer__direction {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ============================================================
   12. PRINT  ·  brand-true PDF export
   ============================================================ */
@media print {
  .md-typeset h1,
  .md-typeset h2,
  .md-typeset h3 { color: var(--ddpsc-regal-blue) !important; }
  .md-typeset a {
    color: var(--ddpsc-regal-blue) !important;
    text-decoration-color: var(--ddpsc-vibrant-green) !important;
  }
  .md-header,
  .md-tabs,
  .md-sidebar,
  .md-footer { display: none !important; }
}