/* ========================================
   MAIN NAVIGATION HEADER
   ======================================== */

#header {
  background-color: var(--headerBgColor);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-nav);
}

.navbar {
  padding: 0;
}

.nav-item {
  background-color: var(--headerBgColor);
  color: var(--white);
  position: relative;
  transition: background-color 0.25s ease, transform 0.2s ease;
  z-index: 100;
}

/* ========================================
   ACTIVE PAGE INDICATOR
   ======================================== */

/* Gold underline for active/current page */
.navbar-nav > .nav-item > .nav-link.active {
  position: relative;
}

.navbar-nav > .nav-item > .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-lg);
  right: var(--space-lg);
  height: 3px;
  background-color: var(--orange);
  border-radius: 3px 3px 0 0;
}

/* Active state for dropdown parent when child is active */
.navbar-nav > .nav-item.dropdown:has(.nav-link.active) > .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-lg);
  right: var(--space-3xl);
  height: 3px;
  background-color: var(--orange);
  border-radius: 3px 3px 0 0;
}

/* ========================================
   ENHANCED FOCUS INDICATORS
   ======================================== */

/* High-visibility focus ring for keyboard navigation
   Use inset box-shadow instead of outline — outlines extend outside the
   element and get clipped by adjacent nav-item backgrounds / parent
   overflow.  An inset shadow is painted inside the element's own box and
   is immune to sibling/parent clipping. */
.nav-item .nav-link:focus-visible,
.nav-item .nav-link:focus {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--qrida-focus-color, #ffbf00);
}

.navbar-toggler:focus-visible,
.navbar-toggler:focus {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--qrida-focus-color, #ffbf00);
}

.dropdown-toggle:focus-visible,
.dropdown-toggle:focus {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--qrida-focus-color, #ffbf00);
}
.nav-item .dropdown-toggle {
  border: none;
  color: currentColor;
  padding: 0;
  position: absolute;
  right: 0.5rem;
  top: 1.5rem;
  transform: translateY(-50%) rotate(0);
  transition: 0.12s ease-in-out 0s;
  z-index: 100;
}
.nav-item .dropdown-toggle .chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  vertical-align: middle;
  margin-top: 1px;
  transition: transform 0.2s ease;
}

/* Rotate chevron when dropdown is open */
.nav-item .dropdown-toggle.show .chev {
  transform: rotate(180deg);
}
.navbar-expand-lg .navbar-nav .nav-link {
  font-size: var(--font-size-sm);
  border: none;
  color: currentColor;
  line-height: var(--line-height-ui-tight);
  padding: var(--space-lg);
}
.navbar-expand-lg .navbar-nav .dropdown > .nav-link {
  padding-right: var(--space-3xl);
}
/* ========================================
   DROPDOWN ANIMATIONS
   ======================================== */

.dropdown .dropdown-menu {
  border: none;
  border-radius: 0 0 8px 8px;
  margin: 0;
  padding: 0;
  width: 100%;
  z-index: 90;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* Smooth animation */
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  visibility: hidden;
}

.dropdown .dropdown-menu.show,
.nav-item:hover > .dropdown-menu,
.nav-item:focus-within > .dropdown-menu {
  display: block !important;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.dropdown .dropdown-menu .nav-item {
  background-color: var(--headerBgColor);
  color: var(--white);
}
.dropdown .dropdown-menu .nav-link {
  padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-2xl);
  /* text-decoration: underline; */
}
.navbar-toggler {
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center;
  border: none;
  border-radius: 0;
  color: var(--white);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: var(--line-height-ui-tight);
  margin: 0 0 0 auto;
  outline: 0;
  padding: var(--space-md);
  width: 56px;
}
.navbar-toggler:hover,
.navbar-toggler:focus {
  box-shadow: none;
}
.navbar-toggler[aria-expanded="false"] {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23fff" class="bi bi-list" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/></svg>');
}
.navbar-toggler[aria-expanded="true"] {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23fff" class="bi bi-x" viewBox="0 0 16 16"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/></svg>');
}
/* Desktop hover styles - only for devices with fine pointer (mouse) AND wide screens */
@media (pointer: fine) and (min-width: 992px) {
  .nav-item:hover,
  .nav-item:focus-within {
    background: var(--qridaOrange);
  }
  .nav-item:hover .dropdown-toggle .chev,
  .nav-item:focus-within .dropdown-toggle .chev {
    transform: rotate(180deg);
  }
  .nav-item:hover > ul.dropdown-menu,
  .nav-item:focus-within > ul.dropdown-menu {
    display: block;
  }
  .dropdown .dropdown-menu .nav-item:hover,
  .dropdown .dropdown-menu .nav-item:focus-within {
    background: var(--qridaOrange);
    color: var(--white);
  }
  .dropdown .dropdown-menu .nav-item:hover .nav-link,
  .dropdown .dropdown-menu .nav-item:focus-within .nav-link {
    text-decoration: none;
  }
  .dropdown-menu .dropdown-hover:hover > ul.dropdown-menu,
  .dropdown-menu .dropdown-hover:focus-within > ul.dropdown-menu {
    display: block;
    min-width: 12.5rem;
    top: 0;
    right: 0.5rem;
    transform: translateX(100%);
  }
}

/* Explicitly disable hover effects on touch devices */
@media (pointer: coarse) {
  .nav-item:hover,
  .nav-item:focus {
    background: transparent !important;
  }
  .dropdown .dropdown-menu .nav-item:hover,
  .dropdown .dropdown-menu .nav-item:focus {
    background: transparent !important;
  }
}
@media only screen and (min-width: 920px) {
  .dropdown .dropdown-menu {
    min-width: 15rem;
    position: absolute;
    z-index: 0;
  }
}
/* ========================================
   MOBILE & TABLET STYLES (below 992px)
   ======================================== */

@media only screen and (max-width: 991px) {
  /* Mobile menu slide-in animation */
  .navbar-collapse {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
  }

  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    max-height: 100vh;
    height: auto !important;
    overflow: visible;
  }

  /* Mobile menu item layout - use flexbox to separate link and toggle */
  .navbar-nav > .nav-item {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .navbar-nav > .nav-item:last-child {
    border-bottom: none;
  }

  /* Nav link takes available space minus toggle width */
  .navbar-nav > .nav-item > .nav-link {
    flex: 1 1 auto;
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: var(--space-lg) !important;
    /* Ensure link is clickable */
    position: relative;
    z-index: 1;
  }

  /* Items with dropdown - leave space for toggle button */
  .navbar-nav > .nav-item.dropdown > .nav-link {
    padding-right: 60px !important;
  }

  /* Dropdown toggle as separate clickable area (supports both button and anchor) */
  .nav-item .dropdown-toggle,
  .nav-item button.dropdown-toggle {
    position: absolute;
    right: 0;
    top: 0;
    /* Use fixed height instead of bottom: 0 to prevent stretching when dropdown opens */
    height: 52px;
    width: 52px;
    min-width: 44px; /* WCAG minimum touch target */
    min-height: 44px; /* WCAG minimum touch target */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10; /* Higher z-index to stay above dropdown menu */
    background: transparent;
    border: none;
    color: var(--white);
    cursor: pointer;
    padding: 0;
    transform: none;
  }

  /* Chevron rotation on mobile - only when open (use aria-expanded for reliability) */
  .nav-item .dropdown-toggle .chev {
    transform: rotate(0deg);
    transition: transform 0.2s ease;
  }

  .nav-item .dropdown-toggle.show .chev,
  .nav-item .dropdown-toggle[aria-expanded="true"] .chev {
    transform: rotate(180deg);
  }

  .dropdown .dropdown-menu {
    /* On mobile/tablet ensure dropdowns flow in document */
    position: static;
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    border-radius: 0;
    box-shadow: none;
    /* Reset animation for mobile - use slide instead */
    opacity: 1;
    transform: none;
    visibility: visible;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
    background-color: rgba(0, 0, 0, 0.15);
  }

  .dropdown .dropdown-menu.show {
    max-height: calc(100vh - 120px); /* Dynamic height instead of hardcoded 500px */
    overflow-y: auto;
    display: block !important;
  }

  /* Submenu items with dividers */
  .dropdown .dropdown-menu .nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .dropdown .dropdown-menu .nav-item:last-child {
    border-bottom: none;
  }

  /* Indent submenu items */
  .dropdown .dropdown-menu .nav-link {
    padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-2xl) !important;
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* Ensure dropdown toggles are clickable on mobile/tablets */
  a.dropdown-toggle[data-bs-toggle="dropdown"],
  button.dropdown-toggle[data-bs-toggle="dropdown"] {
    cursor: pointer;
    pointer-events: all;
  }

  /* Override hover behavior on touch devices */
  .nav-item:hover > ul.dropdown-menu {
    display: none !important;
    max-height: 0;
  }

  /* Prevent hover-based chevron rotation on mobile/tablet - only rotate when actually open */
  .nav-item:hover .dropdown-toggle:not(.show) .chev,
  .nav-item:focus .dropdown-toggle:not(.show) .chev {
    transform: rotate(0deg);
  }

  .nav-item > ul.dropdown-menu.show {
    display: block !important;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }

  /* Nested submenu behaviour on mobile/tablet */
  .dropdown-menu .dropdown-hover > ul.dropdown-menu {
    display: none;
    position: static;
    min-width: 100%;
    max-height: 0;
  }

  .dropdown-menu .dropdown-hover > ul.dropdown-menu.show {
    display: block !important;
    max-height: calc(70vh - 100px); /* Nested menus get less height */
    overflow-y: auto;
  }

  /* Second level indent */
  .dropdown-menu .dropdown-menu .nav-link {
    padding-left: var(--space-3xl) !important;
  }
}
/* Responsive sticky header - activates when navigation layout changes */
@media only screen and (min-width: 992px) {
  #header {
    background-color: var(--headerBgColor);
    font-size: 15px;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .nav-item {
    background-color: var(--headerBgColor);
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    transition: 0.12s ease-in-out 0s;
  }
  .dropdown .dropdown-menu .nav-item {
    background-color: var(--headerBgColor);
    color: var(--white);
  }
  .dropdown .dropdown-menu .nav-link {
    padding: 1rem;
    text-decoration: underline;
  }
}

/* ========================================
   ARIA & ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Visual feedback for aria-expanded state */
.nav-item .dropdown-toggle[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

/* Ensure screen readers announce dropdown state changes */
.dropdown-menu[aria-hidden="true"] {
  display: none;
}

.dropdown-menu[aria-hidden="false"] {
  display: block;
}

/* Skip link target - ensure main content is reachable */
#main-content:focus {
  outline: none;
}

/* ========================================
   REDUCED MOTION SUPPORT
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .nav-item,
  .dropdown .dropdown-menu,
  .navbar-collapse,
  .dropdown-toggle,
  .nav-link {
    transition: none !important;
    animation: none !important;
  }

  .dropdown .dropdown-menu {
    opacity: 1;
    transform: none;
  }
}

/* ========================================
   HIGH CONTRAST MODE SUPPORT
   ======================================== */

@media (prefers-contrast: high) {
  .nav-item .nav-link:focus-visible,
  .nav-item .nav-link:focus,
  .navbar-toggler:focus-visible,
  .navbar-toggler:focus,
  .dropdown-toggle:focus-visible,
  .dropdown-toggle:focus {
    box-shadow: inset 0 0 0 4px #ffffff;
  }

  .navbar-nav > .nav-item > .nav-link.active::after {
    height: 4px;
    background-color: #ffffff;
  }
}