/*
Theme Name: Prapl Blog
Theme URI: https://prapl.com/
Author: Prapl
Author URI: https://prapl.com/
Description: Blog theme matching the Prapl marketing site design — light, blue-led, Inter + JetBrains Mono, soft 3D cards and pill buttons. Built for the Classic Editor.
Version: 1.1.0
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: prapl-blog
Tags: blog, one-column, custom-menu, featured-images, threaded-comments
*/

/* =====================================================================
   Blog styles — everything below reuses the design tokens defined in
   assets/css/prapl.css (the marketing site stylesheet, loaded before
   this file): --blue, --line, --paper, --tx, --sh-md, --r-lg, …
   ===================================================================== */

/* WordPress required */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip: auto; clip-path: none; height: auto; width: auto;
  left: 12px; top: 12px; z-index: 100000; padding: 0.7rem 1.2rem;
  background: #fff; color: var(--blue); font-weight: 700;
  border-radius: 100px; box-shadow: var(--sh-md);
}

/* No-JS fallback: the marketing CSS hides .rv elements until main.js
   reveals them — keep everything visible when scripts don't run. */
.no-js .rv { opacity: 1; transform: none; }

/* Admin bar offset for the fixed navbar (and the mobile drawer) */
body.admin-bar .nav { top: 32px; }
@media (max-width: 991px) {
  body.admin-bar .nav-links { top: 32px; height: calc(100dvh - 32px); }
}
@media (max-width: 782px) {
  body.admin-bar .nav { top: 46px; }
  body.admin-bar .nav-links { top: 46px; height: calc(100dvh - 46px); }
}

/* Active state for the current menu item (plain links in .nav-links) */
.nav-links > a.active { color: var(--blue); background: #e8f0ff; }

/* Neutralize the navbar-drawer styling wherever WordPress core emits its
   own .nav-links wrapper (comments pagination, fallback navigations). */
.navigation .nav-links {
  position: static; height: auto; width: auto; margin: 0; padding: 0;
  transform: none; transition: none; background: none; border: 0;
  box-shadow: none; border-radius: 0; overflow: visible;
  display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 0.45rem;
}

/* ===== PAGE HERO (compact marketing hero for blog views) ===== */
.page-hero {
  position: relative; overflow: hidden; background: #fbfcff;
  padding: 150px 0 64px; text-align: center;
}
.page-hero .orb { z-index: 0; }
.page-hero-inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; }
.page-hero .kicker { justify-content: center; }
a.kicker:hover { color: var(--blue-2); }
.page-title {
  font-size: clamp(2.1rem, 4.6vw, 3.3rem); font-weight: 900;
  letter-spacing: -0.045em; line-height: 1.06; color: var(--tx);
  margin: 16px 0 0;
}
.page-lead {
  margin: 18px auto 0; font-size: 1.1rem; color: var(--tx-soft); max-width: 620px;
}

/* Breadcrumbs — mono label style matching the marketing site kickers */
.breadcrumbz {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx-mut);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px;
}
.breadcrumbz a { color: var(--tx-mut); transition: color 0.15s; }
.breadcrumbz a:hover { color: var(--blue); }
.breadcrumbz i { color: var(--blue); }

/* Blog sections sit right under the hero — tighter than marketing .sec */
.sec.blog-sec { padding: 64px 0 96px; }

/* ===== POST CARD (grid) ===== */
.blog-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sh-sm);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: #c8dbff; }
.blog-card-thumb { display: block; aspect-ratio: 1200 / 630; overflow: hidden; background: var(--paper-2); }
.blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-card:hover .blog-card-thumb img { transform: scale(1.05); }
.blog-thumb-fallback {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  justify-content: center; gap: 12px; padding: 30px 22%;
  background: #e9f0ff;
}
.blog-thumb-fallback i { display: block; height: 11px; border-radius: 6px; background: #c7d9fb; }
.blog-thumb-fallback i:nth-child(1) { width: 68%; background: var(--blue); opacity: 0.85; }
.blog-thumb-fallback i:nth-child(2) { width: 92%; }
.blog-thumb-fallback i:nth-child(3) { width: 52%; background: var(--blue); opacity: 0.45; }
.blog-thumb-fallback i:nth-child(4) { width: 76%; }
.blog-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.blog-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.85rem; }
.blog-cat-chip {
  background: #e6efff; color: var(--blue);
  font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.28rem 0.7rem; border-radius: 100px; transition: background 0.15s, color 0.15s;
}
.blog-cat-chip:hover { background: var(--blue); color: #fff; }
.blog-chip-featured { background: #fef3c7; color: #b45309; }
.blog-chip-featured:hover { background: #fde68a; color: #92400e; }
.blog-meta-item {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.8rem; color: var(--tx-mut); font-weight: 500;
}
.blog-meta-item i { font-size: 0.85rem; color: var(--blue); }
.blog-card-title { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.35; margin-bottom: 0.55rem; }
.blog-card-title a { color: var(--tx); transition: color 0.15s; }
.blog-card-title a:hover { color: var(--blue); }
.blog-card-excerpt { color: var(--tx-soft); font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.1rem; }
.blog-card-foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  padding-top: 0.9rem; border-top: 1px solid var(--line);
}
.blog-readmore {
  color: var(--blue); font-weight: 700; font-size: 0.86rem;
  display: inline-flex; align-items: center; gap: 0.4rem; transition: gap 0.2s, color 0.15s;
}
.blog-readmore:hover { color: var(--blue-2); gap: 0.65rem; }

/* ===== PAGINATION (pill chips) ===== */
.blog-pagination {
  margin-top: 3.25rem;
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.45rem;
}
.blog-pagination .page-numbers,
.comments-pagination .page-numbers {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #fff; border: 1px solid var(--line-2); border-radius: 100px;
  color: var(--tx); font-weight: 700; font-size: 0.88rem;
  padding: 0.5rem 1.05rem; transition: all 0.18s; box-shadow: var(--sh-sm);
}
.blog-pagination a.page-numbers:hover,
.comments-pagination a.page-numbers:hover {
  border-color: var(--blue); color: var(--blue); transform: translateY(-2px);
}
.blog-pagination .page-numbers.current,
.comments-pagination .page-numbers.current {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 12px 30px -10px rgba(59, 111, 224, 0.65);
}
.blog-pagination .page-numbers.dots,
.comments-pagination .page-numbers.dots {
  border-color: transparent; background: transparent; box-shadow: none; color: var(--tx-mut);
}

/* ===== SINGLE POST ===== */
.blog-single-title { max-width: 860px; margin-left: auto; margin-right: auto; }
.blog-single-meta {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 1.1rem; margin-top: 1.2rem;
}
.blog-avatar { border-radius: 50%; box-shadow: 0 0 0 2px #fff, var(--sh-sm); }
.blog-linkedin { color: #0a66c2; font-size: 1rem; line-height: 1; display: inline-flex; transition: transform 0.15s, color 0.15s; }
.blog-linkedin:hover { color: #084d92; transform: translateY(-1px); }
.blog-single-thumb { margin: 0 0 2.25rem; }
.blog-single-thumb img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--sh-md); }

/* ===== ARTICLE CONTENT (Classic Editor output) ===== */
.entry-content { font-size: 1.02rem; color: var(--tx-soft); line-height: 1.85; }
.entry-content > * + * { margin-top: 1.15rem; }
.entry-content a { color: var(--blue); border-bottom: 1px solid #c8dbff; transition: border-color 0.15s; }
.entry-content a:hover { border-bottom-color: var(--blue); }
.entry-content strong { color: var(--tx); }

.entry-content h2 {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--tx);
  padding-bottom: 0.7rem; border-bottom: 1px solid var(--line);
  margin-top: 2.6rem; margin-bottom: 1.2rem;
}
.entry-content h3 { font-size: 1.22rem; font-weight: 700; color: var(--tx); margin-top: 2.1rem; margin-bottom: 0.7rem; }
.entry-content h4 { font-size: 1.05rem; font-weight: 700; color: var(--tx); margin-top: 1.7rem; margin-bottom: 0.6rem; }
.entry-content h5, .entry-content h6 { font-weight: 700; color: var(--tx); margin-top: 1.5rem; margin-bottom: 0.5rem; }

.entry-content ul, .entry-content ol { padding-left: 1.4rem; }
.entry-content li { margin-bottom: 0.45rem; }
.entry-content li::marker { color: var(--blue); font-weight: 700; }

.entry-content blockquote {
  background: #e8f0ff; border-left: 4px solid var(--blue);
  border-radius: 0 12px 12px 0; padding: 1rem 1.25rem; margin: 1.6rem 0;
  color: var(--tx); font-size: 0.98rem;
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content blockquote cite { display: block; margin-top: 0.5rem; font-size: 0.84rem; color: var(--tx-mut); font-style: normal; font-weight: 600; }

.entry-content code {
  background: #e8f0ff; color: var(--blue-2);
  border: 1px solid #c8dbff;
  padding: 0.14rem 0.45rem; border-radius: 6px;
  font-size: 0.85em; font-family: var(--mono); font-weight: 500;
  word-break: break-word;
}
.entry-content a code { color: var(--blue); }
.entry-content pre {
  background: #0b1220; color: #e2e8f0; border-radius: var(--r-sm);
  padding: 1.1rem 1.3rem; font-family: var(--mono); font-size: 0.84rem; line-height: 1.7;
  overflow-x: auto; margin: 1.6rem 0;
}
.entry-content pre code {
  background: transparent; color: inherit; padding: 0; font-size: inherit;
  border: none; border-radius: 0; font-weight: inherit; word-break: normal;
}

.entry-content img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.entry-content figure { margin: 1.8rem 0; }
.entry-content .wp-caption { max-width: 100%; }
.entry-content .wp-caption-text, .entry-content figcaption {
  text-align: center; font-size: 0.82rem; color: var(--tx-mut); margin-top: 0.6rem;
}

.entry-content table {
  width: 100%; border-collapse: collapse; margin: 1.6rem 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
  font-size: 0.92rem;
}
.entry-content th {
  background: var(--paper); color: var(--tx); font-weight: 700;
  padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--line);
}
.entry-content td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); color: var(--tx-soft); }
.entry-content tr:last-child td { border-bottom: none; }

.entry-content hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }

/* Classic alignment classes */
.entry-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.entry-content .alignleft { float: left; margin: 0.4rem 1.4rem 1rem 0; }
.entry-content .alignright { float: right; margin: 0.4rem 0 1rem 1.4rem; }
@media (max-width: 575px) {
  .entry-content .alignleft, .entry-content .alignright { float: none; margin: 1rem 0; display: block; }
}

.blog-page-links { margin-top: 2rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-weight: 600; color: var(--tx-mut); }
.blog-page-links a, .blog-page-links > .post-page-numbers {
  background: #fff; border: 1px solid var(--line-2); border-radius: 100px;
  padding: 0.3rem 0.85rem; color: var(--tx); font-size: 0.88rem;
}
.blog-page-links a:hover { border-color: var(--blue); color: var(--blue); }
.blog-page-links > span.post-page-numbers { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ===== TAGS ===== */
.blog-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.blog-tags a {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 100px;
  color: var(--tx-soft); font-size: 0.8rem; font-weight: 600;
  padding: 0.3rem 0.85rem; transition: all 0.15s;
}
.blog-tags a:hover { background: #e8f0ff; border-color: #c8dbff; color: var(--blue); }

/* ===== PREV / NEXT ===== */
.blog-post-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.75rem;
}
.blog-post-nav-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.1rem 1.3rem; display: block; box-shadow: var(--sh-sm);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.blog-post-nav-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: #c8dbff; }
.blog-post-nav-card small { display: block; color: var(--blue); font-family: var(--mono); font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.35rem; }
.blog-post-nav-card strong { color: var(--tx); font-size: 0.94rem; font-weight: 700; line-height: 1.35; display: block; }
@media (max-width: 575px) { .blog-post-nav { grid-template-columns: 1fr; } }

/* ===== COMMENTS ===== */
.blog-comments { margin-top: 3rem; }
.blog-comments-title {
  font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--tx);
  display: flex; align-items: center; gap: 0.55rem; margin-bottom: 1.4rem;
}
.blog-comments-title i { color: var(--blue); }
.blog-comments .comment-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.blog-comments .comment-list .children { list-style: none; padding-left: 2rem; }
.blog-comments .comment-body {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.2rem 1.4rem; margin-bottom: 1rem; font-size: 0.94rem;
}
.blog-comments .comment-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.7rem; }
.blog-comments .comment-author { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--tx); }
.blog-comments .comment-author .avatar { border-radius: 50%; }
.blog-comments .comment-author .says { display: none; }
.blog-comments .comment-metadata { font-size: 0.78rem; }
.blog-comments .comment-metadata a { color: var(--tx-mut); }
.blog-comments .comment-content { color: var(--tx-soft); line-height: 1.7; }
.blog-comments .comment-content p:last-child { margin-bottom: 0; }
.blog-comments .reply a {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: var(--blue); font-weight: 700; font-size: 0.8rem;
}
.blog-comments .comment-awaiting-moderation { font-size: 0.8rem; color: var(--amber); font-weight: 600; }
.blog-comments-closed { color: var(--tx-mut); font-size: 0.9rem; font-style: italic; }
.blog-comments .comment-form label { display: block; font-weight: 600; font-size: 0.86rem; color: var(--tx); margin-bottom: 0.3rem; }
.blog-comments .comment-form .required { color: var(--red); }
.blog-comments .comment-notes, .blog-comments .logged-in-as { font-size: 0.84rem; color: var(--tx-mut); }
.blog-comments .comment-navigation, .blog-comments nav.pagination { margin-bottom: 1.5rem; }

/* Comment form card */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.6rem 1.6rem 1.4rem; box-shadow: var(--sh-sm);
}

/* Form controls (search + comment form) */
.form-control {
  border-radius: var(--r-sm); border: 1px solid var(--line-2); padding: 0.65rem 0.95rem;
  background: #fff; color: var(--tx); box-shadow: var(--sh-sm); font-family: var(--font);
}
.form-control:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }

/* ===== SEARCH ===== */
.blog-hero-search { max-width: 480px; }
.blog-search-form { display: flex; gap: 0.5rem; }
.blog-search-form .form-control { border-radius: 100px; padding: 0.65rem 1.15rem; flex: 1; }
.blog-search-form .btn { white-space: nowrap; }

/* ===== EMPTY STATE ===== */
.blog-empty {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 3rem 2rem;
}
.blog-empty i { font-size: 2.4rem; color: var(--blue); display: block; margin-bottom: 1rem; }
.blog-empty h3 { font-weight: 800; letter-spacing: -0.02em; color: var(--tx); }
.blog-empty p { color: var(--tx-mut); }
.blog-empty .blog-search-form { max-width: 380px; margin: 1.25rem auto 0; }

/* ===== CODE BLOCK COPY BUTTON ===== */
.code-wrap { position: relative; margin: 1.6rem 0; }
.code-wrap pre { margin: 0; }
.code-copy-btn {
  position: absolute; top: 0.6rem; right: 0.6rem;
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  color: #cbd5e1; font-size: 0.74rem; font-weight: 600; font-family: var(--font);
  padding: 0.3rem 0.65rem; border-radius: 8px; cursor: pointer;
  opacity: 0; transition: opacity 0.2s, background 0.2s, color 0.2s;
}
.code-wrap:hover .code-copy-btn, .code-copy-btn:focus-visible { opacity: 1; }
.code-copy-btn:hover { background: rgba(255,255,255,0.16); color: #fff; }
.code-copy-btn.copied { background: rgba(74,222,128,0.18); border-color: rgba(74,222,128,0.4); color: #4ade80; opacity: 1; }
@media (hover: none) { .code-copy-btn { opacity: 1; } } /* always visible on touch screens */

/* ===== MISC ===== */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin: 1.8rem 0; }
.gallery .gallery-item { margin: 0; }
.gallery.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }

/* =====================================================================
   PRODUCT LAYOUT (template-product.php)
   ===================================================================== */
/* Hero: breadcrumbs, centered title + subtitle, Download / Buy with notes */
.pp-hero { position: relative; overflow: hidden; background: #fbfcff; padding: 128px 0 54px; }
.pp-hero .orb { z-index: 0; }
.pp-hero-wrap { position: relative; z-index: 1; }
.pp-hero .breadcrumbz { justify-content: flex-start; margin-bottom: 28px; }
.pp-hero-inner { text-align: center; max-width: 980px; margin: 0 auto; }
.pp-hero-inner .kicker { justify-content: center; }
.pp-title {
  font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 900; letter-spacing: -0.04em;
  line-height: 1.08; color: var(--tx); margin: 14px 0 0;
}
.pp-sub { margin: 18px auto 0; max-width: 820px; font-size: 1.12rem; color: var(--tx-soft); line-height: 1.65; }
.pp-cta { display: flex; justify-content: center; align-items: flex-start; gap: 18px 24px; flex-wrap: wrap; margin-top: 30px; }
.pp-cta-item { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pp-cta-item .btn { min-width: 240px; }
.pp-cta-note { font-size: 0.82rem; color: var(--tx-mut); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.pp-cta-note i { color: var(--green); }
.pp-cta-note-price i { color: var(--blue); }
@media (max-width: 991px) { .pp-hero { padding-top: 104px; } }

/* Body: one wide reading column, no sidebar */
.pp { background: #fff; padding: 34px 0 80px; }
.pp-body { max-width: 1100px; margin: 0 auto; }

/* Meta row: Written by · Updated on · Min reading · Comments */
.pp-meta-row {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 0;
  padding: 4px 0 26px; margin-bottom: 30px; border-bottom: 1px solid var(--line);
}
.pp-meta-item { display: flex; align-items: center; gap: 12px; padding: 0 32px; border-left: 1px solid var(--line); }
.pp-meta-item:first-child { border-left: 0; }
.pp-meta-item .blog-avatar { width: 44px; height: 44px; flex: none; }
.pp-meta-ico { width: 44px; height: 44px; border-radius: 12px; background: #e6efff; color: var(--blue); display: grid; place-items: center; font-size: 1.2rem; flex: none; }
.pp-meta-label { display: block; font-size: 0.76rem; color: var(--tx-mut); font-weight: 500; line-height: 1.2; }
.pp-meta-value { display: flex; align-items: center; gap: 7px; font-size: 0.96rem; font-weight: 800; color: var(--tx); margin-top: 4px; line-height: 1.2; }
.pp-meta-value a { color: var(--tx); transition: color 0.15s; }
.pp-meta-value a:hover { color: var(--blue); }
@media (max-width: 767px) { .pp-meta-item { border-left: 0; padding: 0 12px; width: 50%; } }
@media (max-width: 480px) { .pp-meta-item { width: 100%; } }

/* Article */
.pp-article .blog-single-thumb { margin: 0 0 28px; }
.pp-article .entry-content { font-size: 1.06rem; }
.pp-article .blog-tags { margin-top: 2rem; }
.entry-content h2, .entry-content h3 { scroll-margin-top: 90px; }

/* Summary / key-takeaway box ([summary]) */
.sc-summary {
  margin: 0 0 1.8rem; padding: 22px 26px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, #e6f9ef, #f3fbff 55%, #fff);
  border: 1px solid #bfe8d2; border-left: 5px solid var(--teal);
  font-size: 1.08rem; line-height: 1.75; color: var(--tx);
}
.sc-summary-title { font-weight: 800; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.sc-summary-text p { margin: 0 0 0.7rem; }
.sc-summary-text > :last-child { margin-bottom: 0; }

/* author box */
.pp-author {
  display: flex; gap: 18px; align-items: flex-start; margin-top: 2.5rem; padding: 22px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.pp-author-avatar { border-radius: 50%; flex: none; box-shadow: 0 0 0 3px #fff, var(--sh-sm); }
.pp-author-label { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx-mut); font-weight: 700; }
.pp-author-name { font-size: 1.05rem; font-weight: 800; color: var(--tx); margin-top: 3px; display: flex; align-items: center; gap: 8px; }
.pp-author-body p { margin: 8px 0 0; font-size: 0.9rem; color: var(--tx-soft); line-height: 1.6; }
.pp-author-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.84rem; font-weight: 700; color: var(--blue); transition: gap 0.2s; }
.pp-author-more:hover { gap: 10px; }
@media (max-width: 575px) { .pp-author { flex-direction: column; } }

/* related articles */
.pp-related { margin-top: 3rem; }
.pp-related-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 1.2rem; }
.pp-related-head h2 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; display: flex; align-items: center; gap: 8px; }
.pp-related-head h2 i { color: var(--blue); }

/* mobile sticky download bar */
.pp-bar { display: none; }
@media (max-width: 991px) {
  .pp-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    background: rgba(255,255,255,0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -12px rgba(24,45,110,0.25);
    transform: translateY(110%); transition: transform 0.3s;
  }
  .pp-bar.show { transform: none; }
  .pp-bar-ico { width: 36px; height: 36px; border-radius: 10px; background: #e6efff; display: grid; place-items: center; flex: none; color: var(--blue); font-size: 1.1rem; }
  .pp-bar-ico img { width: 22px; height: 22px; object-fit: contain; }
  .pp-bar-name { flex: 1; font-size: 0.86rem; font-weight: 800; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pp-bar .btn { padding: 0.55rem 1rem; font-size: 0.86rem; flex: none; }
  body.pp-layout { padding-bottom: 64px; }
}

/* =====================================================================
   SHORTCODES (both layouts)
   ===================================================================== */
.entry-content a.btn { border-bottom: 0; }

/* buttons */
.sc-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin: 0.4rem 0.6rem 0.4rem 0; vertical-align: top; }
.sc-btn-note { font-size: 0.74rem; color: var(--tx-mut); text-align: center; line-height: 1.3; }
.sc-buttons { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; margin: 1.4rem 0; }
.sc-buttons .sc-btn { margin: 0; }
.sc-buttons.sc-align-center { justify-content: center; }
.sc-buttons.sc-align-right { justify-content: flex-end; }

/* callout boxes */
.sc-box {
  display: flex; gap: 14px; padding: 16px 18px; border: 1px solid; border-radius: var(--r-md);
  margin: 1.6rem 0; font-size: 0.95rem; line-height: 1.65;
}
.sc-box-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 1.05rem; background: #fff; box-shadow: var(--sh-sm); }
.sc-box-body { min-width: 0; flex: 1; }
.sc-box-title { font-weight: 800; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
.sc-box-text p { margin: 0 0 0.6rem; }
.sc-box-text > :last-child { margin-bottom: 0; }
.sc-box-text ul, .sc-box-text ol { margin: 0.3rem 0 0.6rem; }
.sc-note { background: #e8f0ff; border-color: #c8dbff; color: #1e3a8a; }
.sc-note .sc-box-ico, .sc-note .sc-box-title { color: var(--blue); }
.sc-tip { background: #dcfce7; border-color: #bbf7d0; color: #14532d; }
.sc-tip .sc-box-ico, .sc-tip .sc-box-title { color: #15803d; }
.sc-warning { background: #fef3c7; border-color: #fde68a; color: #78350f; }
.sc-warning .sc-box-ico, .sc-warning .sc-box-title { color: #b45309; }
.sc-important { background: #fee2e2; border-color: #fecaca; color: #7f1d1d; }
.sc-important .sc-box-ico, .sc-important .sc-box-title { color: #b91c1c; }
.sc-plain { background: var(--paper); border-color: var(--line); color: var(--tx-soft); }
.sc-plain .sc-box-ico, .sc-plain .sc-box-title { color: var(--tx); }
.sc-plain .sc-box-title { font-size: 0.95rem; text-transform: none; letter-spacing: -0.01em; margin-bottom: 6px; }
.entry-content .sc-box strong { color: inherit; }

/* steps */
.sc-step {
  display: flex; gap: 16px; margin: 1.6rem 0; padding: 18px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.entry-content .sc-step + .sc-step { margin-top: 0.9rem; }
.sc-step-n {
  flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--blue); color: #fff;
  font-weight: 800; font-size: 1rem; display: grid; place-items: center;
  box-shadow: 0 10px 22px -10px rgba(37,99,235,0.7);
}
.sc-step-body { flex: 1; min-width: 0; }
.entry-content .sc-step-title { font-size: 1.08rem; font-weight: 800; margin: 7px 0 8px; color: var(--tx); }
.sc-step-text p { margin: 0 0 0.7rem; }
.sc-step-text > :last-child { margin-bottom: 0; }
.sc-step-text img { margin-top: 0.4rem; }
@media (max-width: 575px) { .sc-step { padding: 16px; gap: 12px; } .sc-step-n { width: 34px; height: 34px; border-radius: 10px; font-size: 0.9rem; } }

/* pros / cons */
.entry-content .sc-list { list-style: none; margin: 1.6rem 0; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid; }
.entry-content .sc-list li { position: relative; padding-left: 26px; font-size: 0.92rem; color: var(--tx-soft); margin-bottom: 7px; line-height: 1.5; }
.entry-content .sc-list li:last-child { margin-bottom: 0; }
.sc-list li i { position: absolute; left: 0; top: 0.22em; font-size: 0.95rem; }
.entry-content .sc-list-title { padding-left: 0; font-weight: 800; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.sc-list-title i { position: static; font-size: 0.9rem; }
.sc-pros { background: #f0fdf4; border-color: #bbf7d0; }
.sc-pros .sc-list-title, .sc-pros li i { color: #15803d; }
.sc-cons { background: #fef2f2; border-color: #fecaca; }
.sc-cons .sc-list-title, .sc-cons li i { color: #b91c1c; }
.sc-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 1.6rem 0; }
.entry-content .sc-proscons .sc-list { margin: 0; }
@media (max-width: 575px) { .sc-proscons { grid-template-columns: 1fr; } }

/* faq */
.sc-faq { margin: 0.9rem 0; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-sm); }
.sc-faq-q { display: flex; gap: 12px; align-items: flex-start; }
.sc-faq-ico { flex: none; width: 28px; height: 28px; border-radius: 8px; background: #e6efff; color: var(--blue); font-weight: 800; display: grid; place-items: center; font-size: 0.9rem; }
.entry-content .sc-faq-q h3 { margin: 3px 0 0; font-size: 1rem; font-weight: 800; }
.sc-faq-a { margin-top: 8px; padding-left: 40px; font-size: 0.93rem; color: var(--tx-soft); }
.sc-faq-a p { margin: 0 0 0.6rem; }
.sc-faq-a > :last-child { margin-bottom: 0; }

/* table of contents */
.sc-toc { margin: 1.6rem 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 18px; }
.sc-toc.is-empty { display: none; }
.sc-toc-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.86rem; color: var(--tx); }
.sc-toc-head i { color: var(--blue); }
.sc-toc-toggle { margin-left: auto; background: none; border: 0; color: var(--tx-mut); cursor: pointer; font-size: 0.85rem; padding: 4px 6px; transition: transform 0.2s; }
.sc-toc.collapsed .sc-toc-toggle { transform: rotate(180deg); }
.sc-toc.collapsed .sc-toc-list { display: none; }
.sc-toc-list { margin: 10px 0 0; padding: 0 0 0 1.3rem; }
.sc-toc-list li { margin-bottom: 5px; font-size: 0.88rem; break-inside: avoid; }
.sc-toc-list li::marker { color: var(--blue); font-weight: 700; }
.sc-toc-list a, .entry-content .sc-toc a { color: var(--tx-soft); font-weight: 600; border-bottom: 0; }
.sc-toc-list a:hover { color: var(--blue); }
.sc-toc-list ol { list-style: none; padding-left: 0.9rem; margin: 4px 0 0; }
.sc-toc-list ol li { font-size: 0.84rem; margin-bottom: 3px; }
.sc-toc-list ol li::before { content: "–"; color: var(--tx-mut); margin-right: 6px; }
.sc-toc-list ol a { font-weight: 500; }
@media (min-width: 768px) { .sc-toc-list { columns: 2; column-gap: 28px; } }

/* =====================================================================
   AUTHOR CHIP + AVATARS
   ===================================================================== */
.author-chip { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 600; color: var(--tx-soft); min-width: 0; }
.author-chip .blog-avatar { flex: none; }
.author-chip-name { color: var(--tx); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.15s; }
a.author-chip-name:hover { color: var(--blue); }
.blog-avatar, .blog-comments .avatar, .pp-author-avatar { border-radius: 50%; object-fit: cover; background: #e6efff; }

/* LinkedIn badge shown right after the author's name */
.blog-linkedin {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px;
  background: #0a66c2; color: #fff; font-size: 0.72rem; line-height: 1; flex: none;
  transition: transform 0.15s, background 0.15s;
}
.blog-linkedin:hover { background: #084d92; color: #fff; transform: translateY(-1px); }
.pp-author-name .blog-linkedin { width: 22px; height: 22px; font-size: 0.8rem; }
.blog-card-foot .author-chip { font-size: 0.76rem; }
.blog-card-foot .author-chip .blog-linkedin { width: 18px; height: 18px; font-size: 0.64rem; border-radius: 4px; }
.blog-card-foot .blog-readmore { flex: none; }