.off-canvas .tab-section-navigation  {
  --tab-section-padding-top: 1rem;
}

/* from https://bitbucket.org/abmi-ic/sonder-reporting/src/7a165dea11c6d236b8f79cbf8b9161fee4b5df09/src/library/tab-navigation/tab-navigation.css*/
/* see for functioning color changes: https://bitbucket.org/abmi-ic/web-ui-vue-profile/src/874cda52a7f8fef599058b02ef8cfb2bdbbe817b/src/lib/tab-navigation/tab-navigation.css */
.tab-section-navigation {
  --main-bg: #dcdcdc;
  --column-gap: 1lh;
  --border-color: var(--main-bg);
  --base-padding: 1rem;
  --link-light: #004e60;

  position: sticky;
  /* navSecondary's height */
  top: 79px;
  
  z-index: 9;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  background-color: #f6f6f6;
  border-block: 1px solid var(--border-color);
  margin-top: var(--column-gap);
  margin-bottom: var(--column-gap);
  transition: height ease-in-out 0.3s;
  
  /* overriding existing core-min.css styles */
  li + li, li {
    margin-top: 0;
  }
  p:not(:last-child) {
    margin-bottom: 0;
  }

  ul {
    list-style: none;
    margin: var(--tab-section-padding-top) auto 0 0;
    padding: var(--base-padding) 0;
    transition: margin 0.3s ease;
    width: 100%;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;

    background-color: #fff;
    position: relative;
    top: 100%;

    li > .button {
      --button-bg: transparent;
      --button-border: none;

      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      padding: 7px 1rem;
      width: auto;
      line-height: 1.3;
      background-color: #fff;

      &:hover {
        background-color: transparent;
        color: #fff;
        border-color: var(--link-light,#2d5016);
      }
    }
  }

  /* Mobile/tablet - collapsible menu */
  /* tailwind --max-lg */
  @media (max-width: 1023px) {
    background-color: #fff;
    
    ul {
      position: absolute;
      flex-direction: column;
      gap: 0.5rem;
      padding: 0;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;

      li {
        width: 100%;

        &:first-of-type {
          margin-top: 0.5rem;
        }
        &:last-of-type {
          margin-bottom: 0.5rem;
        }

        &.active > a,
        > a:hover {
          font-weight: 600;
          /*color: var(--button-main-color);*/
          /*background-color: transparent;*/
        }

        &.active > a,
        > a:hover {
          font-weight: 600;
          color: var(--button-main-color, #3273dc);
          background-color: transparent;
        }

        > .button {
          justify-content: flex-start;
          padding: 0.6rem 0;
          width: 100%;
          border: none;
          font-size: clamp(0.75rem, 0.818rem + 0.217vw, 0.875rem);

          &:hover {
            background-color: transparent;
            color: var(--link-light,#2d5016);
          }
        }
      }
    }

    .tab-activator {
      --button-bg: transparent;
      --button-border-width: 0px;

      width: 30px;
      height: 30px;
      padding: 0;
      margin: 15px 0;

      display: flex;
      justify-content: center;
      color: var(--pc-500);

      &::before {
        content: '';
        position: absolute;
        inset: 0;
      }

      svg {
        transition: transform ease-in-out 0.3s;
      }
    }

    .tab-nav-placeholder {
      color: var(--pc-500);
      margin: 0;
      transition: all ease-in-out 0.3s;
      display: flex;
      align-items:center;
    }

    &.tab-menu-open {
      ul {
        max-height: 100vh;
        border-block: 1px solid var(--border-color);
        transition: max-height 0.35s ease-in;
      }

      .tab-activator svg {
        transform: rotate(-180deg);
      }
    }

    .active {
      color: green;
    }

    .active > a,
    > a:hover {
      background-color: var(--link-light,#2d5016);
      color: #fff;
      border-color: var(--link-light,#2d5016);
      font-weight: 600;
    }
  }

  /* Large screens - simplified layout */
  @media (min-width: 1024px) {
    top: 0;
    flex-basis: auto;


    /* lets the tab to grow beyond the main padding so we have more space */
    margin: var(--column-gap) -4rem;
    box-sizing: border-box;

    .lg\:hidden {
      display: none;
    }

    .tab-nav-placeholder {
      display: none;
    }

    .tab-activator {
      display: none;
    }

    .active {
      color: green;
    }
    
    ul {
      padding-bottom: 1lh;
    }

    .active > a.button,
    > a:hover {
      background-color: var(--link-light,#2d5016);
      color: #fff;
      border-color: var(--link-light,#2d5016);
      font-weight: 600;
    }
  }
}

.bgLight .tab-section-navigation ul {
  background-color: #f6f6f6;
}

.tab-nav-section .tab-section {
  margin-top: var(--section-vertical-padding);
  + .tab-section {
    margin-top: var(--column-gap);
    padding-top: var(--column-gap);
    border-top: 1px solid var(--border-color);
  }
}

.tab-separator {
  background-color: rgb(195, 216, 58);
  height: 2px;
}

body > .wrapper {
  overflow: unset;
}

header.header[role="banner"] {
  z-index: 10;
}

@media (max-width: 1023px) {
  /* Sticky breaks if any ancestor has overflow hidden/auto. */
  body {
    overflow: unset;
  }
}

@media (max-width: 768px) {
  /* Sticky breaks if any ancestor has overflow hidden/auto. */
  main.content {
    overflow: unset;
  }
}

.hr-wetland {
  background-color: #158fab;
  height: 3px;
  margin: 1.75rem -4rem;
  
  @media (max-width: 1023px) {
    margin: 1.75rem -2rem;
  }
}