/* RecoveryTools blog styles. Loads after /assets/css/common.css and uses its palette (:root).
   bp-* classes are the blog layout. .post-body styles old post content (Bootstrap class names kept working without Bootstrap). */

/* Listing hero */
.bp-hero { background: var(--card); border-bottom: 1px solid var(--line); padding: clamp(28px, 5vw, 56px) 0 clamp(24px, 4vw, 40px); }
.bp-hero h1 { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.bp-sub { margin-top: 12px; font-size: 18px; color: var(--ink-3); max-width: 62ch; }
.bp-hero .bp-search { margin-top: 22px; max-width: 560px; }
.bp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.bp-chips a { display: inline-block; padding: 7px 14px; border-radius: 999px; background: var(--card-soft); border: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--ink-2); }
.bp-chips a:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-tint); }
.bp-author-hero { display: flex; gap: 24px; align-items: center; }
.bp-author-hero .bp-avatar { width: 96px; height: 96px; }

/* Search */
.bp-search { display: flex; gap: 8px; }
.bp-search input { flex: 1; min-width: 0; font: inherit; padding: 11px 16px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--ink); }
.bp-search input:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); }

/* Card grid */
.bp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.bp-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s ease, transform .15s ease; }
.bp-card:hover { box-shadow: 0 18px 40px -26px rgba(17, 24, 39, .5); transform: translateY(-2px); }
.bp-thumb { display: block; background: var(--card-soft); aspect-ratio: 400 / 229; overflow: hidden; }
.bp-img { width: 100%; height: 100%; object-fit: cover; }
.bp-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.bp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; color: var(--ink-4); font-weight: 600; }
.bp-card .bp-title { font-size: 19px; line-height: 1.28; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.bp-card .bp-title a:hover { color: var(--accent-dark); }
.bp-excerpt { color: var(--ink-3); font-size: 15px; }
.bp-by { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); margin-top: auto; }
.bp-by a { font-weight: 700; color: var(--ink); }
.bp-by a:hover { color: var(--accent); }
.bp-avatar { border-radius: 50%; border: 1px solid var(--line); flex: none; }
.bp-card .bp-by { padding-top: 6px; }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 36px 0 0; padding: 0; list-style: none; }
.page-link { display: block; min-width: 40px; padding: 9px 14px; text-align: center; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); font-weight: 700; font-size: 14px; color: var(--ink-2); }
.page-link:hover { border-color: var(--accent); color: var(--accent-dark); }
.page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Breadcrumbs (markup comes from breadcrumbs() in functions.php) */
.crumbs { font-size: 14px; color: var(--ink-4); padding: 16px 0 clamp(14px, 2.5vw, 22px); }
.rt-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rt-crumbs a { color: var(--ink-3); padding: 4px 0; display: inline-block; }
.rt-crumbs a:hover { color: var(--accent-text); text-decoration: underline; }
.bp-hero .crumbs { padding-top: 0; }
/* Breadcrumbs for static pages (ol list markup, same look as product pages) */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; list-style: none; padding: 0; margin: 0; }
.crumbs li { display: flex; align-items: center; line-height: 22px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line-strong); font-weight: 400; }
.crumbs ol a { display: inline-block; padding: 4px 0; line-height: 22px; color: var(--ink-3); }
.crumbs ol a:hover { color: var(--accent-text); text-decoration: underline; }
.crumbs li[aria-current] { color: var(--ink); font-weight: 600; padding: 4px 0; }


/* Single post layout */
.bp-single { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 3vw, 40px); align-items: start; padding-bottom: 8px; }
.bp-post { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(20px, 4vw, 44px); }
.bp-post-head h1 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.12; font-weight: 800; letter-spacing: -.03em; margin: 12px 0 18px; text-wrap: balance; }
.bp-post-head .bp-by { margin-top: 0; padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 26px; font-size: 14px; }
.bp-post-head .bp-author { font-size: 15px; }
.bp-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 88px; }
.bp-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--ink-3); }
.bp-box-h { font-weight: 800; font-size: 17px; color: var(--ink); line-height: 1.3; }
.bp-gap { margin-top: 10px; }
.bp-cta { background: var(--accent-tint); border-color: var(--accent-soft); }
.bp-cta .eyebrow { margin-bottom: 0; }
.bp-cta .btn { align-self: flex-start; }
.bp-list { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.bp-list a { color: var(--ink-2); font-weight: 600; }
.bp-list a:hover { color: var(--accent); text-decoration: underline; }
.bp-side .widget-title { font-weight: 800; font-size: 17px; color: var(--ink); margin-bottom: 8px; }
.bp-side .widget ul { display: flex; flex-direction: column; gap: 8px; }
.bp-related { margin-top: 40px; }
.bp-related > h2 { font-size: clamp(24px, 2.9vw, 32px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 20px; }
.bp-comments { margin-top: 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(20px, 3vw, 32px); }
.bp-comments h2, .bp-comments .comment-reply-title { font-size: 22px; font-weight: 800; margin-bottom: 14px; }
.bp-comments textarea, .bp-comments input[type=text], .bp-comments input[type=email] { width: 100%; font: inherit; padding: 10px 14px; border: 1.5px solid var(--line-strong); border-radius: 10px; }
.bp-comments input[type=submit] { background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: 12px 26px; font-weight: 700; }
.bp-comments .comment-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }

/* Post content */
.post-body { font-size: 17px; line-height: 1.75; color: var(--ink-2); overflow-wrap: anywhere; }
.post-body > :first-child { margin-top: 0; }
.post-body p { margin: 0 0 1.1em; }
.post-body h2, .post-body .h2 { font-size: clamp(24px, 2.8vw, 30px); line-height: 1.2; font-weight: 800; letter-spacing: -.02em; margin: 1.9em 0 .6em; color: var(--ink); }
.post-body h2.h3, .post-body .h3, .post-body h3 { font-size: clamp(21px, 2.3vw, 24px); line-height: 1.25; font-weight: 800; letter-spacing: -.01em; margin: 1.6em 0 .5em; color: var(--ink); }
.post-body h4, .post-body .h4 { font-size: 19px; line-height: 1.3; font-weight: 800; margin: 1.4em 0 .5em; color: var(--ink); }
.post-body h5, .post-body .h5 { font-size: 17px; font-weight: 800; margin: 1.2em 0 .4em; color: var(--ink); }
.post-body a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.post-body a:hover { color: var(--accent); }
.post-body a.btn, .post-body a.nav-link, .post-body a.page-link { text-decoration: none; }
.post-body ul { list-style: disc; padding-left: 1.4em; margin: 0 0 1.1em; }
.post-body ol { list-style: decimal; padding-left: 1.5em; margin: 0 0 1.1em; }
.post-body li { margin-bottom: .4em; }
.post-body li > ul, .post-body li > ol { margin: .4em 0 0; }
.post-body ul.list-unstyled, .post-body ul.list-check, .post-body ul.nav { list-style: none; padding-left: 0; }
.post-body strong, .post-body b { color: var(--ink); font-weight: 700; }
.post-body img { border-radius: 10px; margin: 6px auto; }
.post-body img.alignleft, .post-body img.alignright { max-width: 50%; }
.post-body .alignleft { float: left; margin: 6px 20px 14px 0; }
.post-body .alignright { float: right; margin: 6px 0 14px 20px; }
.post-body .aligncenter, .post-body img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.post-body .alignnone { margin: 6px 0; }
.post-body img.img-responsive, .post-body img.img-fluid { max-width: 100%; height: auto; }
.post-body figure, .post-body .wp-caption { max-width: 100%; margin: 1.2em auto; text-align: center; }
.post-body .wp-caption-text, .post-body figcaption { font-size: 13px; color: var(--ink-4); margin-top: 6px; }
.post-body blockquote { margin: 1.2em 0; padding: 14px 20px; border: 1px solid var(--line); background: var(--card-soft); border-radius: var(--radius-m); color: var(--ink); font-size: 16px; }
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body pre, .post-body code { font-family: var(--mono); font-size: 14px; }
.post-body pre { background: #111827; color: #F9FAFB; padding: 16px 18px; border-radius: var(--radius-m); overflow-x: auto; margin: 1.2em 0; line-height: 1.6; }
.post-body :not(pre) > code { background: var(--accent-tint); color: var(--accent-ink); padding: 2px 6px; border-radius: 6px; }
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.post-body table { width: 100%; border-collapse: collapse; margin: 1.3em 0; font-size: 15px; display: block; overflow-x: auto; }
.post-body td, .post-body th { border: 1px solid var(--line); padding: 10px 14px; vertical-align: top; text-align: left; }
.post-body th, .post-body tr.bg-danger td, .post-body tr.bg-primary td, .post-body thead td { background: var(--accent-tint); color: var(--accent-ink); font-weight: 700; }
.post-body table p { margin: 0; }
.post-body .table-hover tbody tr:hover td { background: var(--card-soft); }
.post-body iframe { width: 100%; border: 0; }
.bp-embed { position: relative; aspect-ratio: 16 / 9; margin: 1.2em 0; }
.bp-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.post-body .ratio { position: relative; aspect-ratio: 16 / 9; }
.post-body .ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.post-body center { display: block; text-align: center; }

/* Old Bootstrap names inside posts */
.post-body .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 11px 22px; font-weight: 700; font-size: 15px; line-height: 1.2; border: 2px solid transparent; color: #fff; }
.post-body .btn-lg { padding: 13px 28px; font-size: 16px; }
.post-body .btn-success { background: var(--ink); color: #fff; }
.post-body .btn-danger, .post-body .btn-orange, .post-body .btn-primary { background: var(--accent); color: #fff; }
.post-body .btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(17, 24, 39, .22); }
.post-body .btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.post-body .btn-toc { background: var(--accent-tint); color: var(--accent-ink); border: 1px solid var(--accent-soft); border-radius: 8px; padding: 3px 12px; font-size: 13px; font-weight: 700; }
.post-body .alert { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 16px 20px; margin: 1.4em 0; background: var(--card-soft); }
.post-body .alert > :last-child { margin-bottom: 0; }
.post-body .alert h2, .post-body .alert h3, .post-body .alert h4 { margin-top: 0; font-size: 19px; }
.post-body .alert-info { background: #EFF6FF; border-color: #BFDBFE; }
.post-body .alert-danger { background: var(--bad-bg, #FEF2F2); border-color: #FECACA; }
.post-body .alert-success { background: #F0FDF4; border-color: #BBF7D0; }
.post-body .alert-warning { background: #FFFBEB; border-color: #FDE68A; }
.post-body .alert-secondary, .post-body .bg-light { background: var(--card-soft); }
.post-body .card { border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--card-soft); margin: 1.2em 0; overflow: hidden; }
.post-body .card-header, .post-body .bg-menu { padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--accent-tint); color: var(--accent-ink); font-weight: 800; }
.post-body .card-body { padding: 14px 20px; }
.post-body .card-body > :last-child { margin-bottom: 0; }
.post-body .collapse:not(.show) { display: none; }
.post-body .nav-tabs, .post-body .nav { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 14px; border-bottom: 1px solid var(--line); }
.post-body .nav-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-weight: 700; color: var(--ink-3); border-bottom: 3px solid transparent; }
.post-body .nav-link svg { width: 22px; height: 22px; }
.post-body .nav-link.active { color: var(--accent-dark); border-color: var(--accent); }
.post-body .tab-pane { display: none; }
.post-body .tab-pane.active { display: block; }
.post-body .badge { display: inline-block; padding: 2px 9px; border-radius: 6px; background: var(--accent-tint); color: var(--accent-dark); font-size: 12px; font-weight: 700; }
.post-body .row { display: flex; flex-wrap: wrap; gap: 16px; }
.post-body .row > [class*="col-"] { flex: 1 1 260px; min-width: 0; }
.post-body .col-lg-12 { flex-basis: 100% !important; }
.post-body .container { max-width: 100%; }

/* Utilities used by old posts */
.text-center { text-align: center; }
.d-flex, .flex { display: flex; }
.d-lg-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.flex-col { flex-direction: column; }
.fw-bold, .font-weight-bold { font-weight: 700; }
.text-white { color: #fff; }
.text-primary { color: var(--accent-dark); }
.fs-4 { font-size: 1.35rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.m-2 { margin: 8px; }
.my-2 { margin-top: 8px; margin-bottom: 8px; }
.my-5 { margin-top: 36px; margin-bottom: 36px; }
.mb-3 { margin-bottom: 14px; }
.mb-5 { margin-bottom: 28px; }
.mr-2, .me-2 { margin-right: 8px; }
.me-3 { margin-right: 14px; }
.p-2 { padding: 8px; }
.py-3 { padding-top: 14px; padding-bottom: 14px; }
.w-full { width: 100%; }
.btn-md-block { }

/* Mobile */
@media (max-width: 1100px) {
  .bp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-single { grid-template-columns: minmax(0, 1fr); }
  .bp-side { position: static; }
}
@media (max-width: 640px) {
  .bp-grid { grid-template-columns: minmax(0, 1fr); }
  .bp-search { flex-direction: column; }
  .bp-search .btn { width: 100%; }
  .bp-author-hero { flex-direction: column; align-items: flex-start; }
  .post-body { font-size: 16px; }
  .post-body .alignleft, .post-body .alignright { float: none; display: block; margin: 8px auto; max-width: 100%; }
  .post-body .btn { width: 100%; }
  .page-link { min-width: 36px; padding: 8px 11px; }
}
.bp-initials { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--accent-tint); color: var(--accent-text); font-weight: 800; font-size: 16px; letter-spacing: .02em; }
.bp-author { font-weight: 700; color: var(--ink); }
.post-body .card.bg-menu { display: block; padding: 0; background: var(--card-soft); color: inherit; font-weight: 400; }
.post-body .card-header .btn-toc { flex: none; white-space: nowrap; }
.post-body .card-body ol, .post-body .card-body ul { margin-bottom: 0; }
.post-body #toc a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.post-body #toc a:hover { color: var(--accent-text); text-decoration: underline; }
.crumbs ol { flex-wrap: nowrap; }
.crumbs li { flex: none; white-space: nowrap; }
.crumbs li[aria-current] { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }