#logo,
#mobile_logo {
  display: block;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 824 156'%3E%3Cpath fill='%233d5567' d='M380 144q-21 0-34-8-12-8-19-23t-7-33q0-18 7-33 6-14 20-23 13-8 33-8t32 8q14 9 20 23 7 15 7 33t-7 33-20 23q-12 8-32 8m0-9q17 0 27-7 11-8 16-20 5-13 5-28 0-11-3-21-3-11-9-18-6-8-15-12t-21-4q-17 0-28 7-11 8-16 21-6 12-5 27 0 15 5 28 6 12 16 20 12 7 28 7M461 143V49h10v19q4-7 10-12l12-6 14-1h3v9h-3q-12 0-20 5-9 5-12 14-4 9-4 21v45zM546 143l-29-94h11l25 85 27-85h15l26 85 25-85h12l-30 94h-14l-27-84-27 84zM714 144q-15 0-25-6-9-7-14-17-5-12-5-25t5-24a40 40 0 0 1 39-24q10 0 18 4 7 4 13 10 5 6 7 15l3 19v3h-75q1 10 5 19 3 7 11 13 7 4 19 4l10-1 10-4 7-8h11q-3 7-9 12-6 6-14 8zm-34-53h65q0-10-4-17-3-8-11-13-6-4-16-4a31 31 0 0 0-29 17q-4 8-5 17M777 143V17h11v126zM814 143V17h10v126z'/%3E%3Cpath fill='%23667a75' d='M134 0h14l-17 28h-15z'/%3E%3Cpath fill='%231c3e36' d='M169 0h-33l59 92h33z'/%3E%3Cpath fill='%23b2d88a' d='M76 36h37L36 156H0z'/%3E%3Cpath fill='%2381c341' d='M127 36H79l77 120h48z'/%3E%3Cpath fill='%23006b36' d='M243 52h9l-20 30-4-6z'/%3E%3Cpath fill='%2331b44b' d='M261 52h-17l35 56h17z'/%3E%3C/svg%3E");
}

#header.header_dark #logo,
#header.header_dark #mobile_logo {
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 824 156'%3E%3Cpath fill='%23fff' d='M380 144q-21 0-34-8-12-8-19-23t-7-33q0-18 7-33 6-14 20-23 13-8 33-8t32 8q14 9 20 23 7 15 7 33t-7 33-20 23q-12 8-32 8m0-9q17 0 27-7 11-8 16-20 5-13 5-28 0-11-3-21-3-11-9-18-6-8-15-12t-21-4q-17 0-28 7-11 8-16 21-6 12-5 27 0 15 5 28 6 12 16 20 12 7 28 7M461 143V49h10v19q4-7 10-12l12-6 14-1h3v9h-3q-12 0-20 5-9 5-12 14-4 9-4 21v45zM546 143l-29-94h11l25 85 27-85h15l26 85 25-85h12l-30 94h-14l-27-84-27 84zM714 144q-15 0-25-6-9-7-14-17-5-12-5-25t5-24a40 40 0 0 1 39-24q10 0 18 4 7 4 13 10 5 6 7 15l3 19v3h-75q1 10 5 19 3 7 11 13 7 4 19 4l10-1 10-4 7-8h11q-3 7-9 12-6 6-14 8zm-34-53h65q0-10-4-17-3-8-11-13-6-4-16-4a31 31 0 0 0-29 17q-4 8-5 17M777 143V17h11v126zM814 143V17h10v126z'/%3E%3Cpath fill='%236d7c75' d='M134 0h14l-17 28h-15z'/%3E%3Cpath fill='%23c0c7c5' d='M169 0h-33l59 92h33z'/%3E%3Cpath fill='%23bfd583' d='M76 36h37L36 156H0z'/%3E%3Cpath fill='%2389bb24' d='M127 36H79l77 120h48z'/%3E%3Cpath fill='%23056e30' d='M243 52h9l-20 30-4-6z'/%3E%3Cpath fill='%232ea935' d='M261 52h-17l35 56h17z'/%3E%3C/svg%3E");
}

#header {
  display: flex;
  isolation: isolate;
  gap: var(--gap-m);
  justify-content: space-between;
  padding: var(--padding-xxs) var(--width-xl);
  &.scrolled {
    box-shadow: 0 4px 40px 0 hsl(from var(--color-black) h s l / 0.16);
  }
  &.header_light {
    background: var(--color-white);
  }
  &.header_dark,
  &.header_banner {
    --color-text: var(--color-white);
    background: var(--color-dark-teal);
    color: var(--color-text);
    & #mobile_menu_button {
      & > div {
        border: 2px solid var(--color-white);
      }
    }
    & ul.main_menu,
    & ul.secondary_main_menu {
      & li {
        & a {
          --color-link: var(--color-white);
        }
      }
    }
    & .site_search {
      border: 1px solid var(--color-white);
      color: hsl(from var(--color-white) h s l / 0.6);
      background-color: hsl(from var(--color-white) h s l / 0);
      &::after {
        background: center / contain no-repeat
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 17 17'%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-width='.5' d='M6.3.3a6 6 0 1 0 0 12.1A6 6 0 0 0 6.3.3Zm0 11.5a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11Z'/%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-width='.5' d='M10.6 10.6a.3.3 0 0 0-.5 0v.4l5.6 5.6a.3.3 0 1 0 .5-.4z'/%3E%3C/svg%3E");
      }
      &:is(:hover, :focus) {
        background-color: hsl(from var(--color-white) h s l / 0.12);
      }
    }
  }
  &.header_banner {
    @media (width >= 1024px) {
      position: relative;
      isolation: isolate;
      &::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 100%;
        left: 0;
        width: 100%;
        height: 132px;
        max-height: 130px;
        z-index: -1;
        background: linear-gradient(
          180deg,
          var(--color-dark-teal) 1%,
          hsl(from var(--color-dark-teal) h s l / 0) 100%
        );
        pointer-events: none;
      }
      &.scrolled {
        box-shadow: none;
        &::before {
          height: 100%;
          background: var(--color-dark-teal);
          box-shadow: 0 4px 40px 0 hsl(from var(--color-black) h s l / 0.16);
          clip-path: inset(0px -100px -100px -100px);
        }
      }
    }
  }
  &.sticky {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    box-sizing: border-box;
    transition: all 0.4s ease;
  }
  & ul.main_menu,
  & ul.secondary_main_menu {
    & li {
      & a {
        --color-link: var(--color-dark-teal);
        display: block;
        font-weight: 400;
      }
    }
  }
  & .site_search {
    border: 1px solid var(--color-dark-teal);
    border-radius: var(--border-radius-max);
    padding: calc(var(--gap-s) / 2) var(--gap-s);
    font-size: 16px;
    color: hsl(from var(--color-dark-teal) h s l / 0.4);
    background-color: hsl(from var(--color-dark-teal) h s l / 0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-s);
    transition: background-color 0.4 ease;
    &::after {
      content: "";
      width: 16px;
      aspect-ratio: 1;
      background: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 17 17'%3E%3Cpath fill='%232b4151' stroke='%232b4151' stroke-width='.5' d='M6.3.3a6 6 0 1 0 0 12.1A6 6 0 0 0 6.3.3Zm0 11.5a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11Z'/%3E%3Cpath fill='%232b4151' stroke='%232b4151' stroke-width='.5' d='M10.6 10.6a.3.3 0 0 0-.5 0v.4l5.6 5.6a.3.3 0 1 0 .5-.4z'/%3E%3C/svg%3E");
    }
    &:is(:hover, :focus) {
      cursor: pointer;
      background-color: hsl(from var(--color-dark-teal) h s l / 0.04);
    }
  }
}