/* ===================================================================
   Handwriting Theme for Obsidian
   Author:  Kumar Anurag (@kmranrg)
   Font:    Kalam  – https://fonts.google.com/specimen/Kalam
   Purpose: Friendly handwriting style for focused note‑taking.
            Activate in any note with:
            ---
            cssclass: handwriting
            ---

   Sections
   ──────────────────────────────────────────────────────────────
     1.  Font import + base typography
     2.  Inline elements (bold, code, MathJax)
     3.  Table styling – Preview & Live Preview
   ===================================================================*/

/*─────────────────────────────────────────────────────────────────────
  1.  Font import + base typography
  ───────────────────────────────────────────────────────────────────*/

/* === Import Kalam (Credits Google Font, Transfonter) Handwriting Font === */
@font-face {
    font-family: 'Kalam';
    src: url('data:font/woff2;charset=utf-8;base64,[encoded data, 187756 characters]') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Apply Kalam + base size/colour to the whole note (edit + preview) */
.markdown-preview-view.handwriting,
.markdown-source-view.handwriting .cm-content {
  font-family: 'Kalam', cursive;
  font-size: 1.3em;
  line-height: 1.6;
  color: #4682b4;                 /* sky‑blue body text                  */
}

/* Headings in both modes */
.markdown-preview-view.handwriting h1,
.markdown-preview-view.handwriting h2,
.markdown-preview-view.handwriting h3,
.markdown-source-view.handwriting .cm-header-1,
.markdown-source-view.handwriting .cm-header-2,
.markdown-source-view.handwriting .cm-header-3 {
  color: #1e3a8a;                 /* deep “pen‑ink” blue                 */
}

/*─────────────────────────────────────────────────────────────────────
  2.  Inline emphasis, code, math
  ───────────────────────────────────────────────────────────────────*/

/* Bold text */
.markdown-preview-view.handwriting strong,
.markdown-source-view.handwriting .cm-strong {
  color: #800080;                 /* purple emphasis                     */
}

/* Inline code */
.handwriting code,
.handwriting .cm-inline-code {
  font-family: 'Courier New', monospace;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 4px;
  border-radius: 4px;
}

/* MathJax in preview */
.markdown-preview-view.handwriting mjx-container {
  font-family: 'Kalam', cursive !important;
}

/*─────────────────────────────────────────────────────────────────────
  3.  Table styling – Preview & Live Preview
  ───────────────────────────────────────────────────────────────────*/

/* ---------- 3‑A Preview pane ------------------------------------- */

.markdown-preview-view.handwriting table {
  font-family: 'Kalam', cursive;
  font-size: 1.3em;
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}

.markdown-preview-view.handwriting th,
.markdown-preview-view.handwriting td {
  border: 1px solid #bbb;
  padding: 0.6em 1em;
  text-align: left;
}

/* Header row – force colour on every cell */
.markdown-preview-view.handwriting thead > tr > * {
  background: #f0f8ff !important; /* light‑blue header background        */
  color: #1e3a8a !important;      /* deep‑blue header text               */
  font-weight: bold;
}

/* Body cell text colour */
.markdown-preview-view.handwriting tbody td {
  color: #4682b4 !important;      /* sky‑blue body text in tables        */
}

/* ---------- 3‑B Live Preview (editing) --------------------------- */
/* Real <table> lives inside .cm-table-widget */

.markdown-source-view.handwriting.mod-cm6.is-live-preview
  .cm-table-widget table {
  font-family: 'Kalam', cursive;
  font-size: 1.3em;
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}

.markdown-source-view.handwriting.mod-cm6.is-live-preview
  .cm-table-widget th,
.markdown-source-view.handwriting.mod-cm6.is-live-preview
  .cm-table-widget td {
  border: 1px solid #bbb;
  padding: 0.6em 1em;
  text-align: left;
}

/* Header cells */
.markdown-source-view.handwriting.mod-cm6.is-live-preview
  .cm-table-widget th {
  background: #f0f8ff !important;
  color: #1e3a8a !important;
  font-weight: bold;
}

/* Body cells (fallback selector hits token view if widget absent) */
.markdown-source-view.handwriting.mod-cm6.is-live-preview
  .cm-table-widget tbody td,
.markdown-source-view.handwriting.mod-cm6.is-live-preview
  .cm-line span.cm-table-row {
  color: #4682b4 !important;
}

