/* =========================================================================
   django-data-seed docs — modern theme on top of Material for MkDocs.
   Colors are driven through Material's CSS variables so light & dark both work.
   ========================================================================= */

/* ---- Brand palette (emerald) ------------------------------------------- */
/* Override the named "green" palette's variables to an exact modern emerald. */
[data-md-color-primary="green"] {
  --md-primary-fg-color:        #10b981;
  --md-primary-fg-color--light: #34d399;
  --md-primary-fg-color--dark:  #059669;
}
[data-md-color-accent="green"] {
  --md-accent-fg-color:         #059669;
}
:root {
  --md-accent-fg-color--transparent: #10b9811a;
}
[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #34d399;
  --md-accent-fg-color: #34d399;
}

/* ---- Typography -------------------------------------------------------- */
.md-typeset {
  font-size: 0.80rem;
  line-height: 1.72;
}
.md-typeset h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 2rem;
}
.md-typeset h2 {
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 2.6em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}
.md-typeset h3 { font-weight: 600; margin-top: 1.8em; }

/* Slightly wider, comfortable content column */
.md-grid { max-width: 70rem; }

/* ---- Left sidebar: modern rounded items + active pill ------------------ */
.md-nav {
  font-size: 0.72rem;
}
.md-nav__title {
  font-weight: 700;
}
.md-nav__link {
  border-radius: 0.45rem;
  padding: 0.30rem 0.55rem;
  margin: 0.05rem 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.md-nav__link:hover {
  background: var(--md-accent-fg-color--transparent);
}
.md-nav__item .md-nav__link--active {
  font-weight: 600;
  background: var(--md-accent-fg-color--transparent);
}
/* section groups a touch more separated */
.md-nav__item--nested > .md-nav__link { font-weight: 600; }

/* ---- Code: rounded, subtle, modern ------------------------------------ */
.md-typeset code {
  border-radius: 0.3rem;
  font-size: 0.85em;
}
.md-typeset pre > code { border-radius: 0.6rem; }
.md-typeset .highlight > pre { border-radius: 0.6rem; }
.md-typeset .highlight {
  border-radius: 0.6rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* ---- Tables: card-like, readable -------------------------------------- */
.md-typeset table:not([class]) {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.6rem;
  overflow: hidden;
  font-size: 0.74rem;
}
.md-typeset table:not([class]) th {
  background: var(--md-default-fg-color--lightest);
  font-weight: 700;
}
.md-typeset table:not([class]) tr:hover {
  background: var(--md-accent-fg-color--transparent);
}

/* ---- Links ------------------------------------------------------------- */
.md-typeset a { text-decoration: none; }
.md-typeset a:hover { text-decoration: underline; }

/* ---- Tagline blockquote (used at the top of Home) --------------------- */
.md-typeset blockquote {
  border-left: 0.2rem solid var(--md-primary-fg-color);
  background: var(--md-accent-fg-color--transparent);
  border-radius: 0.35rem;
  color: var(--md-default-fg-color);
  padding: 0.7rem 1rem;
}

/* ---- Header: subtle shadow for a crisper, modern top bar -------------- */
.md-header {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ---- "cards" grid on the Features overview page ----------------------- */
.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > .card {
  border-radius: 0.7rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.md-typeset .grid.cards > :is(ul, ol) > li:hover {
  border-color: var(--md-primary-fg-color);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.12);
  transform: translateY(-2px);
}