/* ICoBC Academy: visual polish for the course player.
   Loaded after academy.css. Only appearance, never layout or behaviour, so the
   pages stay readable if this file is missing. Motion is off for anyone who asks
   for less of it (system setting or the accessibility panel). */

/* ---------- primary buttons: a soft glossy face ---------- */
.btn:not(.btn-ghost) {
  background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 52%, rgba(0,0,0,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 5px rgba(2,39,64,.18);
  position: relative; overflow: hidden;
}
.btn:not(.btn-ghost):hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 7px 18px rgba(2,39,64,.26); }
.btn:active { box-shadow: inset 0 2px 5px rgba(0,0,0,.22); }
.btn-ghost:hover { background: #F2F7FA; border-color: #9DB0BE; }

/* ---------- quizzes and options ---------- */
.quiz {
  background-image: linear-gradient(180deg, #FFFFFF 0%, #FCFDFE 100%);
  box-shadow: 0 1px 2px rgba(2,39,64,.05);
}
.quiz:focus-within { border-color: #9DB0BE; box-shadow: 0 6px 20px rgba(2,39,64,.10); }
.opt { position: relative; }
.opt:hover { box-shadow: 0 2px 8px rgba(2,39,64,.09); }
.opt:has(input:checked) { box-shadow: inset 3px 0 0 var(--navy); }
.opt.opt-correct { box-shadow: inset 3px 0 0 #8DB024; }
.quiz.is-wrong .opt:has(input:checked):not(.opt-correct) { box-shadow: inset 3px 0 0 #D9822B; }

/* ---------- table of contents (the dot marker stays as academy.css defines it) ---------- */
.player-toc ol a { border-radius: 8px; }
.player-toc ol a:hover { background: #F3F8FB; box-shadow: inset 3px 0 0 var(--cyan); }
.player-toc ol a[aria-current="step"] { box-shadow: inset 3px 0 0 var(--orange); }

/* ---------- progress ---------- */
.progress-bar { background: #E5EDF2; border-radius: 99px; overflow: hidden; }
.progress-bar i {
  background-image: linear-gradient(90deg, #5DCAE7 0%, #B1CF37 55%, #F78222 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

/* ---------- headings, panels, cards ---------- */
.lesson > h2 { position: relative; }
.lesson > h2::after {
  content: ""; display: block; width: 68px; height: 4px; margin-top: .45rem; border-radius: 4px;
  background: linear-gradient(90deg, #B1CF37 0 34%, #F78222 34% 67%, #5DCAE7 67% 100%);
}
.final-box, .cert-panel {
  background-image: radial-gradient(120% 90% at 100% 0%, rgba(93,202,231,.14) 0%, rgba(255,255,255,0) 58%);
}
.cert-panel { box-shadow: 0 10px 30px rgba(2,39,64,.10); }
.course-card { position: relative; overflow: hidden; }
.course-card:hover { box-shadow: 0 14px 34px rgba(2,39,64,.14); border-color: #B7C8D4; }
.course-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 42%); opacity: .5;
}

/* ---------- focus: always visible, never hidden by hover styles ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #1F9BC2; outline-offset: 2px; border-radius: 4px;
}
.skip-link:focus { box-shadow: 0 8px 24px rgba(2,39,64,.3); }

/* ---------- motion, only when it is welcome ---------- */
@media (prefers-reduced-motion: no-preference) {
  html:not(.a11y-no-motion) .btn,
  html:not(.a11y-no-motion) .opt,
  html:not(.a11y-no-motion) .course-card,
  html:not(.a11y-no-motion) .quiz,
  html:not(.a11y-no-motion) .player-toc ol a::before { transition: all .22s cubic-bezier(.2,.7,.3,1); }
  html:not(.a11y-no-motion) .btn:not(.btn-ghost):hover,
  html:not(.a11y-no-motion) .course-card:hover { transform: translateY(-2px); }
  html:not(.a11y-no-motion) .btn:active { transform: translateY(0); }
  html:not(.a11y-no-motion) .progress-bar i { transition: width .5s cubic-bezier(.2,.7,.3,1); }
  html:not(.a11y-no-motion) .btn:not(.btn-ghost)::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0));
    transform: skewX(-18deg); opacity: 0;
  }
  html:not(.a11y-no-motion) .btn:not(.btn-ghost):hover::after { animation: icb-sheen .7s ease-out 1; }
  html:not(.a11y-no-motion) .lesson:not([hidden]) { animation: icb-rise .32s ease-out 1; }
  html:not(.a11y-no-motion) { scroll-behavior: smooth; }
}
@keyframes icb-sheen { from { left: -60%; opacity: .9; } to { left: 120%; opacity: 0; } }
@keyframes icb-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* ---------- print: a clean handout of the open part ---------- */
@media print {
  .player-top, .player-toc, .player-foot, .lesson-nav, .quiz-actions, .skip-link { display: none !important; }
  .lesson[hidden] { display: block !important; }
  .quiz, .opt { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
}

/* ---------- certificate: share block ---------- */
.cert-share { margin: 0 0 1.4rem; padding: 1.1rem 1.2rem; border-radius: 12px; border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(93,202,231,.10), rgba(177,207,55,.10)); }
.cert-share h4 { margin: 0 0 .6rem; font-size: 1.02rem; color: var(--navy); }
.cert-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: .6rem; }
.cert-actions .btn { min-height: 44px; }
#cert-li-add::before, #cert-li-share::before {
  content: "in"; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-right: .45em;
  border-radius: 3px; background: #0A66C2; color: #fff; font-weight: 700; font-size: .78em; line-height: 1;
}
.cert-share .small { margin: 0; }

/* ---------- course information: the matching ICoBC offer ---------- */
.side-offer { border-left: 4px solid var(--orange); background: linear-gradient(135deg, #FFF8F1, #FFFFFF 70%); }
.side-offer h2 { font-size: 1.02rem; }

/* ---------- phones ---------- */
@media (max-width: 980px) {
  .player-toc .toc-inner > h2 { display: none; }          /* the toggle already says "Contents" */
}
@media (max-width: 520px) {
  .cert-actions .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
  .lesson-nav .btn { min-height: 48px; }
  .quiz .opt { min-height: 48px; }
  .final-submit-row { flex-wrap: wrap; gap: 10px; }
  .final-submit-row .btn { width: 100%; }
}

/* ---------- pathway cards: the facts line sits at the bottom of every card ---------- */
.pw-card { display: flex; flex-direction: column; height: 100%; }
.pw-card .facts { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.pw-card .facts .pw-online { color: #4C6B12; font-weight: 600; }