/* A Turtle Introduction to Python: colour theme */

:root {
  --deep-teal: #00696B;
  --teal: #00897B;
  --light-teal: #9FF0E6;
  --pale-teal: #80D8D0;
  --purple: #8400FF;
  --turtle-green: #4D8A00;
  --light-blue: #8AB4F8;
  --error-red: #D00000;
}

/* Light mode */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--deep-teal);
  --md-primary-fg-color--light: var(--teal);
  --md-primary-fg-color--dark: var(--deep-teal);
  --md-primary-bg-color: #FFFFFF;
  --md-accent-fg-color: var(--deep-teal);
  --md-accent-fg-color--transparent: rgba(0, 105, 107, 0.1);
  --md-typeset-a-color: var(--deep-teal);
  --heading-colour: var(--deep-teal);
}

/* Dark mode */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--deep-teal);
  --md-primary-fg-color--light: var(--teal);
  --md-primary-fg-color--dark: var(--deep-teal);
  --md-primary-bg-color: #FFFFFF;
  --md-accent-fg-color: var(--pale-teal);
  --md-accent-fg-color--transparent: rgba(128, 216, 208, 0.1);
  --md-typeset-a-color: var(--light-blue);
  --heading-colour: var(--pale-teal);
}

/* Headings */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6,
.md-typeset h1 code,
.md-typeset h2 code,
.md-typeset h3 code,
.md-typeset h4 code {
  color: var(--heading-colour);
}

/* Header and tabs */
.md-header,
.md-tabs {
  background-color: var(--deep-teal);
  color: #FFFFFF;
}

.md-header {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.md-tabs__link {
  opacity: 1;
}

.md-tabs__item--active,
.md-tabs__link:hover,
.md-tabs__link:focus {
  color: var(--light-teal);
  border-bottom-color: var(--light-teal);
}

/* Side navigation */
.md-nav__link--active {
  font-weight: 700;
}

/* Search button */
.md-search__button {
  color: #333333;
  background-color: #FFFFFF;
}

.md-search__button:hover,
.md-search__button:focus {
  color: #333333;
  background-color: #FFFFFF;
}

.md-search__button:before {
  background-color: #333333;
}

.md-search__button:after {
  color: #333333;
  background: #EEEEEE;
}

/* Callouts: every type uses the same style, a light tint of its colour
   with a darker border of the same colour. Callout colours are shared
   across all the tutorial sites: learning intentions amber, terminology grey, PRIMM green,
   note purple, tip light blue, warning pink. */
.md-typeset :is(.admonition, details) { --callout: #448aff; }
.md-typeset .admonition.learn, .md-typeset details.learn { --callout: #ffb300; }
.md-typeset .admonition.terms, .md-typeset details.terms { --callout: #78909c; }
.md-typeset .admonition.primm, .md-typeset details.primm { --callout: #4d8a00; }
.md-typeset .admonition.note,  .md-typeset details.note  { --callout: #8400ff; }
.md-typeset .admonition.tip,   .md-typeset details.tip   { --callout: #4fc3f7; }
.md-typeset .admonition.warning, .md-typeset details.warning { --callout: #ff00a1; }

/* Lighter PRIMM and note colours in dark mode */
[data-md-color-scheme="slate"] .md-typeset .admonition.primm,
[data-md-color-scheme="slate"] .md-typeset details.primm { --callout: #7bc41a; }
[data-md-color-scheme="slate"] .md-typeset .admonition.note,
[data-md-color-scheme="slate"] .md-typeset details.note { --callout: #b77bff; }

.md-typeset :is(.admonition, details),
.md-typeset :is(.admonition, details):is(.primm, .note, .tip, .warning, .learn, .terms) {
  --callout-border: color-mix(in srgb, var(--callout) 70%, black);
  border: 0.075rem solid var(--callout-border);
  background-color: color-mix(in srgb, var(--callout) 12%, transparent);
}

.md-typeset :is(.admonition, details):is(.primm, .note, .tip, .warning, .learn, .terms):focus-within {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--callout) 12%, transparent);
}

.md-typeset :is(.admonition, details) > :is(.admonition-title, summary),
.md-typeset :is(.primm, .note, .tip, .warning, .learn, .terms) > :is(.admonition-title, summary) {
  background-color: transparent;
}

.md-typeset :is(.admonition, details) > :is(.admonition-title, summary)::before,
.md-typeset :is(.primm, .note, .tip, .warning, .learn, .terms) > :is(.admonition-title, summary)::before {
  background-color: var(--callout-border);
}

.md-typeset :is(.admonition, details) > :is(.admonition-title, summary)::after,
.md-typeset :is(.primm, .note, .tip, .warning, .learn, .terms) > :is(.admonition-title, summary)::after {
  color: var(--callout-border);
}

/* Callout icons (Lucide, drawn as masks in the callout's darker shade):
   learning intentions target, PRIMM flask, code explanation </>,
   tip light bulb, terminology open book. Warning keeps the theme's triangle alert. */
:root {
  --md-admonition-icon--learn: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>');
  --md-admonition-icon--primm: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2"/><path d="M6.453 15h11.094"/><path d="M8.5 2h7"/></svg>');
  --md-admonition-icon--code: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>');
  --md-admonition-icon--bulb: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>');
  --md-admonition-icon--terms: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v16"/><path d="M16 13h2"/><path d="M16 9h2"/><path d="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"/><path d="M6 13h2"/><path d="M6 9h2"/></svg>');
}

.md-typeset .learn > :is(.admonition-title, summary)::before {
  -webkit-mask-image: var(--md-admonition-icon--learn);
  mask-image: var(--md-admonition-icon--learn);
}

.md-typeset .primm > :is(.admonition-title, summary)::before {
  -webkit-mask-image: var(--md-admonition-icon--primm);
  mask-image: var(--md-admonition-icon--primm);
}

.md-typeset .note > :is(.admonition-title, summary)::before {
  -webkit-mask-image: var(--md-admonition-icon--code);
  mask-image: var(--md-admonition-icon--code);
}

.md-typeset .tip > :is(.admonition-title, summary)::before {
  -webkit-mask-image: var(--md-admonition-icon--bulb);
  mask-image: var(--md-admonition-icon--bulb);
}

.md-typeset .terms > :is(.admonition-title, summary)::before {
  -webkit-mask-image: var(--md-admonition-icon--terms);
  mask-image: var(--md-admonition-icon--terms);
}

/* Code blocks: a thin border around every code block */
.md-typeset div.highlight {
  margin: 1em 0;
  border: 0.075rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.4rem;
}

.md-typeset div.highlight .highlighttable,
.md-typeset div.highlight pre {
  margin: 0;
}

/* Error messages */
.md-typeset div.error {
  border: 0.075rem solid var(--error-red);
  border-radius: 0.2rem;
}

.md-typeset div.error .highlighttable,
.md-typeset div.error pre {
  margin: 0;
}

.md-typeset div.error pre code {
  color: var(--error-red);
}

[data-md-color-scheme="slate"] .md-typeset div.error {
  border-color: #FF6B6B;
}

[data-md-color-scheme="slate"] .md-typeset div.error pre code {
  color: #FF6B6B;
}

.md-typeset div.error .md-code__nav,
.md-typeset div.error button {
  display: none;
}