/* Article-body styling for the rebuilt single-post template.

   The live site injects these rules inline on every single post (the
   `bnbg-page-blocks` / `bnbg-updated-css` <style> blocks, plus a per-post
   `.p-content-<hash>` block for heading font + image radius). vendor_css.py
   re-fetches bg-shared.css verbatim from the live server, so these rules live
   in their own hand-authored file instead — reproduced against the stable
   `.bnbg-postbody` content wrapper so every post matches without a per-post
   hash class, and loaded after post-658.css in SINGLE_CSS. */
.bnbg-postbody h2,
.bnbg-postbody h3,
.bnbg-postbody h4,
.bnbg-postbody h5,
.bnbg-postbody h6 { font-family: 'Poppins', sans-serif !important; font-weight: 300 !important; }
.bnbg-postbody img { border-radius: 16px !important; }

/* Post-body typography ported from the live single-post template (values
   measured against bnbgenius.ai). The hello-elementor reset zeroes heading
   sizes/margins, paragraph spacing and list indentation, and leaves in-body
   links the grey body colour; these rules restore the live rendering against
   the stable `.bnbg-postbody` wrapper. */
.bnbg-postbody h2 { font-size: 32px; line-height: 1.2em; margin: 8px 0 16px; }
.bnbg-postbody h3 { font-size: 28px; line-height: 1.2em; margin: 8px 0 16px; }
.bnbg-postbody p { margin: 0 0 14.4px; }
.bnbg-postbody a { color: #CC3366; }
.bnbg-postbody ul { list-style: disc; padding-left: 40px; }
.bnbg-postbody ol { list-style: decimal; padding-left: 40px; }

/* Sidebar author card and end-of-article E-E-A-T box collapse on phones, the
   same as the live single post (which wraps each in a <details> via a small
   script on mobile only). Pure CSS: on desktop the wrapper is transparent and
   the card shows expanded; on mobile it becomes a tappable "+/−" disclosure. */
.bnbg-collapse__cb { position: absolute; width: 0; height: 0; opacity: 0; }
.bnbg-collapse__summary { display: none; }
@media (min-width: 768px) {
  .bnbg-collapse { display: contents; }
}
@media (max-width: 767px) {
  .bnbg-collapse { border: 1px solid #e6e6e6; border-radius: 14px; background: #fff; overflow: hidden; margin: 0 0 20px; }
  .bnbg-collapse > .bnbg-authorcard,
  .bnbg-collapse > .bnbg-eeat { border: 0; border-radius: 0; margin: 0; display: none; }
  .bnbg-collapse__summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; padding: 14px 18px; font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; font-size: .9rem; color: #111; }
  .bnbg-collapse__summary::after { content: '+'; color: #EE363F; font-size: 1.5rem; font-weight: 400; line-height: 1; flex: none; }
  .bnbg-collapse__cb:checked ~ .bnbg-collapse__summary { border-bottom: 1px solid #f1f1f1; }
  .bnbg-collapse__cb:checked ~ .bnbg-collapse__summary::after { content: '−'; }
  .bnbg-collapse__cb:checked ~ .bnbg-authorcard,
  .bnbg-collapse__cb:checked ~ .bnbg-eeat { display: block; }
}

.bnbg-figure { margin: 28px 0 24px; }
.bnbg-figure img { width: 100%; height: auto; display: block; border-radius: 16px; }
.bnbg-figure figcaption { font-family: Poppins, system-ui, sans-serif; font-size: .83rem; line-height: 1.55; color: #6b7280; font-style: italic; margin: 10px 2px 0; }

.bnbg-updated { font-family: Poppins, system-ui, sans-serif; font-size: .82rem; color: #6b7280; margin: -6px 0 14px; display: flex; align-items: center; gap: 7px; }
.bnbg-updated__dot { width: 7px; height: 7px; border-radius: 50%; background: #EE363F; display: inline-block; flex: 0 0 auto; }

.bnbg-quote { background: #fdf3f3; border-left: 4px solid #EE363F; border-radius: 8px; padding: 16px 20px; margin: 20px 0; }
.bnbg-quote p { margin: 0; }
.bnbg-quote p + p { margin-top: 8px; }
.bnbg-quote small { color: #6b7280; font-size: .85em; }

.bnbg-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.bnbg-cta a { display: inline-block; padding: 14px 30px; border-radius: 9999px; font-weight: 600; line-height: 1.2; text-decoration: none !important; text-align: center; }
.bnbg-cta--primary a { background: #EE363F; color: #fff !important; border: 2px solid #EE363F; }
.bnbg-cta--primary a:hover { background: #d92f38; }
.bnbg-cta--secondary a { background: #fff; color: #EE363F !important; border: 2px solid #EE363F; }
.bnbg-cta--secondary a:hover { background: #fdf3f3; }

.bnbg-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.bnbg-option { border: 1px solid #ececec; border-radius: 12px; padding: 20px; background: #fafafa; display: flex; flex-direction: column; }
.bnbg-option h3 { margin-top: 0; }
.bnbg-option .bnbg-cta { margin-top: auto; margin-bottom: 0; justify-content: flex-start; width: 100%; }
.bnbg-option .bnbg-cta a { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; min-height: 54px; padding: 12px 10px; font-size: .95rem; white-space: nowrap; }

.bnbg-note { color: #6b7280; font-size: .9em; }
.bnbg-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0; }
.bnbg-table table { margin: 0; min-width: 520px; }

@media (max-width: 1100px) { .bnbg-options { grid-template-columns: 1fr; } }