/*
 * LearnDash course pages, brought onto the AI Practice hubs' visual language.
 *
 * WHY THIS FILE EXISTS. Measured 2026-08-19 on /courses/psle-tamil-oral/ against
 * /oral-hub/: the course H1 computed to 22px/400 while the editorial H2 below it
 * computed to 38px/700, so the page title was HALF the size of the heading under
 * it and lighter — the page read as though it had no title at all. The hub, the
 * page this is meant to resemble, is 51px/800 for its H1 and 28.9px/800 for its
 * H2s. Everything here closes that gap or follows from it.
 *
 * PLAIN SPECIFICITY, NO !important. The Customizer's Additional CSS carries
 * 24,586 characters and 201 !important declarations and overrides page content —
 * but it has exactly ONE .entry-title rule, scoped to the WooCommerce account
 * page, and one h1 mention. Checked before writing a line of this. The 22px came
 * from Astra's defaults, so a body-scoped selector wins honestly. If a rule here
 * ever stops applying, grep the Additional CSS backup before assuming otherwise:
 * docs/webpages/raffles-wp-custom-css.css.
 *
 * NOTHING HERE TOUCHES THE THEME OR THE CUSTOMIZER. It ships in the plugin zip.
 */

/* ---- Type scale: the title outranks the sections again -------------------- */

body.single-sfwd-courses .entry-title {
  font-size: clamp(2rem, 4.4vw, 51px);
  font-weight: 800;
  line-height: 1.12;
  color: #2d1060;
  margin-bottom: 0.5em;
}

/* The editorial H2s written into the description tab. Deliberately SMALLER than
   the H1 and matched to the hubs' 28.9px/800 — they were 38px, i.e. larger than
   the page title. Scoped to wp-block-heading so LearnDash's own chrome headings
   (Current Status / Price / Get Started / Course Content) are untouched. */
body.single-sfwd-courses .ld-tab-content h2.wp-block-heading {
  font-size: clamp(1.35rem, 2.5vw, 29px);
  font-weight: 800;
  line-height: 1.25;
  color: #2d1060;
  margin: 1.6em 0 0.5em;
}

body.single-sfwd-courses .ld-tab-content p {
  line-height: 1.65;
}

/* ---- The featured image: a banner, not a 497px wall ----------------------- */

/* It sits ABOVE the h1 and rendered at its full 893x497, pushing the title and
   every word of copy below the fold on a laptop. Cropped to a bander ratio and
   given the same 14px radius the hub cards use. */
body.single-sfwd-courses .post-thumb-img-content.post-thumb,
body.single-sfwd-courses .post-thumb-img-content.post-thumb img {
  border-radius: 14px;
}

body.single-sfwd-courses .post-thumb-img-content.post-thumb img {
  width: 100%;
  height: clamp(150px, 22vw, 240px);
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

/* ---- The LearnDash status bar: the hubs' card language -------------------- */

/* SCOPED THROUGH .learndash-wrapper ON PURPOSE. LearnDash ships
   `.learndash-wrapper .ld-course-status.ld-course-status-enrolled` at
   specificity (0,3,0); a body-scoped `.ld-course-status` is only (0,2,1) and
   loses, silently — the rule applies to nothing and the bar keeps its 6px
   radius. Going through the wrapper reaches (0,3,1) and wins on merit rather
   than with !important, which this site already has 201 of. */

body.single-sfwd-courses .learndash-wrapper .ld-course-status {
  background: #fff;
  border: 1px solid #e7e2f2;
  border-radius: 14px;
  padding: 1.1em 1.3em;
}

body.single-sfwd-courses .learndash-wrapper .ld-course-status .ld-course-status-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #8a82a8;
}

/* The price was the LARGEST element in the bar — bigger than the button beside
   it — and wrapped to two lines. It is information, not the action. */
body.single-sfwd-courses .learndash-wrapper .ld-course-status .ld-course-status-price,
body.single-sfwd-courses .learndash-wrapper .ld-course-status .ld-course-status-seg-price .ld-course-status-content {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 700;
  line-height: 1.3;
  color: #2d1060;
}

/* THE WHOLE BAR GOES when the page carries a package list, and ONLY then.
   `asai-course-packages` is added by CourseIntro::bodyClass() when the panel
   actually rendered. That interlock matters: hiding this bar removes the page's
   only enrol button, which is right when the packages above offer a direct route
   to each product with its price, and would leave a course with no way in at all
   when there is no panel — psle-maths is in no package and would have been
   exactly that. Delete the body-class qualifier and you break that course
   silently, so it is not decoration. */
body.single-sfwd-courses.asai-course-packages .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled {
  display: none;
}

/* A signed-out visitor is told "Current Status: NOT ENROLLED" as the first thing
   under the panel — a negative, in a third of the bar, about something they have
   not been offered yet. Hidden only in the not-enrolled state, so an enrolled
   pupil keeps their progress indicator. */
body.single-sfwd-courses .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled
  .ld-course-status-segment.ld-course-status-seg-status {
  display: none;
}

@media (max-width: 620px) {
  body.single-sfwd-courses .learndash-wrapper .ld-course-status {
    padding: 0.9em 1em;
  }
}