/* CSD Training: styles for the my-scorm [scorm_courses] markup and the
   training page chrome. Needs tokens.css loaded first. No inline styles,
   no !important: theme CSS can still override any of it.

   Supplied by the design system and shipped verbatim. Do not edit here;
   changes belong upstream, or the next handoff will overwrite them. */

/* ---- Course list (shortcode output) ---- */
.myscorm-list { max-width: 760px; color: var(--ink); }
.myscorm-list-summary { margin: 0 0 var(--space-3); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.myscorm-list-summary[hidden] { display: none; }
.myscorm-list-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gray-200); }

.myscorm-list-item {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "mark title title button" "mark meta status button";
  align-items: center;
  column-gap: var(--space-3);
  row-gap: 2px;
  padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--gray-200);
}
.myscorm-list-item:hover { background: var(--surface-tint); }
/* No mark yet: drop the empty first column so no gap is left for it */
.myscorm-list-item:has(> .myscorm-list-mark:empty) { grid-template-columns: 0 auto 1fr auto; column-gap: 0; }
.myscorm-list-item:has(> .myscorm-list-mark:empty) .myscorm-learn { margin-left: var(--space-3); }
.myscorm-list-item:has(> .myscorm-list-mark:empty) .myscorm-list-status { margin-left: var(--space-3); }

/* Mark: takes no room until the script fills it */
.myscorm-list-mark { grid-area: mark; align-self: start; margin-top: 1px; }
.myscorm-list-mark:empty { display: none; }
.myscorm-list-mark:not(:empty) {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--radius-full);
  font-size: 13px; line-height: 1; font-weight: 700; color: var(--on-purple);
  background: var(--blue-primary);
}
.myscorm-list-item.is-incomplete .myscorm-list-mark:not(:empty),
.myscorm-list-item.is-failed .myscorm-list-mark:not(:empty) { background: var(--orange); color: var(--navy); }

.myscorm-list-title {
  grid-area: title; justify-self: start;
  font-size: 17px; line-height: 24px; font-weight: 700;
  color: var(--ink); text-decoration: none;
}
.myscorm-list-title:hover { text-decoration: underline; text-underline-offset: 3px; }

.myscorm-list-meta { grid-area: meta; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* Status: sits inline after the meta when present, never reserves a column */
.myscorm-list-status { grid-area: status; justify-self: start; font-size: 13px; line-height: 20px; font-weight: 700; color: var(--blue-primary); }
.myscorm-list-status[hidden] { display: none; }
.myscorm-list-item.is-incomplete .myscorm-list-status,
.myscorm-list-item.is-failed .myscorm-list-status { color: var(--navy); }

/* Button: the markup carries the theme's own `button` class, so its shape,
   colour and hover come from the site. Restyling it here produced a square
   dark button sitting beside the site's teal pills. Only placement is ours. */
.myscorm-learn {
  grid-area: button;
  text-decoration: none;
  white-space: nowrap;
}

.myscorm-list a:focus-visible,
.training-crumbs a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* Narrow: button drops below and goes full width */
@container (max-width: 560px) {
  .myscorm-list-item:has(> .myscorm-list-mark:empty) { grid-template-columns: 0 auto 1fr; }
  .myscorm-list-item:has(> .myscorm-list-mark:empty) .myscorm-learn { margin-left: 0; }
  .myscorm-list-item { grid-template-columns: auto auto 1fr; grid-template-areas: "mark title title" "mark meta status" ". button button"; }
  .myscorm-learn { margin-top: var(--space-3); text-align: center; justify-self: stretch; }
}
.myscorm-list { container-type: inline-size; }

/* ---- Page chrome ---- */
.training-crumbs { margin: 0 0 var(--space-4); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.training-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.training-crumbs li + li::before { content: "\203A"; margin-right: var(--space-2); color: var(--ink-muted); }
.training-crumbs a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; }
.training-crumbs [aria-current="page"] { color: var(--purple-900); font-weight: 700; }

.training-header {
  position: relative; overflow: hidden;
  margin: 0 0 var(--space-6); padding: var(--space-6) var(--space-6) var(--space-6);
  background: var(--surface-tint);
}
.training-header::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 220px;
  background-image: radial-gradient(var(--lavender) 2px, transparent 2.5px);
  background-size: 12px 12px; pointer-events: none;
}
.training-eyebrow { margin: 0 0 var(--space-2); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.training-eyebrow::before { content: ""; display: block; width: 32px; height: 4px; margin-bottom: var(--space-3); background: var(--lavender); }
.training-title { position: relative; z-index: 1; margin: 0; max-width: 520px; font-size: 36px; line-height: 42px; font-weight: 700; color: var(--purple-900); }
.training-intro { position: relative; z-index: 1; margin: var(--space-2) 0 0; max-width: 520px; font-size: 16px; line-height: 24px; color: var(--ink); }

/* Injected under Livestorm / video blocks */
.training-injected { margin-top: var(--space-7); }
/* Size and weight come from the theme's h2 (and .lse-heading where the
   neighbouring sections use it). Setting them here made our heading smaller
   than every other section head on the page. */
.training-injected > h2 { margin: 0 0 var(--space-4); }



/* ---- Page container ----
   The plugin's blocks render straight into the_content on a full-width
   template, so they need the page gutter the theme would otherwise give
   them. Matches the accordion blocks on /video-training/. */

.myscorm-list,
.myscorm-products,
.myscorm-notice,
.training-header,
.training-crumbs,
.training-injected {
  max-width: 1020px;
  margin-inline: auto;
  padding-inline: var(--space-5);
  box-sizing: border-box;
}

/* ---- Product index ----
   A row per product, matching the product accordions elsewhere on the
   site: name in purple, hairline rule, chevron on the right. */

.myscorm-products { margin-block: 0 var(--space-7); }


.myscorm-products-items {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--gray-200);
}

.myscorm-products-item { border-bottom: 1px solid var(--gray-200); }

.myscorm-products-link {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-4) 0;
  text-decoration: none;
}

.myscorm-products-link::after {
  content: "\203A";
  margin-left: auto;
  font-size: 22px; line-height: 1; color: var(--purple-900);
}

.myscorm-products-link:hover .myscorm-products-name { text-decoration: underline; text-underline-offset: 3px; }
.myscorm-products-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.myscorm-products-name { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--purple-900); }
.myscorm-products-count { font-size: 16px; line-height: 24px; color: var(--ink-muted); }

/* Larger type on the course list: the handoff sizes were set for a narrow
   column and read small at this page width. */
.myscorm-list-title { font-size: 20px; line-height: 28px; }
.myscorm-list-meta { font-size: 17px; line-height: 26px; }
.myscorm-list-status { font-size: 17px; line-height: 26px; }
.myscorm-list-summary { font-size: 16px; line-height: 24px; }
.myscorm-restart { font-size: 16px; line-height: 22px; }

/* Admin: product checkboxes stack rather than running together */

/* Start over sits under the button, not adrift in the first column.
   Placed by explicit row/column rather than a named grid area, because the
   :has() rule it relied on never matched in the live markup. */
.myscorm-restart {
  grid-column: 4;
  grid-row: 2;
  justify-self: end;
  align-self: start;
  margin-top: var(--space-1);
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.myscorm-restart:hover { color: var(--purple-900); }

@container (max-width: 560px) {
  .myscorm-restart { grid-column: 1 / -1; grid-row: auto; justify-self: center; }
}

/* ---- Match the resource pages ----
   Tinted band, small-caps eyebrow, large title, hairline rows with a
   chevron. Type is left to the theme so these read as the same site. */





/* Product rows: chevron pointing down, like the accordions */
.myscorm-products-link::after {
  content: "";
  margin-left: auto;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--purple-900);
  border-bottom: 2px solid var(--purple-900);
  transform: rotate(45deg);
  align-self: center;
}

.myscorm-products-name { font-size: 26px; line-height: 34px; }
.myscorm-products-link { padding-block: var(--space-5); }

/* ---- Matching the theme ----
   These blocks sit inside Kadence row/column markup, so width, gutter and
   background come from the theme's own classes. Only the parts the theme
   has no equivalent for are set here. */

.myscorm-band-pad { padding-block: var(--space-7); }

.myscorm-products-items,
.myscorm-list-items { list-style: none; margin: 0; padding: 0; }

/* Product rows styled like the accordion headers on the resource pages */
.myscorm-products-item { border-top: 2px solid var(--global-palette4, #9252F7); }
.myscorm-products-item:last-child { border-bottom: 2px solid var(--global-palette4, #9252F7); }

.myscorm-products-link {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: 20px 0;
  text-decoration: none;
  font-family: var(--global-heading-font-family, inherit);
  font-size: 28px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--global-palette2, #40126B);
}

.myscorm-products-link::after {
  content: "";
  margin-left: auto;
  align-self: center;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.myscorm-products-link:hover { color: var(--global-palette1, #FF5B40); }
.myscorm-products-count {
  font-family: var(--global-body-font-family, inherit);
  font-size: 16px;
  color: var(--global-palette6, #9E9AB5);
}

/* Course rows */
.myscorm-list-title { font-family: var(--global-heading-font-family, inherit); font-size: 22px; line-height: 1.4; font-weight: 400; color: var(--global-palette2, #40126B); }
.myscorm-list-meta,
.myscorm-list-status,
.myscorm-list-summary,
.myscorm-restart { font-family: var(--global-body-font-family, inherit); font-size: 16px; }
.myscorm-list-item { border-top: 1px solid var(--global-palette4, #9252F7); }


/* Under-development notice: a banner, so it needs to read as one. */
.myscorm-notice {
  max-width: var(--global-content-width, 1290px);
  margin: 0 auto var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-left: 5px solid var(--global-palette1, #FF5B40);
  background: var(--global-palette7, #F6F5FC);
  font-family: var(--global-heading-font-family, inherit);
  font-size: 24px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--global-palette2, #40126B);
  box-sizing: border-box;
}

@media all and (max-width: 767px) {
  .myscorm-notice { font-size: 19px; }
}

/* The design's grid gives the button grid-area "button", which spans both
   rows of column 4, so Start over was being drawn underneath it. Pin each
   to its own row instead. */
.myscorm-list-item:has(> .myscorm-restart) .myscorm-learn {
  grid-area: auto;
  grid-column: 4;
  grid-row: 1;
  align-self: end;
}

.myscorm-list-item:has(> .myscorm-restart) .myscorm-restart {
  grid-column: 4;
  grid-row: 2;
  justify-self: end;
  align-self: start;
  margin-top: var(--space-2);
  white-space: nowrap;
}

/* Fallback for browsers without :has(): keep it below, not on top. */
@supports not selector(:has(*)) {
  .myscorm-list-item { position: relative; }
  .myscorm-restart { grid-column: 1 / -1; grid-row: auto; justify-self: end; }
}

@container (max-width: 560px) {
  .myscorm-list-item:has(> .myscorm-restart) .myscorm-learn,
  .myscorm-list-item:has(> .myscorm-restart) .myscorm-restart {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: stretch;
    text-align: center;
  }
}


/* Nothing here for the injected list: it is built from the host plugin's own
   markup and styled entirely by that plugin's stylesheet, which this file is
   not even loaded alongside in that context. Its spacing comes from the host
   wrapper's own margin. */