/**
 * iA Writer core.css:
 * Base styles for all templates
 *
 * - Generic
 * - Base
 * - Objects
 *
 * Notes:
 * - CSS load order: normalize.css, core.css (base styles), style.css (theme styles)
 * - Margins are in %s (of viewport or container width) via calc() to scale fluidly
 * - Margin/padding scaling is declared in calc() for container width: 1080px, then stopped via @media
 * - font-size is set on body using px for breakpoints, then rems or ems per element to scale
 */

/* TOOLS */

/* box-sizing */

* {
  box-sizing: border-box;
}

/* GENERIC */

/* Fonts: NittiPro used for code across templates */

/* Regular versions on OS X, slim versions on iOS (assumes iOS will never have regular versions) */
@font-face {
  font-family: "NittiPro";
  font-weight: 300;
  font-style: normal;
  src: local("NittiPro-SemiLight"), local("NittiPro-SemiLightSlim");
}

@font-face {
  font-family: "NittiPro";
  font-weight: 300;
  font-style: italic;
  src: local("NittiPro-SemiLightItalic"), local("NittiPro-SemiLightItalicSlim");
}

@font-face {
  font-family: "NittiPro";
  font-weight: 500;
  font-style: normal;
  src: local("NittiPro-Medium"), local("NittiPro-MediumSlim");
}

@font-face {
  font-family: "NittiPro";
  font-weight: 500;
  font-style: italic;
  src: local("NittiPro-MediumItalic"), local("NittiPro-MediumItalicSlim");
}

/* BASE */

html,
a {
  color: #1a1a1a;
}

html {
  background-color: #f9f9f9; /* iOS background color */
}

body {
  box-sizing: content-box; /* So measure calculations don’t need to include gutters */
  margin: 0 auto;
  padding: 0 12px; /* 12px gutters to match iPhone 5 Title bar UI */
  word-wrap: break-word;
  text-rendering: optimizeLegibility; /* NOTE May cause performance issues */
  /* font-kerning is enabled by default in OS X Safari 7+ */
  -webkit-font-kerning: normal;
  font-kerning: normal;
}

/* Accessibility sizing for iOS phones */
.content-size-xs > body {
  font-size: 80%;
}

.content-size-s > body {
  font-size: 87%;
}

.content-size-m > body {
  font-size: 93%;
}

.content-size-xl > body {
  font-size: 113%;
}

.content-size-xxl > body {
  font-size: 127%;
}

.content-size-xxxl > body {
  font-size: 140%;
}

.content-size-accessibility-m > body {
  font-size: 153%;
}

.content-size-accessibility-l > body {
  font-size: 167%;
}

.content-size-accessibility-xl > body {
  font-size: 180%;
}

.content-size-accessibility-xxl > body {
  font-size: 193%;
}

.content-size-accessibility-xxxl > body {
  font-size: 207%;
}

body > *:first-child {
   margin-top: 0;
}

/* iOS gutters responsive adjustments */

/* iPhone 6 */
@media screen and (min-width: 375px) {
  body {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* iPhone 6+ */
@media screen and (min-width: 414px) {
  body {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media screen and (min-width: 480px) {
  body {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media screen and (min-width: 600px) {
  body {
    padding-left: 48px;
    padding-right: 48px;
  }
}

/* iPad triggered on 760 not 768 to work with fonts */
@media screen and (min-width: 760px) and (max-device-width: 1024px) {
  body {
    padding-left: 70px;
    padding-right: 70px;
  }
}

/* Responsive adjustments for OS X */
@media screen and (min-device-width: 1152px) {
  html {
    background-color: #fcfcfc;
  }

  body {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media screen and (min-width: 480px) and (min-device-width: 1152px) {
  body {
    padding-left: 48px;
    padding-right: 48px;
  }
}

@media screen and (min-width: 640px) and (min-device-width: 1152px) {
  body {
    padding-left: 72px;
    padding-right: 72px;
  }
}


/* Headings */

body > h1:first-child {
  margin-top: 0; /* Controlled via body padding-top */
}

/* Unify space above initial heading in blockquotes (based on 31px line-height) */
blockquote > :-webkit-any(h1, h2, h3, h4, h5):first-child {
  margin-top: calc((21 / 1080) * 100%); /* 20px when width: 1080px */
  padding-top: calc((10 / 1080) * 100%);/* 10px when width: 1080px */
}

@media screen and (min-width: 1080px) {
  blockquote > :-webkit-any(h1, h2, h3, h4, h5):first-child {
    margin-top: 21px;
    padding-top: 10px;
  }
}

/* Display h6 as run-in by default when followed by p
   (h6 is no longer run-in if content is greater than one line long. Display can break if consecutive h6s are used before a <1 line p)
   Note: Specced ways to do this display:run-in and :has() are not implemented at time of writing */
h6 {
  float: left;
  margin: 0 0.5em 0 0; /* 9px @ font-size: 18px */
}

  /* Clear all siblings after floated h6… */
h6 ~ * {
  clear: both;
}

  /* …except immediately following paragraph */
h6 + p {
  clear: none;
}

/* Responsive list padding (default used by Sans, overridden for Mono and Serif) */
ul,
ol {
  padding-left: 1.5rem; /* 22.5px for font-size: 15px @320px. rem works better for RWD than % */
}

@media screen and (min-width: 760px) {
  /* Left padding based on 40px browser default */
  ul,
  ol {
    padding-left: 2.2222rem; /* ~40px for font-size: 18px. rem works better for RWD than % */
  }
}

/* HACK: Prevent empty list items collapsing
   Note this doesn’t work for paragraph lists, although we can fix via class or once has() is supported with: `ul li:not:has(p)::after` */
ul li:empty::after,
.task-list-item:last-child::after {
  content: "";
  display: inline-block;
}

dd {
  -webkit-margin-start: 2.2222rem; /* ~40px for font-size: 18px. rem works better for RWD than % */
  margin-start: 2.2222rem;
}

/* Remove vertical margins on nested lists */
:-webkit-any(li, dt, dd, th, td) > :-webkit-any(ul, ol, dl) {
  margin-top: 0;
  margin-bottom: 0;
}

/* img is wrapped in p on export by default, so leave as inline */
img {
  max-width: 100%;
  vertical-align: top;
}

figure img {
  display: block;
}

hr {
  clear: both;
  margin: 3rem auto 3rem; /* Extra-large for visibility in mini-map (<100px wide) */
  border: 0;
  border-bottom: 1px #e6e6e6 solid;
}

/* More reasonable default to override per template */
@media screen and (min-width: 100px) {
  hr {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}

/* Horizontal rule responsive adjustments */
@media screen and (min-width: 1080px) {
  hr {
    margin-top: 46px;
    margin-bottom: 46px;
  }
}


/* table-layout: fixed; produces equal-width columns, which is generally a better result */
table {
  table-layout: fixed;
  width: 100%;
  border-top: 1px #e6e6e6 solid;
  border-bottom: 1px #e6e6e6 solid;
  border-collapse: collapse;
  font-size: calc((15 / 18) * 1rem); /* 0.8333rem = 15px @ font-size: 18px */
  line-height: calc(24 / 15); /* 1.6 = 24px @ font-size: 15px */
}

caption {
  border-bottom: 1px solid #e6e6e6;
  padding-top: calc((10 / 1080) * 100%); /* 10px when width: 1080px */
  padding-bottom: calc((10 / 1080) * 100%); /* 10px when width: 1080px */
  font-size: 1em;
}

tbody {
  border-top: 1px #e6e6e6 solid;
}

th,
td {
  margin-right: calc((30 / 1080) * 100%); /* 30px when width: 1080px */
  padding: calc((10 / 1080) * 100%) 0 calc((10 / 1080) * 100%); /* 10px 0 10px when width: 1080px */
  vertical-align: top;
  text-align: left;
}

/* Table cell responsive adjustments */
@media screen and (min-width: 1080px) {
  caption,
  th,
  td {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  th,
  td {
    margin-right: 30px;
  }
}

th:last-of-type,
td:last-of-type {
  margin-right: 0;
}

/* Code */

pre,
code,
kbd {
  border: 1px solid #e6e6e6;
  border-radius: 2px;
  white-space: pre-wrap;
  background-color: #e6e6e6;
}

pre {
  padding: 1rem;
  overflow: hidden;
}

pre code {
  padding: 0;
}

code,
samp,
kbd {
  font-family: "NittiPro", "Keyboard", monospace;
  font-size: calc((15 / 19) * 1em); /* 0.7895em = 15px @ font-size: 19px (based on 12/16px @640 = 15.2px). Values for Serif (smallest), others need overrides */
  font-weight: 200; /* Light weight for non-Retina (@1x) */
}

/* Semi-light weight for Retina (@2x) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), print {
  code,
  samp,
  kbd {
    font-weight: 300;
  }
}

/* Use 500 not 700 for code that inherits bold. This is supplimented for titles etc per template  */
:-webkit-any(strong, bold, th) :-webkit-any(code, samp, kbd) {
  font-weight: 500;
}

code,
kbd {
  padding: 0.08333em 0.1667em 0.1667em; /* ~1px 2px 2px when font-size: 12px, taking 1px border into account */
}

/* Prevent code line-height increasing heading line-height */
:-webkit-any(h1, h2, h3, h4, h5, h6) > code, kbd {
  line-height: normal;
}

kbd {
  border-color: #dedede;
}


/* Print styles */
@media print {

  *,
  *:before,
  *:after {
    color: #000 !important; /* black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html {
    margin: 0; /* Override for safety */
    padding: 0; /* Override for safety */
    font-size: 9pt; /* ← needs to be set per template to counter responsive typography */
    background: transparent !important; /* Only on html due to checkboxes */
  }

  body {
    margin: 0 auto; /* Set all values for safety */
    padding: 12pt 50pt; /* Set all values for safety */
  }

  /* Make sure there’s no margin-top on first element */
  body > :first-child {
    margin-top: 0;
  }

  /* h6 excluded as the page-break-inside rule conflicts with page-initial inline h6 when printed */
  h1,
  h2,
  h3,
  h4,
  h5,
  img,
  figure {
    page-break-inside: avoid;
    page-break-after: avoid; /* Not supported by Webkit at time of writing, ref: https://bugs.webkit.org/show_bug.cgi?id=5097 */
  }

  p {
    /* Not supported by Webkit at time of writing, ref: https://bugs.webkit.org/show_bug.cgi?id=39735 */
    widows: 3;
    orphans: 3;
  }

  hr {
    border-bottom-color: #000 !important;
  }

  /* Underline on superscript footnote number, which when clicked shows an error */
  .footnote {
    text-decoration: none;
  }

  /* Underline for table of contents on printed pages */
  .TOC a {
    text-decoration: none;
  }

  /* Link which allows you to go back to the text from footnote—useless on a printed page */
  .reversefootnote {
    display: none;
  }

  /* Code has a lighter background on printed pages */
  code, pre, kbd {
    border-color: #f7f7f7;
    background-color: #f7f7f7;
  }
}


/* OBJECTS */

/* Center Headings
   Center h1-h5 headings, via the Centered Headings setting */
.center-headings :-webkit-any(h1, h2, h3, h4, h5) {
  text-align: center;
}

/* Indent Paragraphs
   Indent the first line of sequential paragraphs, via the Indent Paragraph setting */
.indent-paragraphs p + p {
  margin-top: 0;
  text-indent: 1.2em; /* Tweaked per template */
}

/* Night Mode */

.night-mode,
.night-mode a {
  color: #dedede; /* iOS text color */
}

.night-mode {
  background-color: #101010; /* iOS background color */
}

.night-mode pre,
.night-mode code,
.night-mode kbd {
  background-color: #333331; /* For iOS */
  border-color: #333331;
}

.night-mode kbd {
  border-color: #464643;
}

/* Colors for OS X */
@media screen and (min-device-width: 1152px) {
  .night-mode,
  .night-mode a {
    color: #cccccc; /* OS X text color */
  }

  .night-mode {
    background-color: #101010;
  }

  .night-mode pre,
  .night-mode code,
  .night-mode kbd {
    background-color: #464643;
    border-color: #464643;
  }

  .night-mode kbd {
    border-color: #666;
  }
}

/* Fake sub-pixel lines */
.night-mode hr,
.night-mode caption,
.night-mode tbody th,
.night-mode td {
  border-bottom-color: #666;
}

.night-mode tbody th,
.night-mode td {
  border-top-color: #666;
}

/* Footnotes */

.footnotes {
  margin-top: calc((45 / 1080) * 100%); /* 45px when width: 1080px (excluding padding) */
  page-break-before: avoid;
  font-size: calc((16 / 18) * 1rem); /* 0.8889rem, 16/18px @1080px wide, default for Monospace */
  line-height: calc(27 / 16); /* 1.6875, 27px @1080px wide, default for Monospace */
}

.footnotes hr {
  margin-top: calc((60 / 760) * 100%); /* 60px when width: 1080px */
  page-break-after: avoid;
}

.footnotes p {
  margin: 0 auto;
}

/* Remove underline on .reversefootnote arrow for iOS, as it’s turned into an emoji */
@media screen and (max-device-width: 1024px) {
  .reversefootnote {
    text-decoration: none;
  }
}

/* Footnotes responsive adjustments when width: 1080px */
@media screen and (min-width: 1080px) {
  .footnotes {
    margin-top: 45px;
  }

  /* Hanging footnote ordinals */
  .footnotes ol {
    padding-left: 0;
  }

  .footnotes hr {
    margin-top: 60px;
  }
}

/* Task Lists
   Left padding based on 40px default */

/* Position ordinal counters so 1-9 left-align with left content edge. Subsequent counters will begin in gutter. */
ol .task-list-item {
  margin-left: -0.6667rem; /* ~-10px @ font-size: 15px */
  padding-left: 0.6667rem; /* ~10px @ font-size: 15px */
}

/* Hide default bullets for unordered task lists. */
ul .task-list-item {
  list-style-type: none;
}

/* Hide gen-content bullets for unordered task lists. */
ul .task-list-item:before {
  display: none;
}

.task-list-item-checkbox {
  float: left; /* Removes from flow in case of paragraph list items */
  width: 1.6rem; /* Same as p line-height (changing width/height affects svg size) */
  height: 1.6rem; /* Same as width */
  margin: 0 0 0 -1.6rem; /* 0s to overwrite user agent styles */
  border: none; /* Otherwise iPhone draws a border */
  font-size: 1rem; /* Required to overwrite user agent styles, set to same as p */
  background-image: url('box.svg');
  background-repeat: no-repeat;
  background-position: 40% 40%; /* x=roughly align with bullets and between ordinal and text, y=4px down to roughly align to baseline. */
  background-size: 50% 50%; /* Desired size 12px / 21px line-height for Preview */
  background-color: transparent;
  -webkit-print-color-adjust: exact; /* Prevents from hiding when printed */
  -webkit-appearance: none; /* Disables system checkbox image */
  opacity: 1.0; /* Otherwise they are 0.4 on iPhone, where it applies disabled effect even with above */
}

.task-list-item-checkbox:checked {
  background-image: url('check.svg');
}

/* Checkbox color in Night Mode (=text color) */
.night-mode .task-list-item-checkbox {
  background-image: url('box-night-mode-ios.svg');
}

.night-mode .task-list-item-checkbox:checked {
  background-image: url('check-night-mode-ios.svg');
}

/* OS X color */
@media screen and (min-device-width: 1152px) {
  .night-mode .task-list-item-checkbox {
    background-image: url('box-night-mode-osx.svg');
  }

  .night-mode .task-list-item-checkbox:checked {
    background-image: url('check-night-mode-osx.svg');
  }
}

.header, .footer {
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
}

.title {
  margin-top: 40%;
}

address {
    text-align: right;
    white-space: pre;
}