/*
 * File: css/components/block-titles.css
 * Logic: Shared h2 identity for page blocks — accent bar via design tokens.
 * Usage: class="wsdt-block-title" on block/section h2 headings.
 * Override tokens in subtheme css/base/variables.theme.css or block-titles.theme.css.
 */

.wsdt-block-title {
  margin-top: 0;
  margin-bottom: var(--heading-gap);
  font-family: var(--font-heading);
  font-size: var(--block-title-size);
  line-height: var(--line-height-tight);
  font-weight: var(--block-title-weight);
  color: var(--block-title-color);
  text-align: var(--block-title-align);
}

.wsdt-block-title::after {
  content: "";
  display: block;
  width: var(--block-title-accent-width);
  height: var(--block-title-accent-height);
  border-radius: var(--block-title-accent-radius, var(--radius-pill));
  margin: var(--block-title-accent-gap) auto 0;
  background-color: var(--block-title-accent-color);
}

.wsdt-block-title--left {
  --block-title-align: left;
  text-align: left;
}

.wsdt-block-title--left::after {
  margin-left: 0;
  margin-right: auto;
}

.wsdt-block-title--on-dark {
  color: var(--block-title-color-on-dark);
}

.wsdt-block-title--on-dark::after {
  background-color: var(--block-title-accent-color-on-dark);
}