:root {
  --navbar-height: 190px;
}

@keyframes expand {
  from {
    max-height: 2px;
  }
  to {
    max-height: 100vh;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.tabbed-content {
  flex: 1 0 100%; /* May not be necessary on live site */
  padding-block: 2.5rem !important;
  scroll-margin: var(--navbar-height);
  .inner {
    max-width: 1500px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .tabs {
    .active-tab {
      position: relative;
      padding: 1rem 0;
      border-top: 2px solid #2d5636;
      text-align: center;
      background-color: #f9f9f9;
      color: #2d5636;
      font-family: inherit;
      font-weight: 600;
      line-height: 1.5;
      text-transform: uppercase;
      cursor: pointer;
      #active-tab-content {
        margin: 0;
        width: calc(100% - 24px);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      &:after {
        content: "";
        position: absolute;
        top: calc(3.5rem / 2 - 4px);
        right: 8px;
        border-top: 7px solid #2d5636;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        transition: rotate 0.2s;
        pointer-events: none;
      }
      &.active {
        &:after {
          rotate: 180deg;
        }
      }
    }
    .tabbed-content-labels {
      background-color: #fafafa;
      padding-inline: 1rem !important;
      margin: 0 auto 1rem;
      .tab-link {
        appearance: none;
        padding: 0;
        border: none;
        background: transparent;
        color: #555;
        font-family: inherit;
        font-weight: 600;
        line-height: 1.5;
        text-transform: uppercase;
        &:is(button) {
          cursor: pointer;
        }
        &.active {
          color: #2d5636;
        }
      }
    }
    .tabbed-content-panels {
      max-width: 48rem;
      margin-inline: auto;
      display: flex;
      overflow: hidden;
      .tab-panel {
        position: absolute;
        flex: 1 0 100%;
        text-align: center;
        opacity: 0;
        transition: opacity 0.2s;

        &.active {
          position: relative;
          animation: fadeIn 0.2s ease forwards;
        }
        a {
          font-size: inherit;
        }
        p:first-of-type {
          margin-top: 0;
        }
        p:last-of-type {
          margin-bottom: 0;
        }
        ol,
        ul {
          margin-left: 0;
          padding-left: 0;
          li {
            width: fit-content;
            margin: auto;
          }
        }
      }
    }
  }
}

@media (min-width: 1700px) {
  :root {
    --navbar-height: 170px;
  }
}

@media (min-width: 992px) {
  .tabbed-content {
    .tabs {
      .active-tab {
        display: none;
      }
      .tabbed-content-labels--wrapper {
        position: sticky;
        top: 187px;
        z-index: 1;
        &:before {
          content: "";
          position: absolute;
          left: 0;
          bottom: 100%;
          width: 100%;
          height: 100%;
          background-color: #f9f9f9;
          z-index: -1;
        }
      }
      .tabbed-content-labels {
        display: flex;
        /* width: fit-content; */
        width: 100%;
        justify-content: center;
        margin: 0 auto 3rem;
        padding-block: 1rem;
        border-top: 2px solid #2d5636;
        border-bottom: 2px solid #2d5636;
        .tab-link {
          font-size: 1.1rem;
          font-weight: 400;
          &[aria-selected=true] {
            font-weight: 800;
          }
          &:not(:last-child):after {
            content: "";
            height: 100%;
            width: 3px;
            background-color: #d1b85c;
            padding: 0 1px 0 2px;
            margin: 0 0.6rem;
          }
        }
      }
    }
  }
}

@media (min-width: 1200px) {
  .tabbed-content {
    .tabs {
      .tabbed-content-labels {
        .tab-link {
          font-size: 1.25rem;
        }
      }
    }
  }
}

@media (max-width: 991px) {
  :root {
    --navbar-height: 148px;
  }

  .tabbed-content {
    scroll-margin: var(--navbar-height);
    .tabs {
      position: relative;
      &:has(.tabbed-content-labels--wrapper.sticky) {
        padding-top: 3.5rem;
      }
      .tabbed-content-labels--wrapper {
        position: relative;
        margin-bottom: 1rem;
        z-index: 1;
        &.sticky {
          position: fixed;
          top: var(--navbar-height);
          width: 90%;
          z-index: 2;
        }
      }
      .active-tab {
        &.active + .tabbed-content-labels {
          animation: expand 1.2s ease forwards;
        }
      }
      .tabbed-content-labels {
        position: absolute;
        width: 100%;
        max-height: 2px;
        display: flex;
        flex-direction: column;
        border-bottom: 2px solid #2d5636;
        background-color: #f9f9f9;
        overflow: hidden;

        .tab-link {
          width: 100%;
          display: block;
          padding-block: 6px;
          width: 100%;
          color: #2d5636;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          &.active {
            background-color: #e6e6e6;
          }
        }
      }
    }
  }
}

@media (min-width: 1700px) {
  .tabbed-content {
    .tabs {
      .tabbed-content-labels--wrapper {
        position: sticky;
        top: 169px;
      }
    }
  }
}