/*
 * Bar-El Adam article and content typography (redesign).
 * .ba-article is the 720px column of a single post (single.html);
 * .ba-inner__content is the post-content column of every inner page
 * (practice area, about, legal, 404). Both share the content typography
 * of docs/redesign-plan.md 4.11 and SITEMAP.md 3.1: h2 in amber with a
 * 32x2 rule, h3 in the heading colour, 16px body at 1.9.
 * Logical properties only. Colours only through tokens.
 */
.ba-article {
  max-inline-size: 720px;
  margin-inline: auto;
}

.ba-inner__content,
.ba-article {
  font-size: 16px;
  line-height: 1.9;
  color: var(--wp--preset--color--text-body);
}

.ba-inner__content > *,
.ba-article > * {
  max-inline-size: 70ch;
}

.ba-inner__content h2,
.ba-article h2 {
  margin-block: 32px 12px;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--wp--preset--color--amber-text);
}

.ba-inner__content h2::after,
.ba-article h2::after {
  content: "";
  display: block;
  inline-size: 32px;
  block-size: 2px;
  border-radius: 1px;
  background: var(--wp--preset--color--amber);
  margin-block-start: 8px;
}

.ba-inner__content > h2:first-child,
.ba-article > h2:first-child {
  margin-block-start: 0;
}

.ba-inner__content h3,
.ba-article h3 {
  margin-block: 24px 8px;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--wp--preset--color--text-heading);
}

.ba-inner__content h4,
.ba-article h4 {
  margin-block: 20px 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--wp--preset--color--text-heading);
}

.ba-inner__content p,
.ba-article p {
  margin-block: 0 16px;
}

.ba-inner__content ul,
.ba-inner__content ol,
.ba-article ul,
.ba-article ol {
  margin-block: 0 16px;
  padding-inline-start: 20px;
}

.ba-inner__content ul,
.ba-article ul {
  list-style: none;
  padding-inline-start: 0;
}

.ba-inner__content ul li,
.ba-article ul li {
  position: relative;
  padding-inline-start: 18px;
}

/* The amber square bullet, the same mark the tiles use. */
.ba-inner__content ul li::before,
.ba-article ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.85em;
  inline-size: 6px;
  block-size: 6px;
  background: var(--wp--preset--color--amber);
}

.ba-inner__content li + li,
.ba-article li + li {
  margin-block-start: 4px;
}

.ba-inner__content a,
.ba-article a {
  color: var(--wp--preset--color--amber-text);
  text-underline-offset: 0.22em;
}

.ba-inner__content strong,
.ba-article strong {
  font-weight: 700;
  color: var(--wp--preset--color--text-heading);
}

.ba-article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--wp--preset--color--tint);
  padding-inline: 0.3em;
  border-radius: 3px;
}

.ba-inner__content blockquote,
.ba-article blockquote {
  border-inline-start: 3px solid var(--wp--preset--color--amber);
  padding-inline-start: 16px;
  margin-inline: 0;
  margin-block: 24px;
  color: var(--wp--preset--color--text-muted);
  font-style: normal;
}

.ba-article blockquote p:last-child {
  margin-block-end: 0;
}

.ba-article figure {
  margin-inline: 0;
  margin-block: 24px;
}

.ba-article figure img {
  border-radius: var(--wp--custom--radius);
}

.ba-article figcaption {
  font-size: 14px;
  color: var(--wp--preset--color--text-muted);
  margin-block-start: 8px;
}

/* A table wider than the content column scrolls in its own box; the
   page itself never gains horizontal scroll. */
.ba-article .wp-block-table {
  overflow-x: auto;
}

.ba-article table {
  border-collapse: collapse;
  inline-size: 100%;
}

.ba-article th,
.ba-article td {
  text-align: start;
  padding: 8px 12px;
  border-block-end: var(--wp--custom--hairline) solid var(--wp--preset--color--border);
}

.ba-article th {
  font-weight: 700;
  color: var(--wp--preset--color--text-heading);
}