/* kidstamilstories.sollagarathi.com -- small overrides on top of the
   Next-Page/Magazin template (style.css/vendor.css/responsive.css, copied
   as-is). Owner request 2026-10-17/18: keep the template's own themed
   palette (unlike the main site's grayscale-only /games/* tools) -- this
   is a deliberately standalone, separately-branded site. These overrides
   are only: a Tamil-readable font (the template shipped "Rubik", a Latin
   font, and no Tamil text at all), and the mobile-menu toggle this
   project's own vanilla JS drives instead of the template's dropped
   jQuery/Bootstrap-JS bundle (vendor.js/main.js were not copied -- see
   js/site.js). No color, spacing, or layout rule below changes the
   template's own look. */

:root {
  --heading-font: 'Noto Sans Tamil', sans-serif;
  --body-font: 'Noto Sans Tamil', sans-serif;
  /* Tamil needs more vertical room than Latin -- 1.7 is fine for English
     body copy but crowds உயிர்மெய் marks. */
  --line-height30: 1.95;
}
body { line-height: 1.9; }

/* Story cards here never have an illustration (no artwork has been
   commissioned) -- .thumb is simply omitted rather than left as a broken
   image, so .details needs its own top padding in that case. */
.single-post-wrap.no-thumb .details { padding-top: 2px; }

/* Plain bootstrap .collapse/.show toggle, driven by js/site.js -- no
   jQuery, no Bootstrap JS bundle. */
@media (max-width: 991px) {
  .navbar-collapse:not(.show) { display: none; }
  .navbar-collapse.show {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; padding: 10px 20px 20px; box-shadow: 0 10px 20px rgba(0,0,0,.08); z-index: 30;
  }
}

/* Category filter chips (index.html) -- not part of the original template,
   styled to match its tag-base/tag-light-blue language. */
.kt-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.kt-filter-btn {
  border: 1px solid #e3e3f1; background: #fff; color: var(--paragraph-color);
  border-radius: 30px; padding: 7px 18px; font-size: 14px; cursor: pointer;
}
.kt-filter-btn.active { background: var(--main-color); border-color: var(--main-color); color: #fff; }

.kt-meta-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.kt-age-badge { font-size: 12px; color: var(--paragraph-color); background: #f3f3f8; border-radius: 30px; padding: 3px 12px; }

/* story.html reader */
.kt-story-body p { font-size: 17px; line-height: 2; color: var(--heading-color); margin-bottom: 18px; }
.kt-moral-box { background: #e6f2fd; border-radius: 10px; padding: 18px 22px; margin: 28px 0; }
.kt-moral-box .label { font-size: 13px; color: var(--main-color); font-weight: 700; margin-bottom: 6px; }
.kt-source-note { font-size: 13px; color: var(--paragraph-color); border: 1px dashed #d8d8e6; border-radius: 8px; padding: 10px 14px; margin-top: 10px; }
.kt-w { cursor: pointer; border-bottom: 1px dashed #b9c6e6; }
.kt-w:hover { border-bottom-color: var(--main-color); }

.kt-tip {
  position: fixed; inset-inline: 12px; bottom: 12px; z-index: 50; max-width: 520px; margin-inline: auto;
  background: #fff; border-radius: 10px; padding: 16px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.kt-tip-word { font-weight: 700; color: var(--heading-color); font-size: 18px; }
.kt-tip-body { font-size: 15px; color: var(--paragraph-color); margin-top: 6px; }
.kt-tip-close { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--paragraph-color); }