/**
 * MHM2-711 — blog post detail redesign (approved Claude Design mockup
 * "Mediband Blog Post Detail"). All rules scoped under .bp711 so the theme's
 * generic blog CSS (styles-blog-m/l) can't fight the new layout.
 *
 * Brand tokens: accent #EF7622 (dark #C85A17), ink #16202B, body #4C565F,
 * hairline #E7E0D4, page bg #F7F4EE, warm surface #FBF9F6, success #1F9D63.
 * Fonts: Manrope (site-wide, already self-hosted) + Newsreader (serif,
 * self-hosted variable woff2, 400–500).
 */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../../fonts/newsreader/Newsreader-var.woff2') format('woff2');
}

/* page chrome */
body.blog-post-view { background: #f7f4ee; }
body.blog-post-view .breadcrumbs { display: none; } /* design renders its own crumb */
body.blog-post-view .page-title-wrapper { display: none; } /* h1 lives in the article header */

/* reading progress bar */
.bp711-progress { position: fixed; top: 0; left: 0; height: 3px; background: #ef7622; z-index: 60; width: 0; border-radius: 0 3px 3px 0; }

.bp711 { max-width: 1140px; margin: 0 auto; }
.bp711 a { color: #c85a17; font-weight: 600; text-decoration: none; }
.bp711 a:hover { text-decoration: underline; }

/* ---- article header ---- */
.bp711 .ahead { padding: 6px 0 0; }
.bp711 .crumb { font: 600 12px Manrope, sans-serif; color: #a7aeb5; display: flex; gap: 8px; flex-wrap: wrap; }
.bp711 .crumb a { color: #828b93; font-weight: 600; }
.bp711 .cat-pill { display: inline-flex; font: 800 10.5px Manrope, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: #c85a17; background: #fbe7d6; border-radius: 20px; padding: 5px 12px; margin: 22px 0 0; }
.bp711 .ahead h1 { margin: 14px 0 0; font: 500 40px/1.15 Newsreader, Georgia, serif; color: #16202b; letter-spacing: -.02em; max-width: 820px; text-wrap: pretty; }
.bp711 .byline { display: flex; align-items: center; gap: 13px; margin: 22px 0 0; }
.bp711 .byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #e9e2d5; }
.bp711 .byline .nm { font: 800 14px Manrope, sans-serif; color: #16202b; }
.bp711 .byline .nm a { color: #16202b; }
.bp711 .byline .rl { font: 600 12px Manrope, sans-serif; color: #a7aeb5; margin-top: 2px; }
.bp711 .byline .sep { width: 1px; height: 30px; background: #e7e0d4; margin: 0 6px; }
.bp711 .byline .dt { font: 600 12.5px Manrope, sans-serif; color: #828b93; line-height: 1.6; }
.bp711 .heroimg { margin: 28px 0 0; border-radius: 20px; overflow: hidden; background: #e9e2d5; max-height: 460px; }
.bp711 .heroimg img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; display: block; }

/* ---- layout: sticky TOC + article ---- */
.bp711 .layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 52px; margin-top: 40px; align-items: start; }

/* desktop TOC */
.bp711 .toc { position: sticky; top: 24px; }
.bp711 .toc .tt { font: 800 11px Manrope, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #a7aeb5; margin: 0 0 12px; }
.bp711 .toc a { display: block; font: 600 13px/1.45 Manrope, sans-serif; color: #828b93; padding: 7px 0 7px 14px; border-left: 2px solid #e7e0d4; transition: color .15s, border-color .15s; }
.bp711 .toc a:hover { color: #16202b; text-decoration: none; }
.bp711 .toc a.on { color: #c85a17; border-left-color: #ef7622; font-weight: 700; }
.bp711 .toc .share { margin-top: 26px; padding-top: 20px; border-top: 1px solid #e7e0d4; display: flex; gap: 8px; }
.bp711 .shbtn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #d9d3c8; background: #fff; color: #67707a; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .15s, color .15s, border-color .15s; }
.bp711 .shbtn:hover { background: #16202b; border-color: #16202b; color: #fff; }
.bp711 .shbtn svg { width: 15px; height: 15px; }

/* ---- article prose ---- */
.bp711 .prose { max-width: 680px; font-size: 16px; line-height: 1.75; color: #3f4954; }
.bp711 .prose p { margin: 0 0 18px; }
.bp711 .prose .lead,
.bp711 .prose > p:first-of-type { font-size: 18.5px; line-height: 1.7; color: #2f3841; font-family: Newsreader, Georgia, serif; }
.bp711 .prose h2 { margin: 44px 0 14px; font: 500 27px/1.25 Newsreader, Georgia, serif; color: #16202b; letter-spacing: -.015em; scroll-margin-top: 24px; }
.bp711 .prose h3 { margin: 32px 0 10px; font: 800 17.5px/1.3 Manrope, sans-serif; color: #16202b; }
.bp711 .prose b, .bp711 .prose strong { color: #16202b; font-weight: 700; }

/* in-content images — normalized regardless of uploaded size (ticket item 4) */
.bp711 .prose img { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: 14px; margin: 26px 0; border: 1px solid #e7e0d4; box-sizing: border-box; }
.bp711 .prose figure { margin: 26px 0; }
.bp711 .prose figure img { margin: 0; }
.bp711 .prose figcaption { margin-top: 10px; font: 600 12.5px Manrope, sans-serif; color: #a7aeb5; text-align: center; }

/* green check bullets — CSS only, no markup change */
.bp711 .prose ul { list-style: none; margin: 18px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bp711 .prose ul li { position: relative; padding-left: 30px; }
.bp711 .prose ul li::before { content: ""; position: absolute; left: 0; top: 5px; width: 19px; height: 19px; border-radius: 50%; background: #e7f5ed url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%231f9d63' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center; }
.bp711 .prose ol { margin: 18px 0; padding-left: 24px; }
.bp711 .prose ol li { margin-bottom: 10px; }

/* tables */
.bp711 .prose table { border-collapse: collapse; margin: 22px 0; font-size: 13.5px; width: 100%; }
.bp711 .prose td, .bp711 .prose th { border: 1px solid #e7e0d4; padding: 10px 13px; text-align: left; vertical-align: top; }
.bp711 .prose th { background: #fbf9f6; color: #16202b; font-weight: 700; font-size: 12.5px; }

/* amber callout for note/warning content */
.bp711 .prose .callout, .bp711 .prose blockquote { margin: 22px 0; padding: 16px 19px; background: #fff5ee; border: 1px solid #f7dcc6; border-radius: 13px; font-size: 14.5px; color: #9a5a22; line-height: 1.6; }
.bp711 .prose .callout b, .bp711 .prose blockquote b { color: #7d4517; }
.bp711 .prose blockquote p { margin: 0; color: inherit; font-family: Manrope, sans-serif; font-size: inherit; }

/* ---- product CTA band ---- */
.bp711 .shopband { margin: 36px 0; background: #16202b; border-radius: 18px; padding: 26px 28px 28px; color: #fff; }
.bp711 .shopband .kick { font: 800 10.5px Manrope, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #ef9a5c; margin: 0 0 8px; }
.bp711 .shopband h3 { margin: 0 0 6px; font: 500 21px Newsreader, Georgia, serif; color: #fff; }
.bp711 .shopband > p { margin: 0 0 18px; font-size: 13.5px; color: #8b96a2; line-height: 1.6; font-family: Manrope, sans-serif; }
.bp711 .shoprow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.bp711 .shopc { display: flex; flex-direction: column; background: #1f2b38; border: 1px solid #2c3a49; border-radius: 13px; overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; }
.bp711 .shopc:hover { border-color: #ef7622; transform: translateY(-3px); text-decoration: none; }
.bp711 .shopc .im { height: 86px; background: #243140; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bp711 .shopc .im img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border: none; border-radius: 0; max-height: none; }
.bp711 .shopc .bd { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.bp711 .shopc .nm { font: 700 12.5px/1.35 Manrope, sans-serif; color: #fff; }
.bp711 .shopc .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bp711 .shopc .pr { font: 800 13.5px Manrope, sans-serif; color: #fff; }
.bp711 .shopc .pr .price { font: inherit; color: inherit; }
.bp711 .shopc .go { font: 800 11px Manrope, sans-serif; color: #ef9a5c; white-space: nowrap; }

/* ---- author box ---- */
.bp711 .aubox { margin: 44px 0 0; display: flex; gap: 20px; background: #fff; border: 1px solid #e7e0d4; border-radius: 18px; padding: 24px 26px; max-width: 680px; box-sizing: border-box; }
.bp711 .aubox img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; background: #e9e2d5; }
.bp711 .aubox .wt { font: 800 10.5px Manrope, sans-serif; letter-spacing: .11em; text-transform: uppercase; color: #a7aeb5; }
.bp711 .aubox .nm { font: 800 16px Manrope, sans-serif; color: #16202b; margin: 5px 0 2px; }
.bp711 .aubox .nm a { color: #16202b; }
.bp711 .aubox .rl { font: 600 12.5px Manrope, sans-serif; color: #c85a17; }
.bp711 .aubox p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.6; color: #67707a; }

/* ---- prev / next ---- */
.bp711 .pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 44px 0 0; max-width: 680px; }
.bp711 .pnc { background: #fff; border: 1px solid #e7e0d4; border-radius: 15px; padding: 18px 20px; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.bp711 .pnc:hover { box-shadow: 0 10px 24px -12px rgba(20, 32, 43, .2); transform: translateY(-2px); text-decoration: none; }
.bp711 .pnc .lb { font: 800 10.5px Manrope, sans-serif; letter-spacing: .11em; text-transform: uppercase; color: #a7aeb5; }
.bp711 .pnc .ti { margin-top: 7px; font: 700 14px/1.4 Manrope, sans-serif; color: #16202b; }
.bp711 .pnc.next { text-align: right; }

/* ---- related posts ---- */
.bp711 .rel { margin: 60px 0 0; border-top: 1px solid #e7e0d4; padding: 40px 0 64px; }
.bp711 .rel h3 { margin: 0 0 20px; font: 500 24px Newsreader, Georgia, serif; color: #16202b; }
.bp711 .relrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bp711 .relc { background: #fff; border: 1px solid #e7e0d4; border-radius: 15px; overflow: hidden; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.bp711 .relc:hover { box-shadow: 0 12px 28px -12px rgba(20, 32, 43, .2); transform: translateY(-3px); text-decoration: none; }
.bp711 .relc .im { height: 140px; background: linear-gradient(135deg, #f3ede3, #e9e2d5); }
.bp711 .relc .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp711 .relc .bd { padding: 15px 17px 17px; }
.bp711 .relc h4 { margin: 0; font: 700 14px/1.45 Manrope, sans-serif; color: #16202b; }
.bp711 .relc .mt { margin-top: 8px; font: 600 11.5px Manrope, sans-serif; color: #a7aeb5; }

/* ---- mobile TOC (collapsible) ---- */
.bp711 .mtoc { display: none; }

/* legacy content compatibility inside FAQ blocks */
.bp711 .prose .mb-faq-wrap ul li::before,
.bp711 .prose .faq-section ul li::before { display: none; }
.bp711 .prose .mb-faq-wrap ul li,
.bp711 .prose .faq-section ul li { padding-left: 0; }
.bp711 .prose .mb-faq-wrap img,
.bp711 .prose .faq-section img { border: none; border-radius: 0; margin: 0; width: auto; }

/* ---- FAQ accordion — normalize CONTENT-embedded FAQ blocks to the design ----
   Covers both legacy wrappers with zero content edits:
   1) .faq-section  — grey inline-styled box w/ <details><summary><h3>Q</h3></summary><p>A</p>
   2) .mb-faq-wrap  — canonical accordion (own inline <style>; .bp711-scoped rules win) */
.bp711 .prose .faq-section,
.bp711 .prose .mb-faq-wrap {
  margin: 18px 0 26px !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid #e7e0d4 !important;
  border-radius: 15px !important;
  box-shadow: none !important;
  overflow: hidden;
}
/* hide the canonical block's own header (design uses the post's H2 heading) */
.bp711 .prose .mb-faq-wrap .mb-faq-header { display: none !important; }
.bp711 .prose .faq-section details,
.bp711 .prose .mb-faq-wrap details {
  border: none !important;
  border-bottom: 1px solid #efe9df !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: hidden;
}
.bp711 .prose .faq-section details:last-child,
.bp711 .prose .mb-faq-wrap details:last-child { border-bottom: none !important; }
.bp711 .prose .faq-section summary,
.bp711 .prose .mb-faq-wrap summary {
  list-style: none;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 17px 44px 17px 20px !important;
  font: 700 15px/1.45 Manrope, sans-serif !important;
  color: #16202b !important;
  background: none !important;
  position: relative;
}
.bp711 .prose .faq-section summary::-webkit-details-marker,
.bp711 .prose .mb-faq-wrap summary::-webkit-details-marker { display: none; }
.bp711 .prose .faq-section summary::marker,
.bp711 .prose .mb-faq-wrap summary::marker { content: ""; display: none; }
/* question text variants (h3/h4/strong/span inside summary) inherit the summary font */
.bp711 .prose .faq-section summary h3,
.bp711 .prose .faq-section summary h4,
.bp711 .prose .faq-section summary strong,
.bp711 .prose .mb-faq-wrap summary .mb-faq-q {
  margin: 0 !important;
  font: inherit !important;
  color: inherit !important;
  flex: 1;
}
/* design chevron — CSS-only, rotates on open (replaces canonical +/circle chevron) */
.bp711 .prose .mb-faq-wrap summary .mb-faq-chevron { display: none !important; }
.bp711 .prose .faq-section summary::after,
.bp711 .prose .mb-faq-wrap summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7aeb5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .2s;
}
.bp711 .prose .faq-section details[open] > summary::after,
.bp711 .prose .mb-faq-wrap details[open] > summary::after { transform: rotate(180deg); }
.bp711 .prose .faq-section summary:hover,
.bp711 .prose .mb-faq-wrap summary:hover { color: #c85a17 !important; }
/* answer body */
.bp711 .prose .faq-section details > p,
.bp711 .prose .faq-section details > div,
.bp711 .prose .mb-faq-wrap details .mb-faq-a {
  padding: 0 20px 18px !important;
  margin: 0 !important;
  border: none !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: #4c565f !important;
}
.bp711 .prose .mb-faq-wrap details .mb-faq-a p { margin: 0 0 8px !important; font-size: inherit !important; }
.bp711 .prose .mb-faq-wrap details .mb-faq-a p:last-child { margin-bottom: 0 !important; }

@media (max-width: 900px) {
  .bp711 .layout { grid-template-columns: 1fr; gap: 0; }
  .bp711 .toc { display: none; }
  .bp711 .mtoc { display: block; margin-top: 30px; border: 1px solid #e7e0d4; border-radius: 13px; background: #fff; overflow: hidden; }
  .bp711 .mtoc summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 15px 18px; font: 800 13px Manrope, sans-serif; color: #16202b; cursor: pointer; }
  .bp711 .mtoc summary::-webkit-details-marker { display: none; }
  .bp711 .mtoc summary .chev { margin-left: auto; display: flex; color: #a7aeb5; transition: transform .2s; }
  .bp711 .mtoc summary .chev svg { width: 17px; height: 17px; }
  .bp711 .mtoc[open] summary .chev { transform: rotate(180deg); }
  .bp711 .mtoc a { display: block; padding: 11px 18px; font: 600 13.5px Manrope, sans-serif; color: #4c565f; border-top: 1px solid #efe9df; }
  .bp711 .ahead h1 { font-size: 29px; }
  .bp711 .shoprow { grid-template-columns: repeat(2, 1fr); }
  .bp711 .pn { grid-template-columns: 1fr; }
  .bp711 .pnc.next { text-align: left; }
  .bp711 .relrow { grid-template-columns: 1fr; }
  .bp711 .prose { font-size: 15px; }
  .bp711 .aubox { flex-direction: column; gap: 14px; }
}