// Foundation Framework component overrides
// Styles for Foundation tabs, accordions, and panels used in shortcodes

#main-content {

  // Reset list margins for Foundation components
  ul.accordion,
  ul[role="tablist"] {
    margin-left: 0;
    margin-bottom: 0;
  }

  // Tab navigation styling
  ul.tabs {
    margin-bottom: 0;

    li {
      border: rem-calc(1) solid $border;
      transition: border-color 0.2s ease-in-out;

      &:hover,
      &.is-active {
        border-color: $border-dark;
      }

      // Improve accessibility with focus styles
      &:focus-within {
        outline: rem-calc(2) solid $primary-color;
        outline-offset: rem-calc(2);
      }

      a {
        padding: rem-calc(12 16);
        text-decoration: none;
        color: $body-font-color;

        &:hover {
          color: $primary-color;
        }
      }
    }
  }

  // Tab content panels
  .tabs-content {
    padding: rem-calc(16);
    margin-bottom: rem-calc(32);
    border-top: 0;
    border: rem-calc(1) solid $border;
    border-radius: 0 0 $border-radius-base $border-radius-base;
    background-color: $white;

    .tabs-panel {
      padding: 0;

      // Ensure consistent spacing for content within panels
      > *:first-child {
        margin-top: 0;
      }

      > *:last-child {
        margin-bottom: 0;
      }
    }
  }

  // Accordion styling improvements
  ul.accordion {
    .accordion-item {
      border-bottom: rem-calc(1) solid $border;

      &:last-child {
        border-bottom: none;
      }

      .accordion-title {
        padding: rem-calc(16);
        background-color: $ash;
        border: none;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out;

        &:hover {
          background-color: darken($ash, 5%);
        }

        &:focus {
          outline: rem-calc(2) solid $primary-color;
          outline-offset: rem-calc(-2);
        }

        &::before {
          margin-right: rem-calc(8);
        }
      }

      .accordion-content {
        padding: rem-calc(16);
      }
    }
  }
}
