/* hack: sphinx-panels overrides sphinx-book-theme's overrriding of bootstrap.css's default design,
   which makes the sidebar end up wider than it needs to be.

   Re-re-override it with sphinx-book-theme's design.

   It's fragile to do it this way but it's just a small patch, hopefully it will be manageable.
*/
.bd-sidebar {
  background: #f3f5f6;
  max-width: 275px;
}

/* Expand the entire page to fill the screen; otherwise,
 * on large screens, the coloured #site-navigation leaves
 * an ugly white margin. This ensures it's always flush to the left.
 * see https://github.com/executablebooks/sphinx-book-theme/pull/420
 *
 * This isn't a super reliable solution, because it breaks part of
 * bootstrap's design, by changing its container-xl's behaviour. class to behave
 * What I actually want is to *replace* the container-xl class with
 * the container-fluid class, but I don't know how to do that without
 * forking and editing sphinx-book-theme itself.
 */
.bd-page-width {
  max-width: none;
}

/* Make sure the sub-ToC's header doesn't overflow its boundary.
 * This is mostly an issue on mobile.
 */
.bd-toc div.onthispage {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* fix the width of the leading emojis.
 * unfortunately we can't use a css class because sphinx rolls CSS classes
 * into the anchor links it generates for these titles.
 */
li:is(.toctree-l1, .toctree-l2, .toctree-l3, .toctree-l4) > a > span:nth-child(1) {
  display: inline-block;
  width: 1.5em;
  text-align: center;
}

/* space out lists */
#main-content .section li {
  padding: .1em 0;
}

/* make FontAwesome icons accessible to screen reader/plain text browsers
 * This is based on 'If an icon is not an interactive element' from https://fontawesome.com/v4.7/accessibility/
 */
i[class*="fa-"] ~ span {
  display: none;
}

#main-content :is(.fa,.fab) {
  /* style the social media icons */
  color: rgb(90, 90, 90);
  font-size: 1.4em;
}
#main-content :is(.fa,.fab).fa-twitter {
  /* style the social media icons */
  color: #04b5e3;
}
#main-content :is(.fa,.fab).fa-linkedin {
  /* style the social media icons */
  color: #0086c1;
}

/* make clicking anchor links scroll to their target instead of jump to them */
/* TODO: if restricted to only a { } this doesn't seem to take effect;
  using '*' might be too general though?

  see https://stackoverflow.com/questions/25020582/scrolling-to-an-anchor-using-transition-css3#47828777
*/
* {
 scroll-behavior: smooth;
}

/* All of our top-level titles have leading emojis,
 * which means the top level *titles* appear to line up with the second level titles.
 * So indent the second an extra step to clarify.
 */
.toctree-l2 {
  margin-left: 1em;
}

/* clear sphinx-book-theme's default whitespace around sidebar items */
.bd-sidebar-primary .sidebar-primary-items__end .sidebar-primary-item,
.bd-sidebar-primary .sidebar-primary-items__start .sidebar-primary-item {
  padding: 0;
}

/* vertically center table contents */
.table td {
  vertical-align: middle;
}
.table td p {
  margin-bottom: 0; /* override sphinx-book-theme's default p { margin-bottom: 1em }
                     * otherwise, vertical-align has no effect.
                     */
}

.bd-content .section table {
  display: table;  /* override sphinx-book-theme's ridiculous default of shrink-wrapping table content */
}

/* make sure embedded pdfs render in 16:9 aspect ratio.
 * You can't use CSS to directly calculate width in terms of height or vice versa,
 * but there's a clever hack involving a wrapper div:
 * https://www.w3schools.com/howto/howto_css_aspect_ratio.asp
 *
 */
div.pdf-container {
  position: relative;
  width: 60%;
}

div.pdf-container > div.r16-9 {
  /* Our PDFs are in 16:9 aspect ratio, or 56.25%. 59% gives that plus a bit of room for the toolbar. */
  padding-top: 59%;
}

div.pdf-container > div.r4-3 {
  /* 4:3, or 75% plus some leeway for the toolbar = 78% */
  padding-top: 78%;
}

div.pdf-container > div > object[type="application/pdf"] {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  width: 100%;
  height: 100%;
}

/* G-Translate */

.center-g-translate {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.center-g-translate > * {
  margin-right: 5px;
}

.center-g-translate > *:last-child {
  margin-right: 0;
}