/*
 * GMPF shared section backgrounds
 * -------------------------------
 * Loaded globally from base.hubl.html. Applied via
 * `sectionBackgroundGlobalClass()` in lib/section-background.ts.
 */

section.gmpf-section-bg-light-grey {
  background-color: var(--color-surface-muted);
}

section.gmpf-section-bg-lavender {
  background-color: var(--color-surface-lavender);
}

section.gmpf-section-bg-transparent {
  background-color: transparent;
}

section.gmpf-section-bg-brand-dark {
  background-color: var(--color-brand-dark);
  color: var(--color-text-inverse);
}

section.gmpf-section-bg-brand-gradient {
  background: var(--gradient-brand-diagonal);
  color: var(--color-text-inverse);
}

/* Inverse text on dark / gradient section surfaces. */
.gmpf-section-bg-brand-dark
  :is(
    .heading,
    .intro,
    .eyebrow,
    .body,
    .caption,
    .splitHeading,
    .splitEyebrow,
    .splitBody,
    .splitBulletText,
    .cardHeading,
    .viewAllLink,
    .inlineLinks
  ),
.gmpf-section-bg-brand-gradient
  :is(
    .heading,
    .intro,
    .eyebrow,
    .body,
    .caption,
    .splitHeading,
    .splitEyebrow,
    .splitBody,
    .splitBulletText,
    .cardHeading,
    .viewAllLink,
    .inlineLinks
  ) {
  color: var(--color-text-inverse);
}

.gmpf-section-bg-brand-dark .intro,
.gmpf-section-bg-brand-gradient .intro {
  opacity: 0.9;
}

.gmpf-section-bg-brand-dark .body :global(a),
.gmpf-section-bg-brand-gradient .body :global(a),
.gmpf-section-bg-brand-dark .splitBody :global(a),
.gmpf-section-bg-brand-gradient .splitBody :global(a),
.gmpf-section-bg-brand-dark .inlineLinks :global(a),
.gmpf-section-bg-brand-gradient .inlineLinks :global(a) {
  color: var(--color-text-inverse);
  text-decoration: underline;
}

.gmpf-section-bg-brand-gradient .viewAllLink {
  color: var(--color-text-inverse);
}