@layer components;

/* Modal state - prevents body scroll when mobile menu is open */
:root.navbar-modal-open {
  &,
  body {
    overflow: hidden;
  }
}

/* Menu visibility toggle (controlled by JS) */
.navbar--menu:not(.navbar--menu--open) {
  @apply hidden xl:flex;
}

/* Child component styling that can't be moved to Twig */
.navbar--links .button.button {
  @apply mx-8 w-[calc(100%-var(--spacing)*16)] xl:m-auto xl:w-auto;
}

.navbar--dropdown-menu .dropdown-menu {
  @apply w-full xl:w-auto;
}

.navbar--dropdown-menu-wrapper > :last-child {
  @apply pb-24 xl:pb-0;
}

/* External region styling */
.region-header {
  .navbar--modal-top {
    @apply px-4;
  }
}

/* Branding component styling */
.navbar--logo,
.navbar--modal-logo {
  .branding {
    @apply h-6 xl:h-7;
    svg,
    img[src$=".svg"] {
      @apply h-auto! max-h-full;
    }
  }
}

/* ===== Main Menu Dropdown Styles ===== */

/* Desktop dropdown hover behavior */
@media (min-width: 80rem) {
  /* Ensure submenu items stack vertically */
  .menu__submenu {
    flex-direction: column;
  }

  /* Parent item hover reveals dropdown */
  .menu__item--has-children:hover > .menu__submenu,
  .menu__item--has-children:focus-within > .menu__submenu,
  .menu__item--has-children.menu__item--active-trail:hover > .menu__submenu,
  .menu__item--has-children:hover > .menu__submenu {
    @apply opacity-100! visible! translate-y-0!;
  }

  /* Prevent dropdown from hiding when moving mouse to it */
  .menu__submenu::before {
    content: '';
    @apply absolute bottom-full left-0 right-0 h-2;
  }

  /* Submenu item styling */
  .menu__submenu .menu__item {
    @apply w-full;
  }

  .menu__submenu .menu__link {
    @apply w-full text-foreground;
    @apply hover:bg-muted hover:text-primary;
    @apply focus:text-primary focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none;
    @apply rounded-md;
    @apply transition-colors duration-150;
  }

  /* Active trail in dropdown */
  .menu__submenu .menu__link--active-trail {
    @apply bg-primary/10 text-primary font-medium;
  }
}

/* Mobile: fix full-screen menu layout when open */
@media (max-width: 79.9375rem) {
  .navbar--menu.navbar--menu--open {
    display: flex;
    flex-direction: column;
    /* Replace implicit height (fixed + top + bottom:0) with an explicit height
       so flex children can use flex-grow. */
    bottom: auto;
    height: calc(
      100dvh
      - var(--drupal-displace-offset-top, 0px)
      - var(--gin-toolbar-height, 0px)
    );
  }

  .navbar--dropdown-menu-wrapper {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
  }
}

/* Mobile: ensure submenus are always visible */
@media (max-width: 79.9375rem) {
  .menu__submenu {
    @apply opacity-100! visible!;
  }

  .menu__submenu .menu__link {
    @apply text-sm py-2;
  }
}

/* Focus styles for keyboard navigation */
.menu__link:focus {
  @apply outline-none ring-2 ring-primary xl:ring-offset-2 xl:ring-offset-background;
}

.menu__link:focus-visible {
  @apply outline-none ring-2 ring-primary xl:ring-offset-2 xl:ring-offset-background;
}