/* =====================================================================
   TGL — CLASSIC EDITOR ↔ PUBLISHED POST TYPOGRAPHY PARITY (v8.4.8)

   ONE typographic contract, loaded in TWO places:
     1. wp_enqueue_scripts  → the published post body (.tgl-content)
     2. add_editor_style()  → the Classic Editor (TinyMCE) visual view

   Because both surfaces read this same file, what an editor sees while
   writing is what a reader sees after publishing: same alignment, same
   heading scale, same body size, same rhythm.

   Loads LAST so it settles the differences between lyrics.css,
   single-song.css and reading.css without !important wars.
   ===================================================================== */

:root {
  --tgl-content-size: 17px;
  --tgl-content-leading: 1.85;
  --tgl-h2: 1.62rem;
  --tgl-h3: 1.30rem;
  --tgl-h4: 1.12rem;
  --tgl-content-gap: 0.95em;
}

/* ---- Shared content root ------------------------------------------- */
.tgl-content,
body#tinymce.wp-editor,
body.mce-content-body {
  font-family: var(--tgl-font-body, 'Inter', 'Noto Sans Telugu', sans-serif);
  font-size: var(--tgl-content-size);
  line-height: var(--tgl-content-leading);
  color: var(--tgl-ink, #1f2733);
  text-align: left;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--tgl-gutter, 24px);
  box-sizing: border-box;
}

/* ---- Block rhythm --------------------------------------------------- */
.tgl-content p,
body.mce-content-body p {
  margin: 0 0 var(--tgl-content-gap);
  text-align: left;
}

.tgl-content ul,
.tgl-content ol,
body.mce-content-body ul,
body.mce-content-body ol {
  margin: 0 0 var(--tgl-content-gap);
  padding-left: 1.45em;
}

.tgl-content li,
body.mce-content-body li {
  margin: 0 0 0.35em;
  line-height: var(--tgl-content-leading);
}

/* ---- Heading scale (identical in both surfaces) --------------------- */
.tgl-content h2,
.tgl-content h3,
.tgl-content h4,
body.mce-content-body h2,
body.mce-content-body h3,
body.mce-content-body h4 {
  font-family: var(--tgl-font-head, 'Poppins', 'Inter', sans-serif);
  color: var(--tgl-navy, #002147);
  text-align: left;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.tgl-content h2,
body.mce-content-body h2 { font-size: var(--tgl-h2); font-weight: 800; margin: 1.4em 0 0.55em; }

.tgl-content h3,
body.mce-content-body h3 { font-size: var(--tgl-h3); font-weight: 700; margin: 1.3em 0 0.5em; }

.tgl-content h4,
body.mce-content-body h4 { font-size: var(--tgl-h4); font-weight: 700; margin: 1.2em 0 0.45em; }

.tgl-content > :first-child,
body.mce-content-body > :first-child { margin-top: 0; }

/* ---- Lyrics surfaces: same left edge and size as the editor --------- */
.tgl-content .lgenx-text,
.tgl-content .tgl-lyrics,
body.mce-content-body .lgenx-text {
  font-size: var(--tgl-content-size);
  line-height: 2.05;
  text-align: left;
}

.tgl-content h2.lgenx-title,
body.mce-content-body h2.lgenx-title { font-size: var(--tgl-h2); text-align: left; }

.tgl-content h3.lgenx-subtitle,
body.mce-content-body h3.lgenx-subtitle { font-size: var(--tgl-h3); text-align: left; }

.tgl-content h4.lgenx-subtitle,
body.mce-content-body h4.lgenx-subtitle { font-size: var(--tgl-h4); text-align: left; }

/* Headings that used to centre themselves inside the article body now
   follow the same left rail as everything the editor typed. */
.tgl-content .lgenx-explore-heading,
.tgl-content .lgenx-explore-intro,
.tgl-content .lgenx-faq-title { text-align: left; }

.tgl-content .lgenx-explore-list { margin-left: 0; margin-right: 0; max-width: none; }

/* ---- Links, quotes, tables ------------------------------------------ */
.tgl-content a,
body.mce-content-body a { color: var(--tgl-blue, #0A3A8A); text-decoration: underline; }

.tgl-content blockquote,
body.mce-content-body blockquote {
  margin: 1.1em 0;
  padding: 0.6em 1em;
  border-left: 3px solid var(--tgl-blue, #0A3A8A);
  background: rgba(10, 58, 138, 0.04);
}

.tgl-content table,
body.mce-content-body table { width: 100%; border-collapse: collapse; font-size: 0.95em; }

/* ---- Mobile: one step down, identical on both surfaces -------------- */
@media (max-width: 640px) {
  :root {
    --tgl-content-size: 16px;
    --tgl-content-leading: 1.8;
    --tgl-h2: 1.35rem;
    --tgl-h3: 1.18rem;
    --tgl-h4: 1.05rem;
  }

  .tgl-content,
  body.mce-content-body { padding: 0 var(--tgl-gutter-mobile, 12px); }
}