/**
 * em-training shared front-end styles — outline, pagenav, video wrapper, badges.
 * No inline styles. :where() roots for low specificity. Mobile-first.
 */

/* ============================================================
   Course outline (also in block/course-outline/style.css —
   this file adds the live-refresh data-emtr-outline wrapper
   and any cross-block layout resets).
   ============================================================ */

:where([data-emtr-outline]) {
  container-type: inline-size;
}

/* ============================================================
   Page navigation (prev / next)
   ============================================================ */

:where(.emtr-pagenav) {
  margin-block-start: var(--cvn-size-xl, var(--wp--preset--spacing--60, 3rem));
  border-block-start: 1px solid var(--cvn-color-border, #e0e0e0);
  padding-block-start: var(--cvn-size-md, var(--wp--preset--spacing--40, 1.5rem));
}

:where(.emtr-pagenav__inner) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Desktop: prev / 40px outline / next stay on one row; side links shrink
 * (labels ellipsis) rather than wrapping onto their own lines. */
@media ( min-width: 480px ) {
  :where(.emtr-pagenav__inner) {
    flex-wrap: nowrap;
  }
}

:where(.emtr-pagenav__link) {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: var(--cvn-radius-sm, 4px);
  border: 1px solid var(--cvn-color-border, #ccc);
  color: inherit;
  text-decoration: none;
  font-size: var(--cvn-size-sm, var(--wp--preset--font-size--small, 0.875rem));
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
  min-width: 0;
}

:where(.emtr-pagenav__link:hover) {
  background: var(--cvn-color-surface, #f5f5f5);
  border-color: var(--cvn-color-accent, var(--wp--preset--color--primary, #005eb8));
}

:where(.emtr-pagenav__link--disabled) {
  opacity: 0.35;
  pointer-events: none;
  border-color: transparent;
}

.emtr-pagenav__link--locked {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--cvn-color-border, #ccc);
  color: var(--cvn-color-muted, #999);
  pointer-events: none;
  user-select: none;
}

/* Timer-running spinner — the tracker adds --waiting to a locked next span
 * while the learner is earning the unlock; unlockNextNav() swaps the span for
 * an anchor, which removes the spinner with it. */
.emtr-pagenav__link--waiting::before {
  content: '';
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  flex-shrink: 0;
  border: 2px solid var(--cvn-color-border, #ccc);
  border-top-color: var(--cvn-color-muted, #999);
  border-radius: 50%;
  animation: emtr-spin 0.9s linear infinite;
}

@keyframes emtr-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .emtr-pagenav__link--waiting::before {
    animation: none;
  }
}

:where(.emtr-pagenav__label) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}

:where(.emtr-pagenav__arrow) {
  flex-shrink: 0;
}

:where(.emtr-pagenav__outline-link) {
  font-size: var(--cvn-size-sm, 0.875rem);
  color: var(--cvn-color-accent, var(--wp--preset--color--primary, #005eb8));
  text-decoration: underline;
  text-underline-offset: 2px;
  text-align: center;
  flex: 0 0 40px;
  white-space: nowrap;
}

/* Stack vertically on narrow screens */
@media ( max-width: 479px ) {
  :where(.emtr-pagenav__inner) {
    flex-direction: column;
    align-items: stretch;
  }

  :where(.emtr-pagenav__link) {
    justify-content: center;
  }

  :where(.emtr-pagenav__label) {
    max-width: none;
  }

  :where(.emtr-pagenav__outline-link) {
    order: -1;
    text-align: center;
  }
}

/* ============================================================
   Video wrapper (shared — duplicated in block style for
   standalone block usage without this sheet)
   ============================================================ */

:where(.emtr-video__embed) {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
  overflow: hidden;
  border-radius: var(--cvn-radius-sm, 4px);
}

:where(.emtr-video__iframe),
:where(.emtr-video__player) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ============================================================
   Status badges (shared)
   ============================================================ */

:where(.emtr-video__badge) {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

:where(.emtr-video__badge--required) {
  background: var(--cvn-color-accent, var(--wp--preset--color--primary, #005eb8));
  color: #fff;
}

:where(.emtr-video__watched) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--cvn-color-muted, #999);
  color: var(--cvn-color-muted, #999);
  font-size: 0.875rem;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

:where(.emtr-video__watched--done) {
  color: var(--cvn-color-success, #1a8a1a);
  border-color: var(--cvn-color-success, #1a8a1a);
  background: color-mix(in srgb, var(--cvn-color-success, #1a8a1a) 12%, transparent);
}

/* ============================================================
   Sequential progression notices
   ============================================================ */

.emtr-notice {
  padding: 0.75rem 1rem;
  border-radius: var(--cvn-radius-sm, 4px);
  margin-block-end: 1.25rem;
  font-size: var(--cvn-size-sm, var(--wp--preset--font-size--small, 0.875rem));
  font-weight: 500;
}

.emtr-notice--locked {
  background: color-mix(in srgb, var(--cvn-color-accent, #005eb8) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cvn-color-accent, #005eb8) 30%, transparent);
  color: var(--cvn-color-accent, #005eb8);
}

.emtr-notice--login {
  background: color-mix(in srgb, var(--cvn-color-muted, #666) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cvn-color-muted, #666) 30%, transparent);
  color: var(--cvn-color-muted, #444);
}

/* ============================================================
   Progress bar (shared — duplicates block sheet for
   archive/standalone usage)
   ============================================================ */

:where(.emtr-outline__progress) {
  display: block;
  width: 100%;
  height: 0.5rem;
  appearance: none;
  border: none;
  border-radius: 99px;
  background: var(--cvn-color-border, #e0e0e0);
  overflow: hidden;
}

:where(.emtr-outline__progress)::-webkit-progress-bar {
  background: var(--cvn-color-border, #e0e0e0);
  border-radius: 99px;
}

:where(.emtr-outline__progress)::-webkit-progress-value {
  background: var(--cvn-color-accent, var(--wp--preset--color--primary, #005eb8));
  border-radius: 99px;
  transition: width 0.4s ease;
}

:where(.emtr-outline__progress)::-moz-progress-bar {
  background: var(--cvn-color-accent, var(--wp--preset--color--primary, #005eb8));
  border-radius: 99px;
}

/* ── Course archive: centered wrapping card row ──────────────────────────────
 * The theme's .site-main--archive is an auto-fill CSS grid, which left-aligns
 * a partial row. The COURSE archive (this plugin adds .emtr-archive to the
 * same <main>) uses flex instead: three cards per full row (basis = a third
 * minus the gap share, same --wp--preset--spacing--40 gap the theme sets),
 * and a row of one or two cards centers. Structural rule — real specificity,
 * not :where(). */
.site-main--archive.emtr-archive {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Flexbox clamps an item's hypothetical main size by max-width, so the theme's
 * .page-header max-width (720px) beat flex-basis:100% and let the first card
 * share the header's line. min-width wins that clamp — the header/pagination
 * always occupy a full line, so cards start on their own row. */
.site-main--archive.emtr-archive > .page-header,
.site-main--archive.emtr-archive > .posts-pagination {
  flex: 0 0 100%;
  min-width: 100%;
}

.site-main--archive.emtr-archive > .emtr-archive__card {
  flex: 0 1 calc((100% - 2 * var(--wp--preset--spacing--40, 1.5rem)) / 3);
  min-width: 280px;
}

/* ── Course-root featured image (prepended by EMTR_Frontend) ───────────────── */
.emtr-course__featured {
  margin: 0 0 var(--wp--preset--spacing--40, 1.5rem);
}

.emtr-course__featured .emtr-course__featured-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--cvn-radius, 8px);
}

/* ============================================================
   Guest registration form
   ============================================================ */

.emtr-register {
  max-width: 480px;
  margin-inline: auto;
}

.emtr-register__intro {
  margin-block-end: var(--cvn-size-md, var(--wp--preset--spacing--40, 1.5rem));
  color: var(--cvn-color-text, inherit);
}

.emtr-register__form {
  display: flex;
  flex-direction: column;
  gap: var(--cvn-size-sm, var(--wp--preset--spacing--30, 1rem));
}

.emtr-register__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.emtr-register__label {
  font-size: var(--cvn-size-sm, var(--wp--preset--font-size--small, 0.875rem));
  font-weight: 500;
  color: var(--cvn-color-text, inherit);
}

.emtr-register__input {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--cvn-color-border, #ccc);
  border-radius: var(--cvn-radius-sm, 4px);
  background: var(--cvn-color-surface-input, #fff);
  color: var(--cvn-color-text, inherit);
  font-size: var(--cvn-size-base, 1rem);
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.emtr-register__input:focus {
  outline: none;
  border-color: var(--cvn-color-accent, var(--wp--preset--color--primary, #005eb8));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cvn-color-accent, #005eb8) 20%, transparent);
}

.emtr-register__submit {
  align-self: flex-start;
  min-height: 44px;
}

.emtr-register__error {
  padding: 0.5rem 0.75rem;
  border-radius: var(--cvn-radius-sm, 4px);
  background: color-mix(in srgb, var(--cvn-color-danger, #c0392b) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cvn-color-danger, #c0392b) 30%, transparent);
  color: var(--cvn-color-danger, #c0392b);
  font-size: var(--cvn-size-sm, 0.875rem);
}

/* ============================================================
   Learner identity bar
   ============================================================ */

.emtr-identity {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-block-end: var(--cvn-size-md, var(--wp--preset--spacing--40, 1.5rem));
  font-size: var(--cvn-size-sm, var(--wp--preset--font-size--small, 0.875rem));
  color: var(--cvn-color-muted, #666);
}

.emtr-identity__error {
  flex-basis: 100%;
  color: var(--cvn-color-error, #b00020);
}

.emtr-identity__who {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emtr-identity__restart {
  flex-shrink: 0;
  color: var(--cvn-link-color, var(--wp--preset--color--primary, #005eb8));
  text-decoration: var(--cvn-link-decoration, underline);
  text-underline-offset: var(--cvn-link-underline-offset, 2px);
  font-size: var(--cvn-size-sm, 0.875rem);
}

.emtr-identity__restart:hover {
  color: var(--cvn-link-hover-color, var(--cvn-color-accent, #003d7a));
}