/* --------------- START Custom Header --------------- */
#view-header {
  --side-padding: 20px;
  --explore-translate-icon-color: #9CA3AF;
  --search-icon-bg-color: #f3f4f6;
}

#view-header #view-menu .link-image {
  border-radius: 50%;
  margin-bottom: .5em;
}

#view-header .button-action-content .menu-field {
  text-transform: none;
}

#languagebutton .button-action-content {
  display: flex;
  align-items: center;
  gap: 5px;

  .menu-field {
    padding-inline: 0;
  }

  & svg {
    display: none;
  }

  &::before {
    content: '';
    width: 18px;
    height: 18px;
    background-color: var(--explore-translate-icon-color, #9CA3AF);
    display: block;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M9 1.5C4.8645 1.5 1.5 4.8645 1.5 9C1.5 13.1355 4.8645 16.5 9 16.5C13.1355 16.5 16.5 13.1355 16.5 9C16.5 4.8645 13.1355 1.5 9 1.5ZM14.9482 8.25H12.8752C12.7827 6.60843 12.3235 5.00847 11.5312 3.56775C12.4494 3.99679 13.2441 4.65105 13.8416 5.46968C14.439 6.28832 14.8197 7.24474 14.9482 8.25ZM9.3975 3.02025C10.1737 4.04325 11.2177 5.85525 11.3678 8.25H6.7725C6.87675 6.303 7.518 4.479 8.61075 3.0195C8.73975 3.012 8.86875 3 9 3C9.13425 3 9.2655 3.012 9.3975 3.02025ZM6.516 3.54525C5.778 4.9635 5.352 6.5715 5.2725 8.25H3.05175C3.18133 7.23588 3.56748 6.27158 4.17367 5.44831C4.77986 4.62505 5.58606 3.97004 6.516 3.54525ZM3.05175 9.75H5.28225C5.38425 11.5343 5.781 13.1085 6.44925 14.4225C5.53589 13.992 4.7458 13.3381 4.15197 12.5215C3.55814 11.7048 3.17975 10.7516 3.05175 9.75ZM8.5875 14.9797C7.53675 13.7062 6.9165 11.922 6.78075 9.75H11.3655C11.2095 11.8298 10.5278 13.647 9.41325 14.979C9.27675 14.988 9.14025 15 9 15C8.8605 15 8.72475 14.988 8.5875 14.9797ZM11.5958 14.4008C12.312 13.0553 12.7493 11.475 12.864 9.75H14.9475C14.8209 10.7432 14.448 11.689 13.8626 12.5013C13.2772 13.3135 12.4979 13.9665 11.5958 14.4008Z' fill='%239CA3AF'/%3E%3C/svg%3E");
    mask-repeat: no-repeat no-repeat;
    mask-position: center center;
    mask-size: contain;
  }
}

#menubutton .hamburger path {
  fill: var(--explore-translate-icon-color, #9CA3AF);
}

@media only screen and (min-width: 980px) {
  #view-header {
    --side-padding: 32px;
  }

  #app #view-header .right {
    flex: 1;

    .right-left-menu {
      flex: 1;
      align-items: center;
    }

    .schools-menu-container {
      order: -1;
      margin-right: auto;
      margin-left: 20px;
    }
  }

  #view-header #schoolsbutton {
    background-color: var(--secondary-color);
    color: var(--secondary-color-contrast);
    padding: 13px 10px;
    height: 100%;
    box-sizing: border-box;
    border-radius: 50vw;

    .button-action-content {
      display: flex;
      align-items: center;
      gap: 5px;

      &::before {
        content: '';
        width: 20px;
        height: 20px;
        display: block;
        background-color: var(--secondary-color-contrast);
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3E%3Cpath d='M10.2694 2.25898L11.9181 1.30189L9.84434 0.5V3.53513H10.2694L10.2694 2.25898Z' fill='white'/%3E%3Cpath d='M4.2605 8.5585H16.12V13.1319H4.2605V8.5585Z' fill='white'/%3E%3Cpath d='M12.3967 3.748H7.87663V8.26803L12.3967 8.26889V3.748ZM10.1368 7.5237C9.2995 7.5237 8.62091 6.84511 8.62091 6.00786C8.62091 5.1706 9.2995 4.49202 10.1368 4.49202C10.974 4.49202 11.6526 5.1706 11.6526 6.00786C11.6526 6.84511 10.974 7.5237 10.1368 7.5237Z' fill='white'/%3E%3Cpath d='M0.857178 13.3735V20.5H6.08246C6.22042 18.334 8.01562 16.6181 10.2169 16.6181C12.4182 16.6181 14.2133 18.334 14.3513 20.5H20.0551L20.0542 13.3735H0.857178Z' fill='white'/%3E%3C/svg%3E");
        mask-repeat: no-repeat no-repeat;
        mask-position: center center;
        mask-size: contain;
        margin-left: 5px;
      }
    }

    .menu-field {
      color: currentColor !important;
    }

    svg path {
      fill: var(--secondary-color-contrast)
    }
  }

  #view-header #schools-menu-sm1 {
    max-width: calc(100% - 20px);
    left: 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }

  #cms-header .logo {
    height: 52px;
  }

  #app:has(#home):has(#cms-gallery) #cms-header {
    padding-inline: var(--header-side-padding, var(--side-padding));
    box-sizing: border-box;
  }

  #app:has(#home):has(#cms-gallery) #cms-header #h1 {
    box-shadow: none;
  }

  #app:has(#home):has(#cms-gallery) #cms-header {
    position: absolute;
    top: var(--top-header-padding, 20px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }

  #app:has(#home):has(#cms-gallery) #view-header #h1 .header-container {
    padding-block: 10px;
    border-radius: 50vw;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
  }

  #app:has(#home):has(#cms-gallery) #view-header #h1 .left {
    margin-left: 15px;
  }

  #app #h1 .right {
    padding: 0;

    .right-right-menu {
      align-items: center;
      margin-bottom: 0;
    }
  }

  #app .search.button-action {
    background-color: var(--search-icon-bg-color, #f3f4f6);
    border-radius: 50vw;
    padding: 8px;
  }

  #app:has(#home):has(#cms-gallery) .search.button-action {
    margin-right: 15px;
  }
}

@media only screen and (min-width: 1280px) {
  #view-header .school-info .org-name {
    font-size: 21px;
  }
}

/* --------------- END Custom Header --------------- */