/* Styles for the blog post pages, lifted from the Rails inline <style>.
   The third block on the live page only restyles the floating chat icon;
   inc/home-assets.php owns that now, so it is deliberately left out. */
.blog-detail p a{color:#7F93CF !important;font-weight:800;}
  .faq-section{margin-top:35px;}
  h2 strong a{font-size: 30px;
    font-weight: 700;
    color: #7F93CF !important;}
  .blog-detail table td{text-align: center; padding: 2px;border: 1px solid #00000052;}
  .blog-detail table{border-collapse: collapse;}
  .faq-section{background: transparent;}
  .faq-section .faq-container .acordian-row h3.heading03{color: #000000}
  .acordian-row.active .heading03{background: transparent;}
  .acordian-row .heading03:after{color: #000000}
  @media screen and (max-width:1500px) {
    h2 strong a{font-size: 27px;}
  }
  @media screen and (max-width:1023px) {
    h2 strong a{font-size: 30px;}
  }
  @media screen and (max-width:767px) {
    iframe{width:100%;}
  }
  @media screen and (max-width:479px) {
    table{width: 330px;overflow: auto;display: block;}
  }

.form-box.prefix_profile.last {display: inline-block;vertical-align: top;}
  .mobile_col span.message {
  margin-left: -75px;}
  input#contact_mob_prefix1 {border-right:none;border-top-right-radius:initial;border-bottom-right-radius: initial;}
   .form-box.mobile_col.last {display: inline-block;width: calc(100% - 93px);}
  .form-box.prefix_profile.last{width: 90px;}
  input#contact_mobile {border-left: none;padding-left: 10px;letter-spacing:1px;}
  input#contact_mob_prefix1 {padding-left: 83px !important;}
  label span{color:red;}

/* ------------------------------------------------------------------------
   Modern blog post layout, 24 Sep 2026, after https://thewebtales.com/blog/:
   hero image above the title, a breadcrumb, a restyled meta row (now with a
   computed reading time), the article in its own card, and modern share /
   author / sidebar cards. The sidebar keeps its original three boxes (table
   of contents, more-in-category / recent posts, categories, CTA) — only this
   listing's visual treatment changed, not its content or queries.
   ------------------------------------------------------------------------ */

.blog-post-hero {
  margin: 0 0 26px;
  border-radius: 18px;
  overflow: hidden;
}
.blog-post-hero-img {
  width: 100%;
  display: block;
  max-height: 480px;
  object-fit: cover;
}

.blog-post-title {
  margin: 0 0 14px !important;
  text-align: left !important;
}

.blog-post-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  font-size: 13px;
  color: #8a8a8a;
}
.blog-post-breadcrumb a {
  color: #8a8a8a;
  text-decoration: none;
}
.blog-post-breadcrumb a:hover { color: #57C7F2; }
.blog-post-breadcrumb span:last-child { color: #ccc; }

.blog-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: 24px;
}
.blog-info p {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 14px;
  color: #B0B0B0;
}
.blog-info i { color: #57C7F2; }

.blog-detail-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 34px 36px;
  margin-bottom: 28px;
}

/* The FAQ block that CMS content embeds at the end of many posts
   (`<section class="section faq-section pt-0">…`) is the same generic
   FAQ-page component used elsewhere on the site (see
   faq-layouts-and-tech-optimization-status-24-sep.md) — built for a full-
   width dark page section, not for sitting inside this white article card.
   application.css gives it `padding-bottom:100px` and `background:#000`
   unconditionally (only `background` was already neutralised, by the
   `.faq-section{background:transparent}` rule above). Left alone, the 100px
   of bottom padding plus this card's own padding created a large blank gap
   between the last FAQ answer and "Share on" (reported 24 Sep). Scoped here,
   with two-class specificity, so it wins regardless of stylesheet order.
   `.blog-detail` (the div wrapping the article body/FAQ content) is the
   correct ancestor for this one — the FAQ block lives inside it. */
.blog-detail .faq-section {
  padding-bottom: 0;
  padding-top: 0;
  margin-top: 30px;
  background: transparent;
}

/* Second pass on the same complaint, 24 Sep 2026: zeroing the FAQ section's
   own bottom padding above closed most of the gap, but a user report with a
   screenshot showed real whitespace still remaining below the FAQs, before
   "Share on".

   Third pass: tried `.blog-detail .author-box` — copying the ancestor from
   the FAQ rule above — but it silently never applied. Confirmed live via
   `.blog-detail`.contains(authorBox) === false: `.blog-detail` only wraps
   the article body content (inside `.blog-detail-card`) and closes *before*
   the share/author block, which is `.blog-detail-card`'s next sibling, not
   a descendant of `.blog-detail`.

   Fourth pass, 24 Sep 2026: switched the ancestor to `.blog-dlt-container`
   (correct — it does contain author-box) but the gap was still there live.
   Read every application.css rule matching `author-box` + `margin-top` to
   find out why: the real legacy rule is `.blog-section .blog-dlt-container
   .author-box { margin-top: 50px; }` — THREE classes, not the one-class
   `.author-box` assumed originally. A two-class override can never beat a
   three-class rule regardless of load order. Reusing that exact three-class
   chain (the same pattern already proven below for `.social-list`) is what
   actually wins. Tightened rather than zeroed — some separation is still
   correct between "end of article" and "share/author". */
.blog-section .blog-dlt-container .author-box {
  margin-top: 20px;
}
.blog-section .blog-dlt-container .author-box > p:first-child {
  margin-top: 0;
}

.author-box {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 26px 28px;
}
.author-box > p:first-child strong {
  font-size: 13px;
  letter-spacing: 1px;
  color: #57C7F2;
}

/* The "Share on" icon row, 24 Sep 2026 — reported as "not proper": the four
   icons (Facebook/Twitter/LinkedIn/Pinterest) were spread almost the full
   width of the card with huge gaps between them. Root cause:
   application.css's `.blog-section .blog-dlt-container .author-box
   .social-list` (four classes) sets `display:grid;
   grid-template-columns:repeat(4,1fr)` — a *different*, much higher-
   specificity rule than the `.author-box .social-list` one below (which was
   actually written for this same element and never took effect against it).
   Reusing that exact four-class selector here, so this one wins on load
   order instead of guessing at specificity. Confirmed live 24 Sep: icons
   render flex, centered, tightly clustered. */
.blog-section .blog-dlt-container .author-box .social-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.blog-section .blog-dlt-container .author-box .social-list li {
  width: auto;
}

/* Second pass, 25 Sep 2026: "not proper" again — reported with a screenshot
   showing the four badges squashed and cropped. Root cause: these `<img>`
   are not square profile-picture icons at all — each one is a complete,
   pre-made pill badge (icon + brand name baked into the image itself),
   133x40 natural size, confirmed live via `naturalWidth`/`naturalHeight`.
   The rule below this comment (24 Sep) forced them to `width:40px;
   height:40px;border-radius:50%`, assuming a square avatar — with no
   `object-fit` set, the browser's default `fill` behaviour squashed the
   133-wide badge into a 40-wide box (~3.3x horizontal compression) and then
   clipped whatever was left into a circle, mangling the icon and the brand
   text together. `.author-info`'s own row directly below this one (the
   author's personal LinkedIn/Facebook/Instagram/X/Threads icons) is a
   *different*, already-square set of images and is untouched by this.
   Fix: stop forcing a square. Let each badge render at its own designed
   aspect ratio, just smaller — a fixed height with `width:auto` and
   `object-fit:contain` reproduces the original pill exactly, only scaled
   down, and removes the circular clip that had nothing to clip *to*.
   Verified live: all four render as clean, undistorted pill badges with
   their brand colour and text both intact. */
.blog-section .blog-dlt-container .author-box .social-list img {
  display: block;
  width: auto;
  height: 34px;
  border-radius: 999px;
  object-fit: contain;
}

/* The author's OWN social row (LinkedIn/Facebook/Instagram/X/Threads, in
   `.author-info`) is different markup entirely — `.author-social-links` /
   `.social-icons-author` from adroit_author_card_from_directory(), not a
   `.social-list` at all. It already renders correctly from the site's
   existing icon styling; nothing here needs to touch it. */
.author-box .social-list img {
  transition: transform .2s ease;
}
.author-box .social-list a:hover img { transform: translateY(-3px); }

/* Sidebar cards */
.blog-side .table-of-contents,
.blog-side .recent-box,
.blog-side .grow-business-box {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 22px 22px;
  margin-bottom: 22px;
}
.blog-side .table-of-contents > p > strong,
.blog-side .recent-box > p > strong,
.blog-side .grow-business-box > p > strong {
  color: #57C7F2;
  font-size: 14px;
  letter-spacing: .3px;
}

/* Fifth pass, 24 Sep 2026: "TOC is merging from bottom" — reported with a
   screenshot showing the TOC card visually overlapping "More in <category>"
   (`.recent-box`) below it mid-scroll.

   Root cause, confirmed live via getBoundingClientRect(): `.blog-dlt-container`
   is `display:grid` with no `align-items` set, so its default (stretch)
   makes `.blog-side` exactly as tall as the article column — on a long post,
   15000px+. Only `.table-of-contents` is `position:sticky`; `.recent-box` and
   `.grow-business-box` are ordinary siblings positioned right after it in
   normal flow, a little way down that huge stretched box. Because the TOC's
   sticky range is bounded by its (artificially very tall) parent, it stays
   pinned in the viewport for nearly the entire article, while `.recent-box`
   — fixed at its own normal-flow position, only a few hundred px down —
   slides up and passes *through* the same viewport space the pinned TOC
   occupies, overlapping it during that transition instead of scrolling
   cleanly away first.

   `align-items:start` on the grid container is the standard fix for a sticky
   sidebar in CSS grid: `.blog-side` now sizes to its own content (TOC +
   recent-box + grow-business-box, a couple thousand px at most, not the
   article's full height), so the TOC's sticky range stays within that real
   content height and it un-sticks well before the later cards would ever
   need to pass behind it. */
.blog-dlt-container {
  align-items: start;
}

.blog-side .table-of-contents {
  position: sticky;
  top: 130px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

/* Sixth pass, 25 Sep 2026: reported again — "TOC is merging from bottom with
   another card" — this time reproducible with NO scrolling at all, right at
   page load. Measured live via getBoundingClientRect: `.table-of-contents`'s
   own rendered bottom edge sat 10px *below* where `.recent-box` begins, a
   genuine overlap, not a margin-collapse shortfall.

   Root cause is a second, unrelated interaction with `position:sticky`,
   distinct from the fifth pass above: `.table-of-contents`'s nearest
   ancestor with `overflow` other than `visible` is
   `.blog-section.blog-post-modern` itself (`overflow:hidden`, from the
   generic site-wide `.section{overflow:hidden}` rule — used elsewhere to
   clip decorative background art this page doesn't have). An
   `overflow:hidden` ancestor becomes a sticky element's scrolling/containing
   context; toggling `.table-of-contents` between `position:sticky` and
   `position:static` live (via `element.style.position`) and comparing
   `getBoundingClientRect()` proved this directly — sticky rendered the box
   40px lower than its own reserved (static-flow) position, which is what
   pushed its visual bottom edge past where `.recent-box` was laid out to
   start.

   `.blog-section.blog-post-modern` is specific to this one template (the
   class doesn't appear anywhere in application.css), so turning its
   `overflow` back to `visible` here can't affect any other page's use of
   the generic `.section{overflow:hidden}` rule. Verified live: the 10px
   overlap is gone (TOC bottom now sits above recent-box's top with a clean
   positive gap) at scroll position 0, and re-checked scrolling the full
   length of a long post to confirm the fifth pass's original fix still
   holds with this change in place. */
.blog-section.blog-post-modern {
  overflow: visible;
}

/* Thinner, styled scrollbar for the TOC's own internal scroll, 24 Sep 2026 —
   reported as too thick/plain (the browser's full-width default). Webkit
   (Chrome/Edge/Safari) needs the `::-webkit-scrollbar` family; `scrollbar-
   width`/`scrollbar-color` cover Firefox. Track is transparent so it reads
   as part of the card rather than a separate grey column. */
.blog-side .table-of-contents {
  scrollbar-width: thin;
  scrollbar-color: rgba(87,199,242,.45) transparent;
}
.blog-side .table-of-contents::-webkit-scrollbar {
  width: 6px;
}
.blog-side .table-of-contents::-webkit-scrollbar-track {
  background: transparent;
}
.blog-side .table-of-contents::-webkit-scrollbar-thumb {
  background-color: rgba(87,199,242,.45);
  border-radius: 999px;
}
.blog-side .table-of-contents::-webkit-scrollbar-thumb:hover {
  background-color: rgba(87,199,242,.75);
}

/* Table of contents links — 24 Sep 2026: the list itself already had a
   design (dot marker + faint white text, from application.css's generic
   `.table-of-contents li`), but the links inside it had no hover state at
   all, so jumping to a section gave no feedback before the click. Recolors
   the dot and the text to the accent on hover, with a small rightward shift
   so the active target reads clearly against the rest of the list. */
.blog-side .table-of-contents li a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  transition: color .2s ease, padding-left .2s ease;
}
.blog-side .table-of-contents li:hover::before {
  background: #57C7F2;
  transition: background .2s ease;
}
.blog-side .table-of-contents li a:hover,
.blog-side .table-of-contents li a:focus-visible {
  color: #57C7F2;
  padding-left: 6px;
}

.blog-side .grow-business-btn {
  display: inline-block;
  margin-top: 16px;
  background: #57C7F2;
  color: #000 !important;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 22px;
  border-radius: 999px;
  text-decoration: none;
}
.blog-side .grow-business-btn:hover { background: #7fd6f7; }

/* Wider reading column, 24 Sep 2026 — the blog post grid inherited the old
   site's standard 1140px `.container`, which read narrow once the article
   sat in its own card with generous side padding. `.blog-dlt-container` also
   carries `.container`, so this two-class selector outranks the plain
   `.container` rule regardless of where either sits in the stylesheet.
   Column proportions (article / 300px sidebar) are untouched — only the
   overall page width grows, matching the widest container width already
   used elsewhere on the site (the header). */
.blog-dlt-container.container {
  max-width: 1300px;
}

@media screen and (max-width: 767px) {
  .blog-detail-card,
  .author-box { padding: 22px 20px; }
  .blog-post-hero-img { max-height: 260px; }
  .blog-side .table-of-contents { position: static; max-height: none; }
}