/* =========================================
   NOOTO PRINT CSS
   A4 book / academic friendly
========================================= */

@media print {

  @page {
    size: A4;
    margin: 20mm 16mm 22mm 30mm;
  }

  :root {
    --print-font: var(--site-font, "Noto Serif JP", Georgia, "Times New Roman", serif);
    --print-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --print-size: 12pt;
    --print-line: 1.68;
  }

  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html,
  body {
    width: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #111 !important;
    font-family: var(--print-font) !important;
    font-size: var(--print-size) !important;
    line-height: var(--print-line) !important;
  }

  /* Hide UI */

  .site-nav,
  .site-footer,
  .MenuButton,
  .NootoDialog,
  .NootoDialogHead,
  .NootoPrintButton,
  .NootoMobileOnly,
  .NootoDesktopOnly {
    display: none !important;
  }

  /* Print selected section only */

  body.PrintOnlyVisible .NootoSection {
    display: none !important;
  }

  body.PrintOnlyVisible .NootoSection.IsPrintTarget {
    display: block !important;
    visibility: visible !important;
  }

  body.PrintOnlyVisible .NootoSection.IsPrintTarget h1 {
    break-before: auto !important;
    page-break-before: auto !important;
  }

  /* Layout reset */

  .wrap,
  main,
  .NootoContent,
  .NootoSection {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  /* Typography */

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--print-font) !important;
    color: #111 !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  h1 {
    font-size: 28pt !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    margin: 0 0 12mm !important;
    padding: 0 !important;
    page-break-before: always !important;
    break-before: page !important;
  }

  h1:first-of-type {
    page-break-before: auto !important;
    break-before: auto !important;
  }

  .NootoSection:first-of-type h1 {
    page-break-before: auto !important;
    break-before: auto !important;
  }

  h2 {
    font-size: 19pt !important;
    line-height: 1.25 !important;
    font-weight: 750 !important;
    margin: 14mm 0 5mm !important;
  }

  h3 {
    font-size: 15pt !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    margin: 10mm 0 4mm !important;
  }

  h4 {
    font-size: 13pt !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    margin: 8mm 0 3mm !important;
  }

  p,
  li,
  td,
  th,
  blockquote {
    font-size: 12pt !important;
    line-height: 1.68 !important;
    orphans: 3;
    widows: 3;
  }

  p {
    margin: 0 0 1em !important;
    text-align: left !important;
  }

  ul,
  ol {
    margin: 0 0 1em 1.4em !important;
    padding: 0 !important;
  }

  li {
    margin: 0 0 .35em !important;
  }

  strong,
  b {
    font-weight: 700 !important;
  }

  /* Links */

  a {
    color: #111 !important;
    text-decoration: none !important;
  }

  a[href^="http"]::after,
  a[href^="mailto"]::after,
  a[href^="tel"]::after {
    content: "" !important;
  }

  /* Images */

  img {
    display: block !important;
    max-width: 100% !important;
    max-height: 180mm !important;
    height: auto !important;
    margin: 8mm auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  p img,
  li img {
    display: inline-block !important;
    max-width: 100% !important;
    max-height: 120mm !important;
    margin: 0 !important;
    vertical-align: middle !important;
  }

  figure,
  .MdImage,
  .NootoImage {
    margin: 8mm 0 !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  figcaption {
    font-size: 10pt !important;
    line-height: 1.45 !important;
    color: #444 !important;
    text-align: center !important;
    margin-top: 2mm !important;
  }

  /* Tables */

  table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 8mm 0 !important;
    font-size: 10.5pt !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  th,
  td {
    border: 1px solid #ccc !important;
    padding: 2.5mm !important;
    vertical-align: top !important;
  }

  th {
    font-weight: 700 !important;
    background: #f2f2f2 !important;
  }

  /* Quotes */

  blockquote {
    margin: 6mm 0 !important;
    padding: 0 0 0 5mm !important;
    border-left: 1.5mm solid #ccc !important;
    color: #222 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  blockquote p {
    margin-bottom: .7em !important;
  }

  /* Code / Nooto tags examples */

  pre,
  code {
    font-family: var(--print-mono) !important;
    color: #111 !important;
    background: #f7f7f7 !important;
  }

  pre {
    display: block !important;
    overflow: visible !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;

    margin: 6mm 0 !important;
    padding: 5mm !important;

    font-size: 9.5pt !important;
    line-height: 1.45 !important;

    border: 1px solid #ccc !important;
    border-radius: 3mm !important;

    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  pre code {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;

    font-size: inherit !important;
    line-height: inherit !important;

    background: transparent !important;
    border: 0 !important;

    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow: visible !important;
  }

  code {
    padding: .12em .35em !important;
    border: 1px solid #ddd !important;
    border-radius: 1mm !important;
    font-size: 10pt !important;
  }

  pre code {
    border: 0 !important;
    border-radius: 0 !important;
  }

  /* Cards / buttons print */

  .NootoCards {
    display: block !important;
    margin: 8mm 0 !important;
  }

  .NootoCard {
    display: block !important;
    margin: 0 0 6mm !important;
    padding: 5mm !important;
    border: 1px solid #ddd !important;
    border-radius: 3mm !important;
    background: #fff !important;
    color: #111 !important;
    text-decoration: none !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .NootoCardCover {
    display: none !important;
  }

  .NootoButtonWrap {
    margin: 6mm 0 !important;
  }

  .NootoButton {
    display: inline-block !important;
    padding: 2mm 4mm !important;
    border: 1px solid #999 !important;
    border-radius: 2mm !important;
    background: #fff !important;
    color: #111 !important;
    text-decoration: none !important;
  }

  /* Page breaks */

  .NootoSection {
    page-break-after: auto !important;
    break-after: auto !important;
  }

  table,
  blockquote,
  pre,
  figure,
  .NootoCard {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  hr {
    border: 0 !important;
    border-top: 1px solid #ccc !important;
    margin: 10mm 0 !important;
  }
}