/* ============================================================
   CellRepo Docs — final UI overrides
   Hex-accurate to CellRepo app, safe for MkDocs Material
   ============================================================ */

/* ---------- Brand colours ---------- */
:root {
  --cellrepo-indigo: #232966;
  --cellrepo-pink: #d63384;
  --cellrepo-black: #111827; /* near-black for text */
}

/* ---------- Header / top navigation ---------- */
.md-header {
  background-color: var(--cellrepo-indigo) !important;
}

.md-header__button,
.md-header__topic,
.md-header__title,
.md-tabs__link,
.md-search__input {
  color: #ffffff !important;
}

.md-tabs {
  background-color: var(--cellrepo-indigo) !important;
}

/* ---------- Footer ---------- */
.md-footer {
  background-color: var(--cellrepo-indigo) !important;
}

.md-footer,
.md-footer a,
.md-footer-meta,
.md-footer-meta a {
  color: #ffffff !important;
}

.md-footer-meta {
  border-top: none;
}

/* ---------- Main content ---------- */
.md-typeset {
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--cellrepo-black);
}

/* Headings */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  color: var(--cellrepo-indigo);
  font-weight: 600;
  letter-spacing: -0.010em;
}

/* Links */
.md-typeset a {
  color: var(--cellrepo-pink);
}
.md-typeset a:hover {
  opacity: 0.85;
}

/* Buttons */
.md-button {
  border-radius: 12px;
}

.md-button--primary {
  background-color: var(--cellrepo-indigo) !important;
  border-color: var(--cellrepo-indigo) !important;
}
.md-button--primary:hover {
  opacity: 0.92;
}

/* Blocks / callouts */
.md-typeset blockquote,
.md-typeset .admonition {
  border-radius: 12px;
}

.md-typeset pre > code {
  border-radius: 12px;
}

/* ---------- Content spacing & readability ---------- */

/* Base text rhythm */
.md-typeset {
  line-height: 1.55; /* more breathable */
}

/* Paragraph spacing */
.md-typeset p {
  margin-top: 0.6em;
  margin-bottom: 1.2em;
}

/* Headings spacing */
.md-typeset h1 {
  margin-top: 0;
  margin-bottom: 1em;
}

.md-typeset h2 {
  margin-top: 2em;
  margin-bottom: 0.6em;
}

.md-typeset h3 {
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

/* Lists: make them easier to read */
.md-typeset ul,
.md-typeset ol {
  margin-top: 0.6em;
  margin-bottom: 1.2em;
  padding-left: 1.4em;
}

.md-typeset li {
  margin-bottom: 0.6em;
}

/* Blockquotes / callouts */
.md-typeset blockquote,
.md-typeset .admonition {
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding: 0.6em 1.2em;
}

/* Code blocks */
.md-typeset pre {
  margin-top: 1.4em;
  margin-bottom: 1.6em;
}


/* ---------- LEFT SIDEBAR NAVIGATION ---------- */

/* Section titles */
.md-nav__title {
  color: var(--cellrepo-pink) !important;
  font-weight: 600;
}

/* Nav panel titles (left + right): improve size & presence */
.md-nav__title {
  font-size: 0.8ßrem;   /* default is ~0.8rem */
  line-height: 1.4;
}


/* Default nav links */
.md-nav__link,
.md-nav__link .md-ellipsis {
  color: var(--cellrepo-black) !important;
  font-size: 0.8rem;
}

/* Hover state → pink */
.md-nav__link:hover,
.md-nav__link:hover .md-ellipsis {
  color: var(--cellrepo-pink) !important;
}

/* Active page → indigo (must override hover) */
.md-nav__link--active,
.md-nav__link--active .md-ellipsis {
  color: var(--cellrepo-pink) !important;
  font-weight: 600;
}

/* Ensure active stays indigo even on hover */
.md-nav__link--active:hover,
.md-nav__link--active:hover .md-ellipsis {
  color: var(--cellrepo-indigo) !important;
}


/* ---------- RIGHT SIDEBAR (TABLE OF CONTENTS) ---------- */

.md-sidebar--secondary .md-nav__link,
.md-sidebar--secondary .md-nav__link .md-ellipsis {
  color: var(--cellrepo-black) !important;
}

.md-sidebar--secondary .md-nav__link:hover,
.md-sidebar--secondary .md-nav__link:hover .md-ellipsis {
  color: var(--cellrepo-pink) !important;
}

.md-sidebar--secondary .md-nav__link--active,
.md-sidebar--secondary .md-nav__link--active .md-ellipsis {
  color: var(--cellrepo-pink) !important;
  font-weight: 600;
}

.md-sidebar--secondary .md-nav__link--active:hover,
.md-sidebar--secondary .md-nav__link--active:hover .md-ellipsis {
  color: var(--cellrepo-pink) !important;
}

/* Right-side TOC title (page context) → pink */
.md-sidebar--secondary .md-nav__title {
  color: var(--cellrepo-pink) !important;
  font-weight: 600;
}


/* Extra breathing room at the end of each page */
.md-content__inner {
  padding-bottom: 3rem;
}

/* ============================================================
   Layout hierarchy: make nav panels feel separate from content
   ============================================================ */

/* 1) Make main content slightly larger (readable manual feel) */
.md-typeset {
  font-size: 0.75rem;          /* content should be the largest */
  line-height: 1.55;        /* not too airy */
}

/* 2) Left + right sidebars: subtle background + borders */
.md-sidebar--primary .md-sidebar__scrollwrap,
.md-sidebar--secondary .md-sidebar__scrollwrap {
  background: #f7f8fc;      /* very light cool tint */
}

/* Borders to separate panels */
.md-sidebar--primary {
  border-right: 1px solid #e6e8f0;
}
.md-sidebar--secondary {
  border-left: 1px solid #e6e8f0;
}

.md-sidebar__scrollwrap {
  padding-top: 0.5rem;
}

/* 3) Navigation typography: slightly smaller than content */
.md-nav__link,
.md-nav__link .md-ellipsis {
  font-size: 0.7rem !important;
  line-height: 1.35;
}


/* 4) Make active item pop without making everything feel equal */
.md-nav__link--active,
.md-nav__link--active .md-ellipsis {
  font-weight: 600 !important;
}
/* 
/* 5) Keep content headings clearly larger than body */
.md-typeset h1 { font-size: 2rem; }
.md-typeset h2 { font-size: 1.4rem; }
.md-typeset h3 { font-size: 1.15rem; } */