/* ================================================================
   NAVIGATION — header, dropdown panels and the sub-nav bar.
   Modules 01, 02 and 03.

   One set of markup serves both breakpoints. Above 1000px the bar is horizontal
   and a panel is absolutely positioned under its trigger; below it the bar becomes
   a drawer and the same panels become inline accordions. Only layout changes —
   nothing is duplicated or hidden twice.
   ================================================================ */

.nav {
  position: relative;
  z-index: 60;
  background: var(--bg-base, #121412);
  color: var(--text, #ffffff);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 76px;
  max-width: var(--container-wide, 1320px);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

/* ── Logo lockup ─────────────────────────────────────────────────
   FRANKLYN over a green [ elite sports ] tab. The brackets are generated so the
   tab reads as one word to a screen reader. */

.nav__logo {
  flex: none;
  display: block;
  line-height: 1;
  text-decoration: none;
}

.nav__wordmark {
  display: block;
  font-family: var(--f-display);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text, #ffffff);
}

.nav__tab {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 8px;
  background: var(--accent, #5ad05a);
  color: var(--green-ink, #0e1c0e);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: lowercase;
}

.nav__tab::before { content: '[ '; }
.nav__tab::after  { content: ' ]'; }

/* A custom logo replaces the lockup entirely. */
.nav__logo img {
  display: block;
  max-height: 46px;
  width: auto;
}

/* ── Bar ─────────────────────────────────────────────────────── */

.nav__menu { margin-left: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text, #ffffff);
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition:
    color var(--dur, 0.22s) var(--ease, ease),
    border-color var(--dur, 0.22s) var(--ease, ease);
}

.nav__link:hover,
.nav__trigger[aria-expanded='true'] { color: var(--accent, #5ad05a); }

.nav__link[aria-current='page'],
.nav__trigger[data-current='true'],
.nav__trigger[aria-expanded='true'] { border-bottom-color: var(--accent, #5ad05a); }

.nav__caret {
  width: 8px;
  height: 8px;
  flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur, 0.22s) var(--ease, ease);
}

.nav__trigger[aria-expanded='true'] .nav__caret {
  transform: rotate(-135deg) translateY(-2px);
}

.nav__item--cta { flex: none; margin-left: 0.5rem; }

/* ── Dropdown panel ──────────────────────────────────────────── */

.nav__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: -18px;
  z-index: 70;
  min-width: 274px;
  padding: 0.75rem 0;
  background: var(--bg-alt, #1b1e1b);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.18));
  border-top: 2px solid var(--accent, #5ad05a);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--dur, 0.22s) var(--ease, ease),
    transform var(--dur, 0.22s) var(--ease, ease),
    visibility var(--dur, 0.22s);
}

.nav__item--has-panel.is-open .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__panel-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__panel-link {
  display: block;
  padding: 11px 22px;
  font-size: 0.9375rem;
  color: var(--muted, #c9cfc9);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition:
    background var(--dur, 0.22s) var(--ease, ease),
    color var(--dur, 0.22s) var(--ease, ease),
    border-color var(--dur, 0.22s) var(--ease, ease);
}

.nav__panel-link:hover,
.nav__panel-link[aria-current='page'] {
  background: rgba(var(--accent-rgb, 90, 208, 90), 0.08);
  color: var(--text, #ffffff);
  border-left-color: var(--accent, #5ad05a);
}

.nav__panel-sep {
  height: 1px;
  margin: 0.75rem 22px;
  background: var(--border, rgba(255, 255, 255, 0.18));
}

/* ── Sub-nav bar (module 02) ─────────────────────────────────────
   A second row naming the current sub-page. The comps sit the label under its
   parent nav item rather than flush left, so the row is a flex track and each
   section carries its own offset. */

.nav__sub {
  display: flex;
  justify-content: flex-start;
  max-width: var(--container-wide, 1320px);
  margin-inline: auto;
  margin-top: -6px;
  padding-inline: var(--space-gutter);
  padding-bottom: 0.75rem;
}

.nav__sub-label {
  display: inline-block;
  max-width: 200px;
  padding-bottom: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--text, #ffffff);
  text-decoration: none;
  border-bottom: 2px solid var(--accent, #5ad05a);
}

.nav__sub--services      { padding-left: 19%; }
.nav__sub--approach      { padding-left: 31%; }
.nav__sub--knowledge-hub { padding-left: 57%; }

/* ── Mobile toggle ───────────────────────────────────────────── */

.nav__toggle {
  display: none;
  flex: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.18));
  border-radius: var(--radius, 2px);
  cursor: pointer;
}

.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  margin-inline: auto;
  background: var(--text, #ffffff);
  transition:
    transform var(--dur, 0.22s) var(--ease, ease),
    opacity var(--dur, 0.22s) var(--ease, ease);
}

.nav__toggle-bars { position: relative; }
.nav__toggle-bars::before { content: ''; position: absolute; top: -6px; }
.nav__toggle-bars::after  { content: ''; position: absolute; top: 6px; }

.nav__toggle[aria-expanded='true'] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded='true'] .nav__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] .nav__toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* ── Drawer ──────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .nav__toggle { display: block; }

  .nav__menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    padding: 1.5rem var(--space-gutter) 2rem;
    background: var(--bg-alt, #1b1e1b);
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.18));
  }

  .nav__menu.is-open { display: block; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 14px 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.18));
  }

  .nav__link[aria-current='page'],
  .nav__trigger[data-current='true'] { color: var(--accent, #5ad05a); }

  /* Panels become inline accordions — no absolute positioning, no shadow. */
  .nav__panel {
    position: static;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }

  .nav__item--has-panel.is-open .nav__panel { display: block; }

  .nav__panel-link {
    padding: 12px 0 12px 1rem;
    border-left: 2px solid var(--border, rgba(255, 255, 255, 0.18));
  }

  .nav__panel-sep { display: none; }

  .nav__item--cta { margin: 1.5rem 0 0; }
  .nav__item--cta .btn { width: 100%; }

  /* The sub-nav drops its desktop offset and reads as a plain breadcrumb. */
  .nav__sub,
  .nav__sub--services,
  .nav__sub--approach,
  .nav__sub--knowledge-hub {
    justify-content: flex-start;
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
  }

  .nav__sub-label {
    max-width: none;
    text-align: left;
  }
}

/* Stop the page scrolling behind the open drawer. */
body.nav-is-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav__link,
  .nav__caret,
  .nav__panel,
  .nav__panel-link,
  .nav__toggle-bars,
  .nav__toggle-bars::before,
  .nav__toggle-bars::after {
    transition: none;
  }
}