/**
 * Lesson Content Typography
 *
 * Uses DM Sans 300 for body text and Playfair Display for headings.
 * Font variables (--fb, --fd) are defined in the layout and switch
 * automatically for Hebrew courses via [lang="he"].
 *
 * To disable: remove the <link> tag from the view.
 */

/* ===== LESSON CONTENT WRAPPER ===== */
.student-shell .lesson-content,
.lesson-content {
  font-family: var(--fb, 'DM Sans', sans-serif) !important;
  font-weight: 300 !important;
  font-size: 17px !important;
  line-height: 1.8 !important;
  color: var(--ink, #222) !important;
}

/* ===== PARAGRAPHS ===== */
.student-shell .lesson-content p,
.lesson-content p {
  font-family: var(--fb, 'DM Sans', sans-serif) !important;
  font-weight: 300 !important;
  font-size: 17px !important;
  line-height: 1.8 !important;
  margin-bottom: 1.4em !important;
  color: var(--ink, #222) !important;
}

/* ===== HEADINGS ===== */
.student-shell .lesson-content h1,
.lesson-content h1 {
  font-family: var(--fd, 'Playfair Display', Georgia, serif) !important;
  font-size: 36px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.6em !important;
  color: var(--ink, #111) !important;
}

.student-shell .lesson-content h2,
.lesson-content h2 {
  font-family: var(--fd, 'Playfair Display', Georgia, serif) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  margin-top: 1.8em !important;
  margin-bottom: 0.6em !important;
  color: var(--ink, #111) !important;
}

.student-shell .lesson-content h3,
.lesson-content h3 {
  font-family: var(--fd, 'Playfair Display', Georgia, serif) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  margin-top: 1.6em !important;
  margin-bottom: 0.5em !important;
  color: var(--ink, #111) !important;
}

.student-shell .lesson-content h4,
.lesson-content h4 {
  font-family: var(--fb, 'DM Sans', sans-serif) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-top: 1.4em !important;
  margin-bottom: 0.5em !important;
  color: var(--ink, #222) !important;
}

.student-shell .lesson-content h5,
.student-shell .lesson-content h6,
.lesson-content h5,
.lesson-content h6 {
  font-family: var(--fb, 'DM Sans', sans-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-top: 1.2em !important;
  margin-bottom: 0.4em !important;
  color: var(--ink, #333) !important;
}

/* ===== INLINE STYLES ===== */
.student-shell .lesson-content strong,
.lesson-content strong {
  font-weight: 600 !important;
}

.student-shell .lesson-content em,
.lesson-content em {
  font-style: italic !important;
}

.student-shell .lesson-content a,
.lesson-content a {
  color: var(--cp, #0f3c42) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

.student-shell .lesson-content a:hover,
.lesson-content a:hover {
  text-decoration: none !important;
}

/* ===== LISTS ===== */
.student-shell .lesson-content ul,
.student-shell .lesson-content ol,
.lesson-content ul,
.lesson-content ol {
  font-family: var(--fb, 'DM Sans', sans-serif) !important;
  font-weight: 300 !important;
  padding-inline-start: 1.5em !important;
  margin-bottom: 1.4em !important;
}

.student-shell .lesson-content li,
.lesson-content li {
  font-family: var(--fb, 'DM Sans', sans-serif) !important;
  font-weight: 300 !important;
  font-size: 17px !important;
  margin-bottom: 0.5em !important;
  line-height: 1.8 !important;
  color: var(--ink, #222) !important;
}

.student-shell .lesson-content li::marker,
.lesson-content li::marker {
  color: var(--i60, #666) !important;
}

/* ===== BLOCKQUOTES ===== */
.student-shell .lesson-content blockquote,
.lesson-content blockquote {
  font-family: var(--fb, 'DM Sans', sans-serif) !important;
  font-weight: 300 !important;
  border-inline-start: 3px solid var(--cp, #0f3c42) !important;
  padding: 1em 1.25em !important;
  margin: 1.5em 0 !important;
  font-style: italic !important;
  color: var(--i60, #555) !important;
  background: var(--cp-light, #f0fafa) !important;
  border-radius: 0 6px 6px 0 !important;
}

[dir="rtl"] .student-shell .lesson-content blockquote,
[dir="rtl"] .lesson-content blockquote {
  border-radius: 6px 0 0 6px !important;
}

.student-shell .lesson-content blockquote footer,
.lesson-content blockquote footer {
  margin-top: 0.75em !important;
  font-size: 0.9em !important;
  font-style: normal !important;
  color: var(--i45, #888) !important;
}

/* ===== CODE ===== */
.student-shell .lesson-content code,
.lesson-content code {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important;
  font-size: 0.9em !important;
  background: var(--surf-2, #f3f4f6) !important;
  padding: 0.15em 0.4em !important;
  border-radius: 4px !important;
  color: #c7254e !important;
}

.student-shell .lesson-content pre,
.lesson-content pre {
  background: #1f2937 !important;
  color: #f9fafb !important;
  padding: 1.25em !important;
  border-radius: 8px !important;
  overflow-x: auto !important;
  margin: 1.5em 0 !important;
  font-size: 0.9em !important;
  line-height: 1.6 !important;
}

.student-shell .lesson-content pre code,
.lesson-content pre code {
  background: transparent !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
}

/* ===== TABLES ===== */
.student-shell .lesson-content table,
.lesson-content table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 1.5em 0 !important;
  font-size: 15px !important;
}

.student-shell .lesson-content table th,
.lesson-content table th {
  background: var(--surf-2, #f9fafb) !important;
  font-weight: 600 !important;
  color: var(--ink, #1a1a1a) !important;
  text-align: start !important;
  padding: 0.625rem 0.75rem !important;
  border: 1px solid var(--i12, #e5e7eb) !important;
  line-height: 1.5 !important;
}

.student-shell .lesson-content table td,
.lesson-content table td {
  color: var(--ink, #292929) !important;
  text-align: start !important;
  padding: 0.625rem 0.75rem !important;
  border: 1px solid var(--i12, #e5e7eb) !important;
  line-height: 1.5 !important;
}

/* ===== HR ===== */
.student-shell .lesson-content hr,
.lesson-content hr {
  border: none !important;
  border-top: 2px solid var(--i12, #e5e7eb) !important;
  margin: 2em 0 !important;
}

/* ===== IMAGES ===== */
.student-shell .lesson-content img,
.lesson-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  margin: 1em 0 !important;
}

/* ===== VIDEO EMBEDS ===== */
.student-shell .lesson-content .video-container,
.lesson-content .video-container {
  position: relative !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 1.5em 0 !important;
  border-radius: 8px !important;
}

.student-shell .lesson-content .video-container iframe,
.lesson-content .video-container iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px !important;
}

/* ===== MOBILE ===== */
@media (max-width: 640px) {
  .student-shell .lesson-content,
  .lesson-content {
    font-size: 16px !important;
  }

  .student-shell .lesson-content p,
  .lesson-content p {
    font-size: 16px !important;
  }

  .student-shell .lesson-content li,
  .lesson-content li {
    font-size: 16px !important;
  }

  .student-shell .lesson-content h1,
  .lesson-content h1 {
    font-size: 28px !important;
  }

  .student-shell .lesson-content h2,
  .lesson-content h2 {
    font-size: 22px !important;
  }

  .student-shell .lesson-content h3,
  .lesson-content h3 {
    font-size: 18px !important;
  }
}