/* 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;
}

/* "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-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; }
}