/* ============================================================
   Lotus Dharma — calm foundation
   Design tokens + global typography + entry-content styles
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Layout */
  --lotus-max:  760px;
  --lotus-pad:  24px;

  /* Colours */
  --lotus-bg:      #f8f5ef;
  --lotus-text:    #242424;
  --lotus-muted:   rgba(36, 36, 36, .72);
  --lotus-primary: #2E2A4A;
  --lotus-accent:  #C6A85E;
  --lotus-border:  rgba(36, 36, 36, .12);

  /* Surfaces */
  --lotus-radius: 14px;
  --lotus-shadow: 0 10px 30px rgba(0, 0, 0, .06);

  /* Spacing scale */
  --lotus-space-1: 6px;
  --lotus-space-2: 12px;
  --lotus-space-3: 18px;
  --lotus-space-4: 24px;
  --lotus-space-5: 36px;
  --lotus-space-6: 56px;

  /* Typography */
  --lotus-font-base:   18px;
  --lotus-line-height: 1.85;

  /* Kids mode */
  --lotus-kids-scale: 1.10;
  --lotus-kids-max:   820px;
}

/* ── Base ───────────────────────────────────────────────────── */
html,
body {
  background-color: var(--lotus-bg) !important;
}

body {
  background:       var(--lotus-bg);
  color:            var(--lotus-text);
  line-height:      var(--lotus-line-height);
  font-size:        var(--lotus-font-base);
  text-rendering:   optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ── Links ──────────────────────────────────────────────────── */
a {
  color:                    var(--lotus-primary);
  text-decoration:          underline;
  text-decoration-color:    rgba(46, 42, 74, .30);
  text-decoration-thickness: 1px;
  text-underline-offset:    3px;
  transition:               text-decoration-color .15s ease, color .15s ease;
}

a:hover,
a:focus-visible {
  color:                 var(--lotus-primary);
  text-decoration-color: var(--lotus-accent);
  outline:               none;
}

/* ── Layout helper ──────────────────────────────────────────── */
.lotus-container {
  max-width: var(--lotus-max);
  margin:    0 auto;
  padding:   0 var(--lotus-pad);
}

/* ── Divider ────────────────────────────────────────────────── */
hr {
  border:     none;
  border-top: 1px solid var(--lotus-border);
  margin:     var(--lotus-space-6) 0;
}

/* ── Entry content — vertical rhythm ───────────────────────── */
.entry-content > * + * {
  margin-top: var(--lotus-space-4);
}

/* Reset default block margins so our rhythm rule drives spacing */
.entry-content > * {
  margin-bottom: 0;
}

/* ── Headings ───────────────────────────────────────────────── */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  color:          var(--lotus-primary);
  line-height:    1.25;
  letter-spacing: -0.01em;
  font-weight:    600;
}

.entry-content h1 { font-size: 2em;    margin-top: var(--lotus-space-6); }
.entry-content h2 { font-size: 1.55em; margin-top: var(--lotus-space-6); }
.entry-content h3 { font-size: 1.25em; margin-top: var(--lotus-space-5); }
.entry-content h4 { font-size: 1.05em; margin-top: var(--lotus-space-4); }

/* First heading in content needs no extra top gap */
.entry-content > :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

/* ── Paragraphs ─────────────────────────────────────────────── */
.entry-content p {
  color:       var(--lotus-text);
  line-height: var(--lotus-line-height);
}

/* ── Lists ──────────────────────────────────────────────────── */
.entry-content ul,
.entry-content ol {
  padding-left: 1.6em;
  line-height:  var(--lotus-line-height);
}

.entry-content ul { list-style-type: disc; }
.entry-content ol { list-style-type: decimal; }

.entry-content li {
  margin-top: var(--lotus-space-1);
}

.entry-content li + li {
  margin-top: var(--lotus-space-2);
}

/* Nested lists */
.entry-content li > ul,
.entry-content li > ol {
  margin-top:    var(--lotus-space-1);
  margin-bottom: 0;
}

/* ── Blockquote ─────────────────────────────────────────────── */
.entry-content blockquote {
  margin:      var(--lotus-space-5) 0;
  padding:     var(--lotus-space-3) var(--lotus-space-4);
  border-left: 3px solid var(--lotus-accent);
  background:  rgba(198, 168, 94, .06);
  border-radius: 0 var(--lotus-radius) var(--lotus-radius) 0;
  font-style:  italic;
  color:       var(--lotus-muted);
}

.entry-content blockquote p {
  margin: 0;
}

.entry-content blockquote cite {
  display:    block;
  margin-top: var(--lotus-space-2);
  font-size:  0.85em;
  font-style: normal;
  color:      var(--lotus-muted);
  letter-spacing: .02em;
}

/* ── Images ─────────────────────────────────────────────────── */
.entry-content img {
  max-width:     100%;
  height:        auto;
  border-radius: calc(var(--lotus-radius) / 2);
  display:       block;
}

.entry-content figure {
  margin: var(--lotus-space-5) 0;
}

.entry-content figcaption {
  margin-top:  var(--lotus-space-2);
  font-size:   0.85em;
  color:       var(--lotus-muted);
  text-align:  center;
  font-style:  italic;
  line-height: 1.5;
}

/* ── Tables ─────────────────────────────────────────────────── */
.entry-content table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.95em;
}

.entry-content th,
.entry-content td {
  padding:       var(--lotus-space-2) var(--lotus-space-3);
  border-bottom: 1px solid var(--lotus-border);
  text-align:    left;
  vertical-align: top;
}

.entry-content th {
  font-weight: 600;
  color:       var(--lotus-primary);
  border-bottom-width: 2px;
}

.entry-content tr:last-child td {
  border-bottom: none;
}

/* ── Code ───────────────────────────────────────────────────── */
.entry-content code {
  font-size:        0.88em;
  background:       rgba(46, 42, 74, .06);
  color:            var(--lotus-primary);
  padding:          .15em .4em;
  border-radius:    4px;
  font-family:      ui-monospace, monospace;
}

.entry-content pre {
  background:    rgba(46, 42, 74, .05);
  border:        1px solid var(--lotus-border);
  border-radius: var(--lotus-radius);
  padding:       var(--lotus-space-4);
  overflow-x:    auto;
  font-size:     0.88em;
  line-height:   1.65;
}

.entry-content pre code {
  background: none;
  padding:    0;
  color:      inherit;
}

/* ── Gutenberg alignment helpers ────────────────────────────── */
.entry-content .has-text-align-center { text-align: center; }
.entry-content .has-text-align-right  { text-align: right; }

/* ============================================================
   VERSION PERSONALITIES
   Each version overrides the CSS custom properties defined in
   :root. Every rule that uses those tokens automatically
   inherits the right colour/radius/etc — no duplication needed.
   ============================================================ */

/* ── EN (adult) — default palette, no override needed ──────── */
/*    Deep indigo #2E2A4A + muted gold #C6A85E                  */
/*    Calm, scholarly, minimal. Already set in :root.           */

/* ── VI — warm saffron / terracotta ────────────────────────── */
/*
 * Evokes Vietnamese temple warmth: saffron robes, red lacquer,
 * aged paper. Still calm and readable — just warmer.
 */
body.lang-vi {
  --lotus-bg:      #fdf0dc;          /* warm saffron parchment */
  --lotus-text:    #2a1f14;          /* deep warm brown */
  --lotus-muted:   rgba(42, 31, 20, .68);
  --lotus-primary: #7B3F00;          /* rich saffron-brown */
  --lotus-accent:  #C0392B;          /* terracotta red */
  --lotus-border:  rgba(123, 63, 0, .14);
  --lotus-shadow:  0 10px 30px rgba(123, 63, 0, .07);
}

html:has(body.lang-vi),
body.lang-vi {
  background-color: #fdf0dc !important;
}

body.lang-vi a {
  text-decoration-color: rgba(123, 63, 0, .28);
}

body.lang-vi a:hover,
body.lang-vi a:focus-visible {
  text-decoration-color: var(--lotus-accent);
}

body.lang-vi .entry-content blockquote {
  border-left-color: var(--lotus-accent);
  background:        rgba(192, 57, 43, .05);
}

body.lang-vi hr {
  border-top-color: rgba(123, 63, 0, .18);
}

/* ── Kids — bright teal / coral, rounded, friendly ─────────── */
/*
 * Warm cream background, teal headings, coral accents.
 * Rounded corners everywhere. Slightly heavier heading weight.
 * !important on font-size beats Kadence's body override.
 */
body.is-kids {
  --lotus-bg:          #edfaf7;          /* soft mint — cool, fresh, playful */
  --lotus-text:        #1a1a2e;          /* near-black with blue tint */
  --lotus-muted:       rgba(26, 26, 46, .65);
  --lotus-primary:     #0e7c7b;          /* teal */
  --lotus-accent:      #e8613a;          /* coral */
  --lotus-border:      rgba(14, 124, 123, .18);
  --lotus-shadow:      0 8px 24px rgba(14, 124, 123, .10);
  --lotus-radius:      20px;             /* rounder boxes */
  --lotus-line-height: 1.95;             /* more breathing room */
  --lotus-kids-max:    820px;

  font-family:  'Nunito', 'Comic Sans MS', 'Chalkboard SE', ui-rounded, sans-serif;
  font-size:    calc(var(--lotus-font-base) * var(--lotus-kids-scale)) !important;
  font-weight:  400;
  letter-spacing: 0.01em;
}

html:has(body.is-kids),
body.is-kids {
  background-color: #edfaf7 !important;
}

body.is-kids .lotus-container {
  max-width: var(--lotus-kids-max);
}

/* Headings: Nunito ExtraBold, bigger, friendlier */
body.is-kids .entry-content h1,
body.is-kids .entry-content h2,
body.is-kids .entry-content h3,
body.is-kids .entry-content h4,
body.is-kids .entry-content h5,
body.is-kids .entry-content h6 {
  font-family:    'Nunito', 'Comic Sans MS', 'Chalkboard SE', ui-rounded, sans-serif;
  font-weight:    800;
  letter-spacing: -0.01em;
}

body.is-kids .entry-content h1 { font-size: 2.2em; }
body.is-kids .entry-content h2 { font-size: 1.7em; }
body.is-kids .entry-content h3 { font-size: 1.4em; }
body.is-kids .entry-content h4 { font-size: 1.15em; }

/* Links: coral underline on hover */
body.is-kids a {
  text-decoration-color: rgba(14, 124, 123, .30);
}

body.is-kids a:hover,
body.is-kids a:focus-visible {
  text-decoration-color: var(--lotus-accent);
}

/* Blockquote: teal left border, coral tint */
body.is-kids .entry-content blockquote {
  border-left:   4px solid var(--lotus-accent);
  background:    rgba(232, 97, 58, .06);
  border-radius: 0 var(--lotus-radius) var(--lotus-radius) 0;
  font-style:    normal;               /* less formal — no italic */
  padding:       var(--lotus-space-4) var(--lotus-space-5);
}

/* Lists: more space between items */
body.is-kids .entry-content li + li {
  margin-top: var(--lotus-space-3);
}

/* HR: coral tint */
body.is-kids hr {
  border-top-color: rgba(232, 97, 58, .25);
  margin:           calc(var(--lotus-space-6) * 1.1) 0;
}

/* Version switch: teal active state in kids mode */
body.is-kids .lotus-version-switch__btn.is-active {
  color:        var(--lotus-primary);
  border-color: rgba(14, 124, 123, .35);
  background:   rgba(14, 124, 123, .10);
}