/* ==========================================================================
   BLOG / CKEDITOR CONTENT STYLES — matched to impalasearch.io main.css
   Reuses the EXISTING .insight-body class already used on blog pages, so
   no template change is needed. Load this file AFTER main.css so it can
   override the global ul/li/a resets that were stripping list + link
   styling from CMS content.
   ========================================================================== */

:root {
  --blog-font-body: 'Mukta', Arial, sans-serif;                  /* site body font */
  --blog-font-heading: 'kionabold', 'Mukta', Arial, sans-serif;  /* site heading font */
  --blog-color-text: #333333;         /* body copy — site has no single defined value, safe dark neutral */
  --blog-color-heading: #000000;      /* matches site's #000 / rgb(0,0,0) usage */
  --blog-color-primary: #df6336;      /* site's orange brand accent */
  --blog-color-primary-hover: #b8492a; /* darker orange for hover (white-on-white would vanish) */
  --blog-color-muted: #999999;        /* matches site's rgb(153,153,153) */
  --blog-color-border: #e5e5e5;
  --blog-color-bg-code: #f3f3f3;      /* matches site's body background */
  --blog-max-width: 760px;
  --blog-base-font-size: 18px;        /* matches existing .insight-body font-size */
  --blog-line-height: 1.7;
}

/* ---- Container ----
   .insight-body already sets font-size/font-weight in main.css; we add
   what's missing (color, line-height, width) without duplicating those.
   .blog-content is an alias in case that wrapper class is used instead. */
.insight-body,
.blog-content {
  margin-left: auto;
  margin-right: auto;
  font-family: var(--blog-font-body);
  line-height: var(--blog-line-height);
  color: var(--blog-color-text);
  word-wrap: break-word;
}

.blog-content span {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    font-family: inherit !important;
}

.blog-content { font-size: var(--blog-base-font-size); }

/* ---- Paragraphs ---- */
.insight-body p,
.blog-content p {
  margin: 0 0 1.25em;
}

/* ---- Headings ---- */
.insight-body h1, .insight-body h2, .insight-body h3,
.insight-body h4, .insight-body h5, .insight-body h6,
.blog-content h1, .blog-content h2, .blog-content h3,
.blog-content h4, .blog-content h5, .blog-content h6 {
  font-family: var(--blog-font-heading);
  color: var(--blog-color-heading);
  font-weight: 700;
  line-height: 1.3;
  margin: 1.8em 0 0.6em;
}
.insight-body h1:first-child, .insight-body h2:first-child, .insight-body h3:first-child,
.blog-content h1:first-child, .blog-content h2:first-child, .blog-content h3:first-child {
  margin-top: 0;
}
.insight-body h1, .blog-content h1 { font-size: 2em; }
.insight-body h2, .blog-content h2 { font-size: 1.6em; }
.insight-body h3, .blog-content h3 { font-size: 1.35em; }
.insight-body h4, .blog-content h4 { font-size: 1.15em; }
.insight-body h5, .blog-content h5 { font-size: 1em; text-transform: uppercase; letter-spacing: 0.04em; }
.insight-body h6, .blog-content h6 { font-size: 0.9em; color: var(--blog-color-muted); }

/* ---- Links ----
   IMPORTANT: global main.css sets `a { color: #ffffff; }` — invisible on
   a white content area. This overrides it inside blog content only. */
.insight-body a,
.blog-content a {
  color: var(--blog-color-primary) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}
.insight-body a:hover, .insight-body a:focus,
.blog-content a:hover, .blog-content a:focus {
  color: var(--blog-color-primary-hover) !important;
}

/* ---- Bold / italic / small text CKEditor produces ---- */
.insight-body strong, .insight-body b,
.blog-content strong, .blog-content b { font-weight: 700; }
.insight-body em, .insight-body i,
.blog-content em, .blog-content i { font-style: italic; }
.insight-body small,
.blog-content small { font-size: 0.85em; color: var(--blog-color-muted); }
.insight-body mark,
.blog-content mark { background: #fff3b0; padding: 0 2px; }
.insight-body sub, .insight-body sup,
.blog-content sub, .blog-content sup { font-size: 0.75em; }
.insight-body u,
.blog-content u { text-decoration: underline; }
.insight-body s, .insight-body del,
.blog-content s, .blog-content del { text-decoration: line-through; opacity: 0.75; }

/* ---- Unordered / ordered lists ----
   IMPORTANT: your global main.css has:
     ul { padding: 0; margin: 0; }
     li { display: block; }
   That's what was killing bullets/numbers/indentation on CMS content.
   These rules override it, scoped ONLY to blog content. */
.insight-body ul, .insight-body ol,
.blog-content ul, .blog-content ol {
  margin: 0 0 1.25em !important;
  padding-left: 1.4em !important;
}
.insight-body ul,
.blog-content ul {
  list-style: disc outside !important;
}
.insight-body ul ul,
.blog-content ul ul {
  list-style: circle outside !important;
  margin: 0.4em 0 !important;
}
.insight-body ul ul ul,
.blog-content ul ul ul {
  list-style: square outside !important;
}
.insight-body ol,
.blog-content ol {
  list-style: decimal outside !important;
}
.insight-body li,
.blog-content li {
  display: list-item !important; /* overrides global li { display: block } */
  margin: 0.4em 0;
  padding-left: 0.2em;
}
.insight-body li > p,
.blog-content li > p {
  margin: 0; /* CKEditor sometimes wraps li text in <p> */
}
.insight-body li::marker,
.blog-content li::marker {
  color: var(--blog-color-primary);
}
.insight-body li > ul, .insight-body li > ol,
.blog-content li > ul, .blog-content li > ol {
  margin: 0.4em 0 0.4em 0.2em !important;
}

/* ---- Blockquote ---- */
.insight-body blockquote,
.blog-content blockquote {
  margin: 1.5em 0;
  padding: 0.6em 1.2em;
  border-left: 4px solid var(--blog-color-primary);
  background: rgba(223, 99, 54, 0.06); /* tinted version of brand orange */
  font-style: italic;
  color: var(--blog-color-heading);
}
.insight-body blockquote p:last-child,
.blog-content blockquote p:last-child {
  margin-bottom: 0;
}

/* ---- Horizontal rule ---- */
.insight-body hr,
.blog-content hr {
  border: none;
  border-top: 1px solid var(--blog-color-border);
  margin: 2.5em 0;
}

/* ---- Images (CKEditor image / image2 widget) ---- */
.insight-body img, .insight-body figure img,
.blog-content img, .blog-content figure img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  margin: 1.5em auto;
}
.insight-body figure,
.blog-content figure {
  margin: 1.5em 0;
}
.insight-body figure.image-style-align-left,
.blog-content figure.image-style-align-left {
  float: left;
  margin-right: 1.5em;
  max-width: 45%;
}
.insight-body figure.image-style-align-right,
.blog-content figure.image-style-align-right {
  float: right;
  margin-left: 1.5em;
  max-width: 45%;
}
.insight-body figcaption,
.blog-content figcaption {
  text-align: center;
  font-size: 0.85em;
  color: var(--blog-color-muted);
  margin-top: 0.5em;
}

/* ---- Tables (CKEditor table widget) ---- */
.insight-body table,
.blog-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.95em;
}
.insight-body th, .insight-body td,
.blog-content th, .blog-content td {
  border: 1px solid var(--blog-color-border);
  padding: 0.6em 0.8em;
  text-align: left;
  vertical-align: top;
}
.insight-body th,
.blog-content th {
  background: var(--blog-color-bg-code);
  font-weight: 700;
  color: var(--blog-color-heading);
}
.insight-body tbody tr:nth-child(even),
.blog-content tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}

/* ---- Code (inline + block) ---- */
.insight-body code,
.blog-content code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  background: var(--blog-color-bg-code);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}
.insight-body pre,
.blog-content pre {
  background: var(--blog-color-bg-code);
  padding: 1em 1.2em;
  border-radius: 6px;
  overflow-x: auto;
  margin: 1.5em 0;
}
.insight-body pre code,
.blog-content pre code {
  background: none;
  padding: 0;
}

/* ---- CKEditor text-alignment classes ---- */
.insight-body .text-left, .blog-content .text-left   { text-align: left; }
.insight-body .text-center, .blog-content .text-center { text-align: center; }
.insight-body .text-right, .blog-content .text-right  { text-align: right; }
.insight-body .text-justify, .blog-content .text-justify { text-align: justify; }

/* ---- Clear floats after floated images ---- */
.insight-body::after,
.blog-content::after {
  content: "";
  display: table;
  clear: both;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .insight-body,
  .blog-content {
    font-size: 15.5px;
  }
  .insight-body figure.image-style-align-left, .insight-body figure.image-style-align-right,
  .blog-content figure.image-style-align-left, .blog-content figure.image-style-align-right {
    float: none;
    max-width: 100%;
    margin: 1.5em 0;
  }
}