/* THC Courses: the course page (WB-092 batch 11; SPEC.md sections 4, 10 and 11).
   Colours are the theme's tokens with literal fallbacks; THC Core's Display & reading swaps the tokens for dark mode
   (html[data-thc-theme="dark"]), so this file has only one dark rule (text on deep-leaf buttons). */

.thc-course, .thc-lesson, .thc-dash, .thc-reg {
  --thc-c-raised: var(--thc-surface-raised, var(--wp--preset--color--accent-5, #fcf8ef));
  --thc-c-muted: var(--thc-surface-muted, var(--wp--preset--color--accent-4, #ece4d9));
  --thc-c-border: var(--thc-border, var(--wp--preset--color--accent-6, #d9d0bc));
  --thc-c-text: var(--thc-text, var(--wp--preset--color--contrast, #332d25));
  --thc-c-leaf: var(--thc-leaf, var(--wp--preset--color--accent-1, #5e7d53));
  --thc-c-deep: var(--thc-leaf-deep, var(--wp--preset--color--accent-3, #3f5c3b));
  --thc-c-stroke: var(--thc-control-stroke, var(--wp--preset--color--control-stroke, #8a7f66));
  --thc-c-on-deep: #fff;
  color: var(--thc-c-text);
  overflow-wrap: anywhere;
}
html[data-thc-theme="dark"] .thc-course, html[data-thc-theme="dark"] .thc-lesson, html[data-thc-theme="dark"] .thc-dash, html[data-thc-theme="dark"] .thc-reg { --thc-c-on-deep: #15130f; }

.thc-course .screen-reader-text, .thc-lesson .screen-reader-text, .thc-dash .screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* "What you get" line */
.thc-course__facts { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.thc-course__facts li {
  padding: .25rem .75rem; border: 1px solid var(--thc-c-border); border-radius: 999px;
  background: var(--thc-c-muted); font-size: .9375rem;
}

/* 0.26.0 (WB-092 A75): course, lesson and quiz pages use the theme's wide size (1200px here) instead of the 720px text
   column, so the text beside the entry box or the outline is no longer squeezed on big screens. The wrappers carry
   alignwide (the constrained layout widens them); the title above them follows. 0.26.1: the featured image keeps the
   text width (at 1200px the course photo filled the whole first screen, seen live). Phones unchanged. */
body.single-courses .wp-block-post-title,
body.single-lesson .wp-block-post-title, body.single-tutor_quiz .wp-block-post-title,
body.single-tutor_assignments .wp-block-post-title { max-width: var(--wp--style--global--wide-size); }

/* 0.28.0: the catalog's card grid: three across on wide screens (six courses as two even rows), the theme's own two
   and one across below its breakpoints. */
@media (min-width: 1121px) {
  .thc-catalog--cols-3 .thc-resources__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* heading="no": the grid sits inside a page section of its own, so no section padding of its own. */
.thc-page .thc-section.thc-catalog--bare, .thc-section.thc-catalog--bare { padding-block: 0; margin: 0; } /* 0.28.1: outranks the theme's :is(.thc-home, .thc-page) .thc-section rule */

/* Layout: the entry box first in reading order (price and button near the top on phones), beside the text on wide screens */
.thc-course__layout { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .thc-course__layout { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
  .thc-course__entry { grid-column: 2; grid-row: 1; position: sticky; top: 1.5rem; }
  .thc-course__main { grid-column: 1; grid-row: 1; }
}
.thc-course__main { min-width: 0; }

/* Entry box */
.thc-course__entry {
  padding: 1.25rem; border: 1px solid var(--thc-c-border); border-radius: 12px; background: var(--thc-c-raised);
}
.thc-course__price { margin: 0 0 1rem; font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.thc-course__price del { font-size: 1.125rem; font-weight: 400; }
.thc-course__price ins { text-decoration: none; }
.thc-course__progress-label { margin: 0 0 .5rem; font-weight: 700; }
.thc-course__progress {
  height: .625rem; margin: 0 0 1rem; border-radius: 999px; background: var(--thc-c-muted);
  box-shadow: inset 0 0 0 1px var(--thc-c-stroke); overflow: hidden;
}
.thc-course__progress span { display: block; height: 100%; background: var(--thc-c-leaf); }
.thc-course__actions form { margin: 0; }
.thc-course__button {
  display: block; box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: .75rem 1rem;
  border: 0; border-radius: 8px; background: var(--thc-c-deep); color: var(--thc-c-on-deep);
  font: inherit; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer;
}
a.thc-course__button:hover, button.thc-course__button:hover { text-decoration: underline; }
/* 0.21.0 (rehearsal 1, fix 1): the theme colours every link in main and footer, :visited and :hover included (up to
   0,2,1: ":where(main, footer) a:not(.wp-element-button, …):visited"), which turned "Start learning" the colour of its
   own fill. Links drawn as buttons or pills keep their own text colour at 0,3,1 or more, whatever order the stylesheets
   load in. */
:root :is(a.thc-course__button, a.thc-course__button:visited, a.thc-course__button:hover) { color: var(--thc-c-on-deep); }
:root :is(.thc-dash__nav a[aria-current="page"], .thc-dash__nav a[aria-current="page"]:visited, .thc-dash__nav a[aria-current="page"]:hover) { color: var(--thc-c-on-deep); }
:root :is(a.thc-google__button, a.thc-google__button:visited, a.thc-google__button:hover) { color: #1f1f1f; }
.thc-course__button:focus-visible, .thc-course a:focus-visible, .thc-lesson a:focus-visible, .thc-lesson summary:focus-visible, .thc-dash a:focus-visible {
  outline: 3px solid var(--thc-c-deep); outline-offset: 2px;
}
.thc-course__button--waiting {
  background: var(--thc-c-muted); color: var(--thc-c-text); box-shadow: inset 0 0 0 1px var(--thc-c-stroke); cursor: default;
}
.thc-course__aside { margin: .75rem 0 0; font-size: .9375rem; }
.thc-course a:not(.thc-course__button), .thc-lesson a:not(.thc-course__button), .thc-dash a:not(.thc-course__button) { color: var(--thc-c-deep); }

/* Curriculum */
.thc-course__curriculum { margin-top: 2rem; }
.thc-course__units, .thc-course__items { list-style: none; margin: 0; padding: 0; }
.thc-course__unit { margin: 0 0 1rem; border: 1px solid var(--thc-c-border); border-radius: 12px; background: var(--thc-c-raised); }
.thc-course__unit h3, .thc-course__unit h2 { margin: 0; padding: .875rem 1rem; font-size: 1.0625rem; border-bottom: 1px solid var(--thc-c-border); }
.thc-course__item { display: flex; gap: .625rem; align-items: baseline; padding: .625rem 1rem; }
.thc-course__item + .thc-course__item { border-top: 1px solid var(--thc-c-border); }
.thc-course__item a, .thc-course__item > span:last-child { flex: 1; min-width: 0; }
.thc-course__mark {
  flex: none; width: .875rem; height: .875rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--thc-c-stroke);
  position: relative; top: .1rem;
}
.thc-course__item--quiz .thc-course__mark { border-radius: 3px; }
.thc-course__item.is-done .thc-course__mark { background: var(--thc-c-leaf); box-shadow: none; }
.thc-course__item.is-done .thc-course__mark::after {
  content: ""; position: absolute; left: .29rem; top: .14rem; width: .22rem; height: .42rem;
  border: solid var(--thc-c-raised); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.thc-course__item.is-locked .thc-course__mark { box-shadow: none; border-radius: 2px; background: var(--thc-c-stroke); width: .75rem; height: .625rem; top: .05rem; }
.thc-course__item.is-locked .thc-course__mark::before {
  content: ""; position: absolute; left: .15rem; top: -.35rem; width: .45rem; height: .4rem;
  border: 2px solid var(--thc-c-stroke); border-bottom: 0; border-radius: .3rem .3rem 0 0; box-sizing: border-box;
}

/* Lesson page (0.6.0) */
.thc-lesson__crumbs { margin: 0 0 1rem; font-size: .9375rem; }
.thc-lesson__status:empty { display: none; }
.thc-lesson__status {
  margin: 0 0 1rem; padding: .75rem 1rem; border-radius: 8px; background: var(--thc-c-muted);
  box-shadow: inset 4px 0 0 var(--thc-c-leaf); font-weight: 700;
}
.thc-lesson__layout { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .thc-lesson__layout { grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; }
  .thc-lesson__outline { position: sticky; top: 1.5rem; }
}
.thc-lesson__main { min-width: 0; }
/* 0.29.2: lesson list spacing (Micha, 2026-09-23): about half a line between items so long bullet lists don't read as a
   wall of text; nested lists get the same gap above. Moved here from the child theme, where it targeted Tutor's lesson
   wrapper (theme 0.1.3, WB-092 batch 24 part b). */
.thc-lesson__body li { margin-bottom: 0.6875em; }
.thc-lesson__body li:last-child { margin-bottom: 0; }
.thc-lesson__body li > :is(ul, ol) { margin-top: 0.6875em; }
/* 0.23.0 (A59): the lesson video, full width at 16:9 */
.thc-lesson__video { margin: 0 0 1.5rem; }
.thc-lesson__video iframe, .thc-lesson__video video { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #000; }
.thc-lesson__files { margin: 2rem 0 0; padding: 1rem 1.25rem; border: 1px solid var(--thc-c-border); border-radius: 12px; background: var(--thc-c-raised); }
.thc-lesson__files h2 { margin: 0 0 .5rem; font-size: 1.125rem; }
.thc-lesson__files ul { margin: 0; padding-left: 1.25rem; }
.thc-lesson__complete { margin: 2rem 0 0; max-width: 20rem; }
.thc-lesson__complete form { margin: 0; }
.thc-lesson__done { display: flex; gap: .5rem; align-items: center; margin: 0; font-weight: 700; }
.thc-lesson__done .thc-course__mark { background: var(--thc-c-leaf); box-shadow: none; width: 1rem; height: 1rem; border-radius: 50%; top: 0; flex: none; }
.thc-lesson__pager { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--thc-c-border); }
.thc-lesson__pager a { display: block; min-height: 44px; max-width: 100%; box-sizing: border-box; padding: .5rem 0; }
.thc-lesson__pager a span { display: block; font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.thc-lesson__next { margin-left: auto; text-align: right; }
.thc-lesson__outline { border: 1px solid var(--thc-c-border); border-radius: 12px; background: var(--thc-c-raised); }
.thc-lesson__outline summary { padding: .875rem 1rem; min-height: 44px; box-sizing: border-box; font-weight: 700; cursor: pointer; }
.thc-lesson__count { font-weight: 400; }
.thc-lesson__outline .thc-course__units { padding: 0 .5rem .5rem; }
.thc-lesson__outline .thc-course__unit { margin: 0 0 .5rem; }
.thc-lesson__outline .thc-course__unit h2 { font-size: 1rem; padding: .625rem .75rem; } /* 0.19.0: h2 in the outline */
.thc-lesson__outline .thc-course__item { padding: .5rem .75rem; font-size: .9375rem; }
.thc-lesson__outline a[aria-current="page"] { font-weight: 700; text-decoration: none; }
.thc-lesson--locked { padding: 1.25rem; border: 1px solid var(--thc-c-border); border-radius: 12px; background: var(--thc-c-raised); }
.thc-lesson__actions { max-width: 20rem; }

/* Quizzes (0.9.0) */
.thc-quiz__q { margin: 0 0 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--thc-c-border); border-radius: 12px; background: var(--thc-c-raised); }
.thc-quiz__q legend { float: left; width: 100%; padding: 0; margin: 0 0 .5rem; font-weight: 700; } /* float keeps the legend inside the box */
.thc-quiz__q legend + * { clear: both; }
.thc-quiz__n { display: block; font-size: .875rem; text-transform: uppercase; letter-spacing: .04em; }
/* 0.23.0 (A62): question descriptions and answer pictures, as Tutor shows them */
.thc-quiz__desc { margin: 0 0 .75rem; }
.thc-quiz__desc > :first-child { margin-top: 0; }
.thc-quiz__desc > :last-child { margin-bottom: 0; }
.thc-quiz__media { display: inline-flex; flex-direction: column; gap: .375rem; }
.thc-quiz__img { display: block; max-width: min(100%, 300px); height: auto; border-radius: 8px; }
.thc-quiz__right { margin: .25rem 0 .75rem; padding-left: 1.25rem; }
.thc-quiz__a { display: flex; gap: .625rem; align-items: center; margin: .25rem 0; min-height: 44px; }
.thc-quiz__a input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--thc-c-deep); }
.thc-quiz__a label { flex: 1; cursor: pointer; padding: .5rem 0; }
.thc-quiz__hint, .thc-quiz__note { font-size: .9375rem; }
.thc-quiz form .thc-course__button, .thc-quiz__form .thc-course__button { max-width: 20rem; }
.thc-quiz__results { margin: 0 0 2rem; padding: 1rem 1.25rem; border-radius: 12px; background: var(--thc-c-muted); }
.thc-quiz__score { font-weight: 700; font-size: 1.125rem; }
.thc-quiz__attempts { border-collapse: collapse; width: 100%; max-width: 32rem; }
.thc-quiz__attempts th, .thc-quiz__attempts td { padding: .5rem; border-bottom: 1px solid var(--thc-c-border); text-align: left; }

/* Dashboard (0.11.0) */
.thc-dash__nav ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.thc-dash__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--thc-c-border); border-radius: 999px; background: var(--thc-c-raised); text-decoration: none; }
.thc-dash__nav a[aria-current="page"] { background: var(--thc-c-deep); border-color: var(--thc-c-deep); color: var(--thc-c-on-deep); font-weight: 700; }
.thc-dash__cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); list-style: none; margin: 0; padding: 0; }
.thc-dash__card { padding: 1.25rem; border: 1px solid var(--thc-c-border); border-radius: 12px; background: var(--thc-c-raised); }
.thc-dash__card h3 { margin: 0 0 .75rem; font-size: 1.125rem; }
.thc-dash__continue { margin: 0 0 2rem; padding: 1.25rem; border-radius: 12px; background: var(--thc-c-muted); }
.thc-dash__continue h3 { margin: 0 0 .5rem; }
.thc-dash__continue .thc-lesson__actions { max-width: 20rem; margin-bottom: 0; }
.thc-dash__course { font-size: .875rem; }
.thc-dash__account li { margin: 0 0 .75rem; }
.thc-dash .thc-quiz__attempts { max-width: none; }

/* Wishlist and notes (0.12.0) */
.thc-wish { margin: .75rem 0 0; }
.thc-wish__button { display: inline-flex; gap: .5rem; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--thc-c-stroke); border-radius: 999px; background: transparent; color: var(--thc-c-text); font: inherit; cursor: pointer; }
.thc-wish__button:focus-visible { outline: 3px solid var(--thc-c-deep); outline-offset: 2px; }
.thc-wish__heart { width: 1rem; height: .9rem; flex: none; background: var(--thc-c-deep); clip-path: polygon(50% 100%, 4% 50%, 0 30%, 6% 10%, 22% 0, 38% 4%, 50% 18%, 62% 4%, 78% 0, 94% 10%, 100% 30%, 96% 50%); opacity: .35; }
.thc-wish__button[aria-pressed="true"] .thc-wish__heart { width: 1rem; height: .9rem; flex: none; background: var(--thc-c-deep); clip-path: polygon(50% 100%, 4% 50%, 0 30%, 6% 10%, 22% 0, 38% 4%, 50% 18%, 62% 4%, 78% 0, 94% 10%, 100% 30%, 96% 50%); opacity: .35; }
.thc-lesson__notes { margin: 2rem 0 0; border: 1px solid var(--thc-c-border); border-radius: 12px; background: var(--thc-c-raised); }
.thc-lesson__notes summary { padding: .875rem 1rem; min-height: 44px; box-sizing: border-box; font-weight: 700; cursor: pointer; }
.thc-lesson__notes summary:focus-visible { outline: 3px solid var(--thc-c-deep); outline-offset: 2px; }
.thc-lesson__notes form { padding: 0 1rem 1rem; }
.thc-lesson__notes label { display: block; margin: 0 0 .5rem; font-size: .9375rem; }
.thc-lesson__notes textarea { display: block; box-sizing: border-box; width: 100%; padding: .5rem; border: 1px solid var(--thc-c-stroke); border-radius: 8px; background: var(--thc-c-raised); color: var(--thc-c-text); font: inherit; }
.thc-lesson__note-status:empty { display: none; }
.thc-lesson__notes .thc-course__button { max-width: 20rem; }
.thc-dash__notes ul { padding-left: 1.25rem; }

/* Registration (0.13.0) */
.thc-reg { max-width: 32rem; }
.thc-reg__field label { display: block; font-weight: 700; margin: 0 0 .25rem; }
.thc-reg__field input { display: block; box-sizing: border-box; width: 100%; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--thc-c-stroke); border-radius: 8px; background: var(--thc-c-raised); color: var(--thc-c-text); font: inherit; }
.thc-reg__field input:focus-visible, .thc-reg__check input:focus-visible { outline: 3px solid var(--thc-c-deep); outline-offset: 2px; }
.thc-reg__field input[aria-invalid="true"], .thc-reg__check input[aria-invalid="true"] { border-color: var(--thc-error, #a3362b); border-width: 2px; }
.thc-reg__err { display: block; margin-top: .25rem; font-weight: 700; color: var(--thc-error, #a3362b); }
html[data-thc-theme="dark"] .thc-reg__err { color: var(--thc-error, #f0a49d); }
.thc-reg__check { display: flex; gap: .625rem; align-items: flex-start; flex-wrap: wrap; }
.thc-reg__check input { width: 1.25rem; height: 1.25rem; margin: .2rem 0 0; flex: none; accent-color: var(--thc-c-deep); }
.thc-reg__check label { flex: 1; min-width: 12rem; }
.thc-reg .thc-nt-reg__row { display: flex; gap: .625rem; align-items: flex-start; margin: 0 0 1rem; } /* THC Notify's tick box (0.28.3: Notify 0.2.6's own markup) */
.thc-reg .thc-nt-reg input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin: .2rem 0 0; flex: none; accent-color: var(--thc-c-deep); }
.thc-reg .thc-nt-reg input[type="checkbox"]:focus-visible { outline: 3px solid var(--thc-c-deep); outline-offset: 2px; }
/* 0.25.0: the Continue with Google button lives in thc-google.css (shared with wp-login.php); this stylesheet depends on it. */
.thc-reg__summary { margin: 0 0 1.5rem; padding: 1rem 1.25rem; border-radius: 12px; background: var(--thc-c-muted); box-shadow: inset 4px 0 0 var(--thc-error, #a3362b); }
.thc-reg__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.thc-reg .thc-course__button { max-width: 20rem; }
.thc-reg a { color: var(--thc-c-deep); }

/* Reviews and questions (0.15.0) */
.thc-course__reviews { margin-top: 2rem; }
.thc-stars { color: var(--thc-c-deep); letter-spacing: .05em; }
.thc-course__review-list { list-style: none; margin: 0; padding: 0; }
.thc-review { padding: 1rem 0; border-top: 1px solid var(--thc-c-border); }
.thc-review.is-waiting { opacity: .85; }
.thc-review__head { margin: 0 0 .25rem; }
.thc-review__date { font-size: .875rem; }
.thc-course__review-form, .thc-course__ask { margin: 1.5rem 0 0; border: 1px solid var(--thc-c-border); border-radius: 12px; background: var(--thc-c-raised); }
.thc-course__review-form summary, .thc-course__ask summary { padding: .875rem 1rem; min-height: 44px; box-sizing: border-box; font-weight: 700; cursor: pointer; }
.thc-course__review-form summary:focus-visible, .thc-course__ask summary:focus-visible { outline: 3px solid var(--thc-c-deep); outline-offset: 2px; }
.thc-course__review-form form, .thc-course__ask > *:not(summary) { padding: 0 1rem 1rem; }
.thc-review__stars { border: 0; margin: 0 0 1rem; padding: 0; }
.thc-review__stars legend { font-weight: 700; margin-bottom: .5rem; }
.thc-review__stars label { display: inline-flex; gap: .375rem; align-items: center; min-height: 44px; margin-right: 1rem; }
.thc-review__stars input { width: 1.25rem; height: 1.25rem; accent-color: var(--thc-c-deep); }
.thc-course__review-form textarea { display: block; box-sizing: border-box; width: 100%; padding: .5rem; border: 1px solid var(--thc-c-stroke); border-radius: 8px; background: var(--thc-c-raised); color: var(--thc-c-text); font: inherit; }
.thc-course__review-form .thc-course__button { max-width: 20rem; }

/* Announcements (0.17.0) */
.thc-course__announcements, .thc-dash__news { margin: 0 0 2rem; }
.thc-ann { margin: 0 0 1rem; padding: 1rem 1.25rem; border: 1px solid var(--thc-c-border); border-radius: 12px; background: var(--thc-c-raised); box-shadow: inset 4px 0 0 var(--thc-c-leaf); overflow-wrap: anywhere; }
.thc-ann__title { margin: 0 0 .25rem; font-size: 1.0625rem; }
.thc-ann__meta { margin: 0 0 .5rem; font-size: .875rem; }
.thc-ann__body > :last-child { margin-bottom: 0; }
.thc-ann__older { margin: 0 0 1rem; }
.thc-ann__older summary { display: flex; align-items: center; min-height: 44px; font-weight: 700; cursor: pointer; }
.thc-ann__older summary:focus-visible { outline: 3px solid var(--thc-c-deep); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-thc-motion="reduce"]) .thc-course__progress span { transition: width .3s ease; }
}