/* ============================================
   Learning Mascot: Bhindi the Cat
   Pedagogical agent for Understanding ADHD
   ============================================ */

:root {
  --mascot-primary:   #00695c;  /* deep teal — matches site primary   */
  --mascot-secondary: #546e7a;  /* slate blue-grey — Bhindi's coat    */
  --mascot-bg:        #e0f2f1;  /* pale teal                          */
  --mascot-border:    #00897b;  /* medium teal                        */
  --mascot-size: 90px;
}

/* ---- Shared base for all mascot admonitions ----
   Override Material's smaller admonition font so mascot text
   matches body text exactly. */
.md-typeset .admonition.mascot-welcome,
.md-typeset .admonition.mascot-thinking,
.md-typeset .admonition.mascot-tip,
.md-typeset .admonition.mascot-warning,
.md-typeset .admonition.mascot-celebration,
.md-typeset .admonition.mascot-encourage,
.md-typeset .admonition.mascot-neutral,
.md-typeset details.mascot-welcome,
.md-typeset details.mascot-thinking,
.md-typeset details.mascot-tip,
.md-typeset details.mascot-warning,
.md-typeset details.mascot-celebration,
.md-typeset details.mascot-encourage,
.md-typeset details.mascot-neutral {
  font-size: inherit;
}

/* ---- Welcome (chapter openings) — teal ---- */
.md-typeset .admonition.mascot-welcome,
.md-typeset details.mascot-welcome {
  border-color: var(--mascot-primary);
  background-color: var(--mascot-bg);
}
.md-typeset .mascot-welcome > .admonition-title,
.md-typeset .mascot-welcome > summary {
  background-color: var(--mascot-primary);
  color: white;
}

/* ---- Thinking (key concepts) — slate ---- */
.md-typeset .admonition.mascot-thinking,
.md-typeset details.mascot-thinking {
  border-color: var(--mascot-secondary);
  background-color: #eceff1;
}
.md-typeset .mascot-thinking > .admonition-title,
.md-typeset .mascot-thinking > summary {
  background-color: var(--mascot-secondary);
  color: white;
}

/* ---- Tip (hints) — amber, the site accent ---- */
.md-typeset .admonition.mascot-tip,
.md-typeset details.mascot-tip {
  border-color: #b8860b;
  background-color: #fff8e1;
}
.md-typeset .mascot-tip > .admonition-title,
.md-typeset .mascot-tip > summary {
  background-color: #b8860b;
  color: white;
}

/* ---- Warning (pitfalls) — muted red.
   Deliberately softer than a standard error red: this book's warnings
   are about common misreadings, not danger. ---- */
.md-typeset .admonition.mascot-warning,
.md-typeset details.mascot-warning {
  border-color: #b3574a;
  background-color: #fbeae7;
}
.md-typeset .mascot-warning > .admonition-title,
.md-typeset .mascot-warning > summary {
  background-color: #b3574a;
  color: white;
}

/* ---- Celebration — deep plum.
   Celebration art usually carries pale highlights that vanish on light
   backgrounds, so the body stays dark and the text flips light. ---- */
.md-typeset .admonition.mascot-celebration,
.md-typeset details.mascot-celebration {
  border-color: #4a148c;
  background-color: #311b4f;
  color: #f3e5f5;
}
.md-typeset .mascot-celebration > .admonition-title,
.md-typeset .mascot-celebration > summary {
  background-color: #4a148c;
  color: white;
}
.md-typeset .mascot-celebration a { color: #ce93d8; }

/* ---- Encourage (hard content) — blue ---- */
.md-typeset .admonition.mascot-encourage,
.md-typeset details.mascot-encourage {
  border-color: #0277bd;
  background-color: #e1f5fe;
}
.md-typeset .mascot-encourage > .admonition-title,
.md-typeset .mascot-encourage > summary {
  background-color: #0277bd;
  color: white;
}

/* ---- Neutral (general purpose) — slate grey ---- */
.md-typeset .admonition.mascot-neutral,
.md-typeset details.mascot-neutral {
  border-color: #546e7a;
  background-color: #eceff1;
}
.md-typeset .mascot-neutral > .admonition-title,
.md-typeset .mascot-neutral > summary {
  background-color: #546e7a;
  color: white;
}

/* ---- Title: left-aligned text, no default Material icon ---- */
.md-typeset [class*="mascot-"] > .admonition-title,
.md-typeset [class*="mascot-"] > summary {
  text-align: left;
  padding-left: 0.8rem;
}
.md-typeset [class*="mascot-"] > .admonition-title::before,
.md-typeset [class*="mascot-"] > summary::before {
  display: none;
}

/* ---- Mascot image floated left of the admonition body ---- */
.mascot-admonition-img {
  float: left;
  width: var(--mascot-size);
  height: var(--mascot-size);
  margin: 0 .5em 0 0;
  object-fit: contain;
  pointer-events: none;
}

@media screen and (max-width: 480px) {
  :root { --mascot-size: 64px; }
}

/* ---- Header logo.
   The scaffold's extra.css backs the logo with a mid-grey disc, which Bhindi's
   grey coat vanishes into. Warm off-white gives the coat something to sit
   against, and the head crop stays legible at 60px. ---- */
.md-header__button.md-logo img {
  background-color: #fdfcf8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
}