/* ==========================================================================
   Cy-Corp Navigation (single file) — styles/nav.css
   ========================================================================== */

/* a11y utility */
.visually-hidden {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* header must stack above page so drawer sits under it */
.site-header { position: relative; z-index: 20; }

/* --- NAV CONTAINER (now placed AFTER Start/Packages in markup) --- */
.cy-nav {
  display:flex;
  align-items:center;
  flex:0 0 auto;          /* don’t steal space from CTAs */
  margin-left:.75rem;     /* small gap from Packages */
}

/* --- TOGGLE (hamburger) --- */
.cy-nav__toggle{
  appearance:none; background:transparent; border:0;
  padding:.2rem; margin-right:.2rem; line-height:0; cursor:pointer;
  display:none; /* desktop hidden */
}
.cy-nav__toggle .hamburger svg{ width:32px; height:32px; transition: transform 650ms cubic-bezier(0.4,0,0.2,1); }
.cy-nav__toggle .hamburger path{
  transition:
    transform 650ms cubic-bezier(0.4,0,0.2,1),
    stroke-dasharray 650ms cubic-bezier(0.4,0,0.2,1),
    stroke-dashoffset 650ms cubic-bezier(0.4,0,0.2,1);
}
.cy-nav__toggle .hamburger path:nth-child(1){ transform-origin:36% 40%; }
.cy-nav__toggle .hamburger path:nth-child(2){ stroke-dasharray:29 299; }
.cy-nav__toggle .hamburger path:nth-child(3){ transform-origin:35% 63%; }
.cy-nav__toggle .hamburger path:nth-child(4){ stroke-dasharray:29 299; }
.cy-nav__toggle .hamburger path:nth-child(5){ transform-origin:61% 52%; }
.cy-nav__toggle .hamburger path:nth-child(6){ transform-origin:62% 52%; }

body.is-open .cy-nav__toggle .hamburger svg { transform: rotate(90deg); }
body.is-open .cy-nav__toggle .hamburger path:nth-child(1){ transform:translateX(9px) translateY(1px) rotate(45deg); }
body.is-open .cy-nav__toggle .hamburger path:nth-child(2){ stroke-dasharray:225 299; stroke-dashoffset:-72px; }
body.is-open .cy-nav__toggle .hamburger path:nth-child(3){ transform:translateX(9px) translateY(1px) rotate(-45deg); }
body.is-open .cy-nav__toggle .hamburger path:nth-child(4){ stroke-dasharray:225 299; stroke-dashoffset:-72px; }
body.is-open .cy-nav__toggle .hamburger path:nth-child(5){ transform:translateX(9px) translateY(1px) rotate(-45deg); }
body.is-open .cy-nav__toggle .hamburger path:nth-child(6){ transform:translateX(9px) translateY(1px) rotate(45deg); }

/* --- DESKTOP LIST (text-only, no boxes) --- */
.cy-nav__panel { display:block; } /* inline on desktop */
.cy-nav__list{
  display:flex; gap:1rem; list-style:none; margin:0; padding:0;
}
.cy-nav__list a[data-navlink]{
  background:none; border:none; border-radius:0; /* remove pills */
  padding:.4rem .2rem;
  text-decoration:none;
  color:rgba(234,244,255,.90);
  font-weight:600;
  transition: color .18s ease, transform .18s ease;
}
.cy-nav__list a[data-navlink]:hover{
  color:var(--accent, #32C7FF);            /* hero cyan */
  transform:translateY(-1px);
}
.cy-nav__list a[data-navlink]:focus-visible{
  outline:none;
  color:var(--accent, #32C7FF);
  text-shadow:0 0 14px color-mix(in srgb, var(--accent, #32C7FF) 40%, transparent);
}

/* --- MOBILE DRAWER (centered, backdrop = page bg, flush under header) --- */
@media (max-width: 960px){
  .cy-nav__toggle{ display:block; }
  /* Panel anchored to header bottom; covers width, matches page bg */
  .cy-nav__panel{
    position:absolute; top:100%; left:0; right:0;
    background:var(--bg, #0b0f18);
    border-top:1px solid rgba(255,255,255,.06);
    padding:1rem 0;
    transform:translateY(-6px);
    opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  body.is-open .cy-nav__panel{
    transform:translateY(0);
    opacity:1; pointer-events:auto;
  }

  /* Centered list items, larger tap targets, no boxes */
  .cy-nav__list{
    display:grid; grid-template-columns:1fr; gap:.35rem;
    justify-items:center; margin:0; padding:0;
  }
  .cy-nav__list a[data-navlink]{
    padding:.9rem 0; font-size:1.06rem;
    color:rgba(234,244,255,.92);
  }
  .cy-nav__list a[data-navlink]:hover,
  .cy-nav__list a[data-navlink]:focus-visible{
    color:var(--accent, #32C7FF);
    text-shadow:0 0 14px color-mix(in srgb, var(--accent, #32C7FF) 35%, transparent);
  }

  /* Keep CTAs intact; nav sits after them without pushing */
  .cy-nav{ margin-left:.5rem; }
}

/* reduce-motion */
@media (prefers-reduced-motion: reduce){
  .cy-nav__toggle .hamburger svg,
  .cy-nav__toggle .hamburger path,
  .cy-nav__panel { transition:none !important; }
}