.job-position {
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  .wp-block-accordion-heading__toggle-title {
    align-items: center;
    display: flex;

    img {
      margin-left: 8px;
    }
  }

  &:hover {
    background-color: #00665e;
    color: #eef6ee;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;

    hr {
      background-color: #eef6ee !important;
    }

    .job-details-row > div {
      background-color: #eef6ee !important;

      .job-details-clock img {
        content: url("../images/green-clock.svg") !important;
      }

      .job-details-pin {
        content: url("../images/green-pin.svg") !important;
      }

      p {
        color: #00665e !important;
      }
    }

    .wp-block-accordion-heading__toggle-title {
      img {
        filter: invert(100%) sepia(100%) grayscale(100%);
      }
    }
  }
}

.job-position:has(.is-open) {
  background-color: #00665e;
  color: #eef6ee;

  hr {
    background-color: #eef6ee !important;
  }

  .job-details-row > div {
    background-color: #eef6ee !important;

    .job-details-clock img {
      content: url("../images/green-clock.svg") !important;
    }

    .job-details-pin {
      content: url("../images/green-pin.svg") !important;
    }

    p {
      color: #00665e !important;
    }
  }

  .wp-block-accordion-heading__toggle-title {
    img {
      filter: invert(100%) sepia(100%) grayscale(100%);
      transform: rotate(180deg);
      transition: transform 0.3s ease-in-out;
    }
  }
}

.job-position {
  .wp-block-accordion-heading__toggle-title {
    img {
      filter: invert(0%) sepia(0%) grayscale(0%);
      transform: rotate(0deg);
      transition: transform 0.3s ease-in-out;
    }
  }
}

/* Accordion panel animation */
.wp-block-accordion-panel {
  display: block !important;
}

.wp-block-accordion-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);

  transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.3s ease;
}

.wp-block-accordion-item.is-open .wp-block-accordion-panel {
  margin-block-start: 0;
  max-height: 1000px;
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1200px) {
  .job-position {
    .job-heading-row {
      display: flex !important;
      flex-direction: column !important;
      align-items: start !important;
      gap: 16px !important;
    }
  }
}

@media (max-width: 1050px) {
  .job-position-section-group {
    .wp-block-columns {
      flex-wrap: wrap !important;

      .wp-block-column {
        flex-basis: 100% !important;

        .job-position {
          margin-left: 0 !important;
          max-width: 100% !important;

          .job-heading-row {
            display: flex !important;
            flex-direction: row !important;
            align-items: start !important;
            gap: 16px !important;
          }
        }
      }
    }
  }
}

@media (max-width: 750px) {
  .job-position-section-group {
    .wp-block-columns {
      flex-wrap: wrap !important;

      .wp-block-column {
        flex-basis: 100% !important;

        .job-position {
          margin-left: 0 !important;
          max-width: 100% !important;

          .job-heading-row {
            display: flex !important;
            flex-direction: column !important;
            align-items: start !important;
            gap: 16px !important;
          }
        }
      }
    }
  }
}