/* LML learner typography — 2026-10-31
 * Shared type hierarchy on learner pages; Noto Sans Thai stays unchanged.
 * Exam-hero alignment and icons apply only to the specified exam pages.
 * No navigation, scoring, card geometry or database behavior is altered.
 */
body.lml-learner-typography {
  --lml-learner-title-size: 1.0625rem;  /* 17px: course / assessment / training titles */
  --lml-learner-title-weight: 700;
  --lml-learner-description-size: .875rem; /* 14px: supporting copy */
  --lml-learner-action-size: .9375rem;  /* 15px: button copy */
  --lml-learner-action-weight: 600;
  --lml-learner-label-size: .8125rem;   /* 13px: filter/field labels */
  --lml-learner-caption-size: .78125rem; /* 12.5px: badges/compact metadata */
}

/* Card titles: shared 17px/700 across home, libraries, and owned items.
 * Existing two-line clamps, min-heights, and button sizes are not touched. */
body.lml-learner-typography :is(
  .lml-user-collection-page .knowledge-card h2,
  .lml-member-library-page .lml-member-card__intro h2,
  .lml-member-library-page .lml-member-card__title-block h2,
  .course-market-page .lml-catalog-body h2,
  .home-course-market-grid .market-course-body h2,
  .home-knowledge-body h3,
  .course-market-grid .market-course-body h2,
  .training-classroom-page .lml-flow-title,
  .training-user-page .training-activity-card h2,
  .exam-results-page .exam-results-title-copy strong
) {
  font-size: var(--lml-learner-title-size) !important;
  font-weight: var(--lml-learner-title-weight) !important;
  /* Preserve source line-height: fixed-height two-line cards must not clip. */
  word-break: normal;
  overflow-wrap: break-word;
}

/* Primary page/section headings stay larger than card names. Preserve sizes. */
body.lml-learner-typography :is(
  .market-hero h1,
  .knowledge-detail-hero h1,
  .knowledge-room-hero h1,
  .training-test-hero h1,
  .training-classroom-hero h1,
  .exam-hero h1,
  .course-detail-hero h1,
  .profile-hero h1,
  .hero-card h1,
  .hero h1,
  .exam-type-content h2,
  .exam-level-copy h2
) {
  font-weight: 700;
}


/* Navigation and page markers remain visually distinct from action buttons.
 * Keep their original size, spacing and color to preserve the header layout. */
body.lml-learner-typography :is(.main-nav a, .nav-links a:not(.btn)) {
  font-weight: 700;
}
body.lml-learner-typography main :is(.breadcrumb a, .process-nav a, .section-eyebrow) {
  font-weight: 600;
}
body.lml-learner-typography .target-card h3 {
  font-weight: 600;
}

/* Learning/assessment question text must remain larger than a card title.
 * Answer markers and numeric question navigation are intentionally untouched. */
body.lml-learner-typography :is(
  .quiz-page .quiz-question-card h2,
  .training-user-page .training-question-card h2,
  .knowledge-test-page .knowledge-question h2,
  .exam-user-page .exam-question h2
) {
  font-weight: 600;
}

/* Buttons share typography, not color or dimensions. The three existing
 * actions on knowledge-assessment-result.php are explicitly excluded. */
body.lml-learner-typography main .section:not(.knowledge-result-page) .btn {
  font-size: var(--lml-learner-action-size) !important;
  font-weight: var(--lml-learner-action-weight) !important;
}

/* Inline category tabs act as controls even when they are not .btn elements. */
body.lml-learner-typography :is(
  .knowledge-category-tabs > a,
  .market-filter-tabs > a,
  .market-category-tabs > a
) {
  font-size: var(--lml-learner-action-size);
  font-weight: var(--lml-learner-action-weight);
}

/* Labels and badges: lighter and visually subordinate to content names. */
body.lml-learner-typography :is(
  .lml-user-filter-panel label,
  .lml-user-filter-panel .market-filter-label,
  .lml-member-filter-bar .field > label,
  .knowledge-filter-bar .field > label
) {
  font-size: var(--lml-learner-label-size);
  font-weight: 600;
}

body.lml-learner-typography :is(
  .knowledge-badge-row .badge,
  .lml-member-badges .badge,
  .lml-catalog-badges .badge,
  .market-course-badges .badge
) {
  font-size: var(--lml-learner-caption-size) !important;
  font-weight: 600 !important;
}

/* Compact metrics: keep numbers prominent but not heavier than needed. */
body.lml-learner-typography :is(
  .lml-member-metric > span,
  .knowledge-meta-grid > span
) {
  font-weight: 600;
}
body.lml-learner-typography .lml-member-metric > strong {
  font-weight: 700;
}

/* Descriptions are supporting content, not additional headings. */
body.lml-learner-typography :is(
  .lml-member-card__subtitle,
  .knowledge-card-summary > .muted,
  .home-knowledge-body > p,
  .lml-catalog-desc,
  .market-course-desc
) {
  font-size: var(--lml-learner-description-size) !important;
  font-weight: 400 !important;
  line-height: 1.55;
}

/* Course and assessment cards also appear outside the primary catalogs. */
body.lml-learner-typography :is(
  .knowledge-card-summary > .muted,
  .home-knowledge-body > p,
  .market-course-desc,
  .lml-catalog-desc
) {
  color: var(--lml-muted, #64748b);
}

/* Use Thai-aware browser line breaking for longer learner descriptions.
 * Do not force no-wrap, split with break-all or change numeric badges. */
body.lml-learner-typography :is(
  .home-course-market-grid .market-course-body h2,
  .home-knowledge-grid .home-knowledge-body h3,
  .my-trainings-page .lml-member-card__title-block h2,
  .my-trainings-page .lml-member-card__subtitle,
  .my-trainings-page .lml-member-metric > small
) {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: auto;
  hyphens: none;
}

/* Training cards: make the course title the anchor, the next step secondary,
 * and metadata (date, venue, explanation) supporting information. */
body.lml-learner-typography .my-trainings-page .lml-member-card__subtitle {
  font-size: var(--lml-learner-description-size);
  font-weight: 400;
}
body.lml-learner-typography .my-trainings-page .lml-member-metric > span {
  font-size: .78125rem;
  font-weight: 500;
}
body.lml-learner-typography .my-trainings-page .lml-member-metric > strong {
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5;
}
body.lml-learner-typography .my-trainings-page .lml-member-card__body > .lml-member-metrics:first-child .lml-member-metric > strong {
  font-weight: 600; /* next step and progress */
}
body.lml-learner-typography .my-trainings-page .lml-member-metric > small {
  font-size: .8125rem;
  font-weight: 400;
}

/* Training dates: preserve start and end as semantic, predictable rows.
 * Break only the range between dates; never leave an isolated end time. */
body.lml-learner-typography .my-trainings-page .lml-member-datetime-line {
  display: block;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 420px) {
  body.lml-learner-typography .my-trainings-page .lml-member-datetime-line {
    white-space: normal; /* Safety for exceptionally narrow cards or large text settings. */
  }
}

/* Certificate lists are dense tables, not 17px feature cards. Apply the
 * same title/subtitle hierarchy to all three desktop and mobile sections. */
body.lml-learner-typography .mycert-page :is(
  .mycert-course-cell strong,
  .mycert-mobile-title strong
) {
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.45;
  word-break: normal;
  overflow-wrap: break-word;
}
body.lml-learner-typography .mycert-page .mycert-course-sub {
  margin-top: 3px;
  color: #64748b;
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.45;
  word-break: normal;
  overflow-wrap: break-word;
}
body.lml-learner-typography .mycert-page .mycert-table tbody td {
  padding: 10px 18px;
  vertical-align: middle;
}
body.lml-learner-typography .mycert-page .mycert-table tbody td:not(:first-child) {
  font-size: .875rem;
  font-weight: 400;
}
body.lml-learner-typography .mycert-page .mycert-value-pill {
  font-size: .8125rem;
  font-weight: 600;
}
body.lml-learner-typography .mycert-page :is(.mycert-table .btn, .mycert-mobile-card .btn) {
  font-size: .875rem !important;
  font-weight: 600 !important;
}
body.lml-learner-typography .mycert-page .mycert-mobile-meta {
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.45;
}

/* Three examination entry heroes: same visual alignment as the other learner
 * collection heroes. Reuse the existing hero icon frame and exam SVG library. */
body.lml-learner-typography :is(
  .exam-midterm-page .exam-hero,
  .exam-library-page .market-hero
) {
  padding: var(--lml-user-hero-padding, 26px 28px) !important;
}
body.lml-learner-typography .exam-midterm-page .exam-hero-copy {
  align-items: center;
  column-gap: 20px;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  grid-template-areas: "icon title" "icon body";
}
body.lml-learner-typography .exam-midterm-page .exam-hero-copy > .lml-hero-module-icon { grid-area: icon; }
body.lml-learner-typography .exam-midterm-page .exam-hero-copy > h1 { grid-area: title; }
body.lml-learner-typography .exam-midterm-page .exam-hero-copy > p { grid-area: body; }
body.lml-learner-typography :is(
  .exam-midterm-page .exam-hero h1,
  .exam-library-page .market-hero h1
) {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  line-height: 1.35 !important;
  margin: 0 0 6px !important;
}
body.lml-learner-typography :is(
  .exam-midterm-page .exam-hero-copy > p,
  .exam-library-page .market-hero-content > p
) {
  font-size: .9375rem !important;
  font-weight: 400;
  line-height: 1.55 !important;
  margin: 0 !important;
}
body.lml-learner-typography .lml-exam-hero-icon::before {
  display: none; /* illustrations are provided by exam_user_icon_svg() */
}
body.lml-learner-typography .lml-exam-hero-icon .exam-user-icon-svg {
  display: block;
  flex: none;
  height: 52px;
  width: 52px;
}
@media (max-width: 640px) {
  body.lml-learner-typography .exam-midterm-page .exam-hero-copy {
    column-gap: 14px;
    grid-template-columns: 66px minmax(0, 1fr);
  }
  body.lml-learner-typography :is(
    .exam-midterm-page .exam-hero,
    .exam-library-page .market-hero
  ) { padding: 20px !important; }
  body.lml-learner-typography :is(
    .exam-midterm-page .exam-hero h1,
    .exam-library-page .market-hero h1
  ) { font-size: 1.5rem !important; }
  body.lml-learner-typography .lml-exam-hero-icon .exam-user-icon-svg {
    height: 42px;
    width: 42px;
  }
}

/* Detail-page titles: the assessment and online course are the same
 * typographic level. Scope these rules to the two learner detail pages so
 * other heroes, assessment rooms, card grids, and admin pages stay intact.
 * Both inherit Noto Sans Thai from the site body/header.
 * The important line-height is needed only to supersede a legacy
 * .lms-detail-info h1 declaration in style.css. */
body.lml-learner-typography {
  --lml-detail-title-size: 2rem;        /* 32px at desktop */
  --lml-detail-description-size: .9375rem; /* 15px */
}
body.lml-learner-typography :is(
  .knowledge-detail-page .knowledge-detail-copy > h1,
  .lms-detail-page .lms-detail-info > h1
) {
  font-family: 'Noto Sans Thai', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--lml-detail-title-size);
  font-weight: 700;
  line-height: 1.4 !important; /* Overrides legacy 1.25!important. */
  letter-spacing: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
body.lml-learner-typography :is(
  .knowledge-detail-page .knowledge-detail-copy > p.muted,
  .lms-detail-page .lms-detail-info > p
) {
  font-size: var(--lml-detail-description-size);
  font-weight: 400;
  line-height: 1.6 !important; /* Overrides the course's old 1.7!important. */
  letter-spacing: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
@media (max-width: 768px) {
  body.lml-learner-typography { --lml-detail-title-size: clamp(1.5rem, 4vw, 1.625rem); }
}

/* Very narrow phones: preserve readable labels; do not force no-wrap. */
@media (max-width: 360px) {
  body.lml-learner-typography {
    --lml-learner-action-size: .875rem;
  }
}