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

:root {
  --width-full: clamp(24px, 1.961vw + 12.706px, 48px);
  --width-xl: max(clamp(24px, 1.961vw + 12.706px, 48px), calc(50% - 850px));
  --width-l: max(clamp(24px, 1.961vw + 12.706px, 48px), calc(50% - 730px));
  --width-m: max(clamp(24px, 1.961vw + 12.706px, 48px), calc(50% - 620px));
  --width-s: max(clamp(24px, 1.961vw + 12.706px, 48px), calc(50% - 540px));
  --width-xs: max(clamp(24px, 1.961vw + 12.706px, 48px), calc(50% - 420px));

  --padding-xxl: clamp(40px, 13.072vw + -35.294px, 200px);
  --padding-xl: clamp(40px, 9.15vw + -12.706px, 152px);
  --padding-l: clamp(40px, 7.19vw + -1.412px, 128px);
  --padding-m: clamp(40px, 5.229vw + 9.882px, 104px);
  --padding-s: clamp(40px, 2.614vw + 24.941px, 72px);
  --padding-xs: clamp(40px, 0.654vw + 36.235px, 48px);
  --padding-xxs: 24px;

  --gap-xxl: clamp(24px, 6.536vw + -13.647px, 104px);
  --gap-xl: clamp(24px, 4.575vw + -2.353px, 80px);
  --gap-l: clamp(24px, 3.268vw + 5.176px, 64px);
  --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: 24px;
  --border-radius-max: 999rem;

  /* colors */
  --error: red;
  --color-error: #d92b2b;
  --color-white: #fff;
  --color-light-grey: #eee;
  --color-grey: #4a5b6c;
  --color-black: #000;
  --color-teal: #139990;
  --color-dark-teal: #2b4151;
  --color-orange: #e76925;
  --color-light-green: #82bf39;
  --color-mid-green: #1ea841;

  /* gradients */
  --color-gradient: linear-gradient(
    90deg,
    var(--color-dark-teal) 0%,
    #1f5955 100%
  );

  /* tokens */
  --color-text: var(--color-dark-teal);
  --color-link: var(--color-orange);
  --color-link-hover: var(--color-light-green);
}

body,
textarea,
input,
select {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: 18px;
  line-height: 1.3;
  color: var(--color-text);
  letter-spacing: -0.36px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.hero {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  line-height: 1.1;
}

.hero {
  font-size: clamp(43px, 3.023vw + 25.588px, 80px);
}
h1,
.h1 {
  font-size: clamp(29px, 1.389vw + 21px, 46px);
  letter-spacing: -0.96px;
}
h2,
.h2 {
  font-size: clamp(27px, 1.225vw + 19.941px, 42px);
}
h3,
.h3 {
  font-size: clamp(26px, 0.98vw + 20.353px, 38px);
}
h4,
.h4 {
  font-size: clamp(24px, 0.817vw + 19.294px, 34px);
  letter-spacing: -0.68px;
}
h5,
.h5 {
  font-size: clamp(22px, 0.654vw + 18.235px, 30px);
  line-height: 1.2;
}
h6,
.h6 {
  font-size: clamp(21px, 0.408vw + 18.647px, 26px);
  font-weight: 600;
  line-height: 1.2;
}

strong,
b {
  font-weight: 700;
}

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

.small-text {
  font-size: 16px;
}

.stat-text {
  font-size: clamp(33px, 1.879vw + 22.176px, 56px);
  font-weight: 900;
}

.underline {
  text-decoration: underline;
}

a {
  color: var(--color-link);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0;
  transition: color 0.4s ease;

  &:is(:hover, :focus) {
    color: var(--color-link-hover);
  }
}

.alignleft {
  float: left;
  margin-right: var(--gap-m);
}
.alignright {
  float: right;
  margin-left: var(--gap-m);
}
.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: inline-flex;
  flex-wrap: wrap;
  gap: calc(var(--gap-s) / 2);
}
.button {
  padding: var(--gap-xs) calc(var(--gap-xs) * 2);
  display: inline-block;
  text-decoration: none;
  color: var(--color-black);
  font-weight: 400;
  background: var(--color-light-green);
  border: 1px solid var(--color-light-green);
  border-radius: var(--border-radius-max);
  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) {
    --color-link-hover: var(--color-black);
    background-color: hsl(from var(--color-light-green) h s calc(l + 8));
    border-color: hsl(from var(--color-light-green) h s calc(l + 8));
  }

  &.teal {
    background-color: var(--color-teal);
    border-color: var(--color-teal);

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

  &.dark_teal {
    background-color: var(--color-dark-teal);
    border-color: var(--color-dark-teal);

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

  &.dark_teal.outline {
    background-color: transparent;
    border-color: var(--color-dark-teal);

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

  &.orange {
    background-color: var(--color-orange);
    border-color: var(--color-orange);

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

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

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

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

img {
  display: block;
}

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

/* mce-content-body */
.mce-content-body {
  > * {
    margin-block: var(--gap-m);
  }
  > :first-child {
    margin-top: 0;
  }
  > :last-child {
    margin-bottom: 0;
  }
}

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

.mce-content-body a.button.white {
  background: #ddd !important;
}

.mce-content-body 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);

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

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

  ul {
    li {
      padding-left: var(--gap-xs);

      &::before {
        content: "";
        top: var(--gap-xxs);
        width: calc(var(--gap-xxs) / 2);
        aspect-ratio: 1;
        border-radius: var(--border-radius-max);
        background-color: var(--color-text);
      }
    }

    /* check ul */
    &.check_ul {
      li {
        color: var(--color-text);
        padding-left: 32px;

        &::before {
          top: 2px;
          width: 20px;
          height: 20px;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' fill='%2382bf39' rx='10'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M8.5 11.3 13.7 6 15 7.4 8.5 14 5 10.4l1.3-1.3z' clip-rule='evenodd'/%3E%3C/svg%3E");
          background-size: 20px;
          background-position: center;
          background-repeat: no-repeat;
        }
      }
    }
  }

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

      &::before {
        content: counter(ordered-list-item) ".";
      }
    }

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

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