.os-section-wrapper {
  width: 100%;
  margin: 0;
  --os-default-text-dark: hsl(222deg 15% 13%);
  --os-default-text-standard: hsl(225deg 15% 26%);
  --os-default-text-light: hsl(226deg 15% 46%);
  --os-default-link: hsl(225deg 15% 33%);
  padding-left: var(--wp--style--root--padding-left);
  padding-right: var(--wp--style--root--padding-right);
}

.os-section-wrapper > .acf-innerblocks-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--x-large);
  width: 100%;
  margin: 0 auto;
}

.os-section-wrapper > .acf-innerblocks-container > *:not(.alignfull):not(.alignwide) {

  width: 100%;
}

.os-section-wrapper > .acf-innerblocks-container > .alignwide {
  max-width: var(--wp--style--global--wide-size);
  width: 100%;
}

.os-section-wrapper > .acf-innerblocks-container > .alignfull {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
}

.os-section-wrapper.pad-standard {
  padding-top: var(--wp--preset--spacing--xx-large);
  padding-bottom: var(--wp--preset--spacing--xx-large);
}

.os-section-wrapper.pad-top {
  padding-top: var(--wp--preset--spacing--xx-large);
  padding-bottom: 0;
}

.os-section-wrapper.pad-bottom {
  padding-top: 0;
  padding-bottom: var(--wp--preset--spacing--xx-large);
}

.os-section-wrapper.pad-none {
  padding-top: 0;
  padding-bottom: 0;
}

.os-section-wrapper.has-brand-slate-gradient-background {
  --os-section-on-dark-text: var(--wp--preset--color--white);
  --os-section-on-dark-muted: var(--wp--preset--color--brand-slate-ultra-light);
  --os-section-on-dark-link: var(--wp--preset--color--brand-yellow);
  --os-section-on-light-text: var(--os-default-text-standard);
  --os-section-on-light-muted: var(--os-default-text-light);
  --os-section-on-light-link: var(--os-default-link);
  background: radial-gradient(circle, #484E61 0%, var(--os-default-text-dark) 50%);
  color: var(--os-section-on-dark-text);
  --wp--preset--color--text-dark: var(--os-section-on-dark-text);
  --wp--preset--color--text-standard: var(--os-section-on-dark-text);
  --wp--preset--color--text-light: var(--os-section-on-dark-muted);
  --wp--preset--color--brand-slate: var(--os-section-on-dark-link);
}

/* Force heading colors to follow the section surface token (white on dark, dark on light inner surfaces). */
.os-section-wrapper.has-brand-slate-gradient-background :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .wp-block-heading
) {
  color: var(--wp--preset--color--text-dark) !important;
}

/* Any light surface inside the dark wrapper can opt back to default text tokens. */
.os-section-wrapper.has-brand-slate-gradient-background :where(.has-background) {
  --wp--preset--color--text-dark: var(--os-default-text-dark);
  --wp--preset--color--text-standard: var(--os-section-on-light-text);
  --wp--preset--color--text-light: var(--os-section-on-light-muted);
  --wp--preset--color--brand-slate: var(--os-section-on-light-link);
  color: var(--os-section-on-light-text);
}

/* Custom light-surface cards that do not use Gutenberg's .has-background class */
.os-section-wrapper.has-brand-slate-gradient-background :where(
  .cards-grid-card--style-icon_bg,
  .os-faqs-v2 li.os-faq
) {
  --wp--preset--color--text-dark: var(--os-default-text-dark);
  --wp--preset--color--text-standard: var(--os-section-on-light-text);
  --wp--preset--color--text-light: var(--os-section-on-light-muted);
  --wp--preset--color--brand-slate: var(--os-section-on-light-link);
  color: var(--os-section-on-light-text);
}

/* Optional utility hooks for custom blocks: add .os-surface-light or .os-surface-dark. */
.os-section-wrapper.has-brand-slate-gradient-background :where(.os-surface-light) {
  --wp--preset--color--text-dark: var(--os-default-text-dark);
  --wp--preset--color--text-standard: var(--os-section-on-light-text);
  --wp--preset--color--text-light: var(--os-section-on-light-muted);
  --wp--preset--color--brand-slate: var(--os-section-on-light-link);
  color: var(--os-section-on-light-text);
}

.os-section-wrapper.has-brand-slate-gradient-background :where(
  .os-surface-dark,
  .has-text-dark-background-color,
  .has-background-charcoal-background-color,
  .has-brand-slate-background-color,
  .has-brand-slate-dark-background-color
) {
  --wp--preset--color--text-dark: var(--os-section-on-dark-text);
  --wp--preset--color--text-standard: var(--os-section-on-dark-text);
  --wp--preset--color--text-light: var(--os-section-on-dark-muted);
  --wp--preset--color--brand-slate: var(--os-section-on-dark-link);
  color: var(--os-section-on-dark-text);
}