/**
 * Color utility styles
 */


/* Overlap above */

.bg-color:has(+ .overlap-above) {
  padding-bottom: calc(3.5 * var(--vertical-padding));
}

.layout.overlap-above {
  margin-top: calc(-2.5 * var(--vertical-padding));
}

/* Background colour classes */

.bg-color {
  background-color: var(--bg-color);
  color: var(--fg-color);
  padding: var(--vertical-padding);

  &.layout {
    margin: 0;
    padding-inline: var(--responsive-padding);
  }

  .layout__region {
    max-width: var(--max-width);
    margin: 0 auto;
  }

  p:last-child {
    margin-bottom: 0;
  }
}

.layout__region--second .bg-color {
  --vertical-padding: 1.5rem;
}

.bg-color--raspberry {
  --link-color: var(--color-white);
  --bg-color: var(--color-raspberry);
  --fg-color: var(--color-white);

  .btn-primary {
    --bs-btn-bg: var(--color-white);
    --bs-btn-border-color: var(--color-white);
    --bs-btn-color: var(--color-raspberry);
    --bs-btn-hover-bg: var(--color-yellow);
    --bs-btn-hover-color: var(--color-dk-raspberry);
  }
}

.bg-color--dk-raspberry {
  --link-color: var(--color-white);
  --bg-color: var(--color-dk-raspberry);
  --fg-color: var(--color-white);

  .btn-primary {
    --bs-btn-bg: var(--color-white);
    --bs-btn-color: var(--color-dk-raspberry);
    --bs-btn-hover-bg: var(--color-yellow);
    --bs-btn-hover-color: var(--color-dk-raspberry);
  }
}

.bg-color--lt-blue {
  --bg-color: var(--color-lt-blue);
  --card-border-color: var(--color-blue);
}

.bg-color--lt-grey {
  --bg-color: var(--color-lt-grey);
}