/* Gitden & Namo default to 16px font-size; bump it to 20px (125%) */
body.gitden-reader,
body.namo-epub-library {
  font-size: 125%;
}

/* Gitden doesn't give us much margin, so let's match Kindle */
body.gitden-reader {
  margin: 0 25pt;
}

/* Namo has the same margin problem, except setting side margins doesn't work */
/*body.namo-epub-library > section.chapter {
  margin: 0 25pt;
}*/

/* Use tighter margins and smaller font (18px) on phones (Nexus 4 and smaller) */
@media only screen and (max-device-width: 768px) and (max-device-height: 1280px),
only screen and (max-device-width: 1280px) and (max-device-height: 768px) {
  body.gitden-reader,
  body.namo-epub-library {
    font-size: 112.5%;
  }

  body.gitden-reader {
    margin: 0 5pt;
  }

  /*body.namo-epub-library > section.chapter {
    margin: 0 5pt;
  }*/
}

body h1, body h2, body h3:not(.list-heading), body h4, body h5, body h6,
h1 :not(code), h2 :not(code), h3:not(.list-heading) :not(code), h4 :not(code), h5 :not(code), h6 :not(code) {
  /* !important required to override custom font setting in Kindle / Gitden / Namo */
  /* Gitden requires the extra weight of a parent selector; it also makes headings bold when custom font is specified */
  /* Kindle and Gitden require the override on heading child elements */
  font-family: "M+ 1p", sans-serif !important;
}

/* QUESTION what about nested elements inside code? */
body code, body kbd, body pre, pre :not(code) {
  /* !important required to override custom font setting in Kindle / Gitden / Namo */
  /* Gitden requires the extra weight of a parent selector */
  /* Kindle and Gitden require the override on pre child elements */
  font-family: "M+ 1mn", monospace !important;
}

@media amzn-kf8 {
  /* Kindle does its own margin management, so don't use an explicit margin */
  /*body {
    margin: 0 !important;
  }*/

  /* text-rendering is the only way to enable kerning in Kindle (and Calibre, though it seems to kern automatically) */
  /* personally, I think Kindle overdoes kerning, but we're running with it for now */
  /* text-rendering: optimizeLegibility kills certain Kindle eInk devices */
  /*h1, h2, h3, h4, h5, h6,
  body p, li, dd, blockquote > footer,
  th, td, figcaption, caption {
    text-rendering: optimizeLegibility;
  }*/

  /* hack line height of subtitle using floats on Kindle */
  h1.chapter-title .subtitle {
    margin-top: -0.2em;
    margin-bottom: 0.3em; /* compensate for reduced line height */
  }

  /* NOTE using b instead of span since Firefox ePubReader applies immutable styles to span */
  h1.chapter-title .subtitle > b {
    float: left;
    display: inline-block;
    margin-bottom: -0.3em; /* reduce the line height */
    padding-right: 0.2em; /* spacing between words */
  }

  h1.chapter-title .subtitle > b:last-child {
    padding-right: 0;
  }
  
  h1.chapter-title .subtitle::after {
    display: table;
    content: ' ';
    clear: both;
  }
}

.chapter-header p.byline {
  height: auto; /* Aldiko requires this value to be 0; reset it for all others */
}

/* Font-based icons */
.icon {
  display: inline-block;
  /* !important required to override custom font setting in Kindle (since .icon can appear inside a span) */
  font-family: "FontAwesome" !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1;
}

.icon-1_5x {
  padding: 0 0.25em;
  -webkit-transform: scale(1.5, 1.5);
  transform: scale(1.5, 1.5); 
}

.icon-2x {
  padding: 0 0.5em;
  -webkit-transform: scale(2, 2);
  transform: scale(2, 2); 
}

.icon-small {
  font-size: 0.85em;
  vertical-align: 0.075em;
}

.icon-1_5em {
  font-size: 1.5em;
}

.icon-2em {
  font-size: 2em;
}

.icon-3em {
  font-size: 3em;
}

.icon-4em {
  font-size: 4em;
}

.icon-rotate-90 {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.icon-rotate-90i {
  -webkit-transform: scale(-1, 1) rotate(90deg);
  transform: scale(-1, 1) rotate(90deg);
}

.icon-rotate-180 {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.icon-rotate-180i {
  -webkit-transform: scale(-1, 1) rotate(180deg);
  transform: scale(-1, 1) rotate(180deg);
}

.icon-rotate-270 {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}

.icon-rotate-270i {
  -webkit-transform: scale(-1, 1) rotate(270deg);
  transform: scale(-1, 1) rotate(270deg);
}

.icon-flip-h {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.icon-flip-v {
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1);
}