/*
 * The blog blocks of a post (@mm/blog; added in the Studio, 2026-10-19): the
 * answer-first summary ("In short"), key takeaways, FAQ and sources. Not on
 * live. Loaded at every width from src/app/layout.tsx; every rule is keyed to
 * the blocks' own classes, so no other page changes.
 *
 * In the theme's look: the light grey (#f3f3f3) and 8px corners of the
 * sidebar's category tiles, their orange (#ff7236) triangles, orange links,
 * Roboto, text #3c3c3c. Titles are the body's own h2. The FAQ is <details>:
 * no script.
 */
.blog-summary {
  margin: 0 0 30px;
  padding: 22px 26px;
  background: #f3f3f3;
  border-left: 4px solid #ff7236;
  border-radius: 0 8px 8px 0;
  box-sizing: border-box;
}
.post-content .blog-summary .blog-summary-label {
  margin: 0 0 8px;
  color: #ff7236;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.4;
  text-transform: uppercase;
}
.post-content .blog-summary .blog-summary-text {
  margin: 0;
  color: #3c3c3c;
  font-size: 19px;
  line-height: 1.55;
}
.blog-takeaways,
.blog-faq,
.blog-sources { margin: 30px 0; }
.post-content .blog-takeaways .blog-block-title,
.post-content .blog-faq .blog-block-title,
.post-content .blog-sources .blog-block-title { margin: 0 0 15px; }
.blog-takeaways {
  padding: 24px 28px;
  background: #f3f3f3;
  border-radius: 8px;
  box-sizing: border-box;
}
.post-content .blog-takeaways .blog-takeaways-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.post-content .blog-takeaways .blog-takeaways-list li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 22px;
  line-height: 1.5;
}
.post-content .blog-takeaways .blog-takeaways-list li:last-child { margin-bottom: 0; }
/* The sidebar's orange triangle. */
.post-content .blog-takeaways .blog-takeaways-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent #ff7236;
}
.blog-faq .blog-faq-item {
  margin: 0 0 10px;
  background: #f3f3f3;
  border-radius: 8px;
}
.blog-faq .blog-faq-question {
  position: relative;
  display: block;
  padding: 14px 48px 14px 20px;
  color: #3c3c3c;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.blog-faq .blog-faq-question::-webkit-details-marker { display: none; }
.blog-faq .blog-faq-question::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  color: #ff7236;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
}
.blog-faq .blog-faq-item[open] > .blog-faq-question::after { content: "\2212"; }
.blog-faq .blog-faq-question:hover { color: #ff7236; }
.blog-faq .blog-faq-answer { padding: 0 20px 16px; }
.post-content .blog-faq .blog-faq-answer p:last-child { margin-bottom: 0; }
.blog-sources {
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}
.post-content .blog-sources .blog-sources-list {
  margin: 0;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.55;
}
.post-content .blog-sources .blog-sources-list li { margin: 0 0 8px; padding-left: 2px; }
.blog-sources .blog-sources-list a { color: #ff7236; word-break: break-word; }
.blog-sources .blog-source-meta { color: #747474; }
.blog-sources .blog-source-note { display: block; color: #747474; font-style: italic; }
.blog-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (max-width: 767px) {
  .post-content .blog-summary .blog-summary-text { font-size: 17px; }
  .blog-summary,
  .blog-takeaways { padding: 18px 18px; }
  .blog-faq .blog-faq-question { font-size: 16px; padding-left: 16px; }
  .blog-faq .blog-faq-answer { padding: 0 16px 14px; }
}