/* ============================================================
   Knowledge Hub — Training page
   Loaded after knowledge-hub-main.css, which gives the hero, cards,
   badges, links, pills and the CTA. Only what the Training page adds.
   ============================================================ */

/* ---- Compact hero ---- */
.kh-hero--compact { padding: 40px 0 0; }

.kh-hero--compact .kh-hero__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 28px;
  text-align: left;
}

.kh-hero--compact .kh-hero__desc {
  margin: 0;
  max-width: 620px;
}

.kh-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.kh-crumb a {
  color: inherit;
  text-decoration: none;
}

.kh-crumb a:hover { color: #fff; }

.kh-course-title {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.kh-course-title img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
  padding: 6px;
}

.kh-course-title h1 {
  margin: 0;
  min-width: 0;
  color: #fff;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* ---- Filters ---- */
.kh-filters {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 18px 22px;
  background: #fff;
  border-radius: 16px;
}

.kh-filters__rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.kh-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.kh-filter .kh-pill { white-space: nowrap; }

.kh-filter__label {
  flex: none;
  width: 96px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--Core-Blue-Gray);
}

.kh-training__dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  cursor: pointer;
}

/* ---- Role cards ---- */
.kh-tracks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
  align-items: start;
}

.kh-tracks--one { grid-template-columns: minmax(0, 560px); }

.kh-tracks .kh-card {
  margin: 0;
  padding: 24px;
  min-width: 0;
}

.kh-track__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.kh-track__head .kh-badge {
  align-self: flex-start;
  margin: 0 0 6px;
}

.kh-track__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--Core-Base-Black);
}

.kh-track__meta {
  font-size: 13px;
  color: var(--Core-Blue-Gray);
}

.kh-track__empty {
  margin: 0;
  padding: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--Core-Blue-Gray);
  background: var(--Core-Soft-Surface);
  border: 1px dashed var(--Core-Bright-Gray);
  border-radius: 10px;
}

.kh-lessons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kh-lessons li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  background: var(--Core-Soft-Surface);
  border: 1px solid var(--Core-Bright-Gray);
  border-radius: 10px;
}

.kh-lessons li[hidden] { display: none; }

.kh-lessons__n {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--Core-Soft-Lavender);
  color: var(--Core-Violet);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.kh-lessons__title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--Core-Base-Black);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.kh-lessons__title:hover { color: var(--Core-Violet); }

.kh-lessons small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--Core-Blue-Gray);
}

.kh-lessons__term {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.kh-lessons__term:hover { color: var(--Core-Violet); }

/* ---- Message for the team (User card) ---- */
.kh-share {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--Core-Soft-Lavender);
  border-radius: 10px;
}

.kh-share__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.kh-share__copy {
  padding: 0;
  border: 0;
  background: none;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  white-space: normal;
  text-align: left;
  cursor: pointer;
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .kh-tracks { grid-template-columns: 1fr; }
  .kh-tracks--one { grid-template-columns: 1fr; }
}

/* Below this width the download link no longer fits beside the pills
   without pushing them onto extra lines, so it moves under them. */
@media (max-width: 1200px) {
  .kh-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .kh-filters__rows { flex: none; }
  .kh-training__dl {
    align-self: flex-start;
    margin-left: 0;
  }
}

@media (max-width: 600px) {
  .kh-hero--compact { padding-top: 24px; }
  .kh-filters { padding: 16px; }
  .kh-filter__label { width: 100%; }
  .kh-tracks .kh-card { padding: 20px; }
}

/* ---- Export: print / Save as PDF ----
   Only the chosen integration and roles go on paper; links get their
   address printed after them so the PDF still leads to the articles. */
@media print {
  @page { margin: 16mm; }

  .kh-body { background: #fff; }

  .kh-hero--compact {
    padding: 0;
    background: none;
  }

  .kh-hero--compact .kh-hero__desc,
  .kh-course-title h1 { color: #000; }

  .kh-hero__topbar,
  .kh-crumb,
  .kh-filters,
  .kh-cta,
  .kh-share__copy,
  #crisp-chatbox,
  .crisp-client { display: none !important; }

  .kh-main { padding: 12px 0 0; }

  .kh-container {
    max-width: none;
    padding: 0;
  }

  .kh-tracks,
  .kh-tracks--one {
    display: block;
  }

  .kh-tracks .kh-card {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    box-shadow: none;
    break-inside: avoid-page;
  }

  .kh-lessons li {
    break-inside: avoid;
    background: none;
  }

  .kh-lessons__title::after,
  .kh-lessons__term::after {
    content: " (" attr(data-url) ")";
    font-weight: 400;
    font-size: 11px;
    color: var(--Core-Blue-Gray);
    overflow-wrap: anywhere;
  }

  .kh-share { background: none; padding: 0; }
}

/* ---- Export of the lessons themselves ----
   While kb-training.js has set html.kh-printing-course, only the lessons'
   article bodies (#kh-training-print) go on paper, one lesson per page. The
   article styles come from helpdesk-article-components.css, loaded for print
   only; each lesson sits in .col-post-info, the wrapper those styles expect. */
.kh-training-print[hidden] { display: none; }
@media screen { #kh-training-print { display: none !important; } }

@media print {
  html.kh-printing-course .kh-hero,
  html.kh-printing-course .kh-main > .kh-container > *:not(#kh-training-print) { display: none !important; }

  html.kh-printing-course #kh-training-print { display: block !important; }

  .kh-print-course-title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--Core-Base-Black);
  }

  .kh-print-role {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--Core-Violet);
  }

  .kh-print-lesson { break-before: page; }
  .kh-print-lesson:first-of-type { break-before: auto; }

  #kh-training-print .accordion-content { max-height: none !important; overflow: visible !important; }
  #kh-training-print .accordion-trigger .chevron,
  #kh-training-print .whats-next,
  #kh-training-print .callout-help { display: none !important; }
  #kh-training-print img { max-width: 100%; max-height: 8.5in; width: auto; height: auto; object-fit: contain; break-inside: avoid; }
  #kh-training-print :is(h1, h2, h3, h4), .kh-print-role { break-after: avoid; }
}