/* Mission subsite */

.contenttype-mission_tool {
  .styled-group {
    .rast_steps.widget {
      .list .item {
        padding: 0 0 0.8em 0;
      }

      .list .item:last-child {
        padding-bottom: 0;
      }
    }
  }
}

body.view-viewview.contenttype-subsite.section-mission .block.gridBlock .image {
  height: 260px;
}

body.view-viewview.contenttype-subsite.section-mission .block.gridBlock img {
  height: 260px;
  object-fit: contain;
}

body.subsite-mkh {
  --text-color-secondary: @pineGreen;
  --border-color-secondary: @pineGreen;

  &.subsite-root {
    .content-area {
      padding: 0 !important;
      margin-top: 0 !important;
    }

    #page-document {
      > div.styled-group:nth-child(2) {
        margin-top: 0;
      }
    }
  }

  .subfooter .footer-description {
    margin-top: 3em;

    p {
      font-size: 1.125rem;
      font-weight: 600;
    }
  }

  .ui.menu .green.active.item,
  .ui.green.menu .active.item {
    border-color: @green-1 !important;
    color: @green-1 !important;
  }

  .main-menu:not(.inverted) {
    .item a {
      color: @blue-1;
    }

    .item a:hover {
      border-color: @green-1;
    }

    .item.active a {
      border-color: @green-1;
      color: @green-1;
    }
  }

  .search-action {
    background-color: @green-1;
  }

  .eea.banner {
    background: @green-1;
  }

  .ui.statistics:not(.inverted) .ui.statistic .slate.secondary {
    color: @pineGreen;
  }

  .ui.secondary.pointing.menu .active.item {
    color: @pineGreen;
    border-color: @pineGreen;
  }

  #mega-menu {
    .ui.accordion .title i,
    .ui.accordion button.title i {
      color: @white;
    }
  }

  footer,
  .burger-action,
  #search-box,
  #mega-menu,
  #mega-menu .ui.accordion .content {
    background: @subsiteBackgroundGradient;
  }

  /* Mission signatory profile */
  .signatory-profile {
    .ui.items.items-group {
      margin: 2em 0;
    }

    ul > li > ul {
      margin-top: 0.3em;
      margin-bottom: 1em;
    }

    .sectors-introduction {
      margin-top: 3em;
    }

    .funding-sources,
    .provide-section {
      margin-top: 1em;
    }

    .action-tab {
      .ui.items.items-group {
        margin: 1em 0;

        .item {
          .content {
            font-size: 16px;
            max-width: 300px;
          }
        }

        .ui.image {
          width: 35px;
          height: 35px;
        }
      }
    }

    .ui.inverted.button.back-to-map {
      margin-bottom: 2em;
      box-shadow: 0px 0px 0px 2px @pineGreen inset !important;
      color: @pineGreen;

      &:hover,
      &:active,
      &:focus,
      &:focus-visible {
        background-color: @pineGreen;
      }
    }

    .funding-sources {
      span {
        float: left;
        margin-right: 5px;
      }
    }

    .section-wrapper-info {
      display: flex;
      justify-content: space-between;
      font-size: 14px;

      .date {
        position: relative;
        top: 5px;
      }
    }

    .description > p {
      margin-bottom: 1em;
    }

    .ui.accordion {
      .content.active {
        padding: 1rem 1rem !important;
      }
    }

    .tab-section-wrapper {
      padding: 1.5em;
      margin: 2em 0;
      background-color: #f9f9f9;

      &.assessment {
        .ui.accordion {
          margin-top: 1em;

          .content.active {
            padding: 1rem 1rem !important;
            background-color: @white;
          }

          .ui.segment.border {
            border: 1px solid #e6e7e8;
          }
        }
      }
    }

    .section-wrapper {
      padding: 1em;
      margin: 1em 0;
      background-color: #f9f9f9;

      .section-title {
        display: flex;
        align-items: baseline;
        gap: 0.5em;
      }

      .ui.accordion {
        margin-top: 1em;

        .content.active {
          padding-bottom: 1rem !important;
        }
      }

      .small-label {
        font-size: 1em;
      }
    }

    .section-number {
      color: @pineGreen;
    }

    strong.date {
      margin-right: 0.5em;
    }

    .items-group {
      display: block !important;

      @media only screen and (min-width: 900px) {
        &.column {
          column-count: 2;
          column-gap: 15px;
        }
      }

      .item {
        padding: 0.5em 0 !important;
        break-inside: avoid-column;
        align-items: center;

        .ui.image {
          width: 40px;
          height: 40px;
        }

        .content {
          font-size: 18px;
          padding-left: 0.6rem !important;
          max-width: 300px;
        }
      }
    }

    .footer-text {
      margin-top: 3em;
      font-size: 15px;
    }
  }
}

/* Latest news updates, Latest events */
body.subsite-root.section-mission {
  div.columns-view {
    div.block.listing.default {
      div.items {
        div.listing-item {
          border: none;
          margin: 0;
        }

        .listing-body {
          position: relative;
          padding-left: 2em;

          &:before {
            position: absolute;
            top: -5px;
            left: 0;
            color: inherit;
            content: '\ea6c';
            font-family: remixicon !important;
            font-size: 1.5em;
          }
        }
      }
    }

    div.block.listing.summary {
      .u-item {
        padding-top: 0;
        padding-bottom: 20px;
        border: none;
      }

      .listing-header {
        font-size: @h4;
      }

      .listing-body.has-icon i.icon {
        margin-top: 1px;
      }
    }

    div.block.listing.default {
      div.listing-item {
        padding-bottom: 0.5em;

        h4 {
          margin-bottom: 0.5em;
        }
      }
    }
  }
}