/*
 * Blog styling for the kwex theme (index + long-form articles).
 * Scoped under .mfkt-blog / .mfkt-article. Palette matches the theme:
 * primary #02569b on Poppins, body text #6d768b, headings #2b354f.
 * Content pages here use the theme's floating shadow-card pattern.
 */

/* ------------------------------------------------------------------ */
/* Compact header band (slim, like the scrolled sticky state)          */
/* ------------------------------------------------------------------ */

.page.header.blog-header {
  padding-top: 88px; /* clears the fixed st-nav */
  padding-bottom: 0;
}

.page.header.blog-header .container {
  padding-top: 20px;
  padding-bottom: 72px; /* room for the pulled-up card below */
}

.article-crumb {
  display: inline-block;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  opacity: .85;
  margin-bottom: .25rem;
}

.article-crumb:hover {
  color: #fff;
  opacity: 1;
  text-decoration: none;
}

.article-title {
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: .25rem;
}

.article-date {
  font-size: .875rem;
  opacity: .8;
}

@media (max-width: 767px) {
  .article-title {
    font-size: 1.375rem;
  }
}

/* ------------------------------------------------------------------ */
/* The floating content card (theme pattern from the FAQ page)         */
/* ------------------------------------------------------------------ */

.mfkt-article .article-card .card-body,
.mfkt-blog .article-card .card-body {
  padding: 3rem;
}

@media (max-width: 767px) {
  .mfkt-article .article-card .card-body,
  .mfkt-blog .article-card .card-body {
    padding: 1.5rem;
  }
}

/* ------------------------------------------------------------------ */
/* Blog index rows                                                     */
/* ------------------------------------------------------------------ */

.mfkt-blog .index-item {
  display: block;
  padding: 1.5rem 0;
  border-bottom: 1px solid #e6eaf1;
  text-decoration: none;
}

.mfkt-blog .index-item:last-child {
  border-bottom: 0;
}

.mfkt-blog .index-item:hover {
  text-decoration: none;
}

.mfkt-blog .index-date {
  font-size: .8125rem;
  color: #9aa3b5;
  margin-bottom: .375rem;
}

.mfkt-blog .index-title {
  font-size: 1.375rem;
  font-weight: 600;
  color: #2b354f;
  margin-bottom: .5rem;
}

.mfkt-blog .index-item:hover .index-title {
  color: #02569b;
}

.mfkt-blog .index-summary {
  color: #6d768b;
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Article body typography                                             */
/* ------------------------------------------------------------------ */

.mfkt-article .article-body {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #5a6377;
}

.mfkt-article .article-body h2 {
  font-size: 1.625rem;
  font-weight: 600;
  color: #2b354f;
  margin: 2.75rem 0 1rem;
}

.mfkt-article .article-body h2:first-child {
  margin-top: 0;
}

.mfkt-article .article-body h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2b354f;
  margin: 2rem 0 .75rem;
}

.mfkt-article .article-body p {
  margin-bottom: 1.125rem;
}

.mfkt-article .article-body ul,
.mfkt-article .article-body ol {
  margin-bottom: 1.25rem;
  padding-left: 1.375rem;
}

.mfkt-article .article-body li {
  margin-bottom: .5rem;
}

.mfkt-article .article-body a {
  color: #02569b;
  text-decoration: underline;
}

.mfkt-article .article-body a:hover {
  color: #01396a;
}

.mfkt-article .article-body strong {
  color: #2b354f;
}

.mfkt-article .article-lead {
  font-size: 1.1875rem;
  color: #5a6377;
}

/* ------------------------------------------------------------------ */
/* Callouts and tables (uniform borders, no edge strips)               */
/* ------------------------------------------------------------------ */

.mfkt-article .callout {
  background: #eaf3fb;
  border: 1px solid #cfe3f5;
  border-radius: 8px;
  padding: 1.125rem 1.375rem;
  margin: 1.75rem 0;
}

.mfkt-article .callout p:last-child {
  margin-bottom: 0;
}

.mfkt-article .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.75rem 0;
  border: 1px solid #e6eaf1;
  border-radius: 8px;
}

.mfkt-article .table-scroll table {
  width: 100%;
  min-width: 560px;
  margin: 0;
  border-collapse: collapse;
  font-size: .9375rem;
}

.mfkt-article .table-scroll th {
  background: #f7f9fc;
  color: #2b354f;
  font-weight: 600;
  text-align: left;
  padding: .75rem 1rem;
  border-bottom: 1px solid #e6eaf1;
  white-space: nowrap;
}

.mfkt-article .table-scroll td {
  padding: .75rem 1rem;
  border-bottom: 1px solid #eef1f6;
  vertical-align: top;
  color: #5a6377;
}

.mfkt-article .table-scroll tr:last-child td {
  border-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Figures with inline SVGs                                            */
/* ------------------------------------------------------------------ */

.mfkt-article .article-figure {
  margin: 2rem 0;
  text-align: center;
}

.mfkt-article .article-figure svg {
  max-width: 100%;
  height: auto;
}

.mfkt-article .article-figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid #e6eaf1;
  border-radius: 8px;
}

.mfkt-article .article-figure figcaption {
  font-size: .875rem;
  color: #9aa3b5;
  margin-top: .625rem;
}

/* ------------------------------------------------------------------ */
/* FAQ block and related articles                                      */
/* ------------------------------------------------------------------ */

.mfkt-article .article-faq h2,
.mfkt-article .article-related h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2b354f;
  margin-bottom: 1.25rem;
}

.mfkt-article .faq-card {
  border: 1px solid #e6eaf1;
  border-radius: 8px;
  margin-bottom: 1rem;
  background: #fff;
  box-shadow: none;
}

.mfkt-article .faq-card .card-body {
  padding: 1.25rem 1.5rem;
}

.mfkt-article .faq-q {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #2b354f;
  margin-bottom: .5rem;
}

.mfkt-article .faq-card p {
  color: #5a6377;
  line-height: 1.65;
}

.mfkt-article .related-card {
  display: block;
  height: 100%;
  color: #2b354f;
  text-decoration: none;
  border: 1px solid #e6eaf1;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  transition: box-shadow .15s ease, transform .15s ease;
}

.mfkt-article .related-card:hover {
  text-decoration: none;
  color: #2b354f;
  box-shadow: 0 10px 24px rgba(43, 53, 79, .1);
  transform: translateY(-2px);
}

.mfkt-article .related-card .card-body {
  padding: 1.125rem 1.25rem;
}

.mfkt-article .related-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .375rem;
  color: #2b354f;
}

.mfkt-article .related-card:hover h3 {
  color: #02569b;
}

.mfkt-article .related-card p {
  font-size: .875rem;
  color: #6d768b;
  margin-bottom: 0;
}