/** Bushari Design System — editorial prose and document components. */

.bds-prose {
  color: var(--bds-color-ink);
  font-family: var(--bds-font-sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.75;
  min-width: 0;
}

.bds-prose > :where(p, ul, ol, blockquote, figure, table, details) {
  margin-block: 0 1.35em;
}

.bds-prose :where(h2, h3, h4) {
  color: var(--bds-color-navy-dark);
  font-family: var(--bds-font-sans);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  scroll-margin-top: 2rem;
}

.bds-prose h2 { font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem); margin: 2.2em 0 0.65em; }
.bds-prose h3 { font-size: clamp(1.3rem, 1.18rem + 0.5vw, 1.7rem); margin: 1.75em 0 0.55em; }
.bds-prose h4 { font-size: 1.12rem; margin: 1.5em 0 0.45em; }
.bds-prose :where(p, li) { overflow-wrap: break-word; }
.bds-prose :where(ul, ol) { padding-inline-start: 1.4em; }
.bds-prose li + li { margin-top: 0.4em; }
.bds-prose a { color: var(--bds-color-navy); font-weight: 650; text-decoration-color: var(--bds-color-accent); text-decoration-thickness: 0.1em; text-underline-offset: 0.18em; }
.bds-prose a:hover { color: var(--bds-color-navy-dark); }
.bds-prose a:focus-visible { outline: 3px solid var(--bds-color-accent); outline-offset: 3px; }
.bds-prose blockquote { border-left: 4px solid var(--bds-color-accent); color: var(--bds-color-navy-dark); font-size: 1.08em; margin-inline: 0; padding: 0.5rem 0 0.5rem 1.25rem; }
.bds-prose :where(img, video, iframe) { height: auto; max-width: 100%; }
.bds-prose figcaption { color: var(--bds-color-muted); font-size: 0.85rem; line-height: 1.55; margin-top: 0.6rem; }
.bds-prose hr { border: 0; border-top: 1px solid var(--bds-color-rule); margin: var(--bds-space-7) 0; }
.bds-prose .bds-source-note { border-top: 1px solid var(--bds-color-rule); color: var(--bds-color-muted); font-size: 0.82rem; margin-top: var(--bds-space-7); padding-top: var(--bds-space-4); }

@media (max-width: 991px) {
  /* Bricks' legacy 70% + 30% flex bases do not account for the 30px gap. */
  .single-post .bushari-post-content-grid-article {
    flex-direction: column;
  }

  .single-post :where(.bushari-post-main-content-article, .bushari-post-side-bar-article) {
    flex-basis: auto;
    max-width: 100%;
    min-width: 100%;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .bds-prose { font-size: 1rem; line-height: 1.68; }
  .bds-prose h2 { margin-top: 1.8em; }

  /*
   * Legacy editorial tables predate the bds-table wrapper contract. Keep their
   * intrinsic columns while containing horizontal movement inside the table,
   * never at the document level. The shared Bricks article hook makes this a
   * template rule rather than a post-specific compatibility override.
   */
  .single-post .bushari-post-content-article :where(table:not(.bds-table)) {
    -webkit-overflow-scrolling: touch;
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

@media print {
  .bds-prose { color: #000; font-size: 11pt; }
  .bds-prose a { color: #000; text-decoration: underline; }
}