/**
 * Group background image — light + dark modes.
 *
 * The render filter in includes/blocks/class-group-dark-background.php injects
 * `--accommodate-bg-*` and `--accommodate-dark-bg-*` custom properties into
 * the group wrapper. This stylesheet applies them as the real background,
 * swapping in the dark image under `html[data-theme="dark"]`. Dark modifiers
 * fall back to the light ones, then to sensible defaults.
 */

.wp-block-group.accommodate-has-background {
  background-image: var(--accommodate-bg-image);
  background-size: var(--accommodate-bg-size, cover);
  background-position: var(--accommodate-bg-position, 50% 50%);
  background-repeat: var(--accommodate-bg-repeat, no-repeat);
  background-attachment: var(--accommodate-bg-attachment, scroll);
}

html[data-theme="dark"] .wp-block-group.accommodate-has-background {
  background-image: var(--accommodate-dark-bg-image, var(--accommodate-bg-image));
  background-size: var(--accommodate-dark-bg-size, var(--accommodate-bg-size, cover));
  background-position: var(--accommodate-dark-bg-position, var(--accommodate-bg-position, 50% 50%));
  background-repeat: var(--accommodate-dark-bg-repeat, var(--accommodate-bg-repeat, no-repeat));
  background-attachment: var(--accommodate-dark-bg-attachment, var(--accommodate-bg-attachment, scroll));
}

/* Editor sidebar layout for the light/dark sections. */
.accommodate-group-bg__section {
  border-block-start: 1px solid var(--color-border, #ddd);
  padding-block-start: var(--space-md, 1rem);
  margin-block-start: var(--space-md, 1rem);
}

.accommodate-group-bg__section:first-of-type {
  border-block-start: none;
  padding-block-start: 0;
  margin-block-start: 0;
}

.accommodate-group-bg__heading {
  margin-block: 0 var(--space-sm, 0.5rem);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.accommodate-group-bg__help {
  margin-block-start: var(--space-md, 1rem);
  color: var(--color-text-muted, #666);
  font-size: 12px;
}