@import url("https://fonts.googleapis.com/css2?family=Onest:wght@100..900&family=Zalando+Sans+Expanded:ital,wght@0,200..900;1,200..900&display=swap");

:root {
  --width-full: clamp(16px, 2.614vw + 0.941px, 48px);
  --width-xl: max(clamp(16px, 2.614vw + 0.941px, 48px), calc(50% - 900px));
  --width-l: max(clamp(16px, 2.614vw + 0.941px, 48px), calc(50% - 820px));
  --width-m: max(clamp(16px, 2.614vw + 0.941px, 48px), calc(50% - 680px));
  --width-s: max(clamp(16px, 2.614vw + 0.941px, 48px), calc(50% - 540px));
  --width-xs: max(clamp(16px, 2.614vw + 0.941px, 48px), calc(50% - 400px));

  --padding-xxl: clamp(32px, 13.725vw + -47.059px, 200px);
  --padding-xl: clamp(32px, 9.804vw + -24.471px, 152px);
  --padding-l: clamp(32px, 7.516vw + -11.294px, 124px);
  --padding-m: clamp(32px, 5.882vw + -1.882px, 104px);
  --padding-s: clamp(32px, 3.268vw + 13.176px, 72px);
  --padding-xs: clamp(32px, 1.307vw + 24.471px, 48px);
  --padding-xxs: 24px;

  --gap-xxl: clamp(16px, 7.19vw + -25.412px, 104px);
  --gap-xl: clamp(16px, 5.229vw + -14.118px, 80px);
  --gap-l: clamp(16px, 3.268vw + -2.824px, 56px);
  --gap-m: clamp(16px, 1.961vw + 4.706px, 40px);
  --gap-s: clamp(16px, 0.654vw + 12.235px, 24px);
  --gap-xs: 16px;
  --gap-xxs: 8px;

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

  /* colors */
  --error: red;
  --color-white: #fff;
  --color-pink: #ffc8e0;
  --color-blue: #6ceeff;
  --color-blue-light: #d8faff;
  --color-green: #acffb8;
  --color-navy: #041e2d;
  --color-black: #000;

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

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

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.hero {
  font-family: "Zalando Sans Expanded", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  color: var(--color-text);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: -2.4px;
}

.hero {
  font-size: clamp(37px, 7.271vw + -4.882px, 126px);
}
h1,
.h1 {
  font-size: clamp(34px, 2.124vw + 21.765px, 60px);
}
h2,
.h2 {
  font-size: clamp(32px, 1.797vw + 21.647px, 54px);
}
h3,
.h3 {
  font-size: clamp(30px, 1.471vw + 21.529px, 48px);
}
h4,
.h4 {
  font-size: clamp(27px, 1.225vw + 19.941px, 42px);
}
h5,
.h5 {
  font-size: clamp(25px, 0.899vw + 19.824px, 36px);
}
h6,
.h6 {
  font-size: clamp(22px, 0.654vw + 18.235px, 30px);
}

strong,
b {
  font-weight: 700;
}

.large-text {
  font-size: clamp(20px, 0.327vw + 18.118px, 24px);
}

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

.underline {
  text-decoration: underline;
}

a {
  text-decoration: none;
  color: currentColor;
  transition: opacity 0.4s ease;
  /* &:is(:hover, :focus) {
    opacity: 0.7;
  } */
}

.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;
}

/* narrow text & alignment */
.narrow_text {
  display: flex;

  &.left {
    margin-right: auto;
  }

  &.centre {
    margin-inline: auto;
  }

  &.right {
    margin-left: auto;
  }

  @media (width >= 768px) {
    max-width: 554px;
  }
}

/* highlight text */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.hero,
p,
a {
  isolation: isolate;
}

.highlight_text {
  position: relative;
  isolation: isolate;
  z-index: -1;
  &::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: 0;
    width: calc(100% + var(--gap-xxs));
    height: 60%;
    transform: translateX(-50%) rotate(-0.705deg);
  }
  &.blue {
    &::after {
      background-color: var(--color-blue);
    }
  }
  &.green {
    &::after {
      background-color: var(--color-green);
    }
  }
  &.pink {
    &::after {
      background-color: var(--color-pink);
    }
  }
  &.white {
    &::after {
      background-color: hsl(from var(--color-white) h s l / 0.5);
    }
  }
}

/* mce-content-body */
.mce-content-body {
  a.button[data-mce-selected] {
    padding: clamp(16px, 1.307vw + 8.471px, 32px);
    border-radius: var(--border-radius-max);
  }

  a.button.outline {
    background: #ebebeb !important;
    color: black !important;
  }

  span[style="color: #ffffff;"],
  a[style="color: #ffffff;"] {
    color: #ebebeb !important;
  }

  .highlight_text {
    &.white {
      &::after {
        background-color: #ebebeb;
      }
    }
  }
}

/* buttons */
.button_container {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--gap-xxs) calc(var(--gap-s) / 2);
}
.button {
  padding: clamp(16px, 1.307vw + 8.471px, 32px);
  display: inline-block;
  text-decoration: none;
  font-weight: 900;
  color: var(--color-white);
  background-color: var(--color-navy);
  border: 1px solid var(--color-navy);
  border-radius: var(--border-radius-max);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color 0.4s ease;
  &:is(:hover, :focus) {
    color: var(--color-white);
    background-color: hsl(from var(--color-navy) h s calc(l + 8));
    opacity: 1;
  }
  &.outline {
    background-color: transparent;
    border-color: var(--color-white);
    color: var(--color-white);
    &:is(:hover, :focus) {
      background-color: var(--color-white);
      color: var(--color-navy);
    }
  }
  &.blue,
  &.green,
  &.pink,
  &.white {
    color: var(--color-navy);
  }
  &.blue {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
    &:is(:hover, :focus) {
      background-color: hsl(from var(--color-blue) h s calc(l - 8));
    }
  }
  &.green {
    background-color: var(--color-green);
    border-color: var(--color-green);
    &:is(:hover, :focus) {
      background-color: hsl(from var(--color-green) h s calc(l - 8));
    }
  }
  &.pink {
    background-color: var(--color-pink);
    border-color: var(--color-pink);
    &:is(:hover, :focus) {
      background-color: hsl(from var(--color-pink) h s calc(l - 4));
    }
  }
  &.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));
    }
  }
}

img {
  display: block;
}

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

.contact_service_cta {
  a {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    &[href^="tel:"],
    &[href^="mailto:"] {
      &::before {
        content: "";
        display: block;
        min-width: 24px;
        aspect-ratio: 1;
        background-color: currentColor;
      }
    }
    &[href^="tel:"] {
      &::before {
        mask: center / contain no-repeat
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M7.3203 3.0635c-.5773-.7697-1.6213-1.019-2.4844-.5938l-1.7197.8477A2 2 0 0 0 2 5.1114v.328C2 14.5718 9.4284 22 18.5605 22h.3282a2.001 2.001 0 0 0 1.7949-1.1162l.8467-1.7197c.4251-.8631.1759-1.9072-.5938-2.4844l-3.164-2.3731a2.001 2.001 0 0 0-2.4004 0l-1.5967 1.1973a5.34 5.34 0 0 1-3.7178-1.5625 5.338 5.338 0 0 1-1.5615-3.7187L9.6924 8.627a1.999 1.999 0 0 0 0-2.3995z'/%3E%3C/svg%3E");
      }
    }
    &[href^="mailto:"] {
      &::before {
        mask: center / contain no-repeat
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Crect width='22' height='16' x='1' y='4' stroke='%23041e2d' stroke-width='2' rx='1'/%3E%3Cpath stroke='%23041e2d' stroke-linejoin='round' stroke-width='2' d='M.75 3.75 12 12l11.25-8.25'/%3E%3Cpath stroke='%23041e2d' stroke-linecap='round' stroke-width='2' d='m1.5 19.5 6-6M22.5 19.5l-6-6'/%3E%3C/svg%3E");
      }
    }
  }
}

/* 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: 20px;

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

    /* check ul */
    &.check_ul {
      li {
        padding-left: 39px;

        &::before {
          top: 3px;
          width: 27px;
          height: 20px;
          background: center / contain no-repeat
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='20' fill='none' viewBox='0 0 27 20'%3E%3Cpath fill='%23cd2b30' d='m9 20-9-8.5106 3.15-2.9788L9 14.0426 23.85 0 27 2.9787z'/%3E%3C/svg%3E");
        }
      }
    }

    /* logo ul */
    &.logo_ul {
      li {
        padding-left: 40px;

        &::before {
          top: 2px;
          width: 28px;
          height: 22px;
          background: center / contain no-repeat
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='22' fill='none' viewBox='0 0 28 22'%3E%3Cpath fill='%23cd2b30' d='M9.835 8.5525a29.2 29.2 0 0 1 2.0631-1.754C17.9448 2.1191 24.6358.611 26.8422 3.4311c2.2068 2.8196-.9058 8.8986-6.953 13.5789-1.3293 1.029-2.6902 1.905-4.0276 2.6148.455-.3173.8818-.6055 1.3431-.9418 7.5379-5.4992 9.7568-11.1318 7.6318-13.8476C22.7451 2.163 16.0786 3.833 9.8355 8.553z'/%3E%3Cpath fill='%23cd2b30' d='M2.021 20.8068c2.7008.8188 7.2026.5025 12.1332-2.9264 5.5696-3.8734 8.7709-8.973 6.9712-11.6478a2.8 2.8 0 0 0-.3665-.4401c.743.2515 1.3332.6636 1.7231 1.2433 1.792 2.6644-1.3466 7.8263-6.9559 11.6097-5.6285 3.7966-11.292 4.1511-13.505 2.1613'/%3E%3Cpath fill='%23fb9242' d='M17.7168 13.4477a29.2 29.2 0 0 1-2.0632 1.754C9.6069 19.8811 2.916 21.3893.7096 18.5691c-2.2069-2.8196.9058-8.8986 6.953-13.579 1.3293-1.0289 2.6902-1.905 4.0276-2.6147-.4551.3172-.8819.6054-1.3432.9418C2.8092 8.8164.5903 14.449 2.7153 17.1648c2.0914 2.6724 8.7579 1.0023 15.001-3.7176z'/%3E%3Cpath fill='%23fb9242' d='M25.5303 1.1935c-2.7008-.819-7.2026-.5026-12.1332 2.9263-5.5696 3.8734-8.7709 8.9729-6.9712 11.6478a2.8 2.8 0 0 0 .3665.4401c-.743-.2515-1.3331-.6636-1.723-1.2433-1.792-2.6643 1.3465-7.8263 6.9558-11.6096C17.6537-.442 23.3172-.7963 25.5303 1.1935'/%3E%3C/svg%3E");
        }
      }
    }
  }

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

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

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

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

@media (min-width: 451px) {
  .button:last-child {
    margin-right: 0;
  }
}

@media (max-width: 450px) {
  .button {
    min-width: 100%;
    box-sizing: border-box;
    margin: 0 0 1em 0;
    text-align: center;
  }
  .button:last-child {
    margin-bottom: 0;
  }
}