/* ==========================================================================
   blog.css — single blog / article page
   Layered on top of Bootstrap 5.3.3. Uses Bootstrap's own CSS variables so
   it inherits your theme (and dark mode, if you use data-bs-theme).

   The .blog-body section matters most: TinyMCE emits bare <h2>, <p>, <img>,
   <table>… with NO classes, so Bootstrap's utilities never touch it. Those
   rules below reach that markup by element selector.
   ========================================================================== */

.blog-post {
  --blog-measure: 45rem;          /* comfortable reading width */
  --blog-accent: var(--bs-primary, #0f7a63);

  max-width: var(--blog-measure);
  margin-inline: auto;
  padding: 3rem 1rem 4rem;
  font-family: 'Manrope', var(--bs-body-font-family), system-ui, sans-serif;
  color: var(--bs-body-color);
}

/* --------------------------------------------------------------- header  */

.blog-post .blog-cat {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blog-accent);
  background: color-mix(in srgb, var(--blog-accent) 10%, transparent);
  border-radius: 100px;
  padding: .35rem .85rem;
  margin-bottom: 1.25rem;
}

.blog-post .blog-title {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .75rem;
  color: var(--bs-emphasis-color);
}

.blog-post .blog-date {
  font-size: .9rem;
  color: var(--bs-secondary-color);
  margin-bottom: 2rem;
}

/* ----------------------------------------------------------- hero image  */

.blog-post .blog-hero {
  margin: 0 0 2.5rem;
}

.blog-post .blog-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--bs-border-radius-xl, 1rem);
}

/* Let the hero breathe past the text column on wider screens. */
@media (min-width: 992px) {
  .blog-post .blog-hero {
    margin-inline: 0rem;
  }
}

/* =========================================================================
   .blog-body — unclassed TinyMCE output
   ========================================================================= */

.blog-post .blog-body {
  line-height: 1.6;
  color: var(--bs-body-color);
}

/* --- flow: space between blocks, without a trailing gap ---------------- */
.blog-post .blog-body > * + * {
  margin-top: 1.35rem;
}

.blog-post .blog-body > :first-child { margin-top: 0; }
.blog-post .blog-body > :last-child  { margin-bottom: 0; }

/* --- headings --------------------------------------------------------- */
.blog-post .blog-body h2,
.blog-post .blog-body h3,
.blog-post .blog-body h4 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--bs-emphasis-color);
  scroll-margin-top: 5rem;        /* so #anchors don't hide under a fixed nav */
}

.blog-post .blog-body h2 { font-size: 1.75rem; margin-top: 2.75rem; }
.blog-post .blog-body h3 { font-size: 1.35rem; margin-top: 2.25rem; }
.blog-post .blog-body h4 { font-size: 1.15rem; margin-top: 2rem; }

/* --- links ------------------------------------------------------------ */
.blog-post .blog-body a {
  color: var(--blog-accent);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: .08em;
}

.blog-post .blog-body a:hover {
  text-decoration-thickness: .14em;
}

/* --- lists ------------------------------------------------------------ */
.blog-post .blog-body ul,
.blog-post .blog-body ol {
  padding-left: 1.4rem;
}

.blog-post .blog-body li + li {
  margin-top: .45rem;
}

.blog-post .blog-body li::marker {
  color: var(--blog-accent);
}

/* --- images (the big one: TinyMCE images have no .img-fluid) ----------- */
.blog-post .blog-body img {
  max-width: 100%;
  height: auto;                   /* preserve aspect ratio when width is capped */
  border-radius: var(--bs-border-radius-lg, .75rem);
}

.blog-post .blog-body figure {
  margin: 2rem 0;
}

.blog-post .blog-body figcaption {
  font-size: .85rem;
  color: var(--bs-secondary-color);
  text-align: center;
  margin-top: .6rem;
}

/* --- blockquote ------------------------------------------------------- */
.blog-post .blog-body blockquote {
  margin: 2rem 0;
  padding: .35rem 0 .35rem 1.25rem;
  border-left: 3px solid var(--blog-accent);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--bs-secondary-color);
}

.blog-post .blog-body blockquote p:last-child { margin-bottom: 0; }

/* --- tables (TinyMCE emits a bare <table>) ----------------------------- */
.blog-post .blog-body table {
  width: 100%;
  margin: 2rem 0;
  border-collapse: collapse;
  font-size: .95rem;
}

.blog-post .blog-body th,
.blog-post .blog-body td {
  padding: .75rem .9rem;
  border: 1px solid var(--bs-border-color);
  text-align: left;
  vertical-align: top;
}

.blog-post .blog-body th {
  font-weight: 700;
  background: var(--bs-tertiary-bg);
}

/* Small screens: let a wide table scroll instead of blowing out the layout. */
@media (max-width: 575.98px) {
  .blog-post .blog-body table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* --- code ------------------------------------------------------------- */
.blog-post .blog-body code {
  font-size: .875em;
  padding: .15em .4em;
  border-radius: .3rem;
  background: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
}

.blog-post .blog-body pre {
  margin: 2rem 0;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  border-radius: var(--bs-border-radius, .5rem);
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
}

.blog-post .blog-body pre code {
  padding: 0;
  background: none;
}

/* --- misc ------------------------------------------------------------- */
.blog-post .blog-body hr {
  margin: 2.75rem 0;
  border: 0;
  border-top: 1px solid var(--bs-border-color);
  opacity: 1;
}

/* --------------------------------------------------------------- print  */
@media print {
  .blog-post { max-width: none; padding: 0; }
  .blog-post .blog-body a { text-decoration: none; }
  .blog-post .blog-body a::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ==========================================================================
   BLOG INDEX + SIDEBAR + TABLE OF CONTENTS
   ========================================================================== */

.blog-index { --blog-accent: var(--bs-primary, #0f7a63); }

/* ---------------------------------------------------------------- header */
.blog-eyebrow{display:block;font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blog-accent);margin-bottom:.6rem}
.blog-index-title{font-size:clamp(2rem,4vw,2.75rem);font-weight:800;letter-spacing:-.02em;
  color:var(--bs-emphasis-color);margin:0 0 .6rem}
.blog-index-sub{font-size:1.1rem;color:var(--bs-secondary-color);margin:0}

/* ------------------------------------------------------- featured hero */
.feat-card{display:block;text-decoration:none;color:inherit;overflow:hidden;
  border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius-xl,1rem);
  background:var(--bs-body-bg);transition:box-shadow .18s,transform .18s}
.feat-card:hover{box-shadow:0 22px 44px -26px rgba(15,23,42,.32);transform:translateY(-2px)}
.feat-media{height:100%;min-height:260px;overflow:hidden}
.feat-media img{width:100%;height:100%;object-fit:cover;display:block}
.feat-body{padding:2rem;height:100%;display:flex;flex-direction:column;justify-content:center}
.feat-flag{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--blog-accent);background:color-mix(in srgb,var(--blog-accent) 12%,transparent);
  padding:.32rem .75rem;border-radius:100px;margin-bottom:1rem}
.feat-title{font-size:1.6rem;font-weight:800;line-height:1.25;margin:0 0 .75rem;
  color:var(--bs-emphasis-color)}
.feat-excerpt{color:var(--bs-secondary-color);margin:0 0 1rem;font-size:.95rem;line-height:1.6}
.feat-meta{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--bs-secondary-color)}

/* ---------------------------------------------------------- post cards */
.post-card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;
  overflow:hidden;border:1px solid var(--bs-border-color);
  border-radius:var(--bs-border-radius-lg,.75rem);background:var(--bs-body-bg);
  transition:box-shadow .18s,transform .18s}
.post-card:hover{box-shadow:0 18px 34px -22px rgba(15,23,42,.3);transform:translateY(-3px)}
.post-media{aspect-ratio:16/9;overflow:hidden}
.post-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease}
.post-card:hover .post-media img{transform:scale(1.04)}
.post-body{padding:1.25rem;display:flex;flex-direction:column;flex-grow:1}
.post-title{font-size:1.1rem;font-weight:700;line-height:1.35;margin:.6rem 0 .5rem;
  color:var(--bs-emphasis-color)}
.post-excerpt{font-size:.9rem;color:var(--bs-secondary-color);line-height:1.6;
  margin:0 0 1rem;flex-grow:1}
.post-meta{font-size:.8rem;color:var(--bs-secondary-color)}

.chip{display:inline-block;align-self:flex-start;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--blog-accent);
  background:color-mix(in srgb,var(--blog-accent) 10%,transparent);
  padding:.28rem .65rem;border-radius:100px}

/* ------------------------------------------------------ category pills */
.cat-bar{display:flex;flex-wrap:wrap;gap:.5rem}
.cat-pill{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  font-size:.85rem;font-weight:600;color:var(--bs-body-color);
  border:1px solid var(--bs-border-color);border-radius:100px;padding:.4rem .9rem;
  transition:.15s}
.cat-pill:hover{border-color:var(--blog-accent);color:var(--blog-accent)}
.cat-pill.active{background:var(--blog-accent);border-color:var(--blog-accent);color:#fff}
.cat-pill .cat-n{font-size:.75rem;opacity:.7}

/* ------------------------------------------------------------- sidebar */
.blog-side.sticky{position:sticky;top:2rem}
.side-card{border:1px solid var(--bs-border-color);
  border-radius:var(--bs-border-radius-lg,.75rem);padding:1.25rem;background:var(--bs-body-bg)}
.side-title{display:flex;align-items:center;gap:.5rem;font-size:.95rem;font-weight:800;
  margin:0 0 1rem;color:var(--bs-emphasis-color)}
.side-title i{color:var(--blog-accent);font-size:.9rem}

.pop-list{list-style:none;margin:0;padding:0}
.pop-list li + li{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--bs-border-color)}
.pop-item{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit}
.pop-n{font-size:1rem;font-weight:800;color:var(--blog-accent);opacity:.45;min-width:1.1rem}
.pop-thumb{width:52px;height:52px;object-fit:cover;border-radius:.5rem;flex:none}
.pop-text{display:flex;flex-direction:column;min-width:0}
.pop-title{font-size:.875rem;font-weight:700;line-height:1.35;color:var(--bs-emphasis-color)}
.pop-item:hover .pop-title{color:var(--blog-accent)}
.pop-date{font-size:.75rem;color:var(--bs-secondary-color);margin-top:.15rem}

.cat-list{list-style:none;margin:0;padding:0}
.cat-list li + li{margin-top:.15rem}
.cat-list a{display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  text-decoration:none;color:var(--bs-body-color);font-size:.9rem;font-weight:600;
  padding:.5rem .65rem;border-radius:.5rem;transition:.15s}
.cat-list a:hover{background:var(--bs-tertiary-bg);color:var(--blog-accent)}
.cat-list a.active{background:color-mix(in srgb,var(--blog-accent) 10%,transparent);
  color:var(--blog-accent)}
.cat-list .cat-n{font-size:.75rem;color:var(--bs-secondary-color)}

/* --------------------------------------------------- table of contents */
.toc-card{max-height:70vh;overflow-y:auto}
.toc-list{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc-list li{margin:0}
.toc-list a{display:block;text-decoration:none;font-size:.875rem;line-height:1.45;
  color:var(--bs-secondary-color);padding:.4rem .6rem;border-left:2px solid transparent;
  transition:.15s}
.toc-list a:hover{color:var(--blog-accent);background:var(--bs-tertiary-bg)}
.toc-list a.active{color:var(--blog-accent);font-weight:700;
  border-left-color:var(--blog-accent);
  background:color-mix(in srgb,var(--blog-accent) 8%,transparent)}
.toc-list li.lvl-3 a{padding-left:1.5rem;font-size:.825rem}

.toc-mobile{margin:0 0 2rem;border:1px solid var(--bs-border-color);
  border-radius:var(--bs-border-radius-lg,.75rem);padding:.85rem 1rem;
  background:var(--bs-tertiary-bg)}
.toc-mobile summary{cursor:pointer;font-weight:700;font-size:.9rem;
  display:flex;align-items:center;gap:.5rem;color:var(--bs-emphasis-color)}
.toc-mobile summary i{color:var(--blog-accent)}
.toc-mobile .toc-list{margin-top:.75rem}

/* ----------------------------------------------------------- crumbs, tags */
.blog-crumbs{font-size:.85rem;color:var(--bs-secondary-color);margin-bottom:1.25rem}
.blog-crumbs a{color:var(--bs-secondary-color);text-decoration:none}
.blog-crumbs a:hover{color:var(--blog-accent)}
.blog-crumbs .sep{margin:0 .4rem;opacity:.5}
.blog-date .dot{margin:0 .4rem;opacity:.5}

.blog-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.5rem;padding-top:1.5rem;
  border-top:1px solid var(--bs-border-color)}
.blog-tags .tag{font-size:.8rem;font-weight:600;color:var(--bs-secondary-color);
  background:var(--bs-tertiary-bg);padding:.35rem .75rem;border-radius:100px}

/* -------------------------------------------------------- pagination */
.blog-pager .page-link{border:1px solid var(--bs-border-color);color:var(--bs-body-color);
  font-weight:600;margin:0 .15rem;border-radius:.5rem;min-width:2.4rem;text-align:center}
.blog-pager .page-link:hover{background:var(--bs-tertiary-bg);color:var(--blog-accent);
  border-color:var(--blog-accent)}
.blog-pager .page-item.active .page-link{background:var(--blog-accent);
  border-color:var(--blog-accent);color:#fff}
.blog-pager .page-item.disabled .page-link{opacity:.45}
.pager-count{text-align:center;font-size:.85rem;color:var(--bs-secondary-color);
  margin:1rem 0 0}

/* the single post keeps its own sticky sidebar spacing */
.blog-post{padding-top:0}