/* WPRiders — Responsible Use of AI Tools: training page styles.
   Scoped under .wpr-training so it can drop into a theme without leaking.
   Fonts: Poppins for display, Mrs Saint Delafield for the signature. */

.wpr-training {
  --ink: #001533;
  --blue: #083DF6;
  --cyan: #00E1FF;
  --paper: #FFFFFF;
  --wash: #F4F6FA;
  --line: #DCE3EC;
  --muted: #66747F;
  --body: #2A3644;
  --green: #12A26B;
  --red: #E03A3A;
  --display: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --gold: #B08D57;

  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--wash);
  padding: 40px 24px 96px;
  text-wrap: pretty;
}

.wpr-training *, .wpr-training *::before, .wpr-training *::after { box-sizing: border-box; }

.wpr-shell { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }

.wpr-training h1, .wpr-training h2, .wpr-training h3 { font-family: var(--display); font-weight: 600; margin: 0; }
.wpr-training h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; }
.wpr-training h2 { font-size: 26px; }
.wpr-training h3 { font-size: 18px; }
.wpr-training p { margin: 0; line-height: 1.65; }
.wpr-training a { color: var(--blue); }
.wpr-training a:hover { color: var(--ink); }

.wpr-eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted);
  display: flex; gap: 10px; flex-wrap: wrap;
}
.wpr-head { display: flex; flex-direction: column; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 24px; }
.wpr-lead { font-size: 17px; color: var(--body); max-width: 68ch; }
.wpr-muted { color: var(--muted); font-size: 14px; }

.wpr-section { display: flex; flex-direction: column; gap: 14px; }
.wpr-card { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; }

/* status */
.wpr-status {
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 20px 24px;
}
.wpr-greet { display: flex; flex-direction: column; gap: 4px; }
.wpr-greet strong { font-size: 19px; }
.wpr-stats { display: flex; gap: 30px; margin: 0; }
.wpr-stats div { display: flex; flex-direction: column; gap: 4px; }
.wpr-stats dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.wpr-stats dd { margin: 0; font-weight: 600; font-size: 16px; }

.wpr-nameform { display: flex; flex-direction: column; gap: 10px; }
.wpr-nameform label { font-size: 15px; font-weight: 600; }
.wpr-nameform-row { display: flex; gap: 10px; flex-wrap: wrap; }
.wpr-nameform input {
  flex: 1; min-width: 240px; font: inherit; font-size: 16px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 6px; color: var(--ink); min-height: 48px; background: #fff;
}
.wpr-nameform input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* buttons */
.wpr-btn {
  font: inherit; font-size: 15px; padding: 12px 22px; min-height: 48px; cursor: pointer;
  background: none; border: 1px solid #B8C3CC; border-radius: 6px; color: var(--ink);
}
.wpr-btn:hover { border-color: var(--ink); }
.wpr-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.wpr-btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.wpr-btn-primary:hover { background: var(--ink); border-color: var(--ink); }
.wpr-btn-dark { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.wpr-btn-dark:hover { background: var(--blue); border-color: var(--blue); }
.wpr-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--blue); text-decoration: underline; cursor: pointer; align-self: flex-start; }
.wpr-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* video */
.wpr-video { width: 100%; aspect-ratio: 16 / 9; background: var(--ink); border: 1px solid var(--line); border-radius: 10px; display: block; }

/* data levels */
.wpr-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.wpr-tier { background: var(--paper); border: 1px solid var(--line); border-top: 8px solid var(--tier, var(--blue)); border-radius: 8px; padding: 18px 20px; }
.wpr-tier-name { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tier); font-weight: 700; }
.wpr-tier-label { font-family: var(--display); font-weight: 600; font-size: 18px; margin-top: 6px; }
.wpr-tier-ex { font-size: 14px; color: var(--muted); margin-top: 10px; }

/* STOP */
.wpr-stop { display: flex; flex-direction: column; gap: 12px; }
.wpr-stop-row { display: flex; gap: 14px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; font-size: 15px; line-height: 1.5; }
.wpr-stop-letter {
  flex: none; width: 40px; height: 40px; border-radius: 6px; background: var(--ink); color: var(--cyan);
  font-family: var(--display); font-weight: 600; font-size: 20px; display: flex; align-items: center; justify-content: center;
}

/* modules */
.wpr-modules { display: flex; flex-direction: column; gap: 10px; }
.wpr-module { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.wpr-module-head {
  width: 100%; display: flex; gap: 14px; align-items: center; text-align: left;
  background: none; border: 0; padding: 18px 20px 6px; font: inherit;
}
.wpr-module-num { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.wpr-module-title { font-family: var(--display); font-weight: 600; font-size: 17px; flex: 1; }
.wpr-module-chev { width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s ease; }
.wpr-module.is-open .wpr-module-chev { transform: rotate(-135deg); }
.wpr-module-body { display: none; padding: 0 20px 20px 60px; }
.wpr-module.is-open .wpr-module-body { display: block; }
.wpr-module-intro { font-size: 15px; color: var(--body); }
.wpr-list { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.6; color: var(--body); }

/* scenarios */
.wpr-scenario { gap: 12px; }
.wpr-scenario-q { font-size: 16px; font-weight: 600; }
.wpr-kv { display: flex; flex-direction: column; gap: 4px; }
.wpr-kv p { font-size: 15px; color: var(--body); }
.wpr-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* quiz */
.wpr-progress { height: 6px; background: #E1E7EF; border-radius: 3px; overflow: hidden; }
.wpr-progress-bar { height: 100%; background: var(--blue); }
.wpr-progress-label { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.wpr-question { font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.35; }
.wpr-options { display: flex; flex-direction: column; gap: 10px; }
.wpr-option {
  display: flex; gap: 14px; align-items: center; text-align: left; font: inherit; font-size: 16px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; cursor: pointer; min-height: 48px;
}
.wpr-option:hover { border-color: var(--blue); }
.wpr-option.is-selected { border-color: var(--blue); background: #F2F6FF; }
.wpr-radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #B8C3CC; }
.wpr-option.is-selected .wpr-radio { border-color: var(--blue); background: radial-gradient(circle, var(--blue) 0 45%, transparent 46%); }

.wpr-result { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; }
.wpr-result.is-pass { color: var(--green); }
.wpr-result.is-fail { color: var(--red); }
.wpr-review { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid #E1E7EF; padding-top: 16px; }
.wpr-review-row { display: flex; gap: 12px; align-items: flex-start; }
.wpr-review-mark { font-family: var(--mono); font-size: 12px; min-width: 62px; }
.wpr-review-mark.is-ok { color: var(--green); }
.wpr-review-mark.is-no { color: var(--red); }
.wpr-review-q { font-size: 15px; font-weight: 600; }

/* certificate: a formal diploma — centred, navy frame with a gold inner rule */
.wpr-cert-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.wpr-cert { background: var(--paper); }
.wpr-cert-frame { border: 2px solid var(--ink); padding: 9px; }
.wpr-cert-inner {
  border: 1px solid var(--gold); padding: 34px 56px 28px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.wpr-cert-logo { width: 112px; height: auto; }
.wpr-cert-wordmark { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: 0.02em; }
.wpr-cert-eyebrow { margin-top: 22px; font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--blue); }
.wpr-cert-orn { display: flex; align-items: center; gap: 10px; width: 240px; margin-top: 14px; }
.wpr-cert-orn i { height: 1px; flex: 1; background: var(--gold); }
.wpr-cert-orn span { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.wpr-cert-lead { margin-top: 20px; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--muted); }
.wpr-cert-name { margin-top: 4px; font-family: var(--serif); font-weight: 600; font-size: 50px; line-height: 1.1; color: var(--ink); }
.wpr-cert-namerule { height: 1px; width: 360px; max-width: 100%; background: var(--ink); margin-top: 12px; }
.wpr-cert-pre { margin-top: 18px; font-size: 16px; color: var(--body); }
.wpr-cert-title { margin-top: 6px; font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.2; color: var(--ink); }
.wpr-cert-text { margin-top: 16px; font-size: 16px; line-height: 1.7; color: var(--body); max-width: 70ch; }

.wpr-cert-sign { display: flex; align-items: flex-end; gap: 48px; width: 100%; max-width: 860px; margin-top: 26px; }
.wpr-cert-sign-col { flex: 1; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.wpr-cert-sign-col.is-right { text-align: right; }
.wpr-cert-signature { font-family: 'Mrs Saint Delafield', cursive; font-size: 42px; line-height: 0.9; color: var(--ink); padding-left: 4px; }
.wpr-cert-line { height: 1px; background: var(--ink); }
.wpr-cert-sign-name { font-size: 13px; font-weight: 600; }
.wpr-cert-sign-id { font-family: var(--mono); font-size: 13px; color: var(--body); }
.wpr-cert-sign-role { font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.wpr-cert-seal {
  flex: none; width: 116px; height: 116px; border: 2px solid var(--ink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.wpr-cert-seal-in {
  width: 100px; height: 100px; border: 1px solid var(--gold); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.wpr-cert-seal-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.wpr-cert-seal-pct { font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1; color: var(--ink); }
.wpr-cert-seal-pass { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
.wpr-cert-fine { margin-top: 20px; font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 72ch; }

.wpr-foot { border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.wpr-foot p { font-size: 14px; color: var(--muted); max-width: 74ch; }

@media (max-width: 720px) {
  .wpr-training { padding: 24px 16px 64px; }
  .wpr-training h1 { font-size: 30px; }
  .wpr-cert-inner { padding: 28px 24px; }
  .wpr-cert-title { font-size: 24px; }
  .wpr-cert-name { font-size: 38px; }
  .wpr-cert-namerule { width: 100%; }
  .wpr-cert-sign-col, .wpr-cert-sign-col.is-right { text-align: center; align-items: center; }
  .wpr-cert-sign { flex-direction: column; align-items: stretch; gap: 24px; }
  .wpr-stats { gap: 20px; }
}

/* print: the certificate only, one A4 landscape sheet.
   The certificate is cloned into #wpr-print-root and everything else is
   removed from the flow with display:none. Hiding with visibility keeps the
   whole page's height, which printed nine blank sheets after the first. */
#wpr-print-root { display: none; }
@media print {
  html, body { background: #fff !important; height: auto !important; }
  body > *:not(#wpr-print-root) { display: none !important; }
  /* zoom, not transform: it shrinks the layout box the print engine
     paginates, so the certificate lands on one sheet. */
  /* margin:0 on @page plus padding here, so the sheet keeps its white border
     even when the print dialog is set to minimum margins. */
  #wpr-print-root { display: block !important; zoom: 0.86; padding: 16mm; }
  #wpr-print-root .wpr-training { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  #wpr-print-root .wpr-cert {
    width: 100% !important; border: 0 !important; border-radius: 0 !important;
    padding: 0 !important; transform: none !important;
  }
  #wpr-print-root * { box-shadow: none !important; }
  .wpr-noprint { display: none !important; }
  @page { size: A4 landscape; margin: 0; }
}

/* ---------------------------------------------------------------------------
   Theme reset. Themes commonly set light colours on headings, paragraphs and
   list items, which made copy come out white on our light cards. These rules
   pin our own colours inside .wpr-training and win on specificity, with
   !important where a theme is likely to use it too. Nothing outside
   .wpr-training is touched.
   --------------------------------------------------------------------------- */

.wpr-training,
.wpr-training :where(p, li, dd, dt, span, div, label, strong, em, small, figcaption) {
  color: var(--ink) !important;
}

.wpr-training :where(h1, h2, h3, h4, h5, h6) {
  color: var(--ink) !important;
  font-family: var(--display) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  text-shadow: none !important;
}
.wpr-training h1 { font-size: 40px !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; }
.wpr-training h2 { font-size: 26px !important; line-height: 1.2 !important; }
.wpr-training h3 { font-size: 18px !important; line-height: 1.3 !important; }

.wpr-training p,
.wpr-training li { line-height: 1.65 !important; margin: 0 !important; }
.wpr-training .wpr-list { padding-left: 20px !important; }
.wpr-training .wpr-list li { list-style: disc !important; }
.wpr-training ul,
.wpr-training dl { margin: 0 !important; list-style: none !important; }

/* colour exceptions, re-asserted after the blanket rule above */
.wpr-training .wpr-lead,
.wpr-training .wpr-module-intro,
.wpr-training .wpr-cert-text,
.wpr-training .wpr-kv p { color: var(--body) !important; }
.wpr-training .wpr-muted,
.wpr-training .wpr-eyebrow,
.wpr-training .wpr-tag,
.wpr-training .wpr-tier-ex,
.wpr-training .wpr-stats dt,
.wpr-training .wpr-module-num,
.wpr-training .wpr-progress-label,
.wpr-training .wpr-cert-sign-role,
.wpr-training .wpr-cert-seal-label,
.wpr-training .wpr-cert-fine,
.wpr-training .wpr-foot p { color: var(--muted) !important; }
.wpr-training .wpr-tier-name { color: var(--tier) !important; }
.wpr-training .wpr-cert-eyebrow,
.wpr-training .wpr-link { color: var(--blue) !important; }
.wpr-training .wpr-cert-seal-pass,
.wpr-training .wpr-result.is-pass,
.wpr-training .wpr-review-mark.is-ok { color: var(--green) !important; }
.wpr-training .wpr-result.is-fail,
.wpr-training .wpr-review-mark.is-no { color: var(--red) !important; }
.wpr-training .wpr-stop-letter { color: var(--cyan) !important; background: var(--ink) !important; }

/* buttons and inputs: themes restyle these hardest */
.wpr-training .wpr-btn,
.wpr-training button.wpr-btn {
  font: inherit !important; font-size: 15px !important; text-transform: none !important;
  letter-spacing: normal !important; border-radius: 6px !important; box-shadow: none !important;
  background: transparent !important; color: var(--ink) !important; border: 1px solid #B8C3CC !important;
  padding: 12px 22px !important; min-height: 48px !important; width: auto !important;
}
.wpr-training .wpr-btn-primary,
.wpr-training button.wpr-btn-primary { background: var(--blue) !important; border-color: var(--blue) !important; color: #FFFFFF !important; font-weight: 600 !important; }
.wpr-training .wpr-btn-primary:hover { background: var(--ink) !important; border-color: var(--ink) !important; }
.wpr-training .wpr-btn-dark,
.wpr-training button.wpr-btn-dark { background: var(--ink) !important; border-color: var(--ink) !important; color: #FFFFFF !important; font-weight: 600 !important; }
.wpr-training .wpr-btn-dark:hover { background: var(--blue) !important; border-color: var(--blue) !important; }
.wpr-training .wpr-option,
.wpr-training button.wpr-option,
.wpr-training .wpr-module-head,
.wpr-training button.wpr-module-head {
  font: inherit !important; text-transform: none !important; letter-spacing: normal !important;
  color: var(--ink) !important; box-shadow: none !important; width: 100% !important;
}
.wpr-training .wpr-module-head { background: transparent !important; border: 0 !important; }
.wpr-training .wpr-option { background: var(--paper) !important; }
.wpr-training .wpr-option.is-selected { background: #F2F6FF !important; border-color: var(--blue) !important; }
.wpr-training .wpr-link { background: none !important; border: 0 !important; padding: 0 !important; min-height: 0 !important; width: auto !important; }
.wpr-training input[type="text"] {
  font: inherit !important; font-size: 16px !important; color: var(--ink) !important;
  background: #FFFFFF !important; border: 1px solid var(--line) !important; border-radius: 6px !important;
  padding: 12px 14px !important; min-height: 48px !important; box-shadow: none !important;
}

/* cards and surfaces stay light whatever the theme background is */
.wpr-training .wpr-card,
.wpr-training .wpr-status,
.wpr-training .wpr-module,
.wpr-training .wpr-tier,
.wpr-training .wpr-stop-row,
.wpr-training .wpr-cert { background: var(--paper) !important; }
.wpr-training .wpr-cert-seal { background: var(--wash) !important; }
.wpr-training .wpr-video { background: var(--ink) !important; }
.wpr-training .wpr-cert-signature { font-family: 'Mrs Saint Delafield', cursive !important; color: var(--ink) !important; }
.wpr-training .wpr-eyebrow,
.wpr-training .wpr-tag,
.wpr-training .wpr-module-num,
.wpr-training .wpr-stats dt,
.wpr-training .wpr-progress-label,
.wpr-training .wpr-review-mark,
.wpr-training .wpr-cert-sign-id,
.wpr-training .wpr-cert-sign-role,
.wpr-training .wpr-cert-eyebrow,
.wpr-training .wpr-cert-seal-label,
.wpr-training .wpr-cert-seal-pass { font-family: var(--mono) !important; }

/* the diploma sets its own type; keep the blanket resets from overriding it */
.wpr-training .wpr-cert-name,
.wpr-training .wpr-cert-title,
.wpr-training .wpr-cert-lead,
.wpr-training .wpr-cert-seal-pct { font-family: var(--serif) !important; color: var(--ink) !important; }
.wpr-training .wpr-cert-lead { color: var(--muted) !important; }
.wpr-training .wpr-cert-text { color: var(--body) !important; }
.wpr-training .wpr-cert-fine { color: var(--muted) !important; }
.wpr-training .wpr-cert-signature { font-family: 'Mrs Saint Delafield', cursive !important; color: var(--ink) !important; }
.wpr-training .wpr-cert-frame { border: 2px solid var(--ink) !important; }
.wpr-training .wpr-cert-inner { border: 1px solid var(--gold) !important; }