/*
 * Print layout for the SmartManipulator-X manual.
 *
 * Used by the combined page site/print_page/ (mkdocs-print-site-plugin),
 * which tools/docs/build_pdf.py prints to an A4 PDF with Chromium.
 * Page margins, header and footer are set by build_pdf.py; this file styles
 * the content. Screen rules apply to the HTML site as well and are kept small.
 */

/* ---------- Figures (created from images by tools/docs/hooks.py) ---------- */

.md-typeset figure.smx-figure {
  margin: 1.2em auto;
  text-align: center;
}

.md-typeset figure.smx-figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid #d0d4da;
}

.md-typeset figure.smx-figure figcaption {
  max-width: 100%;
  margin-top: 0.4em;
  font-size: 0.85em;
  font-style: italic;
  color: #444;
}

/* ---------- Cover page (HTML preview of the print page) ---------- */

.smx-cover {
  text-align: left;
}

.md-typeset .smx-cover-kicker {
  margin: 0;
  color: #3f51b5;
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.md-typeset h1.smx-cover-title {
  margin: 0.2em 0 0.3em;
  color: #1a237e;
  font-size: 2.6em;
  font-weight: 700;
  line-height: 1.15;
}

.md-typeset .smx-cover-subtitle {
  margin: 0 0 1.5em;
  font-size: 1.3em;
  color: #333;
}

.md-typeset .smx-cover-lead {
  max-width: 34em;
  color: #444;
}

.md-typeset table.smx-cover-meta:not([class*="highlight"]) {
  display: table;
  margin-top: 2.5em;
  border: none !important;
  font-size: 0.9em;
}

.md-typeset table.smx-cover-meta th,
.md-typeset table.smx-cover-meta td {
  padding: 0.35em 1.2em 0.35em 0;
  border: none;
  border-top: 1px solid #c5cae9;
  background: none;
  text-align: left;
  vertical-align: top;
}

.md-typeset table.smx-cover-meta th {
  white-space: nowrap;
  color: #3f51b5;
}

/* ---------- Table of contents with page numbers ---------- */

/* build_pdf.py fills <span class="smx-toc-page"> in every ToC entry. */
#print-page-toc a {
  display: flex;
  align-items: baseline;
  color: inherit;
  text-decoration: none;
}

#print-page-toc a .smx-toc-text {
  flex: 0 1 auto;
}

#print-page-toc a .smx-toc-leader {
  flex: 1 1 auto;
  min-width: 1.5em;
  margin: 0 0.35em;
  border-bottom: 1px dotted #999;
  transform: translateY(-0.25em);
}

#print-page-toc a .smx-toc-page {
  flex: 0 0 auto;
  min-width: 1.8em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ============================== Print ============================== */

@media print {
  /* Chromium takes the page size from build_pdf.py; this is the fallback
     for printing from the browser (Ctrl+P on site/print_page/). */
  @page {
    size: A4 portrait;
    margin: 20mm 17mm 20mm 17mm;
  }

  html,
  body {
    background: #fff !important;
    color: #000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  html {
    font-size: 100%;
  }

  /* Material sets a large base size; 10 pt body text is a book size. */
  .md-typeset {
    font-size: 10pt !important;
    line-height: 1.5;
    orphans: 3;
    widows: 3;
  }

  /* Remove the website chrome. */
  .md-header,
  .md-tabs,
  .md-sidebar,
  .md-footer,
  .md-top,
  .md-dialog,
  .md-search,
  .md-source,
  .md-content__button,
  .md-clipboard,
  .md-code__nav,
  .md-code__button,
  .md-typeset .headerlink {
    display: none !important;
  }

  .md-main__inner,
  .md-content,
  .md-content__inner,
  .md-grid {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .md-content__inner::before {
    display: none;
  }

  /* ----- Cover page ----- */

  #print-site-cover-page {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    min-height: 240mm;
    text-align: left !important;
    break-after: page;
    page-break-after: always;
  }

  #print-site-cover-page h1.smx-cover-title {
    font-size: 30pt !important;
    padding: 0 !important;
    text-align: left !important;
  }

  #print-site-cover-page .smx-cover {
    padding-top: 12mm;
    border-top: 6px solid #3f51b5;
  }

  /* No chapter number on the cover title. */
  #print-site-page #print-site-cover-page h1::before {
    content: none !important;
  }

  /* ----- Table of contents ----- */

  #print-page-toc {
    display: block !important;
  }

  #print-page-toc .print-page-toc-title {
    margin: 0 0 1em;
    font-size: 20pt;
  }

  #print-page-toc ul {
    margin: 0 !important;
    padding: 0 !important;
  }

  #print-page-toc li {
    margin: 0 !important;
    padding: 0 !important;
    break-inside: avoid;
  }

  #print-page-toc nav > ul > li {
    margin-top: 0.6em !important;
    font-weight: 700;
  }

  #print-page-toc nav > ul > li li {
    padding-left: 1.6em !important;
    font-weight: 400;
  }

  #print-page-toc a {
    padding: 0.08em 0;
  }

  /* Pages inside a navigation section ("2.1 Getting started"): Material's
     .md-nav font size (0.7rem) would make them smaller than their headings. */
  #print-page-toc nav.md-nav {
    font-size: inherit !important;
  }

  #print-page-toc nav.md-nav > ul > li > a {
    font-weight: 600;
  }

  /* Level-2 headings added by build_pdf.py */
  #print-page-toc ul.smx-toc-headings {
    margin: 0.1em 0 0.3em !important;
    font-size: 9.2pt;
    font-weight: 400;
    color: #333;
  }

  #print-site-page ul.toc-section-line-border {
    border-left: none;
  }

  /* ----- Chapters and headings ----- */

  /* Every chapter starts on a new page (print-site default); the cover
     already breaks after itself, so the ToC needs no extra break. */
  #print-site-page section.print-page {
    break-before: page;
    page-break-before: always;
  }

  /* The "System context" group title gets a page of its own. */
  #print-site-page section.print-page.md-section > h1 {
    padding: 70mm 0 0 !important;
    font-size: 24pt !important;
    text-align: center;
  }

  #print-site-page section.print-page.md-section > h1 + section.print-page {
    break-before: page;
  }

  .md-typeset h1,
  .md-typeset h2,
  .md-typeset h3,
  .md-typeset h4 {
    color: #1a237e;
    break-after: avoid;
    page-break-after: avoid;
    break-inside: avoid;
  }

  .md-typeset h1 {
    margin: 0 0 0.8em;
    padding-bottom: 0.25em;
    border-bottom: 2px solid #3f51b5;
    font-size: 20pt;
    font-weight: 700;
  }

  .md-typeset h2 {
    margin: 1.6em 0 0.6em;
    font-size: 14pt;
    font-weight: 700;
  }

  .md-typeset h3 {
    margin: 1.3em 0 0.5em;
    font-size: 11.5pt;
    font-weight: 700;
  }

  .md-typeset h4 {
    font-size: 10.5pt;
  }

  /* Keep the first lines of a section with its heading. */
  .md-typeset h2 + p,
  .md-typeset h3 + p {
    break-before: avoid;
  }

  .md-typeset p,
  .md-typeset li {
    break-inside: auto;
  }

  /* ----- Links ----- */

  .md-typeset a {
    color: #1a237e;
    text-decoration: none;
  }

  /* ----- Code ----- */

  .md-typeset code,
  .md-typeset kbd,
  .md-typeset pre {
    font-size: 8.3pt !important;
  }

  .md-typeset code {
    padding: 0 0.25em;
    background: #f1f3f6 !important;
    color: #1d2633;
    /* break-word (not anywhere): a long identifier still wraps if it must,
       but table columns are not shrunk to single letters ("Typ e"). */
    word-break: normal;
    overflow-wrap: break-word;
  }

  .md-typeset pre > code {
    display: block;
    padding: 0.7em 0.9em;
    border: 1px solid #d5d9e0;
    border-left: 3px solid #3f51b5;
    border-radius: 2px;
    background: #f7f8fa !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere;
    word-break: normal;
    overflow: visible !important;
    max-height: none !important;
  }

  .md-typeset .highlight,
  .md-typeset pre {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* ----- Tables ----- */

  .md-typeset table:not([class]),
  .md-typeset .md-typeset__table table {
    display: table !important;
    width: 100% !important;
    border-collapse: collapse;
    border: 1px solid #b8bec9 !important;
    font-size: 8.8pt !important;
    box-shadow: none !important;
  }

  .md-typeset .md-typeset__scrollwrap,
  .md-typeset .md-typeset__table {
    display: block !important;
    margin: 0.8em 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .md-typeset table:not([class]) th {
    background: #e8eaf6 !important;
    color: #000;
    font-weight: 700;
    min-width: 0 !important;
  }

  .md-typeset table:not([class]) th,
  .md-typeset table:not([class]) td {
    padding: 0.35em 0.6em !important;
    border: 1px solid #c9ced8 !important;
    vertical-align: top;
    overflow-wrap: break-word;
  }

  .md-typeset table:not([class]) tbody tr:nth-child(even) {
    background: #fafbfc;
  }

  /* Repeat the header row on every page a table spans. */
  .md-typeset thead {
    display: table-header-group;
  }

  .md-typeset tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* ----- Figures, diagrams, quotes ----- */

  .md-typeset figure,
  .md-typeset img,
  .md-typeset svg,
  .md-typeset .mermaid {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .md-typeset img {
    max-width: 100% !important;
    max-height: 225mm;
    object-fit: contain;
  }

  .md-typeset .mermaid {
    margin: 1em 0;
    text-align: center;
  }

  /* Tall flowcharts must fit on one page together with their heading. */
  .md-typeset .mermaid svg {
    max-width: 100% !important;
    max-height: 170mm !important;
    width: auto;
    height: auto;
  }

  .md-typeset blockquote,
  .md-typeset .admonition {
    break-inside: avoid;
    border-left: 3px solid #ff9800;
    background: #fff8e1;
    color: #222;
    padding: 0.4em 0.9em;
  }

  .md-typeset blockquote p {
    margin: 0.3em 0;
  }

  .md-typeset hr {
    border-bottom: 1px solid #ccc;
  }
}