@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");

:root {
  --width-full: clamp(24px, 1.961vw + 12.706px, 48px);
  --width-header: max(
    clamp(24px, 6.536vw + -13.647px, 104px),
    calc(50% - 860px)
  );
  --width-xl: max(clamp(24px, 1.961vw + 12.706px, 48px), calc(50% - 910px));
  --width-l: max(clamp(24px, 1.961vw + 12.706px, 48px), calc(50% - 810px));
  --width-m: max(clamp(24px, 1.961vw + 12.706px, 48px), calc(50% - 600px));
  --width-s: max(clamp(24px, 1.961vw + 12.706px, 48px), calc(50% - 520px));

  --padding-xl: clamp(40px, 21.569vw + -84.235px, 304px);
  --padding-l: clamp(40px, 13.072vw + -35.294px, 200px);
  --padding-m: clamp(40px, 9.15vw + -12.706px, 152px);
  --padding-s: clamp(40px, 5.229vw + 9.882px, 104px);
  --padding-xs: clamp(40px, 0.654vw + 36.235px, 48px);
  --padding-xxs: 40px;

  --gap-xl: clamp(24px, 4.575vw + -2.353px, 80px);
  --gap-l: clamp(24px, 2.614vw + 8.941px, 56px);
  --gap-m: clamp(24px, 1.307vw + 16.471px, 40px);
  --gap-s: 24px;
  --gap-xs: 16px;
  --gap-xxs: 8px;

  --border-radius-s: 4px;
  --border-radius-m: 8px;
  --border-radius-l: 16px;
  --border-radius-max: 999rem;

  --box-shadow: 0 0 15px hsl(from var(--color-black) h s l / 0.2);
  --box-shadow-light: 0 4px 40px 0 hsl(from var(--color-black) h s l / 0.25);
  --box-shadow-lightbox: 1px 2px 9px 0px
    hsl(from var(--color-black) h s l / 0.65);

  /* colors */
  --error: red;
  --color-white: #fff;
  --color-green: #56ae31;
  --color-green-lightest: hsl(
    from var(--color-green) h calc(s - 11) calc(l + 52)
  );
  --color-green-light: hsl(from var(--color-green) h calc(s - 13) calc(l + 38));
  --color-black: #000;
  --color-grey: #eaeaea;
  --color-grey-dark: #6e6e6e;
  --color-red: #c04042;
  --color-purple: #723988;

  /* tokens */
  --color-headings: var(--color-black);
  --color-text: var(--color-black);
}

body,
textarea,
input,
select {
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text);
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.hero {
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  line-height: 1.2;
  color: var(--color-headings);
}

.hero {
  font-size: clamp(39px, 2.696vw + 23.471px, 72px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -2.22px;
}
h1,
.h1 {
  font-size: clamp(29px, 1.389vw + 21px, 46px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1.5px;
}
h2,
.h2 {
  font-size: clamp(27px, 1.225vw + 19.941px, 42px);
  font-weight: 400;
  letter-spacing: -0.63px;
}
h3,
.h3 {
  font-size: clamp(26px, 0.98vw + 20.353px, 38px);
  font-weight: 700;
  letter-spacing: -0.285px;
}
h4,
.h4 {
  font-size: clamp(24px, 0.817vw + 19.294px, 34px);
  font-weight: 900;
  letter-spacing: -0.75px;
}
h5,
.h5 {
  font-size: clamp(22px, 0.654vw + 18.235px, 30px);
  font-weight: 400;
  letter-spacing: -0.225px;
}
h6,
.h6 {
  font-size: clamp(21px, 0.408vw + 18.647px, 26px);
  font-weight: 900;
  letter-spacing: -0.195px;
}

.large-text {
  font-size: clamp(19px, 0.245vw + 17.588px, 22px);
  letter-spacing: -0.175px;
}

/* font weights */
strong,
b {
  font-weight: 700;
}

.subheading {
  color: var(--color-green);
  letter-spacing: -0.54px;
  font-weight: 900;
  text-transform: capitalize;
}

.underline {
  text-decoration: underline;
}

/* links */
a {
  font-weight: 700;
  color: var(--color-text);

  &:hover {
    color: var(--color-green);
  }
}

.alignleft {
  float: left;
  margin-right: 20px;
}
.alignright {
  float: right;
  margin-left: 20px;
}
.aligncenter {
  margin: auto;
  text-align: center;
  display: block;
}

img {
  max-width: 100%;
  height: auto;
}
div.wp-caption {
  max-width: 100%;
  display: inline-block;
}
p.wp-caption-text {
  background-color: #f7f7f7;
  color: #808080;
  padding: 16px 25px;
  font-size: 18px;
  font-style: italic;
}

/* buttons */
.button_container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xxs) var(--gap-xs);
}
.button,
.link {
  padding: clamp(12px, 0.98vw + 6.353px, 24px)
    clamp(24px, 1.961vw + 12.706px, 48px);
  border: 1px solid var(--color-green);
  border-radius: var(--border-radius-max);
  background-color: var(--color-green);
  color: var(--color-black);
  font-size: 20px;
  font-weight: 400;
  text-transform: capitalize;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease,
    color 0.4s ease;

  &:is(:hover, :focus) {
    background-color: hsl(from var(--color-green) h s calc(l + 8));
    border-color: hsl(from var(--color-green) h s calc(l + 8));
    color: var(--color-black);
  }

  /* variations */
  &.outline {
    background-color: transparent;
    color: var(--color-green);

    &:is(:hover, :focus) {
      background-color: hsl(from var(--color-green) h s calc(l + 8));
      border-color: hsl(from var(--color-green) h s calc(l + 8));
      color: var(--color-black);
    }
  }

  /* white */
  &.white {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-black);

    &:is(:hover, :focus) {
      background-color: hsl(from var(--color-white) h s calc(l - 4));
      border-color: hsl(from var(--color-white) h s calc(l - 4));
      color: var(--color-black);
    }
  }
  &.white.outline {
    background-color: transparent;

    &:is(:hover, :focus) {
      background-color: hsl(from var(--color-white) h s calc(l - 4));
      border-color: hsl(from var(--color-white) h s calc(l - 4));
    }
  }

  /* grey */
  &.grey {
    background-color: var(--color-grey);
    border-color: var(--color-grey);

    &:is(:hover, :focus) {
      background-color: hsl(from var(--color-grey) h s calc(l - 4));
      border-color: hsl(from var(--color-grey) h s calc(l - 4));
    }
  }
  &.grey.outline {
    background-color: transparent;

    &:is(:hover, :focus) {
      background-color: hsl(from var(--color-grey) h s calc(l - 4));
      border-color: hsl(from var(--color-grey) h s calc(l - 4));
    }
  }

  /* black */
  &.black {
    background-color: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);

    &:is(:hover, :focus) {
      background-color: hsl(from var(--color-black) h s calc(l + 4));
      border-color: hsl(from var(--color-black) h s calc(l + 4));
      color: var(--color-white);
    }
  }
  &.black.outline {
    background-color: transparent;
    color: var(--color-black);

    &:is(:hover, :focus) {
      background-color: hsl(from var(--color-black) h s calc(l + 4));
      border-color: hsl(from var(--color-black) h s calc(l + 4));
      color: var(--color-white);
    }
  }

  /* red */
  &.red {
    background-color: var(--color-red);
    border-color: var(--color-red);
    color: var(--color-white);

    &:is(:hover, :focus) {
      background-color: hsl(from var(--color-red) h s calc(l + 8));
      border-color: hsl(from var(--color-red) h s calc(l + 8));
      color: var(--color-white);
    }
  }
  &.red.outline {
    background-color: transparent;
    color: var(--color-red);

    &:is(:hover, :focus) {
      background-color: hsl(from var(--color-red) h s calc(l + 8));
      border-color: hsl(from var(--color-red) h s calc(l + 8));
      color: var(--color-white);
    }
  }

  /* purple */
  &.purple {
    background-color: var(--color-purple);
    border-color: var(--color-purple);
    color: var(--color-white);

    &:is(:hover, :focus) {
      background-color: hsl(from var(--color-purple) h s calc(l + 8));
      border-color: hsl(from var(--color-purple) h s calc(l + 8));
      color: var(--color-white);
    }
  }
  &.purple.outline {
    background-color: transparent;
    color: var(--color-purple);

    &:is(:hover, :focus) {
      background-color: hsl(from var(--color-purple) h s calc(l + 8));
      border-color: hsl(from var(--color-purple) h s calc(l + 8));
      color: var(--color-white);
    }
  }

  /* responsive */
  @media (width >= 576px) {
    width: auto;
  }
}

img {
  display: block;
}

input[type="search"] {
  -webkit-appearance: none;
}

/* mce-content-body */
.mce-content-body {
  > *:not(.button) {
    margin-top: 0;
    margin-bottom: var(--gap-s);
  }

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

  a.button[data-mce-selected] {
    padding: 8px 20px;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
  }

  a.button.white {
    background: #ddd !important;
  }

  span[style="color: #ffffff;"] {
    color: #ddd !important;
  }
}

/* bullet points */
/* default */
.wp_content {
  ul,
  ol {
    li {
      list-style: none;
      position: relative;
      isolation: isolate;
      margin-bottom: calc(var(--gap-s) / 2);
      color: #181818;

      &::before {
        display: inline-block;
        position: absolute;
        left: 0;
      }

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

  ul {
    li {
      padding-left: 20px;

      &::before {
        content: "";
        top: var(--gap-xxs);
        width: var(--gap-xxs);
        height: var(--gap-xxs);
        border-radius: var(--border-radius-max);
        background: var(--color-green);
      }
    }

    /* check ul */
    &.check_ul,
    &.boxed_check_ul {
      li {
        padding-left: 35px;

        &::before {
          top: 4px;
          width: 23px;
          height: 18px;
          border-radius: var(--border-radius-max);
          background-color: currentColor;
          color: var(--color-green);
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='18' fill='none' viewBox='0 0 23 18'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M7.19 13.611 1.799 8.218 0 10.016l7.19 7.19L22.6 1.799 20.802 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
          mask-size: 23px 18px;
          mask-position: center;
          mask-repeat: no-repeat;
        }
      }
    }

    &.boxed_check_ul {
      display: flex;
      flex-flow: column nowrap;
      gap: var(--gap-s);

      li {
        margin-bottom: 0;
        flex-basis: 100%;
        border-radius: var(--border-radius-m);
        background-color: var(--color-grey);
        padding: var(--gap-s) var(--gap-m) var(--gap-s)
          calc(35px + var(--gap-m));

        &::before {
          top: calc(4px + var(--gap-s));
          left: var(--gap-m);
        }
      }

      /* responsive */
      @media (width >= 576px) {
        flex-flow: row wrap;

        li {
          flex-basis: calc(50% - var(--gap-s) / 2);
        }
      }
    }
  }

  ol {
    li {
      counter-increment: ordered-list-item;
      padding-left: 28px;

      &::before {
        content: counter(ordered-list-item) ".";
        color: var(--color-green);
        font-weight: 700;
      }
    }

    &:has(li:nth-child(10)) {
      li {
        padding-left: 38px;
      }
    }

    &:has(li:nth-child(100)) {
      li {
        padding-left: 48px;
      }
    }
  }
}