// ==========================================================================
// Nav-tabs Block
// Vertical tabbed content: nav (left) | panel (right)
//
// Follows WAI-ARIA Tabs Pattern.
// Bootstrap's Tab JS manages aria-selected, tabindex, and keyboard nav.
// ==========================================================================

.b-nav-tabs {
  // Spacing handled by l-section utility classes
}

.b-nav-tabs__header {
  // .section-title {
  //   color: $primary;
  //   font-size: $block-title-font-size-md;
  //   font-weight: $font-weight-extrabold;

  //   @include media-breakpoint-up(lg) {
  //     font-size: $block-title-font-size-lg;
  //   }
  // }
}

// ==========================================================================
// Layout
// ==========================================================================

.b-nav-tabs__layout {
  align-items: flex-start;
}

// ==========================================================================
// Tab navigation (left column)
// ==========================================================================

.b-nav-tabs__nav {
  display: flex;
  flex-direction: column;
  // gap: $spacer * 0.375;

  // On mobile: scroll horizontally before stacking to columns
  @include media-breakpoint-down(lg) {
    --hks-nav-link-padding-y: 1.5rem;
    --hks-nav-link-padding-x: 3rem;
    margin-bottom: 3rem;
  }
  @include media-breakpoint-down(md) {
    --hks-nav-link-padding-x: 1.5rem;
    --hks-nav-link-padding-y: 1.25rem;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    // gap: $spacer * 0.5;
    padding-bottom: $spacer * 0.5;
    margin-bottom: 2rem;
    // Subtle scroll hint
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}

.b-nav-tabs__tab {
  // Button reset (Bootstrap .nav-link has border: 0 and display: block — override both)
  appearance: none;
  cursor: pointer;
  padding-left: 1.25rem;
  // Layout (Bootstrap .nav-link is display: block — override to flex)
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: $spacer * 0.5;
  width: 100%;
  text-align: left;
  white-space: nowrap;

  // Spacing — meets WCAG 2.2 §2.5.8 minimum target size (≥ 24px height)
  // Kept here (not global) to avoid affecting main navigation padding
  // padding: $spacer * 0.625 $spacer * 0.875;

  // Chevron via pseudo-element
  &::after {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-right: 2px solid $primary;
    border-top: 2px solid $primary;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  // Hover (color handled by $nav-link-hover-color variable)
  &:hover {
    background-color: $primary;
    color: #fff;
  }

  // Active state
  &:hover,
  &.active,
  &[aria-selected="true"] {
    &::after {
      opacity: 1;
      border-right: 2px solid #fff;
      border-top: 2px solid #fff;
    }
  }

  // WCAG 2.2 §2.4.11 Focus Appearance — visible, high-contrast outline
  @include focus-visible();
  &:focus-visible {
    border-color: transparent;
  }

  // Mobile: auto width so tabs sit side by side
  @include media-breakpoint-down(md) {
    width: auto;
    flex-shrink: 0;

    &::after {
      display: none; // chevron only makes sense in vertical layout
    }
  }
}

// ==========================================================================
// Tab panels (right column)
// ==========================================================================

.b-nav-tabs__content {
  // Stack all panels in the same grid cell so the container height always
  // equals the tallest panel. Inactive panels use visibility (not display:none)
  // so they still contribute to the layout height — no layout shift on switch.
  display: grid;
  @include media-breakpoint-up(lg) {
    padding-left: 2rem;
  }
  @include media-breakpoint-up(xl) {
    padding-left: 3rem;
  }
  @include media-breakpoint-up(xxl) {
    padding-left: 4rem;
  }
  .tab-pane {
    grid-row: 1;
    grid-column: 1;
    display: block !important; // override Bootstrap's display: none
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;

    &.show.active {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }
  }
}

.b-nav-tabs__panel {
  @include focus-visible();
  &:focus-visible {
    border-radius: $border-radius;
  }
}

// ==========================================================================
// Panel content
// ==========================================================================

.b-nav-tabs__body {
  // RTE output
  > *:first-child {
    margin-top: 0;
  }

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

.b-nav-tabs__image-wrap {
  position: relative;
  &--above {
    margin-bottom: $spacer * 1.25;
  }

  &--below {
    margin-top: $spacer * 1.25;
  }
}

.b-nav-tabs__image {
  display: block;
  width: 100%;
}