/* @import must come before any rule, so it leads the file. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Egyptian+Hieroglyphs&display=swap');

/* ------------------------------------------------------------------
   Book-local styles for Mathematics for Elementary Educators.
   Kept separate from obooks.scss, which is overwritten from the obooks
   repo's brand/ folder on every publish.
   ------------------------------------------------------------------ */

/* Egyptian numerals as real characters rather than a 574x40 screenshot:
   crisp at any zoom, selectable, and announced by screen readers.
   Codepoints are the Gardiner numeral signs, verified against what the page
   actually renders (Wikipedia's table lists several of these incorrectly):
   Z15 U+133E4 (1), V20 U+13386 (10), V1 U+13362 (100), M12 U+131BC (1,000),
   D50 U+130AD (10,000), I8 U+13190 (100,000), C11 U+13068 (1,000,000). */
.egy {
  font-family: "Noto Sans Egyptian Hieroglyphs", "Segoe UI Historic",
               "Noto Sans", sans-serif;
  font-size: 2.2rem;
  line-height: 1.1;
  vertical-align: middle;
}

/* Lettered sub-lists.

   The exercises pose a problem and then break it into parts. In the source
   those parts are lettered lists, which Pandoc renders as <ol type="a"> —
   and browsers label that "a." HTML has no way to ask for the parenthesised
   form, so draw the marker ourselves: (a), (b), (c).

   Two traps, both hit once already:

   1. CSS matches the `type` attribute CASE-INSENSITIVELY, so ol[type="a"]
      also selects ol[type="A"]. A separate uppercase rule would simply win
      by source order and render everything (A) (B) (C).
   2. The [type="a" s] case-sensitivity flag is NOT valid in this browser —
      it throws "is not a valid selector" and the whole block is discarded,
      leaving no markers at all.

   So: one rule, lowercase only. The imported document contains no
   uppercase-lettered lists, so nothing is lost. */
ol[type="a"] {
  list-style: none;
  counter-reset: alpha-item;
  padding-left: 2.4em;
}

ol[type="a"] > li {
  counter-increment: alpha-item;
  position: relative;
}

ol[type="a"] > li::before {
  content: "(" counter(alpha-item, lower-alpha) ")";
  position: absolute;
  left: -2.4em;
  width: 2em;
  text-align: right;
  /* Marker colour follows the surrounding text in both themes. */
  color: inherit;
}

/* Figures imported from the course document can be wide; keep them inside
   the text column rather than letting them set the page width. */
.quarto-figure img,
p > img {
  max-width: 100%;
  height: auto;
}