/*
 * Blog styling for the kwto theme (index cards + long-form articles).
 * Scoped under .mfkt-blog / .mfkt-article so the carried-over theme
 * stylesheets stay untouched. Palette matches the theme: primary
 * #ba4717, gradient partner #d56d33, body text #27333e.
 */

/* ------------------------------------------------------------------ */
/* Shared page header tweaks                                           */
/* ------------------------------------------------------------------ */

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

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

.article-title {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.article-date {
  font-size: .9375rem;
  opacity: .85;
}

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

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

.page.header.blog-header {
  padding-top: 84px; /* still clears the fixed navbar */
}

.page.header.blog-header .container {
  padding-top: 22px;
  padding-bottom: 24px;
}

/* The theme gives section containers 90px top padding; tighten the
   gap between the compact band and the content. */
.mfkt-article .container,
.mfkt-blog .container {
  padding-top: 36px;
}

.blog-header .article-title {
  font-size: 1.625rem;
  line-height: 1.3;
}

.blog-header .article-crumb {
  font-size: .75rem;
  margin-bottom: .25rem;
}

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

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

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

.mfkt-blog .index-card {
  display: block;
  color: #27333e;
  text-decoration: none;
  border: 1px solid #e8eef3;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  background: #fff;
  transition: box-shadow .15s ease, transform .15s ease;
}

.mfkt-blog .index-card:hover {
  text-decoration: none;
  color: #27333e;
  box-shadow: 0 10px 24px rgba(39, 51, 62, .08);
  transform: translateY(-2px);
}

.mfkt-blog .index-card .card-body {
  padding: 1.5rem 1.75rem;
}

.mfkt-blog .index-title {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: #27333e;
}

.mfkt-blog .index-card:hover .index-title {
  color: #ba4717;
}

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

.mfkt-blog .index-summary {
  color: #55636f;
  margin-bottom: 0;
}

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

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

.mfkt-article .article-body h2 {
  font-size: 1.625rem;
  font-weight: 700;
  color: #27333e;
  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: 700;
  color: #27333e;
  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: #ba4717;
  text-decoration: underline;
}

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

.mfkt-article .article-body strong {
  color: #27333e;
}

/* Intro standfirst under the H1 (optional per article). */
.mfkt-article .article-lead {
  font-size: 1.1875rem;
  color: #34424e;
}

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

.mfkt-article .callout {
  background: #fdf3ee;
  border: 1px solid #f0d6c8;
  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 #e8eef3;
  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: #f9fbfd;
  color: #27333e;
  font-weight: 700;
  text-align: left;
  padding: .75rem 1rem;
  border-bottom: 1px solid #e8eef3;
  white-space: nowrap;
}

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

.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 #e8eef3;
  border-radius: 8px;
}

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

/* ------------------------------------------------------------------ */
/* FAQ block                                                           */
/* ------------------------------------------------------------------ */

.mfkt-article .article-faq h2,
.mfkt-article .article-related h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #27333e;
  margin-bottom: 1.25rem;
}

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

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

.mfkt-article .faq-q {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #27333e;
  margin-bottom: .5rem;
}

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

/* ------------------------------------------------------------------ */
/* Related articles                                                    */
/* ------------------------------------------------------------------ */

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

.mfkt-article .related-card:hover {
  text-decoration: none;
  color: #27333e;
  box-shadow: 0 10px 24px rgba(39, 51, 62, .08);
  transform: translateY(-2px);
}

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

.mfkt-article .related-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .375rem;
  color: #27333e;
}

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

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