/**
 * Accessible Header & Dropdown Submenu Navigation
 * Gospel Livre Portal
 *
 * Task ID: AUD-NAV-001
 * Requirements:
 * 1. Full keyboard navigation with aria-expanded styling.
 * 2. Invisible bridge pseudo-border (::after / ::before) & 200ms transition delay
 *    to stabilize diagonal cursor transit across the dropdown boundary.
 * 3. Escape key closure and smooth focus ring styling (WCAG 2.4.7 & 2.4.11).
 * 4. Desktop, tablet, and touch-screen compatibility.
 */

/* ==========================================================================
   1. Mega Menu Trigger & Toggle Button
   ========================================================================== */
.gl-nav__mega-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.gl-nav__mega-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.gl-nav__mega-toggle:hover {
  background-color: rgba(96, 70, 215, 0.08);
  color: var(--gl-primary, #6046d7);
}

.gl-nav__mega-toggle .gl-icon {
  width: 14px;
  height: 14px;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* Rotate chevron when dropdown is expanded */
.gl-nav__mega-item.is-open .gl-nav__mega-toggle .gl-icon,
.gl-nav__mega-toggle[aria-expanded="true"] .gl-icon {
  transform: rotate(180deg);
}

/* ==========================================================================
   2. Keyboard Focus Appearance (WCAG 2.4.7 & 2.4.11 AAA)
   ========================================================================== */
.gl-nav a:focus-visible,
.gl-nav button:focus-visible,
.gl-nav__mega-toggle:focus-visible,
.gl-mega-menu a:focus-visible,
.gl-mega-menu button:focus-visible {
  outline: 2px solid var(--gl-primary, #6046d7) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(96, 70, 215, 0.25) !important;
  border-radius: 8px;
}

/* ==========================================================================
   3. Desktop Dropdown Behavior: Hover Bridge & 200ms Delay
   ========================================================================== */
@media (min-width: 881px) {
  .gl-nav__mega-item {
    position: relative;
  }

  /* Invisible hover bridge pseudo-element: spans the gap between trigger and panel */
  .gl-nav__mega-item::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -24px;
    right: -24px;
    height: 25px;
    background: transparent;
    pointer-events: auto;
    z-index: 28;
  }

  /* Mega menu container positioning */
  .gl-mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 30;
    width: min(940px, calc(100vw - 32px));
    padding-top: 11px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 8px);
    /* 200ms delay on close: diagonal cursor movements don't collapse the submenu */
    transition: opacity 180ms ease 200ms,
                visibility 180ms ease 200ms,
                transform 180ms cubic-bezier(0.16, 1, 0.3, 1) 200ms;
  }

  /* Invisible bridge on the top boundary of the mega menu itself */
  .gl-mega-menu::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 18px;
    background: transparent;
    pointer-events: auto;
    z-index: 29;
  }

  /* Instant reveal (0ms delay) when hovering, focused-within, or toggled with is-open */
  .gl-nav__mega-item.is-open > .gl-mega-menu,
  .gl-nav__mega-item:focus-within > .gl-mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition: opacity 180ms ease 0ms,
                visibility 180ms ease 0ms,
                transform 180ms cubic-bezier(0.16, 1, 0.3, 1) 0ms;
  }

  @media (hover: hover) {
    .gl-nav__mega-item:hover > .gl-mega-menu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate(-50%, 0);
      transition: opacity 180ms ease 0ms,
                  visibility 180ms ease 0ms,
                  transform 180ms cubic-bezier(0.16, 1, 0.3, 1) 0ms;
    }
  }
}

/* ==========================================================================
   4. Tablet & Touch-Input Support (Coarse Pointer)
   ========================================================================== */
@media (pointer: coarse) {
  .gl-nav__mega-toggle {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }

  /* Prevent stuck hover simulation on touch-screen tablets */
  @media (min-width: 881px) {
    .gl-nav__mega-item:hover:not(.is-open) > .gl-mega-menu {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    .gl-nav__mega-item.is-open > .gl-mega-menu {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      transform: translate(-50%, 0) !important;
    }
  }
}

/* ==========================================================================
   5. Mobile Accordion Navigation (<= 880px)
   ========================================================================== */
@media (max-width: 880px) {
  .gl-nav__mega-trigger {
    display: grid;
    grid-template-columns: 1fr 44px;
    align-items: center;
  }

  .gl-nav__mega-toggle {
    width: 44px;
    height: 44px;
    justify-self: end;
  }

  .gl-mega-menu {
    position: static;
    width: 100%;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: max-height 280ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 200ms ease,
                visibility 200ms ease;
  }

  .gl-nav__mega-item.is-open > .gl-mega-menu {
    max-height: 4000px;
    margin: 8px 0 20px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: visible;
  }
}