/* BugBotLab theme — matches bugbotlab.github.io */
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&family=Nunito:wght@300;400;600;700;800&display=swap');

/* ── Colour tokens ── */
:root {
  --bb-green:       #adc276;
  --bb-green-dark:  #8da45a;
  --bb-green-deep:  #6f8544;
  --bb-dark:        #111111;
  --bb-secondary:   #5f6b57;
  --bb-sage:        #bbd291;
  --bb-border:      #c9d6aa;
  --bb-light-bg:    #e2ecce;
}

/* ── Material palette overrides (default / light scheme) ── */
[data-md-color-scheme="default"] {
  /* Header / nav bar background */
  --md-primary-fg-color:        #adc276;
  --md-primary-fg-color--light: #bbd291;
  --md-primary-fg-color--dark:  #8da45a;
  --md-primary-bg-color:        #111111;
  --md-primary-bg-color--light: rgba(17, 17, 17, .7);

  /* Interactive accent — links, active tabs, focus rings */
  --md-accent-fg-color:             #8da45a;
  --md-accent-fg-color--transparent: rgba(133, 179, 115, .1);
  --md-accent-bg-color:             #ffffff;
  --md-accent-bg-color--light:      rgba(255, 255, 255, .7);

  /* Body text */
  --md-default-fg-color:         #111111;
  --md-default-fg-color--light:  #5f6b57;
  --md-default-fg-color--lighter: #8a959a;
  --md-default-bg-color:         #ffffff;
  --md-default-bg-color--light:  #e2ecce;
  --md-default-bg-color--lighter: #faf5e8;

  /* Code blocks */
  --md-code-bg-color: #e2ecce;
  --md-code-fg-color: #111111;
}

/* ── Typography ── */
body,
.md-typeset {
  font-family: 'Nunito', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Varela Round', 'Nunito', sans-serif;
  font-weight: 400;
}

/* Keeps the site name in the header on-brand */
.md-header__title {
  font-family: 'Varela Round', sans-serif;
}

/* ── Navigation ── */
.md-nav__link--active {
  color: var(--bb-green-dark) !important;
  font-weight: 700;
}

.md-nav__link:is(:focus, :hover) {
  color: var(--bb-green-dark);
}

/* Active tab underline */
.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--bb-green) !important;
}

/* ── Content links ── */
.md-content a {
  color: var(--bb-green-dark);
  text-decoration: none;
}

.md-content a:hover {
  color: var(--bb-green-deep);
  text-decoration: underline;
}

/* ── Inline code ── */
.md-typeset code {
  background-color: var(--bb-light-bg);
  color: var(--bb-dark);
  border-radius: 3px;
  border: 1px solid var(--bb-border);
  padding: 0 .25em;
}

/* ── Code block header (copy button bar) ── */
.md-typeset .highlight .hll {
  background-color: rgba(162, 197, 148, .15);
}

/* ── Admonition: note variant uses sage green ── */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--bb-green);
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: rgba(162, 197, 148, .12);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: var(--bb-green);
  -webkit-mask-image: var(--md-admonition-icon--note);
          mask-image: var(--md-admonition-icon--note);
}

/* ── Search highlight ── */
.md-search-result mark {
  background-color: rgba(162, 197, 148, .45);
  color: var(--bb-dark);
}

/* ── Footer ── */
.md-footer {
  background-color: var(--bb-dark);
}
.md-footer-meta {
  background-color: #1a1a1a;
}

/* ── Runnable code cells (hooks/runnable.py) ── */
.bb-run { margin: -.6rem 0 1.4rem 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bb-run .md-button { padding: .3em .9em; font-size: .8rem; }
.bb-run-label { color: var(--bb-secondary); font-size: .85rem; }

/* the new brand: cream header with the wordmark, a green rule under it, black text */
.md-header { box-shadow: none; }
.md-header__button.md-logo img { height: 2.2rem; width: auto; }
.md-tabs { background: #bbd291; color: #111; }
.md-tabs__link { color: #111; font-weight: 700; opacity: .85; }
.md-tabs__link--active, .md-tabs__link:hover { color: #000; opacity: 1; }
.md-search__form { background: rgba(255,255,255,.55); }
.md-search__input::placeholder, .md-search__icon { color: #5f6b57; }

/* cards and tables sit white on the page ground, rounded like the lesson cells */
.md-typeset .grid.cards > ul > li, .md-typeset .grid > .card {
  background: #fff; border: 1px solid var(--bb-border); border-radius: 12px;
  box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .04);
}
.md-typeset .grid.cards > ul > li:is(:focus-within, :hover) { border-color: var(--bb-green-dark); box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .08); }
.md-typeset .grid.cards > ul > li > hr { border-bottom-color: var(--bb-border); }
.md-typeset table:not([class]) { background: #fff; border: 1px solid var(--bb-border); border-radius: 12px; overflow: hidden; box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .04); }
.md-typeset table:not([class]) th { background: var(--bb-light-bg); border-bottom: 1px solid var(--bb-border); }
.md-typeset table:not([class]) td { border-top-color: var(--bb-border); }
.md-typeset .md-button { border-radius: 6px; }