/**
 * @file
 * Styles for the header menu and sub-menu interactions.
 *
 * This file defines the CSS for the primary navigation menu, including
 * sub-menu toggles, hover effects, and responsive adjustments.
 */

/* Styles for the top-level menu (menu--level-1). */
.header__menu .menu--level-1 {
  gap: var(--spacing-3xl);
}

/* Styles for menu items that contain sub-menus. */
.header__menu .menu__item--has-children {
  position: relative;
}

/* Hides all nested sub-menus by default. */
.header__menu .menu__item--has-children>.menu {
  display: none;
}

/* General menu animations and link styles for header and top menus. */
.header__menu,
.navigation--meta-menu {
  .menu__item {
    position: relative;

    .menu__link {
      text-decoration: none;
      color: var(--color-white);
      display: block;

      &:hover {
        color: var(--color-primary);
        text-decoration: none;
      }

      &::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: var(--color-white);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease-in-out;
      }

      &:hover::before {
        transform: scaleX(1);
        background-color: var(--color-primary);
      }

      /* Styles for active (current) menu links. */
      &.is-active,
      &[aria-current="page"],
      &.menu__link--active-trail {
        color: var(--color-primary);
        text-decoration: none;
        cursor: pointer;
      }

      &.is-active::before,
      &[aria-current="page"]::before,
      &.menu__link--active-trail::before {
        transform: scaleX(1);
        background-color: var(--color-primary);
      }
    }
  }
}

/* Styles for footer and resources menus. */
.navigation--footer,
.navigation--resources {
  .menu__item {
    .menu__link {
      &:hover {
        color: var(--color-white);
      }

      &:hover::before {
        background-color: var(--color-white);
      }
    }
  }
}

/* ------------------------------------------------------------------------------------------------------------------------------------------- */

/* Desktop-specific styles (960px and wider). */
@media (min-width: 960px) {

  /* Positions sub-menus absolutely on desktop. */
  .header__menu .menu__item--has-children>.menu {
    position: absolute;
  }

  /* Displays sub-menus on hover or when expanded by JavaScript. */
  .header__menu .menu__item--has-children:hover>.menu,
  .header__menu .menu__item--has-children[data-disclosure-expanded="true"]>.menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 260px;
    align-items: start;
    background: var(--theme-dark-body-background);
    padding-block: var(--spacing-lg) var(--spacing-md);
    z-index: 100;
    transition: var(--transition-time);
    top: 100%;
    inset-inline-start: 0;
    margin: 0;
  }

  /* Ensures correct positioning context for sub-menus. */
  .header__menu {
    position: relative;
    z-index: 50;
  }

  /* Hides nested sub-menus by default on desktop. */
  .header__menu .menu__item--has-children>.menu {
    display: none;
    position: absolute;
    list-style: none;
    margin: 0;
    background-color: var(--color-white);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    min-width: 220px;
    flex-direction: column;
    gap: var(--spacing-xs);
    z-index: 100;
  }

  .header__menu .menu__item--has-children>.menu .menu__item {
    margin: var(--spacing-xs) var(--spacing-md);
  }

  /* Styles for links within desktop dropdowns. */
  .header__menu .menu__item--has-children>.menu .menu__link {
    white-space: nowrap;
  }

  /* Displays and positions the first-level dropdowns. */
  .header__menu .menu__item--has-children>.menu[data-disclosure-expanded="true"],
  .header__menu .menu__item--has-children:hover>.menu {
    display: block;
    top: 100%;
    inset-inline-start: 0;
  }

  /* Styles for sub-sub-menus (second level and deeper dropdowns) for fly-out effect. */
  .header__menu .menu__item--has-children .menu__item--has-children>.menu {
    top: 0;
    inset-inline-start: 100%;
    margin-inline-start: 5px;
  }

  /* Styles for the arrow icon within menu links that have children. */
  .header__menu .menu__link--has-children svg {
    display: inline-block;
    transform: rotate(90deg);
    /* Default state: pointing DOWN */
    transition: transform 0.2s ease-in-out;
    /* Smooth transition for rotation */
    margin-inline-start: var(--spacing-xs);
    /* Horizontal spacing to the left of the SVG */
  }

  /* Rotates the arrow icon when the sub-menu is expanded (via hover or JS). */
  .header__menu .menu__link--has-children:hover svg,
  .header__menu .menu__link--has-children[aria-expanded="true"] svg {
    transform: rotate(270deg);
    /* Rotated state: pointing UP */
  }

  .navigation--footer,
  .navigation--resources {
    margin-top: var(--spacing-2xl);
  }
}

/* Fix for meta menu hover effect, specifically for mobile. */
@media (max-width: 959px) {
  .navigation--meta-menu {
    .menu__item {
      .menu__link {
        &:hover {
          color: var(--color-white);
        }

        &:hover::before {
          background-color: var(--color-white);
        }
      }
    }
  }
}