/*
 * Printing (js/components/CoursePrint.js, 1.42.0)
 *   - the menu under "Skriv ut": this session, the course board, everything
 *   - #course-print: the whole course on paper ("Alt"), built just before
 *     printing (body.print-course): the course information (with the texts
 *     for the published course description, 1.44.0), the sessions,
 *     the course board and every session's storyboard with its strip and
 *     links. The storyboards use the cards and phases of the session's own
 *     printout (focus-print.css).
 */

/* --- The menu ------------------------------------------------------------------ */

.print-menu {
  min-width: 18rem;
  border: 2px solid var(--bh-black, #111);
  border-radius: 0;
  box-shadow: var(--bh-shadow-sm, 3px 3px 0 #111);
}

.print-menu .dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  font-weight: 700;
  white-space: normal;
}

.print-menu .dropdown-item i {
  width: 1.1rem;
  margin-top: 0.2rem;
  text-align: center;
}

.print-menu .dropdown-item small {
  display: block;
  font-weight: 400;
  color: #555;
}

/* --- The whole course: only on paper --------------------------------------------- */

.course-print {
  display: none;
}

@media print {
  body.print-course #main-content > :not(#course-print) {
    display: none !important;
  }

  body.print-course .course-print {
    display: block !important;
  }

  .course-print {
    font-size: 10pt;
    line-height: 1.4;
  }

  /* The storyboards as on the session's printout: no buttons */
  .cp-storyboard button,
  .course-print .activity-controls,
  .course-print .btn-quick-add,
  .course-print .oc-hint {
    display: none !important;
  }

  /* On the course board the sessions, cards and projects are buttons: there they read as text
     (its controls are .screen-only and stay hidden) */
  .cp-board-body button {
    border-color: transparent;
    background: none;
    color: inherit;
    font: inherit;
  }

  /* The course profile as a picture, the size of its box under the board */
  .cp-shape-image {
    display: block;
    width: 100%;
    height: auto;
  }

  /* The title page: the course and its information */
  .cp-title h1 {
    margin: 0 0 4px;
    font-size: 20pt;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--bh-navy, #1B2A4A);
  }

  .cp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    margin: 0 0 4px;
  }

  .cp-meta > div {
    display: flex;
    gap: 4px;
  }

  .cp-meta dt {
    font-weight: 700;
  }

  .cp-meta dd {
    margin: 0;
  }

  .cp-printed {
    margin: 0;
    font-size: 8pt;
    color: #555;
  }

  .cp-section {
    margin-top: 7mm;
  }

  .cp-heading {
    margin: 0 0 3mm;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--bh-black, #111);
    font-size: 13pt;
    font-weight: 800;
    text-transform: uppercase;
    break-after: avoid;
  }

  .cp-tweet {
    font-style: italic;
    color: var(--bh-navy, #1B2A4A);
  }

  .cp-text {
    white-space: pre-line;
  }

  /* The texts for the published course description (CourseCatalog.js, 1.44.0) */
  .cp-catalog p {
    margin: 0 0 2mm;
  }

  .cp-catalog ul {
    margin: 0 0 2mm;
    padding-left: 5mm;
  }

  .cp-empty {
    color: #6c757d;
    font-style: italic;
  }

  .cp-outcomes {
    margin: 0 0 4mm;
    padding: 0;
    list-style: none;
  }

  .cp-outcomes li {
    margin-bottom: 3px;
    break-inside: avoid;
  }

  .cp-cat {
    margin-right: 0.4em;
    font-weight: 700;
  }

  .cp-coverage {
    break-inside: avoid;
  }

  .cp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
  }

  .cp-table th,
  .cp-table td {
    padding: 2px 6px;
    border-bottom: 1px solid #ccc;
    text-align: left;
    vertical-align: top;
  }

  .cp-table th {
    border-bottom: 2px solid var(--bh-black, #111);
  }

  .cp-table tr {
    break-inside: avoid;
  }

  .cp-num {
    text-align: right !important;
    white-space: nowrap;
  }

  /* The course board and each session on pages of their own */
  .cp-board,
  .cp-session {
    margin-top: 0;
    break-before: page;
  }

  /* The board is made for A3: smaller, so it fits the width of A4 */
  .cp-board-body {
    zoom: 0.62;
  }

  .cp-session-head {
    margin-bottom: 8px;
  }

  .cp-session-head .focus-course {
    font-size: 11pt;
  }

  /* The storyboard at the size of the session's own printout */
  .cp-storyboard {
    zoom: 0.78;
  }

  .cp-time-type {
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    margin-right: 6px;
  }

  .cp-links {
    display: block !important;
  }
}