// ==========================================================================
// Navigation Component
// Only custom overrides — Bootstrap handles navbar, nav-link, dropdown, etc.
// ==========================================================================
.c-nav {
  --hks-navbar-padding-y: 0.5rem;
  // Mirrors --hks-layout-padding-x; at xl+ container-edge takes over with 90% width
  --hks-navbar-padding-x: var(--hks-layout-padding-x);
  --hks-navbar-color: #{$primary};
  @include media-breakpoint-up(sm) {
    --hks-navbar-padding-y: 0.5rem;
  }
  @include media-breakpoint-up(md) {
    --hks-navbar-padding-y: 1rem;
  }
  @include media-breakpoint-up(lg) {
  }

  @include media-breakpoint-up(xxl) {
    // --hks-navbar-padding-x: 0;
    --hks-navbar-padding-y: 1.5rem;
  }
  @media (min-width: 2000px) {
    --hks-navbar-padding-x: 0;
  }
  @include media-breakpoint-down(sm) {
    --hks-navbar-padding-x: 0.25rem;
  }
  @media (max-width: 400px) {
    --hks-navbar-padding-x: 0.25rem;
  }
  @include media-breakpoint-between(xl, xxl) {
    --hks-layout-padding-x: 1rem;
  }

  // container-edge inside nav: navbar's own padding-x handles the side spacing,
  // container-edge is only used here for the xl+ 90%/max-width centering.
  .container-edge {
    padding-inline: 0;
  }
  @include media-breakpoint-up(1800) {
    --hks-navbar-padding-y: 1.5rem;
  }

  & > .container-fluid {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
    max-width: 1600px;
  }

  &.navbar-expand-xl {
    // Padding on the inner list (not the collapse container) so it's
    // included in the animated height and collapses smoothly.
    .c-nav__list {
      @include media-breakpoint-down(xl) {
        padding-top: 2rem;
        padding-bottom: 2rem;
      }
      @include media-breakpoint-between(xl, xxl) {
        gap: 1.5rem;
      }
    }
  }
  &__brand {
    --hks-navbar-brand-padding-y: 0.5rem;
  }
  // Logo sizing
  &__logo {
    width: 120px;
    max-height: 100%;

    @include media-breakpoint-up(sm) {
      width: 140px;
    }
    @include media-breakpoint-up(lg) {
      // width: 150px;
    }
    @include media-breakpoint-up(xl) {
      width: 150px;
    }
    @include media-breakpoint-up(xxl) {
      width: 160px;
    }
    @include media-breakpoint-up(1600) {
      // width: 170px;
    }
    @media (max-width: 380px) {
      width: 110px;
    }
  }

  &__list {
    align-items: flex-start;
    gap: 1.25rem;
    @media (min-width: 400px) {
      padding-left: 2rem;
    }
    @include media-breakpoint-up(xl) {
      gap: 2rem;
    }
    @include media-breakpoint-up(1800) {
      gap: 3rem;
    }
  }

  &__item {
    margin-bottom: 0;

    &--dropdown {
      display: flex;
      align-items: center;
      flex-wrap: wrap; // allow dropdown-menu to wrap below

      // Hover anywhere on dropdown item styles both link and toggle
      &:hover,
      &:focus-within {
        > .c-nav__link {
          color: $color-hover;

          // Extend underline to include toggle width, minus padding-x
          &::after {
            width: calc(
              100% - 1 * var(--hks-navbar-nav-link-padding-x) + 1.5rem
            );
          }
        }
        > .c-nav__dropdown-toggle {
          color: $color-hover;
        }
      }

      // Active state - extend underline through toggle and color toggle
      &.active {
        > .c-nav__link {
          font-weight: $font-weight-bold;

          &::after {
            width: calc(
              100% - 1 * var(--hks-navbar-nav-link-padding-x) + 1.5rem
            );
          }
        }
        > .c-nav__dropdown-toggle {
          color: $color-hover;
        }
      }
    }
  }

  &__link {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    line-height: 1.2;
    padding-block: 0.5rem;
    padding-inline: var(--hks-navbar-nav-link-padding-x);
    position: relative;
    transition: color 0.2s ease;
    // color: $primary;
    // text-transform: uppercase;
    @include media-breakpoint-between(xl, xxl) {
      font-size: 0.875rem;
      padding-block: 0.75rem;
    }
    @include media-breakpoint-up(1600) {
      font-size: 1rem;
    }
    // Underline indicator (hidden by default)
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: calc(var(--hks-navbar-nav-link-padding-x) * 0.5);
      width: 0;
      height: 3px;
      background-color: currentColor;
      transition: width 0.25s ease;
    }

    // Hover: show underline spanning only content area (excludes padding-x)
    &:hover::after {
      width: calc(100% - 1 * var(--hks-navbar-nav-link-padding-x));
    }
  }

  &__dropdown-item {
    margin-bottom: 0;
    @include media-breakpoint-down(xl) {
      --hks-dropdown-item-padding-x: 1.25rem;
      --hks-dropdown-item-padding-y: 0.75rem;
    }
  }

  // Split-button dropdown toggle (chevron)
  &__dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--hks-navbar-color);
    cursor: pointer;
    transition:
      color 0.2s ease,
      transform 0.2s ease;
    @include focus-visible;

    &:hover {
      transform: scale(1.1);
    }

    // Chevron icon
    &::after {
      content: "";
      display: inline-block;
      width: 0.5em;
      height: 0.5em;
      border-right: $hks-stroke-current-2;
      border-bottom: $hks-stroke-current-2;
      transform: rotate(45deg);
      margin-top: -0.15em;
    }

    &[aria-expanded="true"]::after {
      transform: rotate(-135deg);
      margin-top: 0.15em;
    }
  }

  // Dropdown menu items
  &__dropdown-link {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    transition:
      color 0.15s ease,
      background-color 0.15s ease;
    @include focus-visible($offset: -2px);

    &:hover {
      color: $color-hover;
      background-color: transparent;
    }

    // Active dropdown item
    &.active,
    &[aria-current="page"] {
      color: $color-hover;
      background-color: transparent;
    }
  }

  &__actions {
    margin-left: auto;
    gap: 0;
    @media (min-width: 400px) {
      gap: 0.5rem;
    }
    @include media-breakpoint-up(xl) {
      margin-left: 2rem;
      gap: 0;
    }
    @include media-breakpoint-up(xxl) {
      margin-left: 3rem;
      gap: 0.5rem;
    }
    @media (max-width: 380px) {
      .btn-icon-only {
        padding: 0.5rem;
      }
    }
  }

  &__mobile-cta {
    justify-content: flex-end;
    width: 100%;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    @media (min-width: 400px) {
      padding-right: 0.5rem;
    }
  }

  // Custom hamburger icon (replaces Bootstrap's default toggler-icon)
  &__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    width: 2.75rem;
    height: 2.75rem;
    @include focus-visible;
    margin-left: 0.5rem;
    @media (min-width: 400px) {
      margin-left: 1rem;
    }
    @include media-breakpoint-up(sm) {
      margin-left: 1.5rem;
    }
    @media (max-width: 380px) {
      margin-left: 0;
    }
  }

  &__toggle-icon {
    position: relative;
    display: inline-block;
    width: 1.75rem;
    height: 1.65px;
    background-color: var(--hks-body-color);
    transition: background-color 0.2s ease;

    &::before,
    &::after {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: 1.65px;
      background-color: var(--hks-body-color);
      transition: transform 0.2s ease;
    }

    &::before {
      top: -7.5px;
    }

    &::after {
      top: 7.5px;
    }
  }
  .c-nav__list .dropdown-menu {
    // Mobile: static flow so it appears below the nav item, not floating right
    @include media-breakpoint-down(xl) {
      position: static;
      float: none;
      width: 100%;
      box-shadow: none;
      border: none;
      padding-left: 0.5rem;
    }

    @include media-breakpoint-up(xl) {
      animation: dropdownFadeIn 0.2s ease;
      box-shadow: $box-shadow-lg;

      @media (prefers-reduced-motion: reduce) {
        animation: none;
      }
    }
  }
}
// Animate hamburger to X when menu is open
.navbar-toggler[aria-expanded="true"] .c-nav__toggle-icon {
  background-color: transparent;

  &::before {
    transform: translateY(7.5px) rotate(45deg);
  }

  &::after {
    transform: translateY(-7.5px) rotate(-45deg);
  }
}

// Active page state
.c-nav .nav-link[aria-current="page"],
.c-nav .nav-item.active > .nav-link {
  color: $color-hover;
  font-weight: $font-weight-bold;

  &::after {
    width: calc(100% - 1 * var(--hks-navbar-nav-link-padding-x));
  }
}

// Active dropdown: extend underline through toggle, minus padding-x
.c-nav .nav-item.active.c-nav__item--dropdown > .nav-link::after {
  width: calc(100% - 1 * var(--hks-navbar-nav-link-padding-x) + 1.5rem);
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// ---------------------------------------------------------------------------
// Language Selector
// ---------------------------------------------------------------------------
.c-nav {
  &__lang-flag {
    flex-shrink: 0;
    width: 26px;
    height: 17px;
    border-radius: 0;
  }

  // Always a floating dropdown — never collapsed into static flow
  &__lang-menu {
    position: absolute;
    width: auto;
  }

  // Dropdown items — mirrors c-nav__dropdown-link
  &__lang-item {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    transition:
      color 0.15s ease,
      background-color 0.15s ease;
    @include focus-visible($offset: -2px);

    &:hover:not(.disabled) {
      color: $white;
      background-color: $primary;
    }
  }
}

// ---------------------------------------------------------------------------
// Search
// ---------------------------------------------------------------------------

.c-nav {
  &__search {
    position: relative;

    @include media-breakpoint-down(md) {
      position: static;
    }
  }

  &__search-panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: $zindex-dropdown;
    width: 35rem;
    background-color: var(--hks-body-bg);
    padding: 0.75rem 1.5rem;

    // Animation: fade + slide down
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    box-shadow: $box-shadow-lg;
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s;

    // Open state
    .c-nav__search.is-open & {
      opacity: 1;
      transform: translateY(0);
      visibility: visible;
    }
    @include media-breakpoint-up(md) {
      padding: 1.5rem 2rem 1.5rem 2rem;
    }
    // Mobile: full width below entire nav
    @include media-breakpoint-down(md) {
      left: 0;
      right: 0;
      width: auto;
      padding: $spacer * 0.75 var(--hks-layout-padding-x);
    }
  }

  &__search-form {
    display: flex;
    gap: $spacer * 0.5;

    @media (max-width: 449.98px) {
      flex-direction: column;
      align-items: stretch;

      .btn {
        width: 100%;
      }
    }
  }
}