:root {
  --spacing--xx-large: clamp(80px, 5vw, 88px);
  --spacing--x-large: clamp(60px, 3.75vw, 66px);
  --spacing--large: clamp(40px, 2.5vw, 44px);
  --spacing--medium: clamp(30px, 2vw, 33px);
  --spacing--small: clamp(20px, 1.25vw, 22px);
  --spacing--x-small: clamp(10px, 0.75vw, 11px);
}
/* Spacing on all paragraphs */
.paragraph {
  margin-bottom: var(--spacing--x-large);
  /* Remove spacing on paragraphs within layouts */
  &.paragraph--type--oxfcms-layout-banner,
  &.paragraph--type--oxfcms-layout-card,
  &.paragraph--type--oxfcms-layout-slideshow,
  &.paragraph--type--oxfcms-layout-hero,
  &.paragraph--type--oxfcms-layout-header,
  &.paragraph--type--oxfcms-layout-footer {
    .paragraph {
      margin-bottom: 0;
    }
  }
  /* Remove spacing on certain layouts */
  &.paragraph--type--section,
  &.paragraph--type--oxfcms-layout-flexbox,
  &.paragraph--type--from-library,
  &.paragraph--type--oxfcms-layout-footer {
    margin-bottom: 0;
  }
  &.paragraph--type--text {
    .oxfcms-text {
      /* Headings in Text get margin top, unless they are the first element */
      .field--name-field-wysiwyg-content {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          margin-top: var(--spacing--large);
          &:first-child {
            margin-top: 0;
          }
          &:has(+ p),
          &:has(+ ul),
          &:has(+ ol) {
            margin-bottom: var(--spacing--small);
          }
        }
      }
      .oxfcms-text-table-wrapper {
        margin-bottom: var(--spacing--x-large);
      }
    }
  }
}
/* Full Node */
.node {
  /* Remove Header spacing if first component is Banner or Slideshow. */
  header:has(~ .node__content > .field--name-field-content > .field__item:first-child > .paragraph--type--oxfcms-layout-banner:first-child),
  header:has(~ .node__content > .field--name-field-content > .field__item:first-child > .paragraph--type--oxfcms-layout-slideshow:first-child),
  header:has(~ .node__content > .field--name-field-content > .field__item:first-child > .paragraph--type--oxfcms-layout-hero:first-child) {
    .paragraph--type--oxfcms-layout-header {
      margin-bottom: 0;
    }
  }
  /* Content area */
  .node__content {
    .field--name-field-content > .field__item,
    > .lp-builder > .js-lpb-component-list  > * {
      .l__region {
        .paragraph {
          /* Headings adjacent to Headings/Text get small margin. */
          &.paragraph--type--oxfcms-heading {
            &:has(+ .paragraph--type--oxfcms-heading),
            &:has(+ .paragraph--type--text) {
              margin-bottom: var(--spacing--small);
            }
          }
          &.paragraph--type--oxfcms-metadata {
            /* No spacing on empty Metadata. */
            &:not(:has(> *)) {
              margin-bottom: 0;
            }
            /* Small spacing on Metadata adjacent to Metadata. */
            &:has(+ .paragraph--type--oxfcms-metadata) {
              margin-bottom: var(--spacing--small);
              /* No spacing on empty Metadata. */
              &:not(:has(> *)) {
                margin-bottom: 0;
              }
            }
          }
        }
      }
      /* Last top-level region */
      &:last-child {
        /* Increase space of final component */
        /* &. selectors are for Mercury editor */
        > .paragraph--type--section,
        > .paragraph--type--oxfcms-layout-flexbox,
        > .oxfcms-layout-flexbox,
        &.paragraph--type--section,
        &.paragraph--type--oxfcms-layout-flexbox,
        &.oxfcms-layout-flexbox {
          .paragraph--type--oxfcms-layout-banner,
          .paragraph--type--oxfcms-layout-card,
          .paragraph--type--oxfcms-layout-slideshow,
          .paragraph--type--oxfcms-layout-header,
          .paragraph--type--oxfcms-layout-footer {
            .paragraph,
            .paragraph:last-of-type {
              margin-bottom: 0;
            }
          }
          .paragraph:last-of-type {
            margin-bottom: var(--spacing--xx-large);
          }
        }
        /* Increase spacing on tile grid if it's the last element */
        /* &. selector are for Mercury editor */
        > .paragraph--type--oxfcms-layout-tile-grid:last-child,
        &.paragraph--type--oxfcms-layout-tile-grid:last-child {
          margin-bottom: var(--spacing--xx-large);
        }
        /* Remove spacing if final component is Banner or Hero */
        > .paragraph:last-child {
          &.paragraph--type--oxfcms-layout-banner,
          &.paragraph--type--oxfcms-layout-hero {
            margin-bottom: 0;
          }
        }
        /* &. selectors are for Mercury editor */
        &.paragraph--type--oxfcms-layout-banner:last-child,
        &.paragraph--type--oxfcms-layout-hero:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
header:has(~ .search-results-page) {
  .paragraph--type--oxfcms-layout-header {
    margin-bottom: 0;
  }
}
/* Breakpoint - Small Desktop */
@media (width < 1280px) {
  :root {
    --spacing--xx-large: clamp(72px, 7vw, 80px);
    --spacing--x-large: clamp(54px, 5.25vw, 60px);
    --spacing--large: clamp(36px, 3.5vw, 40px);
    --spacing--medium: clamp(27px, 2.75vw, 30px);
    --spacing--small: clamp(18px, 1.75vw, 20px);
    --spacing--x-small: clamp(9px, 1vw, 10px);
  }
}
/* Breakpoint - Tablet */
@media (width < 768px) {
  :root {
    --spacing--xx-large: clamp(64px, 11.33vw, 72px);
    --spacing--x-large: clamp(48px, 8.5vw, 54px);
    --spacing--large: clamp(32px, 5.75vw, 36px);
    --spacing--medium: clamp(24px, 4.5vw, 27px);
    --spacing--small: clamp(16px, 3vw, 18px);
    --spacing--x-small: clamp(8px, 1.5vw, 9px);
  }
}