/* ============================================================
   Kulud Academy — Eduma child theme stylesheet
   v2.0.0 — Kulud Green design system

   WHAT CHANGED FROM v1.1.0, AND WHY

   v1.1.0 used burgundy (#801822) and amber (#ffb606). Those values were
   read off the live home page and assumed to be the brand. They are not —
   the Kulud brand colour is GREEN (#00843D). The live site is off-brand;
   this stylesheet is on-brand. That is a deliberate divergence, not drift.

   This is the same design system as the prototype in kulud-academy-site/,
   expressed against Eduma's and LearnPress's actual class names.

   ── SCOPE — READ THIS BEFORE JUDGING THE RESULT ──────────────
   A stylesheet can only restyle what it can select. On this install:

   WILL change   LMS pages — course archive, course detail, lesson and quiz
                 views, the profile/dashboard, forms, tables, buttons.
                 These are theme-rendered, so these rules reach them.

   WON'T change  The home page and other Elementor-built pages. Elementor
                 emits ~49 KB of INLINE per-widget CSS with higher specificity
                 than any stylesheet. Overriding it needs !important on
                 practically every rule, which then breaks the page editor
                 for whoever maintains it. The honest fix is to rebuild those
                 pages in Elementor using these values, or replace them with
                 theme templates. Do not expect this file to do it.

   ── THE BLOCK YOU'LL EDIT ────────────────────────────────────
   Everything derives from :root. Change a token, the whole LMS follows.
   ============================================================ */

:root {
  /* Brand — Kulud Green */
  --k-green:        #00843d;
  --k-green-dark:   #00632e;
  --k-green-darker: #004a22;
  --k-green-light:  #34c77b;
  --k-green-tint:   #e8f4ee;
  --k-green-tint-2: #f3faf6;

  /* Neutrals */
  --k-white:   #ffffff;
  --k-gray-50: #f9fafb;
  --k-gray-100:#f3f5f7;
  --k-gray-200:#e5e7eb;
  --k-ink:     #1f2937;
  --k-ink-2:   #4b5563;
  --k-ink-3:   #6b7280;

  --k-amber:   #f59e0b;   /* ratings only — never as text on white */

  /* Structure */
  --k-radius:    16px;
  --k-radius-lg: 24px;
  --k-radius-sm: 10px;

  --k-sh-sm: 0 1px 2px rgba(31,41,55,.06);
  --k-sh:    0 4px 16px rgba(31,41,55,.07);
  --k-sh-md: 0 10px 30px rgba(31,41,55,.09);

  --k-font:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --k-font-ar: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;

  --k-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ── Typography ────────────────────────────────────────────── */
body,
body.theme-eduma,
.thim-ekits-course__title,
.course-title,
h1, h2, h3, h4, h5, h6,
.lp-button, button, input, select, textarea {
  font-family: var(--k-font);
}

[lang="ar"], [dir="rtl"], .ar, .arabic { font-family: var(--k-font-ar); }

body { color: var(--k-ink); background: var(--k-white); }

h1, h2, h3, h4 { color: var(--k-ink); letter-spacing: -.022em; line-height: 1.2; }

a { color: var(--k-green); transition: color .18s var(--k-ease); }
a:hover, a:focus { color: var(--k-green-dark); }

/* Keyboard focus must stay visible. Eduma suppresses it in several places —
   that is an accessibility regression, not a style preference, so it is
   restored here rather than left to the parent theme. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .lp-button:focus-visible {
  outline: 3px solid var(--k-green);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Course cards (archive + listings) ─────────────────────── */
.thim-ekits-course__item,
.course-item,
.lp-course-item,
.learn-press-courses .course {
  background: var(--k-white);
  border: 1px solid var(--k-gray-200);
  border-radius: var(--k-radius-lg);
  box-shadow: var(--k-sh-sm);
  overflow: hidden;
  transition: transform .22s var(--k-ease), box-shadow .22s var(--k-ease),
              border-color .22s var(--k-ease);
}

.thim-ekits-course__item:hover,
.course-item:hover,
.learn-press-courses .course:hover {
  transform: translateY(-5px);
  box-shadow: var(--k-sh-md);
  border-color: transparent;
}

.thim-ekits-course__thumbnail img,
.course-thumbnail img { width: 100%; height: auto; display: block; }

/* Contain the image zoom rather than letting it overflow the rounded corner */
.thim-ekits-course__thumbnail,
.course-thumbnail { overflow: hidden; }
.thim-ekits-course__thumbnail img,
.course-thumbnail img { transition: transform .4s var(--k-ease); }
.thim-ekits-course__item:hover .thim-ekits-course__thumbnail img,
.course-item:hover .course-thumbnail img { transform: scale(1.05); }

.thim-ekits-course__title, .thim-ekits-course__title a,
.course-title, .course-title a {
  color: var(--k-ink); font-weight: 700; line-height: 1.38;
}
.thim-ekits-course__title a:hover, .course-title a:hover { color: var(--k-green); }

.thim-ekits-course__excerpt,
.course-description,
.course-meta { color: var(--k-ink-3); }

/* ── Buttons ───────────────────────────────────────────────── */
.lp-button,
.thim-ekits-course__read-more,
button.button,
input[type="submit"],
.learn-press-form button {
  background: var(--k-green);
  border: 0;
  border-radius: var(--k-radius-sm);
  color: #fff;
  font-weight: 600;
  padding: 13px 26px;
  box-shadow: 0 12px 28px rgba(0,132,61,.22);
  transition: background .18s var(--k-ease), transform .18s var(--k-ease);
}
.lp-button:hover,
.thim-ekits-course__read-more:hover,
button.button:hover,
input[type="submit"]:hover {
  background: var(--k-green-dark);
  color: #fff;
  transform: translateY(-2px);
}
.lp-button:active { transform: translateY(0); }

/* .elementor-button is deliberately NOT restyled. Elementor buttons are
   configured per-widget by whoever built the page; overriding them here
   fights a deliberate design and breaks the editor. See SCOPE above. */

/* ── Progress bars ─────────────────────────────────────────── */
.lp-course-progress .lp-progress-bar,
.course-progress .progress-bg {
  background: var(--k-gray-100);
  border-radius: 999px;
  overflow: hidden;
  height: 7px;
}
.lp-course-progress .lp-progress-value,
.course-progress .progress-active {
  background: linear-gradient(90deg, var(--k-green), var(--k-green-light));
  border-radius: 999px;
}

/* ── Price / status ────────────────────────────────────────── */
.course-price, .course-item-price, .course-count-item {
  color: var(--k-green-dark);
  font-weight: 700;
}
.course-price .free, .free-course { color: var(--k-green); }

/* Ratings keep amber, but only as an icon colour — amber text on white
   fails WCAG AA, so any adjacent label stays ink. */
.review-stars-rated .rating-star, .star-rating, .lp-star { color: var(--k-amber); }

/* ── Navigation ────────────────────────────────────────────── */
.thim-nav-wrapper, .thim-ekits-menu__nav {
  background: var(--k-white);
  border-bottom: 1px solid var(--k-gray-200);
}
.thim-ekits-menu__nav a { color: var(--k-ink-2); font-weight: 500; }
.thim-ekits-menu__nav a:hover,
.thim-ekits-menu__nav .current-menu-item > a { color: var(--k-green); }

/* ── Forms and search ──────────────────────────────────────── */
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], select, textarea,
.courses-search-input {
  background: var(--k-white);
  border: 1.5px solid var(--k-gray-200);
  border-radius: var(--k-radius-sm);
  color: var(--k-ink);
  padding: 11px 14px;
  transition: border-color .18s var(--k-ease);
}
input::placeholder, textarea::placeholder { color: var(--k-ink-3); }
input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus,
input[type="password"]:focus, select:focus, textarea:focus {
  border-color: var(--k-green);
  outline: none;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--k-green); }

/* ── Course detail / reading ───────────────────────────────── */
.thim-course-content, .course-instructor, .course-meta { color: var(--k-ink); }

.thim-course-content p, .course-description p {
  color: var(--k-ink-2);
  line-height: 1.75;
  font-size: 16px;
  max-width: 72ch;          /* readable measure for long clinical content */
}

/* Curriculum list */
.course-curriculum .section-header,
.curriculum-sections .section-title {
  background: var(--k-gray-50);
  border-radius: var(--k-radius);
  color: var(--k-ink);
  font-weight: 700;
}
.course-curriculum .course-item,
.curriculum-sections .course-item {
  border-bottom: 1px solid var(--k-gray-200);
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
.course-curriculum .course-item:hover { background: var(--k-gray-50); transform: none; box-shadow: none; }
.course-curriculum .course-item.item-has-status.completed,
.course-item .lp-label-completed { color: var(--k-green); }

/* Quiz + assignment surfaces */
.quiz-result, .lp-quiz-buttons, .lp-assignment-content {
  background: var(--k-green-tint-2);
  border: 1px solid var(--k-green-tint);
  border-radius: var(--k-radius);
}

/* ── Tabs ──────────────────────────────────────────────────── */
.learn-press-tabs .course-nav-tab.active,
.course-tabs li.active a {
  color: var(--k-green);
  border-bottom: 2px solid var(--k-green);
  font-weight: 600;
}

/* ── Tables (Ninja Tables + TablePress both in use) ────────── */
table { border-collapse: collapse; }
table th {
  background: var(--k-gray-50);
  color: var(--k-ink-3);
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: .06em;
  font-weight: 700;
}
table td { border-bottom: 1px solid var(--k-gray-200); color: var(--k-ink); }

/* ── Bilingual guard ───────────────────────────────────────── */
/* Bidi isolation so an Arabic phrase followed by a number or Latin word
   does not visually reorder. Same fix used across the Manara platform. */
[lang="ar"], .ar { unicode-bidi: isolate; }

/* ── Motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 782px) {
  .thim-ekits-course__item, .course-item { border-radius: var(--k-radius); }
  /* Larger on phones, not smaller — this is read one-handed at the counter. */
  .thim-course-content p { font-size: 16.5px; }
}

/* ── Print ─────────────────────────────────────────────────── */
/* Staff print course material at the counter. */
@media print {
  body, .thim-course-content, .thim-ekits-course__item {
    background: #fff !important; color: #000 !important;
  }
  .thim-nav-wrapper, .thim-ekits-menu__nav { display: none !important; }
  .thim-ekits-course__item { box-shadow: none !important; border-color: #ccc !important; }
  a { color: #000 !important; text-decoration: underline; }
}