/* Styles for the pages under /books/. Only those pages link this file. */

/* A book page: the cover floats beside the header on wide screens. */
.book-cover {
  float: right;
  width: 11rem;
  margin: 0.4rem 0 1rem 1.5rem;
}
.book-cover img {
  display: block;
  width: 100%;
  height: auto;
}
#quarto-document-content .book-cover p {
  margin: 0;
}
@media (max-width: 575.98px) {
  .book-cover {
    float: none;
    width: 8rem;
    margin: 0 auto 1rem;
  }
}

/* The books page: a thumbnail beside the text of each entry. */
#quarto-document-content p > a > img[src$="/cover.jpg"] {
  float: left;
  width: 7rem;
  height: auto;
  margin: 0.25rem 1.25rem 0.75rem 0;
}
@media (max-width: 575.98px) {
  #quarto-document-content p > a > img[src$="/cover.jpg"] {
    width: 5.5rem;
    margin-right: 1rem;
  }
}

/* The links of a book on one row under its authors: icons for the PDF, the online edition and the source on GitHub, then
   Amazon's "Available at Amazon" badge for the paperback. Amazon's guidelines forbid any change to its badge, so it is only
   scaled. The image has clear space built in (a quarter of its height above and below, a quarter of its width on each
   side): the negative vertical margins take the space above and below back into the row, and the negative margin on its
   left brings it closer to the item before it, which keeps the link of that item on top (z-index) where the empty clear
   space of the badge lies over it. */
#quarto-document-content p > a > img[src$="/icon-pdf.svg"],
#quarto-document-content p > a > img[src$="/icon-web.svg"],
#quarto-document-content p > a > img[src$="/icon-github.svg"] {
  position: relative;
  z-index: 1;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 0.1rem;
  vertical-align: middle;
}
#quarto-document-content p > a > img[src$="/available-at-amazon.png"] {
  width: auto;
  height: 3.6rem;
  margin: -0.9rem 0 -0.9rem -1.1rem;
  vertical-align: middle;
}
@media (max-width: 575.98px) {
  /* On a phone the badge often wraps onto a second line: its clear space above it is then the space between the lines. */
  #quarto-document-content p > a > img[src$="/available-at-amazon.png"] {
    margin-top: 0;
  }
}

/* The Zenodo DOI badge is one of the items of the row of links. On a book page it moves under the cover, as wide as the
   cover; a browser without :has() ignores both rules and leaves it in the row. */
#quarto-document-content p > a > img[src*="/badge/DOI/"] {
  position: relative;
  z-index: 1;
  width: auto;
  height: 1.1rem;
  margin: 0 0.1rem;
  vertical-align: middle;
}
#quarto-document-content .book-cover ~ section > p > a:has(> img[src*="/badge/DOI/"]) {
  float: right;
  clear: right;
  width: 11rem;
  margin: -0.6rem 0 1rem 1.5rem;
}
#quarto-document-content .book-cover ~ section > p > a:has(> img[src*="/badge/DOI/"]) > img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}
@media (max-width: 575.98px) {
  /* On a phone the cover is above the title, so the DOI badge stays in the row. */
  #quarto-document-content .book-cover ~ section > p > a:has(> img[src*="/badge/DOI/"]) {
    float: none;
    width: auto;
    margin: 0;
  }
  #quarto-document-content .book-cover ~ section > p > a:has(> img[src*="/badge/DOI/"]) > img {
    display: inline;
    width: auto;
    height: 1.1rem;
    margin: 0 0.1rem;
  }
}

/* The subtitle of a book is a <small> inside its heading, the H1 of a book page and the H2 of an
   entry on the books page: on its own line, in a smaller font. */
#quarto-document-content h1 small,
#quarto-document-content h2 small {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.5em;
  font-weight: 400;
  line-height: 1.3;
  color: #6c757d;
}
/* An H2 is smaller than the H1, so the same size on the page takes a larger share of it. */
#quarto-document-content h2 small {
  font-size: 0.6em;
}
/* No anchor icon after a heading with a subtitle: it would add an empty line under the subtitle. */
#quarto-document-content :is(h1, h2):has(> small) > a.anchorjs-link {
  display: none;
}

/* The two footnotes at the end of a book page: small print under a rule. */
#quarto-document-content hr {
  margin: 2.5rem 0 1rem;
}
#quarto-document-content p > small {
  color: #6c757d;
}

/* Spacing for headings and statements. */
#quarto-document-content h2 {
  margin-top: 2.5rem;
  clear: both;
}
#quarto-document-content h3 {
  margin-top: 2rem;
}
#quarto-document-content h4 {
  margin-top: 1.75rem;
}
#quarto-document-content p {
  margin-bottom: 1.1rem;
  line-height: 1.65;
}
#quarto-document-content li {
  margin-bottom: 0.4rem;
  line-height: 1.6;
}

/* Long formulas scroll inside their own block instead of widening the page on a phone. */
#quarto-document-content mjx-container[display="true"] {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
#quarto-document-content p,
#quarto-document-content ul,
#quarto-document-content ol {
  overflow-x: auto;
  overflow-y: hidden;
}
#quarto-document-content p:has(> a > img) {
  overflow: visible;
}