/* ============================================================================
   afterburner-2025 · navigation.css · v1.0.90
   Primary-nav dropdown + mobile drawer component.

   Desktop (>=768px): mega-dropdown panels open on hover, keyboard focus-within,
   or JS click. Second-level items (Team Building, Programs) render as labelled
   sub-groups inside the open panel (no flyout-on-flyout).
   Mobile (<768px): hamburger drawer; each parent is an accordion row.

   Loaded sitewide. Markup lives in the header template part (DB override) and
   is driven by these hooks: .ab-header, .ab-nav, .ab-nav-toggle, .ab-nav-item,
   .ab-has-panel, .ab-nav-panel, .ab-nav-link, .ab-nav-trigger, .ab-nav-caret,
   .ab-nav-sublink(-nested), .ab-nav-group(-head), .ab-nav-subgroup, .is-open.
   No inline styles ship in content (project rule 4).
   ============================================================================ */

:root {
  --ab-nav-panel-bg: #ffffff;
  --ab-nav-panel-border: #e5e5e5;
  --ab-nav-text: #1a1a1a;
  --ab-nav-text-muted: #6b6b6b;
  --ab-nav-hover-bg: #f5f4f2;
  --ab-nav-accent: #1a1a1a;
  --ab-nav-panel-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.ab-nav-list,
.ab-nav-panel-list,
.ab-nav-subgroup {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ab-nav-caret {
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  line-height: 1;
}

.ab-nav-trigger {
  background: none;
  border: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
}

/* ============================================================================
   DESKTOP (>= 768px)
   ============================================================================ */
@media (min-width: 768px) {

  .ab-nav-toggle { display: none; }

  .ab-nav-list {
    display: flex;
    align-items: center;
    gap: 3rem;
  }

  .ab-nav-item { position: relative; }

  .ab-nav-item > .ab-nav-link,
  .ab-nav-item > .ab-nav-trigger {
    display: inline-flex;
    align-items: center;
  }

  .ab-has-panel > .ab-nav-caret {
    margin-left: 0.35rem;
    font-size: 0.7em;
    transition: transform 0.15s ease;
  }

  .ab-nav-panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 16rem;
    background: var(--ab-nav-panel-bg);
    border: 1px solid var(--ab-nav-panel-border);
    border-top: 3px solid var(--ab-nav-accent);
    box-shadow: var(--ab-nav-panel-shadow);
    padding: 1rem 0;
    margin-top: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 60;
  }

  /* invisible hover bridge so the cursor can cross the gap into the panel */
  .ab-nav-panel::before {
    content: "";
    position: absolute;
    top: -0.75rem;
    left: 0;
    right: 0;
    height: 0.75rem;
  }

  .ab-nav-item:hover > .ab-nav-panel,
  .ab-nav-item:focus-within > .ab-nav-panel,
  .ab-nav-item.is-open > .ab-nav-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .ab-nav-item:hover > .ab-nav-caret,
  .ab-nav-item.is-open > .ab-nav-caret {
    transform: rotate(180deg);
  }

  .ab-nav-sublink {
    display: block;
    padding: 0.5rem 1.5rem;
    font-family: var(--wp--preset--font-family--body, "Inter", sans-serif);
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--ab-nav-text);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.12s ease, color 0.12s ease;
  }

  .ab-nav-sublink:hover,
  .ab-nav-sublink:focus {
    background: var(--ab-nav-hover-bg);
  }

  .ab-nav-group-head { font-weight: 700; }

  .ab-nav-subgroup .ab-nav-sublink-nested {
    padding-left: 2.5rem;
    color: var(--ab-nav-text-muted);
    font-size: 0.85rem;
  }

  .ab-nav-subgroup .ab-nav-sublink-nested:hover {
    color: var(--ab-nav-text);
  }
}

/* ============================================================================
   MOBILE (< 768px)
   ============================================================================ */
@media (max-width: 767px) {

  .ab-nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .ab-nav-toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--ab-nav-text);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .ab-header.is-nav-open .ab-nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .ab-header.is-nav-open .ab-nav-toggle-bar:nth-child(2) { opacity: 0; }
  .ab-header.is-nav-open .ab-nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .ab-nav {
    position: fixed;
    top: var(--ab-header-height, 73px);
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 40;
    padding: 0.5rem 0 3rem;
  }

  .ab-header.is-nav-open .ab-nav { transform: translateX(0); }

  .ab-nav-list { display: block; }

  .ab-nav-item { border-bottom: 1px solid var(--ab-nav-panel-border); }

  .ab-nav-item > .ab-nav-link,
  .ab-nav-item > .ab-nav-trigger {
    display: block;
    padding: 1rem 1.5rem;
    color: var(--ab-nav-text);
    text-decoration: none;
    text-align: left;
  }

  /* parent row: label + caret side by side, panel wraps full width below */
  .ab-has-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .ab-has-panel > .ab-nav-panel { grid-column: 1 / -1; }

  .ab-nav-caret {
    padding: 1rem 1.5rem;
    font-size: 1rem;
    transition: transform 0.2s ease;
  }

  .ab-nav-item.is-open > .ab-nav-caret { transform: rotate(180deg); }

  .ab-nav-panel {
    display: none;
    background: var(--ab-nav-hover-bg);
  }

  .ab-nav-item.is-open > .ab-nav-panel { display: block; }

  .ab-nav-sublink {
    display: block;
    padding: 0.75rem 2rem;
    color: var(--ab-nav-text);
    text-decoration: none;
    font-size: 0.95rem;
  }

  .ab-nav-group-head { font-weight: 700; }

  .ab-nav-subgroup .ab-nav-sublink-nested {
    padding-left: 3rem;
    color: var(--ab-nav-text-muted);
  }
}