/* SML Blog Content — brand colors: blue #2877ff / navy #0f172a / green #5aae18
   Everything in this file is scoped to .sml-meta-bar / .sml-post-content /
   .single-post so it never touches any other page. v1.3.0 */

/* ── Meta bar ─────────────────────────────── */
.sml-meta-bar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 4px 0 20px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #000000 !important;
  list-style: none !important;
  /* Keep everything on one row on every device. If it genuinely can't
     fit (very small screens), scroll sideways instead of wrapping. */
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.sml-meta-bar::-webkit-scrollbar {
  display: none !important;
  height: 0 !important;
}

.sml-meta-bar *::before,
.sml-meta-bar *::after {
  content: none !important;
}

.sml-meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font: inherit !important;
  color: #000000 !important;
  cursor: default;
  position: relative;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Proper visible separators (was a 4px dot before) */
.sml-meta-item + .sml-meta-item:not(.sml-meta-like)::before {
  content: '' !important;
  display: inline-block !important;
  width: 1px !important;
  height: 15px !important;
  border-radius: 0 !important;
  background: #94a3b8 !important;
  margin-right: 10px !important;
  flex-shrink: 0 !important;
}

.sml-meta-item svg {
  color: #1e293b !important;
  flex-shrink: 0 !important;
}

/* ── Author item + hover bio popup (v1.5.0: plain style, no
   chip background — sits like every other meta item now) ── */
.sml-meta-author.sml-author-trigger {
  position: relative !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.sml-author-popup {
  display: none !important;
  position: fixed !important;
  z-index: 99999 !important;
  width: 280px !important;
  max-width: calc(100vw - 32px) !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16) !important;
  padding: 18px !important;
  text-align: left !important;
  white-space: normal !important;
  cursor: default !important;
}

/* Shown by JS (adds this class) on hover/tap, with top/left set
   inline via JS so it always lands next to the trigger and stays
   inside the viewport. No pure-CSS :hover rule here on purpose —
   without JS-calculated coordinates a fixed element has no correct
   position to show at. */
.sml-author-popup.sml-popup-visible {
  display: block !important;
}

.sml-author-popup-name {
  display: block !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: #0f172a !important;
  margin-bottom: 6px !important;
}

.sml-author-popup-bio {
  display: block !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #000000 !important;
}

.sml-author-popup-readmore {
  display: inline-block !important;
  margin-top: 12px !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #2877ff !important;
  text-decoration: none !important;
}

.sml-author-popup-readmore:hover {
  color: #1a5fd6 !important;
}

/* Date — colored + bold, per brand request */
.sml-meta-date {
  color: #5aae18 !important;
  font-weight: 700 !important;
}

/* ── Dynamic post title ([sml_post_title]) — v1.5.0 ──
   Zero top margin/padding on purpose: any remaining gap above
   this heading is coming from the Elementor section/column's own
   "top padding" setting, not from this element — adjust that in
   Elementor if more room needs to come out. */
.sml-post-title {
  font-family: 'Sora', sans-serif !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  font-size: clamp(24px, 3.6vw, 34px) !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}

/* "Comments" — bold for readability, stays the same blue as before */
.sml-meta-comments a {
  color: #2877ff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.sml-meta-comments a:hover {
  text-decoration: underline !important;
}

button.sml-meta-item.sml-meta-like {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  cursor: pointer !important;
  background: #2877ff !important;
  color: #fff !important;
  padding: 5px 12px !important;
  border: none !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  transition: background 0.2s ease, transform 0.15s ease;
}

button.sml-meta-item.sml-meta-like:focus {
  outline: 2px solid #2877ff !important;
  outline-offset: 2px !important;
}

button.sml-meta-item.sml-meta-like svg { color: #fff !important; }
button.sml-meta-item.sml-meta-like .sml-like-count { color: #fff !important; }
button.sml-meta-item.sml-meta-like:hover { background: #1c5fd6 !important; }
button.sml-meta-item.sml-meta-like:active { transform: scale(0.96); }
button.sml-meta-item.sml-meta-like.sml-liked { background: #5aae18 !important; cursor: default !important; }
button.sml-meta-item.sml-meta-like.sml-liked:hover { background: #5aae18 !important; }

/* ── Blog content typography (scoped to our own wrapper) ── */
.sml-post-content h1,
.sml-post-content h2,
.sml-post-content h3,
.sml-post-content h4 {
  font-family: 'Sora', sans-serif !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

.sml-post-content h1 { font-size: clamp(22px, 3.2vw, 30px) !important; margin: 0 0 16px !important; }
.sml-post-content h3 { font-size: clamp(16px, 2vw, 19px) !important; margin: 26px 0 10px !important; }
.sml-post-content h4 { font-size: clamp(14px, 1.6vw, 16px) !important; margin: 20px 0 8px !important; }

.sml-post-content h2 {
  font-size: clamp(18px, 2.4vw, 24px) !important;
  margin: 30px 0 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 3px solid #2877ff !important;
}

.sml-post-content p,
.sml-post-content li {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 500 !important;
  color: #334155 !important;
  line-height: 1.75 !important;
  font-size: clamp(15px, 1.6vw, 16.5px) !important;
}

/* Consistent paragraph spacing everywhere in the post — this was the
   real source of the "gap in multiple places" issue: paragraphs had
   no margin of their own before, so every p-to-p and p-to-heading
   transition fell back to the theme's own (inconsistent) spacing. */
.sml-post-content p {
  margin: 0 0 18px !important;
}
.sml-post-content p:last-child {
  margin-bottom: 0 !important;
}
.sml-post-content > *:last-child {
  margin-bottom: 0 !important;
}

/* ── Lists: fixed the big gap after the last bullet point.
   The old rule left a full 20px margin under every list even
   when nothing needed that much room, and it stacked with the
   next heading/paragraph's own top margin. ── */
.sml-post-content ul,
.sml-post-content ol {
  padding-left: 22px !important;
  margin: 0 0 16px !important;
}

.sml-post-content li {
  margin-bottom: 6px !important;
}

.sml-post-content li:last-child {
  margin-bottom: 0 !important;
}

.sml-post-content ul:last-child,
.sml-post-content ol:last-child {
  margin-bottom: 0 !important;
}

/* Collapse the empty paragraphs the editor sometimes leaves behind
   right after a list, which was the other source of the extra gap. */
.sml-post-content p:empty {
  display: none !important;
}

.sml-post-content strong { color: #0f172a !important; }

/* Hyperlinks inside blog content: bold, brand blue.
   Excludes the Elementor Template CTA button so its own green/black
   design is never touched by this rule. If a future Elementor button
   ever gets caught by mistake, add the class "sml-cta-button" to it
   in Elementor's Advanced > CSS Classes field — it's excluded below too. */
.sml-post-content a:not(.elementor-button):not(.elementor-button-link):not(.sml-cta-button) {
  color: #2877ff !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(40, 119, 255, 0.35) !important;
  text-underline-offset: 2px !important;
}
.sml-post-content a:not(.elementor-button):not(.elementor-button-link):not(.sml-cta-button):hover {
  text-decoration-color: #2877ff !important;
}

/* ── Rank Math FAQ block (uses its own classes, not plain h2/h3) ── */
.sml-post-content .rank-math-question,
.sml-post-content h3.rank-math-question {
  font-family: 'Sora', sans-serif !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  font-size: clamp(15.5px, 1.8vw, 17px) !important;
  border-bottom: none !important;
}

.sml-post-content .rank-math-answer,
.sml-post-content .rank-math-answer p {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 500 !important;
  color: #334155 !important;
}

/* ── Right sidebar (Latest Post, Categories, Search) ──
   Scoped to widgets that live in a real sidebar/widget-area
   container, and explicitly NOT inside the footer — the previous
   version used a bare ".single-post .widget" selector which also
   matched footer widgets (many themes reuse the "widget" class for
   both), which is why "Quick Links" / "Others" turned black in the
   footer on blog posts. */
.single-post .widget-area .widget-title:not(footer *),
.single-post #secondary .widget-title:not(footer *),
.single-post aside.sidebar .widget-title:not(footer *),
.single-post .elementor-widget-sidebar .widget-title:not(footer *),
.single-post .widget-area .widget h2:not(footer *),
.single-post .widget-area .widget h3:not(footer *),
.single-post .widget-area .widget h4:not(footer *),
.single-post .elementor-widget-heading .elementor-heading-title:not(footer *),
.single-post .elementor-post__title:not(footer *),
.single-post .elementor-post__title a:not(footer *) {
  font-family: 'Sora', sans-serif !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.single-post .widget-area .widget:not(footer *),
.single-post .widget-area .widget p:not(footer *),
.single-post .widget-area .widget li:not(footer *),
.single-post .widget-area .widget a:not(footer *),
.single-post #secondary .widget:not(footer *),
.single-post #secondary .widget p:not(footer *),
.single-post #secondary .widget li:not(footer *),
.single-post #secondary .widget a:not(footer *),
.single-post .elementor-post__excerpt:not(footer *),
.single-post .elementor-post-date:not(footer *),
.single-post .elementor-post__meta-data:not(footer *) {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 500 !important;
  color: #334155 !important;
}

.single-post .widget-area .widget a:not(footer *):hover,
.single-post #secondary .widget a:not(footer *):hover,
.single-post .elementor-post__title a:not(footer *):hover {
  color: #2877ff !important;
}

/* Safety net: whatever the footer markup turns out to be, footer
   text on blog posts stays white, exactly like on the rest of the
   site. This rule is scoped to .single-post only, so every other
   page (where the footer was already correct) is untouched. */
.single-post footer,
.single-post footer .widget-title,
.single-post footer .widget,
.single-post footer .widget p,
.single-post footer .widget li,
.single-post footer .widget a,
.single-post footer p,
.single-post footer li,
.single-post footer a,
.single-post footer h1,
.single-post footer h2,
.single-post footer h3,
.single-post footer h4,
.single-post .site-footer,
.single-post .site-footer * {
  color: #ffffff !important;
}

.single-post footer a:hover,
.single-post .site-footer a:hover {
  color: #5aae18 !important;
}

/* ── Post Comment button: white text only, layout untouched.
   The hover state also needs a fix: the theme's own hover style
   turns the background light/white, and forcing text to always-white
   made it invisible on hover. Pinning the background on hover too
   keeps the text readable without changing the button's shape/size. ── */
.single-post .comment-form #submit,
.single-post .comment-form input#submit,
.single-post .comment-form input[type="submit"],
.single-post .comment-form .submit,
.single-post .form-submit input[type="submit"],
.single-post #commentform #submit {
  color: #ffffff !important;
}

.single-post .comment-form #submit:hover,
.single-post .comment-form #submit:focus,
.single-post .comment-form #submit:active,
.single-post .comment-form input#submit:hover,
.single-post .comment-form input#submit:focus,
.single-post .comment-form input#submit:active,
.single-post .comment-form input[type="submit"]:hover,
.single-post .comment-form input[type="submit"]:focus,
.single-post .comment-form input[type="submit"]:active,
.single-post .comment-form .submit:hover,
.single-post .comment-form .submit:focus,
.single-post .form-submit input[type="submit"]:hover,
.single-post .form-submit input[type="submit"]:focus,
.single-post #commentform #submit:hover,
.single-post #commentform #submit:focus {
  color: #ffffff !important;
  background-color: #1c5fd6 !important;
  border-color: #1c5fd6 !important;
}

/* ── Tablet ───────────────────────────────── */
@media (max-width: 1024px) {
  .sml-meta-bar { gap: 12px !important; font-size: 12.5px !important; }
}

/* ── Mobile ───────────────────────────────── */
@media (max-width: 600px) {
  .sml-meta-bar {
    /* On phones there just isn't room for author + date + comments +
       views + read time + like button on one line without cutting
       text off. Wrap into 2-3 neat rows instead of side-scrolling. */
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    row-gap: 8px !important;
    column-gap: 10px !important;
    gap: 8px 10px !important;
    font-size: 12px !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
  }
  .sml-meta-item svg { width: 13px !important; height: 13px !important; }
  /* Dividers only look right in a single unbroken row — once items
     wrap, a divider at the start of a new line looks like a stray
     mark, so drop them on mobile and rely on the row/column gap. */
  .sml-meta-item + .sml-meta-item:not(.sml-meta-like)::before {
    content: none !important;
  }
  button.sml-meta-item.sml-meta-like {
    padding: 4px 10px !important;
  }
  .sml-author-popup {
    width: 260px !important;
  }
  .sml-post-content h2 { margin: 24px 0 10px !important; padding-bottom: 6px !important; }
  .sml-post-content h3 { margin: 18px 0 8px !important; }
  .sml-post-content ul,
  .sml-post-content ol { padding-left: 18px !important; }
}

/* ── Author Profile Page (v1.5.0) ── */
.sml-authorpage-wrap {
  max-width: 1180px !important;
  margin: 40px auto !important;
  padding: 0 20px !important;
  font-family: 'Manrope', sans-serif !important;
}
.sml-authorpage-header {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  background: #f8fafc !important;
  border-radius: 16px !important;
  padding: 28px !important;
  margin-bottom: 32px !important;
  flex-wrap: wrap !important;
}
.sml-authorpage-avatar { border-radius: 50% !important; display: block !important; }
.sml-authorpage-name {
  font-family: 'Sora', sans-serif !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  color: #0f172a !important;
  margin: 0 0 8px !important;
}
.sml-authorpage-bio { color: #000000 !important; font-size: 14px !important; line-height: 1.6 !important; margin: 0 0 8px !important; max-width: 620px !important; }
.sml-authorpage-count { color: #2877ff !important; font-weight: 700 !important; font-size: 13px !important; margin: 0 !important; }
.sml-authorpage-columns { display: flex !important; gap: 32px !important; align-items: flex-start !important; }
.sml-authorpage-main { flex: 1 1 68% !important; min-width: 0 !important; }
.sml-authorpage-sidebar { flex: 0 0 28% !important; max-width: 320px !important; }
.sml-authorpage-postcard {
  display: flex !important; gap: 18px !important; padding: 20px 0 !important;
  border-bottom: 1px solid #e2e8f0 !important; flex-wrap: wrap !important;
}
.sml-authorpage-thumb { flex: 0 0 160px !important; }
.sml-authorpage-thumb img { border-radius: 10px !important; width: 100% !important; height: auto !important; display: block !important; }
.sml-authorpage-postbody { flex: 1 1 260px !important; min-width: 0 !important; }
.sml-authorpage-posttitle { text-decoration: none !important; }
.sml-authorpage-posttitle h2 { font-family: 'Sora', sans-serif !important; font-weight: 800 !important; font-size: 18px !important; color: #0f172a !important; margin: 0 0 6px !important; }
.sml-authorpage-postmeta { color: #5aae18 !important; font-weight: 700 !important; font-size: 12px !important; margin: 0 0 8px !important; }
.sml-authorpage-postexcerpt { color: #475569 !important; font-size: 14px !important; line-height: 1.55 !important; margin: 0 0 8px !important; }
.sml-authorpage-readmore { color: #2877ff !important; font-weight: 700 !important; font-size: 13px !important; text-decoration: none !important; }
.sml-authorpage-readmore:hover { color: #1a5fd6 !important; }
.sml-authorpage-pagination { margin-top: 24px !important; }
.sml-authorpage-pagination .nav-links { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.sml-authorpage-pagination .page-numbers {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-width: 38px !important; height: 38px !important; padding: 0 12px !important;
  border-radius: 8px !important; background: #f1f5f9 !important; color: #0f172a !important;
  font-family: 'Manrope', sans-serif !important; font-weight: 700 !important; font-size: 14px !important;
  text-decoration: none !important;
}
.sml-authorpage-pagination .page-numbers.current { background: #2877ff !important; color: #ffffff !important; }
.sml-authorpage-pagination .page-numbers:hover { background: #dbeafe !important; color: #0f172a !important; }
.sml-authorpage-widget { background: #f8fafc !important; border-radius: 14px !important; padding: 18px !important; margin-bottom: 20px !important; }
.sml-authorpage-widget h3 { font-family: 'Sora', sans-serif !important; font-weight: 800 !important; font-size: 15px !important; color: #0f172a !important; margin: 0 0 12px !important; }
.sml-authorpage-widget ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.sml-authorpage-widget li { margin-bottom: 10px !important; font-size: 13.5px !important; color: #000000 !important; }
.sml-authorpage-widget a { color: #000000 !important; text-decoration: none !important; }
.sml-authorpage-widget a:hover { color: #2877ff !important; }
@media (max-width: 780px) {
  .sml-authorpage-columns { flex-direction: column !important; }
  .sml-authorpage-sidebar { max-width: 100% !important; width: 100% !important; }
  .sml-authorpage-thumb { flex-basis: 100% !important; }
}

/* ═════════════════════════════════════════════
   v1.6.0 — Authors & Experts (Settle My Loan brand)
   blue #0078FF · navy #0f172a · green #00d600 · Sora / Manrope
   ═════════════════════════════════════════════ */

/* Meta bar: "Written by …" / "Reviewed by …" */
.sml-byline-trigger .sml-byline-name {
  color: #0078FF !important;
  font-weight: 700 !important;
  margin-left: 3px !important;
}
.sml-byline-trigger:hover .sml-byline-name,
.sml-byline-trigger.sml-popup-open .sml-byline-name { text-decoration: underline !important; text-underline-offset: 3px !important; }
.sml-byline-trigger:focus-visible { outline: 2px solid #0078FF !important; outline-offset: 3px !important; border-radius: 4px !important; }
.sml-meta-bar .sml-icon-verified { width: 15px !important; height: 15px !important; color: #0078FF !important; }

/* Avatars (photo or illustration) */
.sml-byline-svg { display: inline-block !important; border-radius: 50% !important; overflow: hidden !important; flex-shrink: 0 !important; line-height: 0 !important; }
.sml-byline-svg svg { display: block !important; width: 100% !important; height: 100% !important; }
img.sml-byline-photo { border-radius: 50% !important; object-fit: cover !important; display: block !important; flex-shrink: 0 !important; }

/* Popup (richer card) */
.sml-author-popup { width: 300px !important; padding: 16px !important; border: 1px solid #e2e8f0 !important; }
.sml-author-popup-head { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 10px !important; }
.sml-author-popup-avatar { display: inline-flex !important; flex-shrink: 0 !important; }
.sml-author-popup-avatar img, .sml-author-popup-avatar .sml-byline-svg { width: 46px !important; height: 46px !important; border-radius: 50% !important; }
.sml-author-popup-headtext { display: flex !important; flex-direction: column !important; min-width: 0 !important; }
.sml-author-popup-head .sml-author-popup-name { margin: 0 0 2px !important; font-size: 15px !important; line-height: 1.3 !important; }
.sml-author-popup-title { display: block !important; font-family: 'Manrope', sans-serif !important; font-weight: 600 !important; font-size: 12.5px !important; line-height: 1.4 !important; color: #475569 !important; }
.sml-author-popup-exp { display: inline-block !important; margin: 0 0 10px !important; padding: 3px 10px !important; border-radius: 999px !important; background: #EAF3FF !important; color: #0061D1 !important; font-family: 'Manrope', sans-serif !important; font-weight: 700 !important; font-size: 11.5px !important; }
.sml-author-popup-bio { color: #334155 !important; }
.sml-author-popup-bio .sml-bio-para { display: block !important; margin: 0 0 6px !important; }
.sml-author-popup-bio .sml-bio-para:last-child { margin-bottom: 0 !important; }
.sml-author-popup-actions { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin-top: 12px !important; flex-wrap: wrap !important; }
.sml-author-popup-actions .sml-author-popup-readmore { margin-top: 0 !important; color: #0078FF !important; }
.sml-author-popup-linkedin { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 5px 10px !important; border-radius: 8px !important; background: #0A66C2 !important; color: #ffffff !important; font-family: 'Manrope', sans-serif !important; font-weight: 700 !important; font-size: 12px !important; text-decoration: none !important; }
.sml-author-popup-linkedin:hover { background: #084e96 !important; color: #ffffff !important; }

/* "Reviewed by our expert" card at the end of the post */
.sml-expert-box { margin: 32px 0 8px !important; padding: 20px 22px !important; border: 1px solid #dbe7fb !important; border-radius: 16px !important; background: #F5F9FF !important; }
.sml-expert-box-title { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; font-family: 'Sora', sans-serif !important; font-weight: 800 !important; font-size: 17px !important; line-height: 1.3 !important; color: #0f172a !important; }
.sml-expert-box-title::after, .sml-expert-box-title::before { content: none !important; display: none !important; }
.sml-expert-card { display: grid !important; grid-template-columns: 84px 1fr !important; column-gap: 18px !important; align-items: start !important; }
.sml-expert-card-avatar { grid-row: 1 / span 5 !important; }
.sml-expert-card-avatar img, .sml-expert-card-avatar .sml-byline-svg { width: 84px !important; height: 84px !important; border-radius: 50% !important; box-shadow: 0 0 0 3px #ffffff, 0 0 0 4px #dbe7fb !important; }
.sml-expert-card-name { font-family: 'Sora', sans-serif !important; font-weight: 800 !important; font-size: 17px !important; color: #0f172a !important; line-height: 1.3 !important; }
.sml-expert-card-title { font-family: 'Manrope', sans-serif !important; font-weight: 600 !important; font-size: 13.5px !important; color: #475569 !important; margin-top: 2px !important; }
.sml-expert-card-exp { justify-self: start !important; margin-top: 8px !important; padding: 3px 10px !important; border-radius: 999px !important; background: #EAF3FF !important; color: #0061D1 !important; font-family: 'Manrope', sans-serif !important; font-weight: 700 !important; font-size: 12px !important; }
.sml-post-content p.sml-expert-card-bio, p.sml-expert-card-bio { margin: 10px 0 0 !important; font-family: 'Manrope', sans-serif !important; font-weight: 500 !important; font-size: 14.5px !important; line-height: 1.65 !important; color: #334155 !important; }
.sml-expert-card-actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px 18px !important; margin-top: 14px !important; }
.sml-post-content a.sml-expert-card-linkedin, a.sml-expert-card-linkedin { display: inline-flex !important; align-items: center !important; gap: 7px !important; padding: 8px 14px !important; border-radius: 10px !important; background: #0A66C2 !important; color: #ffffff !important; font-family: 'Manrope', sans-serif !important; font-weight: 700 !important; font-size: 13px !important; text-decoration: none !important; border: 0 !important; }
.sml-post-content a.sml-expert-card-linkedin:hover, a.sml-expert-card-linkedin:hover { background: #084e96 !important; color: #ffffff !important; }
.sml-post-content a.sml-expert-card-profile, a.sml-expert-card-profile { font-family: 'Manrope', sans-serif !important; font-weight: 700 !important; font-size: 14px !important; color: #0078FF !important; text-decoration: none !important; border: 0 !important; background: none !important; }
.sml-post-content a.sml-expert-card-profile:hover, a.sml-expert-card-profile:hover { color: #0061D1 !important; text-decoration: underline !important; }

/* Profile page (/author-profile/{name}/) — reuses the author page layout */
.sml-profilepage .sml-authorpage-header { align-items: flex-start !important; }
.sml-profilepage .sml-authorpage-avatar, .sml-profilepage .sml-byline-svg.sml-authorpage-avatar { width: 120px !important; height: 120px !important; border-radius: 50% !important; box-shadow: 0 0 0 4px #ffffff, 0 0 0 5px #dbe7fb !important; }
.sml-profile-role { display: inline-block !important; margin-bottom: 8px !important; padding: 3px 12px !important; border-radius: 999px !important; background: #EAF3FF !important; color: #0061D1 !important; font-family: 'Manrope', sans-serif !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: .02em !important; }
.sml-profile-title { margin: 2px 0 10px !important; font-family: 'Manrope', sans-serif !important; font-weight: 600 !important; font-size: 15px !important; color: #475569 !important; }
.sml-profile-chips { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 0 14px !important; }
.sml-profile-chips .sml-authorpage-count { padding: 4px 12px !important; border-radius: 999px !important; background: #f1f5f9 !important; color: #0f172a !important; }
.sml-profilepage .sml-authorpage-bio { max-width: 720px !important; }
.sml-profilepage .sml-authorpage-bio p { margin: 0 0 10px !important; font-family: 'Manrope', sans-serif !important; font-weight: 500 !important; font-size: 15px !important; line-height: 1.7 !important; color: #334155 !important; }
.sml-profilepage .sml-expert-card-linkedin { margin-top: 6px !important; }
.sml-profile-badges { display: flex !important; gap: 6px !important; margin-bottom: 6px !important; }
.sml-profile-badge { padding: 2px 9px !important; border-radius: 999px !important; background: #EAF3FF !important; color: #0061D1 !important; font-family: 'Manrope', sans-serif !important; font-weight: 700 !important; font-size: 11px !important; }
.sml-profile-badge-reviewed { background: #e8fbe8 !important; color: #127a12 !important; }

@media (max-width: 600px) {
  .sml-author-popup { width: 280px !important; }
  .sml-expert-box { padding: 16px !important; margin-top: 26px !important; }
  .sml-expert-box-title { font-size: 16px !important; }
  .sml-expert-card { grid-template-columns: 64px 1fr !important; column-gap: 14px !important; }
  .sml-expert-card-avatar { grid-row: 1 / span 3 !important; }
  .sml-expert-card-avatar img, .sml-expert-card-avatar .sml-byline-svg { width: 64px !important; height: 64px !important; }
  .sml-expert-card-bio, .sml-expert-card-actions { grid-column: 1 / -1 !important; }
  .sml-expert-card-name { font-size: 16px !important; }
  .sml-expert-card-actions { gap: 10px 14px !important; }
}
@media (max-width: 780px) {
  .sml-profilepage .sml-authorpage-header { flex-direction: column !important; align-items: center !important; text-align: center !important; }
  .sml-profile-chips, .sml-profile-badges { justify-content: center !important; }
  .sml-profilepage .sml-authorpage-bio { text-align: left !important; }
}
/* Win over the blog's own h3 / link styles inside the card */
.sml-post-content .sml-expert-box h3.sml-expert-box-title { margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; font-size: 17px !important; }
.sml-post-content .sml-expert-box p.sml-expert-card-bio { margin: 10px 0 0 !important; }
@media (max-width: 600px) { .sml-post-content .sml-expert-box h3.sml-expert-box-title { font-size: 16px !important; } }
.sml-author-popup { box-sizing: border-box !important; }

/* ═════ v1.7.0 — expert profile in a left column (like the SingleDebt sidebar) ═════ */
.sml-post-layout { display: block; }
@media (min-width: 901px) {
  .sml-post-layout {
    display: grid !important;
    grid-template-columns: 270px minmax(0, 1fr) !important;
    grid-template-areas: "aside main" !important;
    column-gap: 36px !important;
    align-items: start !important;
  }
  .sml-post-layout > .sml-post-content { grid-area: main !important; min-width: 0 !important; }
  .sml-post-layout > .sml-post-aside { grid-area: aside !important; position: sticky !important; top: 100px !important; }
  .sml-post-aside .sml-expert-box { margin: 0 !important; padding: 18px !important; }
  .sml-post-aside .sml-expert-box-title { font-size: 15px !important; margin-bottom: 14px !important; }
  .sml-post-aside .sml-expert-card { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
  .sml-post-aside .sml-expert-card-avatar { margin-bottom: 12px !important; }
  .sml-post-aside .sml-expert-card-avatar img, .sml-post-aside .sml-expert-card-avatar .sml-byline-svg { width: 76px !important; height: 76px !important; }
  .sml-post-aside .sml-expert-card-name { font-size: 16px !important; }
  .sml-post-aside .sml-expert-card-title { font-size: 13px !important; }
  .sml-post-aside p.sml-expert-card-bio { font-size: 13.5px !important; line-height: 1.6 !important; margin: 10px 0 0 !important; font-family: 'Manrope', sans-serif !important; color: #334155 !important; }
  .sml-post-aside .sml-expert-card-actions { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; width: 100% !important; }
  .sml-post-aside a.sml-expert-card-linkedin { justify-content: center !important; }
  .sml-post-aside a.sml-expert-card-profile { text-align: center !important; }
}
@media (max-width: 900px) {
  .sml-post-aside .sml-expert-box { margin-top: 28px !important; }
}
@keyframes sml-expert-flash { 0% { box-shadow: 0 0 0 0 rgba(0,120,255,.5); } 100% { box-shadow: 0 0 0 14px rgba(0,120,255,0); } }
.sml-expert-box.sml-expert-flash { animation: sml-expert-flash 1s ease-out 2; }
@media (prefers-reduced-motion: reduce) { .sml-expert-box.sml-expert-flash { animation: none; } }
@media (max-width: 900px) {
  .sml-byline-expert .sml-byline-name { text-decoration: underline !important; text-underline-offset: 3px !important; }
}

/* ═════ v1.7.1 — expert card in the right sidebar, above the search bar ═════ */
@media (min-width: 901px) {
  .sml-expert-side:not(.is-placed) { visibility: hidden !important; }
}
.sml-expert-side.sml-expert-in-sidebar { margin: 0 0 24px !important; width: 100% !important; }
.sml-expert-in-sidebar .sml-expert-box { margin: 0 !important; padding: 18px !important; }
.sml-expert-in-sidebar .sml-expert-box-title { font-size: 16px !important; margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; }
.sml-expert-in-sidebar .sml-expert-card { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
.sml-expert-in-sidebar .sml-expert-card-avatar { margin-bottom: 12px !important; }
.sml-expert-in-sidebar .sml-expert-card-avatar img, .sml-expert-in-sidebar .sml-expert-card-avatar .sml-byline-svg { width: 76px !important; height: 76px !important; }
.sml-expert-in-sidebar .sml-expert-card-name { font-size: 16px !important; }
.sml-expert-in-sidebar .sml-expert-card-title { font-size: 13px !important; }
.sml-expert-in-sidebar p.sml-expert-card-bio { font-size: 13.5px !important; line-height: 1.6 !important; margin: 10px 0 0 !important; font-family: 'Manrope', sans-serif !important; color: #334155 !important; }
.sml-expert-in-sidebar .sml-expert-card-actions { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; width: 100% !important; }
.sml-expert-in-sidebar a.sml-expert-card-linkedin { justify-content: center !important; }
.sml-expert-in-sidebar a.sml-expert-card-profile { text-align: center !important; }