/**
 * @file
 * Sub-theme-friendly tokens for APB paragraph wrappers.
 *
 * Layout and spacing for `.field--name-field-apb-pb-paragraphs > .field__item`
 * and `.paragraph` are owned by `apbuilder/assets/css/apb-runtime.css`. This
 * file only ships rules that the runtime stylesheet does **not** provide:
 *
 *   1. The `--apb-theme-paragraph-gap` consumer on the host-field wrapper
 *      so the theme settings form controls vertical rhythm between APB
 *      paragraphs.
 *   2. Pixel-style width presets (`.paragraph--width-*`) that map to the
 *      `apb_tax_width` taxonomy values.
 *   3. A tiny default for the `<h2 class="apb-section-title">` element when
 *      it is rendered outside `#apb-wrapper` (e.g. in a custom layout).
 *
 * Sub-themes are encouraged to override these and to leave the host-field
 * wrapper styling to APB core.
 */

/* Vertical rhythm between APB paragraphs (settings-driven). */
.field--name-field-apb-pb-paragraphs {
  gap: var(--apb-theme-paragraph-gap, var(--apb-theme-spacing-xl));
}

/* Width presets exposed by the `apb_tax_width` taxonomy. */
.paragraph--width-100 { width: 100%; }
.paragraph--width-75  { width: 75%; }
.paragraph--width-50  { width: 50%; }
.paragraph--width-25  { width: 25%; }

@media (max-width: 767px) {
  .paragraph[class*="paragraph--width-"] {
    width: 100% !important;
  }
}

/* Fallback section-title style for renders outside #apb-wrapper. */
:where(:not(#apb-wrapper)) > .apb-section-title {
  margin-bottom: var(--apb-theme-spacing-lg);
  font-size: 1.75rem;
  font-weight: var(--apb-theme-font-weight-bold);
}

/* Body class added by `apbuilder_theme_preprocess_html()` when the rendered
 * entity has APB paragraphs. Sub-themes can hook on this to apply
 * full-width / no-sidebar / different background treatments. */
body.apb-has-paragraphs .layout-content {
  /* Intentionally empty - sub-themes override. */
}