.entry-content .block-expandable-data-table {
  background-color: var(--wp--preset--color--bg-off-white);
  margin: 4rem auto;
  padding: 6rem 1rem 8rem;

  @media ( width >= 840px ) {
    padding: 6rem 2rem 8rem;
  }
}


.table-header {
  margin: 0 auto 4rem;
  max-width: var(--wp--custom--layout--narrow);
  text-align: center;

  @media ( width >= 840px ) {
    width: 80%;
  }

  & h2 {
    & strong {
      color: var(--wp--preset--color--darkorange);
      font-weight: 700;
    }
  }
  & p {
    color: var(--wp--custom--eyebrow--color);
    font-size: var(--wp--custom--eyebrow--font-size);
    font-weight: bold;
    margin: 0;
    text-transform: uppercase;
  }
}

.table {
  /* display: none; */
  margin: 0 auto;
  max-width: var(--wp--custom--layout--page);

  @media ( width >= 840px ) {
    display: block;
  }

  & header {
    display: none;

    @media ( width >= 840px ) {
      color: var(--wp--preset--color--bodytext-light);
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      text-align: center;

      & div:nth-child(1) {
        grid-column: 4 / span 1;
      }

      &.col-3 {
        grid-template-columns: repeat(6, 1fr);
      }

      &.col-4 {
        grid-template-columns: repeat(7, 1fr);
      }
    }
    
  }

  & .table-row {
    border-bottom: 1px solid gray;

    &:has(button[aria-expanded="true"]) {
      & .description-wrapper {
        height: auto;
        visibility: visible;
      }

      & button {
        rotate: 180deg;
      }

      & .pricing-checkmark {
        display: flex;
      }

      & .description-wrapper {
        margin-top: 2rem;
      }
    }

    &:nth-child(1) {
      border-top: 1px solid gray;
    }

    & .row {
      @media ( width >= 840px ) {
        display: grid;
        grid-template-columns: repeat(7, 1fr);

        &.col-3 {
          grid-template-columns: repeat(6, 1fr);
        }

        &.col-4 {
          grid-template-columns: repeat(7, 1fr);
        }
      }

      & > *:not(.name) {
        margin: 0 3rem 1rem;
        @media ( width >= 840px ) {
          margin: 0;
        }
      }
      
      
    }

    & .name {
      align-items: center;
      display: flex;
      
      grid-column: span 3;
      position: relative;

      @media ( width >= 840px ) {
        justify-content: space-between;
      }

      & p {
        font-weight: 600;
        order: 2;
        @media ( width >= 840px ) {
          order: 1;
        }
      }

      & button {
        background-color: var(--wp--preset--color--blue);
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        height: 32px;
        margin-right: 1rem;
        position: relative;
        order: 1;
        width: 32px;

        @media ( width >= 840px ) {
          margin-right: 4rem;
          order: 2;
        }

        &.no-description {

          @media ( width >= 840px ) {
            display: none;
          }
        }

        & > * {
          margin: auto;
        }

        & svg {
          bottom: 0;
          left: 0;
          height: 24px;
          position: absolute;
          pointer-events: none;
          right: 0;
          top: 0;
          width: 24px;

          @media ( width >= 840px ) {
            display: flex;
            position: relative;
          }
        }
      }
    }

    & .pricing-checkmark {
      display: none;
      flex-direction: column;

      @media ( width >= 840px ) {
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
        text-align: center;
      }
      

      & p {
        color: var(--wp--preset--color--bodytext-light);
        font-weight: 600;
        margin: 0;
        @media ( width >= 840px ) {
          display: none;
        }
      }

      & div > svg {
        display: flex;

        & > * {
          margin: auto;
        }
      }
    }

    & .description-wrapper {
      height: 0;
      
      visibility: hidden;
      @media ( width >= 840px ) {
        margin-top: 0;
        
        
        & .description {
          grid-column: span 4;
          
          & p {
            margin-top: 0;
          }
        }
      }
      
    }
  }
}

.table-footer {
  margin-top: 4rem;
  text-align: center;
  width: 100%;
}