/* ROAS1000X kulit Tutor LMS 4.0.8: page course (tutor/single-course.php), lesson (learning area) dan dashboard.
   Dimuat hanya bila roas_is_tutor_page() true. Token datang dari theme.css, kit kertas dari courses.css.
   Tutor sentiasa light (functions.php kunci data-tutor-theme), jadi fail ni tak ada gaya dark. */

/* =========================================================
   WARNA + FONT TUTOR 4
   ========================================================= */
:root:root,
:root:root [data-tutor-theme],
[data-tutor-theme="light"] {
  --tutor-font-family-heading: "Archivo", "Arial Narrow", sans-serif;
  --tutor-font-family-body: "Inter", system-ui, sans-serif;
  --tutor-surface-base: #F1F1EE;
  --tutor-surface-l1: #FFFFFF;
  --tutor-surface-l1-hover: #F7F7F4;
  --tutor-text-primary: #111111;
  --tutor-text-secondary: #2A2A2A;
  --tutor-text-subdued: #4B5563;
  --tutor-text-brand: #B91C1C;
  --tutor-text-brand-hover: #991B1B;
  --tutor-text-success: #15803D;
  --tutor-surface-brand-primary: #DC2626;
  --tutor-surface-brand-primary-2: #B91C1C;
  --tutor-surface-brand-tertiary: #FBE5E6;
  --tutor-tab-sidebar-l2-active: #FBE5E6;
  --tutor-actions-brand-primary: #DC2626;
}

.roas-tutor :is(.tutor-dashboard-layout, .tutor-learning-area) :is(h1, h2, h3, h4, h5, .tutor-h4, .tutor-h5) {
  font-family: var(--display);
  letter-spacing: -.005em;
}

/* =========================================================
   FOCUS (Tutor buang outline pada sidebar dashboard dengan !important)
   ========================================================= */
.roas-tutor .tutor-dashboard-layout a:focus-visible,
.roas-tutor .tutor-dashboard-layout button:focus-visible,
.roas-tutor .tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a:focus-visible,
.roas-tutor .tutor-dashboard-nav-mobile a:focus-visible,
.roas-tutor .tutor-progress-card:focus-visible,
.roas-tutor .tutor-learning-sidebar a:focus-visible,
.roas-tutor .tutor-learning-nav-header:focus-visible,
.roas-tutor .tutor-learning-area button:focus-visible {
  outline: 3px solid #DC2626 !important;
  outline-offset: 2px;
}

/* =========================================================
   DASHBOARD
   ========================================================= */
.roas-tutor .tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a.active {
  background-color: #FBE5E6;
  color: #B91C1C;
}
.roas-tutor .tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a.active :is(span, svg) { color: #B91C1C; }
.roas-tutor .tutor-dashboard-nav-mobile-list > li > :is(a, button).active,
.roas-tutor .tutor-dashboard-nav-mobile-list > li > :is(a, button).active span { color: #B91C1C; }

.roas-tutor :is(.tutor-progress-card-details, .tutor-enrolled-info-text) { color: #4B5563; }
.roas-tutor .tutor-enrolled-info-date { color: #15803D; }

/* Gambar kad course: ikut nisbah 16:9, jangan crop tajuk atas cover */
.roas-tutor .tutor-progress-card .tutor-progress-card-thumbnail { height: auto; }
.roas-tutor .tutor-progress-card .tutor-progress-card-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Preferences: theme dikunci light, jadi pilihan Theme disorok */
.roas-tutor .tutor-preferences-setting-item:has(select[name="theme"], input[name="theme"], [x-bind*="'theme'"]) { display: none; }

/* =========================================================
   LESSON (learning area)
   ========================================================= */
.roas-tutor .tutor-learning-header-content { min-width: 0; max-width: 100%; }
.roas-tutor .tutor-learning-header-title { min-width: 0; overflow-wrap: anywhere; }
.roas-tutor .tutor-learning-area-content,
.roas-tutor .tutor-learning-area-container { min-width: 0; }

.roas-tutor .tutor-lesson-content .tutor-mark-as-complete-button:focus-visible {
  outline: 3px solid #DC2626 !important;
  outline-offset: 2px;
}

/* Footer lesson (Previous, Mark as Complete, Next) muat dalam 320px */
@media (max-width: 400px) {
  .roas-tutor .tutor-learning-area-footer[data-lesson] { gap: 4px; }
  .roas-tutor .tutor-learning-area-footer[data-lesson] a.tutor-btn:not([class*="tutor-btn-link"]) { padding-inline: 6px; }
  .roas-tutor .tutor-lesson-content .tutor-mark-as-complete-button { min-width: 0; }
}

/* Label jenis "Reading" bawah nama lesson */
.roas-tutor .tutor-learning-nav-item .tutor-tiny-2.tutor-text-subdued { display: none; }

.roas-lesson-h1 {
  margin: 0;
  padding: 24px 24px 4px;
  font-family: var(--display);
  font-variation-settings: "wdth" 70;
  font-weight: 900;
  font-size: clamp(1.9rem, 6vw, 2.75rem);
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* =========================================================
   PAGE COURSE (tutor/single-course.php)
   ========================================================= */
.single-courses .roas-main {
  padding-block: 0;
  background: var(--paper-2);
}
.single-courses .roas-foot { background: var(--paper-2); }

.cs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.cs-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.cs-body { min-width: 0; padding-top: 20px; }

.cs-h1 {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 62;
  font-weight: 900;
  font-size: clamp(2.5rem, 13cqi, 4.25rem);
  line-height: .88;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.cs-lede {
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.42;
  color: var(--ink);
  text-wrap: pretty;
}

/* Kotak status */
.cs-box {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ink);
}
.cs-box .hm-price { margin-top: 0; }
.cs-box-h {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 72;
  font-weight: 800;
  font-size: .95rem;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.cs-prog {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 0;
}
.cs-prog-n {
  font-family: var(--display);
  font-variation-settings: "wdth" 66;
  font-weight: 900;
  font-size: 3.75rem;
  line-height: .85;
  color: var(--red);
}
.cs-prog-l { font-size: .95rem; font-weight: 600; color: var(--muted); }
.cs-bar {
  position: relative;
  max-width: 560px;
  height: 10px;
  margin-top: 14px;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.cs-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--red);
}
.cs-note {
  margin: 14px 0 0;
  max-width: 46ch;
  font-weight: 600;
  color: var(--ink);
}

.cs-finish { max-width: 560px; margin: 12px 0 0; }
.cs-finish-btn {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px 9px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-variation-settings: "wdth" 72;
  font-weight: 900;
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.cs-finish-btn:hover { background: var(--ink); color: #fff; }
.cs-finish-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.cs-help {
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.cs-help + .cs-help { margin-top: 6px; }
.cs-help a {
  color: var(--ink);
  font-weight: 600;
  text-decoration-color: var(--red);
}
.cs-help a:hover { color: var(--red-deep); }

/* Senarai lesson */
.cs-h2 {
  margin: 0 0 18px;
  font-family: var(--display);
  font-variation-settings: "wdth" 64;
  font-weight: 900;
  font-size: clamp(2rem, 9cqi, 3.25rem);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.cs-topic + .cs-topic { margin-top: 32px; }
.cs-topic-h {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 72;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
}
.cs-topic-p {
  margin: 6px 0 0;
  max-width: 60ch;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--muted);
}
.cs-rows {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}
.cs-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  min-height: 56px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.cs-row-n {
  font-family: var(--display);
  font-variation-settings: "wdth" 70;
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--red);
}
.cs-row-t {
  min-width: 0;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}
a.cs-row-t { text-decoration: none; }
a.cs-row-t::after { content: ""; position: absolute; inset: 0; }
.cs-row:has(a.cs-row-t) { position: relative; }
.cs-row:has(a.cs-row-t):hover { background: var(--paper); }
.cs-row:has(a.cs-row-t):hover .cs-row-t { color: var(--red-deep); text-decoration: underline; text-decoration-color: var(--red); }
a.cs-row-t:focus-visible { outline: none; }
a.cs-row-t:focus-visible::after { outline: 3px solid var(--red); outline-offset: 2px; }

.cs-row-s {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-variation-settings: "wdth" 72;
  font-weight: 800;
  font-size: .8rem;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.cs-row.is-done .cs-row-s { color: #15803D; }
.cs-row.is-done .cs-row-s::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--i-check) center / contain no-repeat;
  mask: var(--i-check) center / contain no-repeat;
}

/* >= 600px */
@media (min-width: 600px) {
  .cs-body { padding-top: 26px; }
  .cs-lede { font-size: 1.3rem; }
  .cs-row { grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 16px; padding: 14px 8px 14px 0; }
  .cs-row-n { font-size: 1.6rem; }
  .cs-row-t { font-size: 1.0625rem; }
}

/* >= 900px */
@media (min-width: 900px) {
  .cs-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 48px; }
  .cs-body { padding-top: 0; }
  .cs-h1 { font-size: clamp(2.8rem, 5.4cqi, 4.25rem); }
  .cs-topic-h { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-finish-btn { transition: none; }
}