/* =====================================================================
   nav.css
   - Primary navigation (mobile-first + desktop)
   - Mobile drawer, desktop bar, hover/focus dropdowns
====================================================================== */

/* Container */
.primary-nav {
  position: relative;
}

/* Top-level toggle (mobile only) */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  font: inherit;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #0b2239;
  cursor: pointer;
}
.nav-toggle:focus-visible { outline: 2px solid #2d5ea6; outline-offset: 2px; }
.nav-toggle__icon { font-size: 1.125rem; line-height: 1; }

/* Menu panel */
.nav-menu[hidden] { display: none; }
.nav-menu {
  margin-top: .5rem;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: var(--nav-bg, var(--site-primary, #0b2239));
  color: var(--nav-text, #fff);
  overflow: hidden;
}

/* Level 1 (top row) */
.nav-level-1 { list-style: none; margin: 0; padding: .25rem; }
.nav-item { position: relative; }
.nav-item[data-top-reorder-item] {
  display: flex;
  align-items: center;
  gap: .2rem;
}
.top-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 .15rem;
  line-height: 1;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  color: rgba(255,255,255,0.9);
}
.nav-item[data-top-reorder-item].is-dragging .top-drag-handle {
  cursor: grabbing;
}
.top-menu-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  padding: 0 .25rem;
  border-radius: 6px;
  color: var(--nav-text, #ffffff);
  text-decoration: none;
  font-weight: 700;
  opacity: .9;
}
.top-menu-rename:hover,
.top-menu-rename:focus {
  background: rgba(37, 99, 235, 0.22);
  color: #fff;
  outline: 0;
  opacity: 1;
}
.top-menu-delete:hover,
.top-menu-delete:focus {
  background: rgba(220, 38, 38, 0.22);
  color: #fff;
  outline: 0;
  opacity: 1;
}
.nav-link--top-add {
  font-weight: 700;
  opacity: .95;
}

/* Keep top-level edit controls out of the way until the user targets that menu item. */
@media (min-width: 768px) {
  .nav-item[data-top-reorder-item] {
    position: relative;
    display: block;
  }

  .nav-item[data-top-reorder-item] .top-drag-handle,
  .nav-item[data-top-reorder-item] .top-menu-action {
    display: none;
    position: absolute;
    top: -18px;
    z-index: 35;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.35);
    background: color-mix(in srgb, var(--nav-bg, #0b2239) 80%, black 20%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.28);
  }

  .nav-item[data-top-reorder-item]:hover .top-drag-handle,
  .nav-item[data-top-reorder-item]:focus-within .top-drag-handle,
  .nav-item[data-top-reorder-item].is-dragging .top-drag-handle,
  .nav-item[data-top-reorder-item]:hover .top-menu-action,
  .nav-item[data-top-reorder-item]:focus-within .top-menu-action,
  .nav-item[data-top-reorder-item].is-dragging .top-menu-action {
    display: inline-flex;
  }

  .nav-item[data-top-reorder-item] .top-drag-handle {
    left: 0;
  }

  .nav-item[data-top-reorder-item] .top-menu-rename {
    right: 0;
  }

  .nav-item[data-top-reorder-item] .top-menu-delete {
    right: 1.45rem;
  }
}

/* Top-level links */
.nav-link {
  display: block;
  padding: .625rem .75rem;
  text-decoration: none;
  color: var(--nav-text, #ffffff);
  border-radius: 6px;
}
.nav-link[aria-current="page"] {
  background: var(--nav-current, rgba(255,255,255,0.12));
}

/* Parent link buttons (for dropdowns) */
.nav-link.is-parent {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
}
.nav-link.is-parent:hover,
.nav-link.is-parent:focus {
  background: var(--nav-hover, rgba(255,255,255,0.08));
  outline: 0;
}

/* Active section highlight */
.nav-item.current > .nav-link {
  background: var(--nav-current, rgba(255,255,255,0.12));
}

/* Non-link parent labels */
.nav-label {
  display: block;
  padding: .625rem .75rem;
  color: var(--nav-text, #ffffff);
  border-radius: 6px;
  cursor: pointer;
}
.nav-label:hover,
.nav-label:focus,
.nav-label:focus-visible {
  background: var(--nav-hover, rgba(255,255,255,0.08));
  outline: 0;
}

/* Submenu toggle button (mobile only) */
.submenu-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: .5rem;
  padding: .25rem .5rem;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.submenu-toggle:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

/* Level 2 (dropdown list) */
.nav-level-2 { list-style: none; margin: 0; padding: 0 .5rem .5rem; }
.nav-level-3 { list-style: none; margin: 0; padding: .5rem; }
.nav-subitem--add {
  padding: .2rem 0 .3rem;
}
.nav-add-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: .25rem;
}
/* Canonical action-button style for nav add controls (top-level + nested). */
.nav-subitem--add .nav-sublink.nav-add,
.nav-subitem--add .nav-sublink.nav-add-directory {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .3rem .45rem;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.07);
  color: var(--nav-text, #ffffff);
  text-decoration: none;
  font-weight: 650;
  font-size: .9rem;
  white-space: nowrap;
  line-height: 1.2;
}
.nav-subitem--add .nav-sublink.nav-add:hover,
.nav-subitem--add .nav-sublink.nav-add:focus,
.nav-subitem--add .nav-sublink.nav-add-directory:hover,
.nav-subitem--add .nav-sublink.nav-add-directory:focus {
  background: rgba(255,255,255,0.16);
  outline: 0;
}
.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 .2rem;
  line-height: 1;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  color: rgba(255,255,255,0.9);
}
[data-reorder-item].is-dragging .drag-handle {
  cursor: grabbing;
}
[data-reorder-item] {
  display: flex;
  align-items: center;
  gap: .35rem;
  user-select: none;
  -webkit-user-select: none;
}
[data-reorder-item] > .nav-sublink,
[data-reorder-item] > .nav-directory-parent {
  flex: 1 1 auto;
  min-width: 0;
}
.nav-dir-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  padding: 0 .3rem;
  border-radius: 6px;
  color: var(--nav-text, #ffffff);
  text-decoration: none;
  font-weight: 700;
  opacity: .9;
}
.nav-dir-delete:hover,
.nav-dir-delete:focus {
  background: rgba(220, 38, 38, 0.22);
  color: #fff;
  outline: 0;
  opacity: 1;
}
.nav-dir-rename {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  padding: 0 .3rem;
  border-radius: 6px;
  color: var(--nav-text, #ffffff);
  text-decoration: none;
  font-weight: 700;
  opacity: .9;
}
.nav-dir-rename:hover,
.nav-dir-rename:focus {
  background: rgba(37, 99, 235, 0.22);
  color: #fff;
  outline: 0;
  opacity: 1;
}
.nav-page-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  padding: 0 .3rem;
  border-radius: 6px;
  color: var(--nav-text, #ffffff);
  text-decoration: none;
  font-weight: 700;
  opacity: .9;
}
.nav-page-delete:hover,
.nav-page-delete:focus {
  background: rgba(220, 38, 38, 0.22);
  color: #fff;
  outline: 0;
  opacity: 1;
}

/* Submenu edit controls: reveal on intent (hover/focus/drag) to reduce visual noise. */
@media (min-width: 768px) {
  .nav-subitem--directory .nav-dir-rename,
  .nav-subitem--directory .nav-dir-delete,
  .nav-subitem--page-deletable .nav-page-delete {
    display: inline-flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .nav-subitem--directory:hover .nav-dir-rename,
  .nav-subitem--directory:focus-within .nav-dir-rename,
  .nav-subitem--directory:hover .nav-dir-delete,
  .nav-subitem--directory:focus-within .nav-dir-delete,
  .nav-subitem--page-deletable:hover .nav-page-delete,
  .nav-subitem--page-deletable:focus-within .nav-page-delete {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

.nav-subitem--directory {
  position: relative;
}
/* Hover bridge to keep parent hovered while pointer crosses into level-3 flyout. */
.nav-subitem--directory::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% - 4px);
  width: 18px;
  z-index: 29;
}
.nav-subitem--directory.submenu-open-left::after {
  left: auto;
  right: calc(100% - 4px);
}
.nav-subitem--directory > .nav-directory-parent {
  display: block;
  padding: .5rem .75rem;
  text-decoration: none;
  color: var(--nav-text, #ffffff);
  border-radius: 6px;
  white-space: nowrap;
  opacity: 1;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  background: transparent;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.nav-subitem--directory > .nav-directory-parent:hover,
.nav-subitem--directory > .nav-directory-parent:focus {
  background: var(--nav-hover, rgba(255,255,255,0.08));
  outline: 0;
}
.nav-subitem--directory.is-drop-target > .nav-directory-parent {
  background: var(--nav-hover, rgba(255,255,255,0.12));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
}
.nav-subitem--directory > .nav-level-3 {
  position: absolute;
  left: calc(100% - 4px);
  top: 0;
  min-width: 220px;
  background: var(--nav-submenu-bg, var(--nav-bg, var(--site-primary, #0b2239)));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateX(-4px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 30;
}
.nav-subitem--directory.submenu-open-left > .nav-level-3 {
  left: auto;
  right: calc(100% - 4px);
  transform: translateX(4px);
}
.nav-subitem--directory:hover > .nav-level-3,
.nav-subitem--directory:focus-within > .nav-level-3,
.nav-subitem--directory > .nav-level-3:hover,
.nav-subitem--directory.is-hover-open > .nav-level-3 {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.nav-subitem--directory.is-drag-open > .nav-level-3 {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.nav-subitem--child .nav-sublink {
  padding-left: .75rem;
}

/* -------------------------------
   Desktop styles (>= 768px)
   ------------------------------- */
@media (min-width: 768px) {
  .nav-toggle { display: none; }

  .nav-menu {
    display: block !important;
    margin-top: 0;
    border: none;
    border-radius: 12px;
    background: var(--nav-bg, var(--site-primary, #0b2239));
    color: var(--nav-text, #fff);
    overflow: visible;
  }

  .nav-level-1 {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .375rem;
  }

  .nav-item { position: relative; }

  /* Hover bridge to avoid flicker between parent and dropdown */
  .nav-item.has-children::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 16px;
  }
  .nav-link { padding: .5rem .75rem; }

  /* Dropdown submenu */
  .nav-item.has-children .nav-level-2 {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 220px;
    background: var(--nav-submenu-bg, var(--nav-bg, var(--site-primary, #0b2239)));
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    padding: .5rem;
    opacity: 0;
    transform: translateY(-2px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 20;
  }
  .nav-item.has-children.submenu-open-left .nav-level-2 {
    left: auto;
    right: 0;
  }

  /* Reveal submenu on hover/focus */
  .nav-item.has-children:hover > .nav-level-2,
  .nav-item.has-children:focus-within > .nav-level-2,
  .nav-item.has-children > .nav-level-2:hover,
  .nav-item.has-children.is-hover-open > .nav-level-2 {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
.nav-item.has-children.is-drag-open > .nav-level-2 {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* While dragging top-level menus, hide attached dropdown panel from the drag preview
   to prevent oversized ghost captures and jittery hit-testing. */
.nav-item[data-top-reorder-item].is-dragging > .nav-level-2 {
  display: none !important;
}

  .submenu-toggle { display: none; }

  .nav-level-2 .nav-sublink {
    display: block;
    padding: .5rem .75rem;
    text-decoration: none;
    color: var(--nav-text, #ffffff);
    border-radius: 6px;
    white-space: nowrap;
  }
  .nav-level-2 .nav-sublink:hover,
  .nav-level-2 .nav-sublink:focus {
    background: var(--nav-hover, rgba(255,255,255,0.08));
    outline: 0;
  }
}

/* Nav placement under banner */
.primary-nav { margin-top: 8px; }
@media (min-width: 768px) {
  .primary-nav { margin-top: 12px; }
}

/* Centered desktop nav + overflow fallback */
@media (min-width: 768px) {
  .primary-nav { display: flex; justify-content: center; }

  .primary-nav:not(.force-mobile) .nav-menu {
    display: inline-block !important;
    inline-size: max-content;
    max-width: 100%;
  }

  .primary-nav:not(.force-mobile) .nav-level-1 {
    white-space: nowrap;
    justify-content: center;
  }

  .primary-nav.force-mobile .nav-toggle {
    display: inline-flex;
    margin: 8px auto 0;
  }
  .primary-nav.force-mobile .nav-menu {
    display: none;
    width: 100%;
    margin-top: .5rem;
    border: 1px solid #d1d5db;
    border-radius: 10px;
  }
  .primary-nav.force-mobile.is-open .nav-menu { display: block; }

  .primary-nav.force-mobile .nav-level-1 {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .25rem;
  }

  .primary-nav.force-mobile .submenu-toggle { display: inline-flex; }
  .primary-nav.force-mobile .nav-item.has-children .nav-level-2 {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    border: none;
    box-shadow: none;
    padding: 0 .5rem .5rem;
  }
}

/* Keep mobile centering */
@media (max-width: 767px) {
  .primary-nav { display: flex; }
  .primary-nav .nav-toggle { margin: 8px auto 0; }
  .primary-nav .nav-menu { width: 100%; }
  .nav-subitem--directory > .nav-level-3 {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    border: none;
    box-shadow: none;
    padding: 0 0 0 .85rem;
    min-width: 0;
  }
}

/* Simplified always-lit nav */
.primary-nav .nav-link,
.primary-nav .nav-label,
.primary-nav .nav-link.is-parent {
  background: var(--nav-bg, var(--site-primary, #0b2239));
  color: var(--nav-text, #ffffff);
}
.primary-nav .nav-item.current > .nav-link,
.primary-nav .nav-item.current > .nav-label {
  background: var(--nav-current, var(--nav-bg, #0b2239));
}
.primary-nav .nav-link:hover,
.primary-nav .nav-link:focus,
.primary-nav .nav-label:hover,
.primary-nav .nav-label:focus {
  background: var(--nav-bg, var(--site-primary, #0b2239));
  color: var(--nav-text, #ffffff);
  outline: none;
}

/* Submenu hover remains active */
.nav-level-2 .nav-sublink:hover,
.nav-level-2 .nav-sublink:focus {
  background: var(--nav-hover, rgba(255,255,255,0.08));
}