/* ==========================================================================
   Blog post detail page. Most of the visual language (.post-single-image,
   .post-single-meta, .post-entry, .post-tags, .post-social-links) already
   exists in common.css from the original theme scaffold — this file only
   adds what's genuinely new: the two-column content/TOC layout and the TOC
   box itself (styled like .popular-posts on the blog listing for consistency).
   ========================================================================== */
header.main-header{background-color:var(--white-color)}

/* Category badge floating on the featured image — the same accent color and
   pill shape used for category tags on the blog listing, so the two pages
   read as one system rather than two different treatments of "category". */
.post-single-image{position:relative}
.post-detail-badge{position:absolute;top:24px;left:24px;z-index:2;background-color:var(--accent-color);color:var(--white-color);font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:9px 20px;border-radius:20px;box-shadow:0 10px 24px rgba(100,21,165,.28)}

/* Byline: solid accent avatar circle + name, with date/read-time underneath
   using the listing page's own .post-meta/.post-meta-dot pattern — one
   consistent "meta" language across the whole blog instead of two. The
   category isn't repeated here since it's already on the image above. */
.post-single-meta{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:44px}
.post-detail-author{display:flex;align-items:center;gap:14px}
.post-detail-avatar{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background-color:var(--accent-color);color:var(--white-color);font-size:1.1rem;flex-shrink:0}
.post-detail-author-name{display:block;font-weight:700;color:var(--primary-color);font-size:.95rem;margin-bottom:4px}
.post-detail-author .post-meta{margin-bottom:0}
.post-detail-author .post-meta i{color:var(--accent-color);margin-right:4px;font-size:.85em}

.post-layout{max-width:1100px;margin:0 auto}
.post-layout .post-content{max-width:100%;margin:0}
.post-detail-faq{padding:60px 0 0}
/* The shared .section-title-center rule zeroes out h2's own margin-bottom
   (it's meant to sit flush above a description paragraph), so this section
   needs its own gap before the accordion — same pattern other pages use for
   this same title component. */
.post-detail-faq .section-title-center{margin-bottom:40px}
/* Dropped the filled secondary-color panel + 30px radius in favor of the
   about page's own minimal language (.feature-card, .feature-card-link):
   no card chrome, just a thin divider under the label and quiet spacing to
   carry the hierarchy. */
.post-toc{position:sticky;top:120px}
.post-toc h3{display:flex;align-items:center;gap:8px;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--divider-color)}
.post-toc h3 i{color:var(--accent-color);font-size:.9em}
.post-toc ol{list-style:none;counter-reset:toc;padding:0;margin:0}
.post-toc ol li{counter-increment:toc;margin-bottom:12px}
.post-toc ol li:last-child{margin-bottom:0}
.post-toc ol li a{display:flex;gap:10px;font-size:.9rem;font-weight:600;color:var(--primary-color);line-height:1.4;transition:color .2s ease}
.post-toc ol li a:hover{color:var(--accent-color)}
.post-toc ol li a::before{content:counter(toc, decimal-leading-zero);flex-shrink:0;color:var(--accent-color);font-size:.8rem;font-weight:700}

/* Each post's content partial is a single .post-entry wrapper (not a series
   of them), so the theme's border-bottom just draws a second, redundant
   divider a few pixels above the footer's own border-top — remove it here. */
.post-entry{counter-reset:section-num;border-bottom:none;margin-bottom:0}
.post-entry p{color:var(--text-color);font-size:1rem;line-height:1.75;margin-bottom:20px}
.post-entry p:last-child{margin-bottom:0}
.post-entry p strong{color:var(--primary-color)}

/* Article subheadings — the theme's own .post-entry h2 rule (40px) was sized
   for a single hero-style heading, not a subsection heading repeated a dozen
   times through a long article. Scaled down to something proportional to the
   16px/1.75 body copy, with room above each one so sections read as grouped
   rather than evenly spaced from the text before and after.

   Each one also carries the same numbered badge as its matching Table of
   Contents entry (counter-driven, so the two can never drift out of sync) —
   a real wayfinding cue through a long article, not just decoration.
   Positioned absolutely rather than via flex so it behaves correctly even on
   the headings that carry an inline .heading-subtitle span. */
.post-entry h2{position:relative;min-height:40px;padding-left:56px;font-size:1.5rem;line-height:1.3;letter-spacing:-.01em;margin:48px 0 16px;scroll-margin-top:var(--header-scroll-offset)}
.post-entry h2::before{counter-increment:section-num;content:counter(section-num, decimal-leading-zero);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:12px;background-color:var(--accent-color);color:var(--white-color);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700}
/* Matches .post-toc's own 28px padding, so "Table of Contents" and
   "Introduction" start at exactly the same height instead of the article
   text sitting flush against the row top while the TOC card floats lower. */
.post-entry h2:first-child{margin-top:28px}
.post-entry h2 .heading-subtitle{display:block;font-weight:400;font-size:.85em;color:var(--text-muted);margin-top:4px}

/* Bullet lists — the theme's default (18px, bold, near-black) was built for a
   short "why choose us" feature callout, not the plain descriptive lists used
   throughout these articles. Brought down near body-text weight so a list of
   5 items doesn't read louder than the sentence introducing it. */
.post-entry ul{margin:0 0 24px}
.post-entry ul li{font-size:1rem;font-weight:600;padding-left:26px;margin-bottom:10px;line-height:1.6}
.post-entry ul li:last-child{margin-bottom:0}
.post-entry ul li:before{font-size:14px;top:5px}

/* Blockquote callouts — sized for a one-line pull-quote in the original
   theme; several of these run 2-3 sentences, so 26px bold was overwhelming.
   Flat grey background replaced with a soft solid accent tint and a solid
   accent border, so it reads as a deliberate callout rather than a plain
   grey box that happens to hold quote marks. */
.post-entry blockquote{padding:32px 36px;border-radius:16px;border-left:4px solid var(--accent-color);background-color:rgba(100,29,165,.06)}
.post-entry blockquote p{font-size:1.2rem;font-weight:600;padding-left:56px;line-height:1.5}

/* Article footer — share icons used to sit as a separate stacked block with
   no visual break from the text above. Now divided from the body by a rule,
   with the icons scaled down from the theme's oversized standalone treatment. */
.post-detail-footer{display:flex;align-items:center;justify-content:flex-start;margin-top:44px;padding-top:32px;border-top:1px solid var(--divider-color)}
.post-detail-footer-label{font-weight:700;color:var(--primary-color);font-size:.9rem;margin-right:6px}
.post-detail-footer .post-social-links{display:flex;align-items:center;gap:10px}
.post-detail-footer .post-social-links ul li a{width:42px;height:42px}
.post-detail-footer .post-social-links ul li a i{font-size:16px}

@media only screen and (max-width:991px){
    .post-toc{position:static;margin-bottom:30px}
    .post-entry h2{font-size:1.3rem;margin:36px 0 14px}
    .post-entry blockquote{padding:26px 24px}
    .post-entry blockquote p{font-size:1.1rem;padding-left:0;background:none}
}

@media only screen and (max-width:767px){
    .post-detail-badge{top:16px;left:16px;padding:7px 16px;font-size:.7rem}
    /* 40px badge + 56px gutter eats too much of a 375px screen — scaled down
       so the heading text still has real room to breathe. */
    .post-entry h2{min-height:32px;padding-left:44px}
    .post-entry h2::before{width:32px;height:32px;font-size:.75rem;border-radius:10px}
    /* On a phone the TOC just pushes the article further down the page
       before the reader reaches any actual content — the in-page anchor
       links it offers aren't worth that cost on a screen this short. */
    .post-toc{display:none}
}