/* Operation LAPIS Teacher Guide -- visual skin
   Brand tokens from the Pericles Group Foundation page.
   Purple is the structural primary; LAPIS green marks CODEX / LAPIS-specific elements. */

:root {
  --lapis-purple: #442F5A;
  --lapis-purple-hover: #7A48AD;
  --lapis-green: #8cc63e;
  --lapis-green-tint: #f1f8e6;

  /* Approach colors. These mark the three approaches everywhere they appear:
     the key on the landing page and the tabs on every mission page. */
  --ap-latin-edge: #8cc63e;            /* Latin RPG: green */
  --ap-latin-fill: rgba(140, 198, 62, 0.16);
  --ap-latin-fill-strong: rgba(140, 198, 62, 0.30);
  --ap-english-edge: #d4a017;          /* English RPG: gold */
  --ap-english-fill: rgba(212, 160, 23, 0.16);
  --ap-english-fill-strong: rgba(212, 160, 23, 0.30);
  --ap-cyop-edge: #7A48AD;             /* Latin CYOP: purple */
  --ap-cyop-fill: rgba(122, 72, 173, 0.16);
  --ap-cyop-fill-strong: rgba(122, 72, 173, 0.30);
}

/* Light scheme */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #442F5A;
  --md-primary-fg-color--light: #7A48AD;
  --md-primary-fg-color--dark: #33234a;
  --md-accent-fg-color: #7A48AD;
  --md-typeset-a-color: #442F5A;
}

/* Dark scheme: lift the plum so it reads on slate */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #7A48AD;
  --md-primary-fg-color--light: #9b6fc7;
  --md-primary-fg-color--dark: #442F5A;
  --md-accent-fg-color: #9b6fc7;
  --md-typeset-a-color: #b692e0;
}

/* Header logo: override Material's 24px cap */
.md-header__button.md-logo img {
  height: 40px;
  width: auto;
}

/* Episode Overview blocks */
.md-typeset .ep-eq {
  background: var(--ap-english-fill-strong);
  border-left: 4px solid var(--ap-english-edge);
  padding: 0.875rem 1.25rem;
  margin: 0.75rem 0 1.25rem;
}
.md-typeset .ep-eq p {
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 500;
  margin: 0;
  color: var(--lapis-purple);
}
.md-typeset .ep-block {
  border-left: 4px solid transparent;
  padding: 0.75rem 1.25rem;
  margin: 0.75rem 0;
}
.md-typeset .ep-block > :last-child { margin-bottom: 0; }
.md-typeset .ep-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 0.5rem;
}
.md-typeset .ep-targets {
  background: var(--ap-latin-fill);
  border-left-color: var(--ap-latin-edge);
}
.md-typeset .ep-targets .ep-label { color: #3b6d11; }
.md-typeset .ep-eq .ep-label { color: #7a5500; }
.md-typeset .ep-grammar {
  background: var(--ap-cyop-fill);
  border-left-color: var(--ap-cyop-edge);
}
.md-typeset .ep-grammar .ep-label { color: var(--lapis-purple); }
.md-typeset .ep-actfl {
  background: rgba(33, 120, 209, 0.10);
  border-left-color: rgba(33, 120, 209, 0.65);
}
.md-typeset .ep-actfl .ep-label { color: #0c447c; }
.md-typeset .ep-narrative {
  background: rgba(68, 47, 90, 0.07);
  border-left-color: var(--lapis-purple);
}
.md-typeset .ep-narrative .ep-label { color: var(--lapis-purple); }
[data-md-color-scheme="slate"] .md-typeset .ep-eq .ep-label { color: #d4a017; }
[data-md-color-scheme="slate"] .md-typeset .ep-targets .ep-label { color: #8cc63e; }
[data-md-color-scheme="slate"] .md-typeset .ep-grammar .ep-label { color: var(--lapis-purple-hover); }
[data-md-color-scheme="slate"] .md-typeset .ep-eq p { color: var(--lapis-purple-hover); }
[data-md-color-scheme="slate"] .md-typeset .ep-actfl {
  background: rgba(56, 140, 220, 0.15);
  border-left-color: rgba(56, 140, 220, 0.7);
}
[data-md-color-scheme="slate"] .md-typeset .ep-actfl .ep-label { color: #85b7eb; }
[data-md-color-scheme="slate"] .md-typeset .ep-narrative .ep-label { color: var(--lapis-purple-hover); }

/* Headings: brand purple across all levels */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: var(--lapis-purple);
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
  color: var(--lapis-purple-hover);
}

/* CODEX backbone heading: green left accent (the LAPIS product mark) */
.md-typeset .lapis-codex {
  border-left: 4px solid var(--lapis-green);
  padding-left: 0.6rem;
}

/* Green-accented highlight box, echoing the Foundation .ol-highlight (VERBA etc.) */
.md-typeset .admonition.lapis,
.md-typeset details.lapis {
  border-left: 4px solid var(--lapis-green);
}
.md-typeset .lapis > .admonition-title,
.md-typeset .lapis > summary {
  background-color: var(--lapis-green-tint);
}
.md-typeset .lapis > .admonition-title::before,
.md-typeset .lapis > summary::before {
  background-color: var(--lapis-green);
  -webkit-mask-image: var(--md-admonition-icon--note);
          mask-image: var(--md-admonition-icon--note);
}

/* Slightly roomier reading measure, closer to the Foundation line-height */
.md-typeset { line-height: 1.7; }

/* ---- Approach key on the landing page ----
   A color legend, not buttons: no full border, no shadow, no hover lift. */
.approach-key {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 1rem 0 1.25rem;
}
.md-typeset .approach {
  border-radius: 8px;
  padding: 14px 16px;
  border-left: 5px solid transparent;
}
.md-typeset .approach > :first-child { margin-top: 0; }
.md-typeset .approach > :last-child { margin-bottom: 0; }
.md-typeset .approach-latin   { background: var(--ap-latin-fill);   border-left-color: var(--ap-latin-edge); }
.md-typeset .approach-english { background: var(--ap-english-fill); border-left-color: var(--ap-english-edge); }
.md-typeset .approach-cyop    { background: var(--ap-cyop-fill);    border-left-color: var(--ap-cyop-edge); }

/* ---- Approach tabs on every mission page ----
   Order is fixed by the authoring convention: 1 Latin RPG, 2 English RPG, 3 Latin CYOP.
   Inactive tabs carry a faint wash of their color; the active tab is stronger. */
.md-typeset .tabbed-labels > label:nth-child(1) { background: var(--ap-latin-fill); }
.md-typeset .tabbed-labels > label:nth-child(2) { background: var(--ap-english-fill); }
.md-typeset .tabbed-labels > label:nth-child(3) { background: var(--ap-cyop-fill); }

.md-typeset .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > label:nth-child(1) {
  background: var(--ap-latin-fill-strong);
  box-shadow: inset 0 -3px 0 var(--ap-latin-edge);
}
.md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2) {
  background: var(--ap-english-fill-strong);
  box-shadow: inset 0 -3px 0 var(--ap-english-edge);
}
.md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > label:nth-child(3) {
  background: var(--ap-cyop-fill-strong);
  box-shadow: inset 0 -3px 0 var(--ap-cyop-edge);
}

/* ---- Content links: light pill treatment ----
   So inline links read as links without underlines fighting the prose.
   Scoped to .md-typeset, so nav, tabs, and chrome are untouched; the
   permalink and footnote anchors are excluded. */
.md-typeset a:not(.headerlink):not(.footnote-backref) {
  background: rgba(68, 47, 90, 0.08);
  padding: 0.1em 0.5em;
  border-radius: 1em;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.md-typeset a:not(.headerlink):not(.footnote-backref):hover {
  background: var(--ap-cyop-fill);
  color: var(--md-primary-fg-color--light);
}

[data-md-color-scheme="slate"] .md-typeset a:not(.headerlink):not(.footnote-backref) {
  background: rgba(182, 146, 224, 0.16);
}
[data-md-color-scheme="slate"] .md-typeset a:not(.headerlink):not(.footnote-backref):hover {
  background: rgba(182, 146, 224, 0.26);
}