/* 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 chip + hover bio popup (v1.4.0) ─────────────── */
.sml-meta-author.sml-author-trigger {
  position: relative !important;
  cursor: pointer !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 4px 12px 4px 6px !important;
}

.sml-author-chip-avatar {
  display: inline-flex !important;
  flex-shrink: 0 !important;
  line-height: 0 !important;
}

.sml-author-chip-avatar img {
  border-radius: 50% !important;
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

/* Popup card: hidden until hover/tap.
   IMPORTANT (v1.4.1 fix): this is `position: fixed`, NOT `absolute`.
   The meta bar scrolls horizontally (overflow-x: auto) on purpose so
   every item fits on one line on phones. An `absolute` popup was
   still counted as part of that scrollable box's content width, so
   opening it silently made the bar "wider" than it looked — that's
   what caused the phantom horizontal scroll AND pushed/clipped the
   Like button off the visible edge. `position: fixed` takes the
   popup out of the bar's layout entirely (positioned by JS relative
   to the viewport instead), so it can never affect the bar's
   scroll width again. Do not change this back to `absolute`. */
.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-avatar {
  display: block !important;
  margin-bottom: 10px !important;
  line-height: 0 !important;
}

.sml-author-popup-avatar img {
  border-radius: 50% !important;
  width: 48px !important;
  height: 48px !important;
  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: #475569 !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-meta-author.sml-author-trigger {
    padding: 3px 10px 3px 5px !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; }
}