/**
 * Primary Navigation — styling only, no dropdown behaviour.
 *
 * Uses standard WordPress nav classes (menu-item, current-menu-item,
 * sub-menu, etc.) so any dropdown plugin works without conflict.
 * All dropdown open/close/animation is handled by the plugin.
 *
 * NO border-bottom on nav links — prevents double-border with header border-b-2.
 * Active state = colour + font-weight only.
 *
 * @package NeueAgency
 */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  --neue-brand:      #FFAA00;
  --neue-ink:        #000;
  --neue-paper:      #fff;
  --neue-mist:       #F5F5F5;
  --neue-muted:      #737373;
  --neue-rule:       2px solid #000;
  --neue-oc-width:   min(24rem, 100vw);
  --neue-focus-ring: 2px solid #FFAA00;
}


/* ══════════════════════════════════════════════════════════════════════════
   HAMBURGER
   ══════════════════════════════════════════════════════════════════════════ */

.neue-hamburger {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             5px;
  width:           2.75rem;
  height:          2.75rem;
  padding:         .5rem;
  background:      none;
  border:          var(--neue-rule);
  cursor:          pointer;
  flex-shrink:     0;
}
.neue-hamburger:hover { background: var(--neue-ink); }
.neue-hamburger:hover .neue-hamburger-line { background: var(--neue-paper); }
.neue-hamburger:focus-visible { outline: var(--neue-focus-ring); outline-offset: 2px; }

.neue-hamburger-line {
  display:    block;
  width:      1.25rem;
  height:     2px;
  background: var(--neue-ink);
  transition: transform 220ms ease, opacity 220ms ease;
}
.neue-hamburger[aria-expanded="true"] .neue-hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.neue-hamburger[aria-expanded="true"] .neue-hamburger-line:nth-child(2) { opacity: 0; }
.neue-hamburger[aria-expanded="true"] .neue-hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1024px) { .neue-hamburger { display: none; } }


/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP NAV  (≥ 1024px)
   ══════════════════════════════════════════════════════════════════════════ */

.neue-primary-nav { display: none; }

@media (min-width: 1024px) {
  .neue-primary-nav { display: block; }
}

/* Top-level nav list — horizontal flex row */
.neue-nav-list {
  display:     flex;
  align-items: flex-end;
  gap:         2rem;
  list-style:  none;
  margin:      0;
  padding:     0;
}

/* Top-level items */
.neue-nav-list > .menu-item {
  display: block;
}

/* Nav links — NO border-bottom (would create double-border with header border-b-2) */
.neue-nav-list > .menu-item > a {
  display:         inline-block;
  font-size:       .8125rem;
  font-weight:     700;
  font-family:     inherit;
  text-transform:  uppercase;
  letter-spacing:  .1em;
  color:           var(--neue-muted);
  text-decoration: none;
  padding:         0;
  transition:      color 150ms;
}
.neue-nav-list > .menu-item > a:hover,
.neue-nav-list > .menu-item > a:focus-visible { color: var(--neue-ink); outline: none; }

/* Active / current states — colour + weight only, no border */
.neue-nav-list > .current-menu-item > a,
.neue-nav-list > .current-menu-parent > a,
.neue-nav-list > .current-menu-ancestor > a {
  color:       var(--neue-ink);
  font-weight: 900;
}

.neue-nav-list > .menu-item > a:focus-visible {
  outline:        var(--neue-focus-ring);
  outline-offset: 3px;
}


/* ══════════════════════════════════════════════════════════════════════════
   OFF-CANVAS  (mobile, < 1024px)
   ══════════════════════════════════════════════════════════════════════════ */

.neue-offcanvas-backdrop {
  position:       fixed;
  inset:          0;
  z-index:        49;
  background:     rgba(0,0,0,.55);
  opacity:        0;
  pointer-events: none;
  transition:     opacity 300ms ease;
}
.neue-offcanvas-backdrop.is-open { opacity: 1; pointer-events: auto; }

.neue-offcanvas {
  position:        fixed;
  top:             0;
  right:           0;
  width:           var(--neue-oc-width);
  height:          100dvh;
  z-index:         50;
  background:      var(--neue-paper);
  border-left:     var(--neue-rule);
  overflow:        hidden;
  display:         flex;
  flex-direction:  column;
  transform:       translateX(100%);
  transition:      transform 300ms ease;
}
.neue-offcanvas.is-open { transform: translateX(0); }

/* Desktop: remove the off-canvas panel and backdrop from layout entirely.
   transform: translateX(100%) keeps them off-screen, but they remain in
   the layout/paint tree — on some browsers at laptop widths this causes a
   brief flash of the panel before the transform is applied on load/resize.
   display: none guarantees no paint at all above 1024px. */
@media (min-width: 1024px) {
  .neue-offcanvas,
  .neue-offcanvas-backdrop { display: none !important; }
}

.neue-offcanvas-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.25rem 1.5rem;
  border-bottom:   var(--neue-rule);
  flex-shrink:     0;
  gap:             1rem;
}
.neue-offcanvas-logo {
  font-size:       1.125rem;
  font-weight:     800;
  text-transform:  uppercase;
  letter-spacing:  -.02em;
  color:           var(--neue-ink);
  text-decoration: none;
  white-space:     nowrap;
}
.neue-offcanvas-close {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           2.5rem;
  height:          2.5rem;
  flex-shrink:     0;
  background:      none;
  border:          var(--neue-rule);
  cursor:          pointer;
}
.neue-offcanvas-close:hover { background: var(--neue-ink); color: var(--neue-paper); }
.neue-offcanvas-close:focus-visible { outline: var(--neue-focus-ring); outline-offset: 2px; }

.neue-offcanvas-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.neue-offcanvas-nav  { list-style: none; margin: 0; padding: 0; }
.neue-offcanvas-item { border-bottom: var(--neue-rule); }
.neue-offcanvas-item:last-child { border-bottom: none; }

.neue-offcanvas-link {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  padding:         1.25rem 1.5rem;
  font-size:       .9375rem;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  .04em;
  color:           var(--neue-ink);
  text-decoration: none;
  background:      none;
  border:          none;
  cursor:          pointer;
  text-align:      left;
  min-height:      3.5rem;
}
.neue-offcanvas-link:hover { background: var(--neue-mist); }
.neue-offcanvas-link[aria-expanded="true"] { background: var(--neue-ink); color: var(--neue-paper); }
.neue-offcanvas-link[aria-expanded="true"] .neue-offcanvas-chevron {
  transform: rotate(180deg);
  color:     var(--neue-brand);
}

.neue-offcanvas-chevron { flex-shrink: 0; transition: transform 220ms ease; }

.neue-offcanvas-sub {
  list-style: none;
  margin:     0;
  padding:    0;
  background: var(--neue-mist);
  border-top: 1px solid #e5e5e5;
}
.neue-offcanvas-sub li { border-bottom: 1px solid #e5e5e5; }
.neue-offcanvas-sub li:last-child { border-bottom: none; }
.neue-offcanvas-sub a {
  display:         flex;
  align-items:     center;
  gap:             .625rem;
  padding:         .875rem 1.5rem;
  font-size:       .8125rem;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  .05em;
  color:           var(--neue-ink);
  text-decoration: none;
  min-height:      2.75rem;
}
.neue-offcanvas-sub a:hover { color: var(--neue-brand); }

.neue-offcanvas-foot { flex-shrink: 0; padding: 1.25rem 1.5rem; border-top: var(--neue-rule); }
.neue-offcanvas-cta-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             .5rem;
  font-size:       .8125rem;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  .1em;
  color:           var(--neue-paper);
  background:      var(--neue-ink);
  border:          var(--neue-rule);
  padding:         .875rem 1.25rem;
  text-decoration: none;
  width:           100%;
  justify-content: center;
}
.neue-offcanvas-cta-btn:hover {
  background:   var(--neue-brand);
  color:        var(--neue-ink);
  border-color: var(--neue-brand);
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .neue-hamburger-line,
  .neue-offcanvas,
  .neue-offcanvas-backdrop,
  .neue-offcanvas-chevron { transition: none !important; }
}