/* ============================================================
   GO IGNITE — MODULAR NAV COMPONENT
   nav.css  |  v1.0.0
   Drop-in stylesheet — zero global interference.
   All selectors scoped to [data-gi-nav] root.
   ============================================================ */

/* ── Root wrapper ─────────────────────────────────────────── */
[data-gi-nav] {
  --gi-nav-bg          : hsl(222 47% 4%);
  --gi-nav-bg-blur     : hsl(222 47% 4% / 0.92);
  --gi-nav-border      : rgba(255,255,255,0.08);
  --gi-nav-primary     : hsl(161 100% 45%);
  --gi-nav-muted       : hsl(220 14% 65%);
  --gi-nav-height      : 80px;
  --gi-nav-z           : 9990;
  --gi-nav-radius      : 0.5rem;
  --gi-nav-transition  : 0.2s ease;
  --gi-nav-font        : 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* ── Fixed header shell ──────────────────────────────────── */
[data-gi-nav] .gi-nav-header {
  position      : fixed;
  top           : 0;
  left          : 0;
  right         : 0;
  height        : var(--gi-nav-height);
  z-index       : var(--gi-nav-z);
  background    : var(--gi-nav-bg-blur);
  backdrop-filter    : blur(12px);
  -webkit-backdrop-filter : blur(12px);
  border-bottom : 1px solid var(--gi-nav-border);
  box-sizing    : border-box;
  transition    : border-color 0.3s ease, background 0.3s ease;
}

/* Scrolled state — slightly darker */
[data-gi-nav] .gi-nav-header.is-scrolled {
  background    : hsl(222 47% 3% / 0.97);
  border-bottom-color : hsl(161 100% 45% / 0.18);
}

[data-gi-nav] .gi-nav-inner {
  max-width   : 1280px;
  margin      : 0 auto;
  padding     : 0 1rem;
  height      : 100%;
  display     : flex;
  align-items : center;
  justify-content : space-between;
  box-sizing  : border-box;
  font-family : var(--gi-nav-font);
}

@media (min-width: 640px) {
  [data-gi-nav] .gi-nav-inner { padding: 0 1.5rem; }
}
@media (min-width: 1024px) {
  [data-gi-nav] .gi-nav-inner { padding: 0 2rem; }
}

/* ── Logo ────────────────────────────────────────────────── */
[data-gi-nav] .gi-nav-logo {
  display         : flex;
  align-items     : center;
  flex-shrink     : 0;
  text-decoration : none;
}
[data-gi-nav] .gi-nav-logo img {
  width      : 160px;
  height     : auto;
  display    : block;
  max-height : 44px;
  object-fit : contain;
}

/* ── Desktop links container ─────────────────────────────── */
[data-gi-nav] .gi-nav-desktop {
  display     : none;
  align-items : center;
  gap         : 5rem;
  margin-left : 3rem;
}
@media (min-width: 1024px) {
  [data-gi-nav] .gi-nav-desktop {
    display : flex;
  }
}

/* ── Desktop link list ───────────────────────────────────── */
[data-gi-nav] .gi-nav-links {
  display : flex;
  gap     : 0.75rem;
}
@media (min-width: 1280px) {
  [data-gi-nav] .gi-nav-links { gap: 1.25rem; }
}

[data-gi-nav] .gi-nav-link {
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
  text-decoration : none;
  font-size       : 0.75rem;
  font-weight     : 500;
  color           : var(--gi-nav-muted);
  line-height     : 1.25;
  white-space     : nowrap;
  padding         : 0.375rem 0.25rem;
  border-bottom   : 2px solid transparent;
  transition      : color var(--gi-nav-transition), border-color var(--gi-nav-transition);
  position        : relative;
}
@media (min-width: 1280px) {
  [data-gi-nav] .gi-nav-link { font-size: 0.8125rem; }
}

[data-gi-nav] .gi-nav-link:hover,
[data-gi-nav] .gi-nav-link.is-active {
  color : var(--gi-nav-primary);
}

/* Active underline indicator */
[data-gi-nav] .gi-nav-link.is-active::after {
  content          : '';
  position         : absolute;
  bottom           : -1px;
  left             : 0;
  right            : 0;
  height           : 2px;
  background       : var(--gi-nav-primary);
  border-radius    : 2px 2px 0 0;
  box-shadow       : 0 0 8px hsl(161 100% 45% / 0.6);
}

/* ── Desktop CTA button ──────────────────────────────────── */
[data-gi-nav] .gi-nav-cta {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  height          : 2.5rem;
  padding         : 0 1.25rem;
  border-radius   : var(--gi-nav-radius);
  background      : var(--gi-nav-primary);
  color           : hsl(222 47% 4%);
  font-family     : var(--gi-nav-font);
  font-size       : 0.75rem;
  font-weight     : 700;
  text-transform  : uppercase;
  letter-spacing  : 0.06em;
  text-decoration : none;
  white-space     : nowrap;
  flex-shrink     : 0;
  box-shadow      : 0 0 18px hsl(161 100% 45% / 0.35);
  transition      : opacity var(--gi-nav-transition), box-shadow var(--gi-nav-transition);
}
@media (min-width: 1280px) {
  [data-gi-nav] .gi-nav-cta { font-size: 0.8125rem; padding: 0 1.5rem; }
}
[data-gi-nav] .gi-nav-cta:hover {
  opacity    : 0.88;
  box-shadow : 0 0 28px hsl(161 100% 45% / 0.5);
}

/* ── Hamburger button ────────────────────────────────────── */
[data-gi-nav] .gi-nav-hamburger {
  display         : flex;
  align-items     : center;
  justify-content : center;
  width           : 40px;
  height          : 40px;
  border          : none;
  background      : transparent;
  color           : var(--gi-nav-muted);
  cursor          : pointer;
  padding         : 0;
  border-radius   : var(--gi-nav-radius);
  transition      : color var(--gi-nav-transition), background var(--gi-nav-transition);
  flex-shrink     : 0;
}
[data-gi-nav] .gi-nav-hamburger:hover {
  color      : #fff;
  background : rgba(255,255,255,0.06);
}
@media (min-width: 1024px) {
  [data-gi-nav] .gi-nav-hamburger { display: none; }
}

/* Animated 3-bar → X icon */
[data-gi-nav] .gi-hamburger-box {
  width    : 22px;
  height   : 16px;
  position : relative;
  display  : flex;
  flex-direction : column;
  justify-content : space-between;
}
[data-gi-nav] .gi-hamburger-bar {
  display       : block;
  width         : 100%;
  height        : 2px;
  border-radius : 2px;
  background    : currentColor;
  transform-origin : center;
  transition    : transform 0.3s cubic-bezier(.4,0,.2,1),
                  opacity   0.3s ease,
                  width     0.3s ease;
}

/* Open state — animate to X */
[data-gi-nav].gi-menu-open .gi-hamburger-bar:nth-child(1) {
  transform : translateY(7px) rotate(45deg);
}
[data-gi-nav].gi-menu-open .gi-hamburger-bar:nth-child(2) {
  opacity   : 0;
  transform : scaleX(0);
}
[data-gi-nav].gi-menu-open .gi-hamburger-bar:nth-child(3) {
  transform : translateY(-7px) rotate(-45deg);
}

/* ── Mobile menu panel ───────────────────────────────────── */
[data-gi-nav] .gi-nav-mobile {
  position        : fixed;
  top             : var(--gi-nav-height);
  left            : 0;
  right           : 0;
  max-height      : 0;
  overflow        : hidden;
  background      : hsl(222 47% 3% / 0.98);
  backdrop-filter : blur(14px);
  -webkit-backdrop-filter : blur(14px);
  border-bottom   : 1px solid transparent;
  z-index         : calc(var(--gi-nav-z) - 1);
  transition      : max-height 0.38s cubic-bezier(.4,0,.2,1),
                    border-color 0.3s ease;
  box-sizing      : border-box;
}

[data-gi-nav].gi-menu-open .gi-nav-mobile {
  max-height        : calc(100dvh - var(--gi-nav-height));
  border-bottom-color : var(--gi-nav-border);
  overflow-y        : auto;
}

[data-gi-nav] .gi-nav-mobile-inner {
  padding    : 1.25rem 1.25rem 2rem;
  box-sizing : border-box;
}

/* Mobile links */
[data-gi-nav] .gi-mobile-link {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 0.875rem 0;
  color           : var(--gi-nav-muted);
  font-family     : var(--gi-nav-font);
  font-size       : 0.9375rem;
  font-weight     : 500;
  text-decoration : none;
  border-bottom   : 1px solid rgba(255,255,255,0.05);
  transition      : color var(--gi-nav-transition), padding-left var(--gi-nav-transition);
}
[data-gi-nav] .gi-mobile-link:last-of-type {
  border-bottom : none;
}
[data-gi-nav] .gi-mobile-link:hover,
[data-gi-nav] .gi-mobile-link.is-active {
  color         : var(--gi-nav-primary);
  padding-left  : 0.5rem;
}
[data-gi-nav] .gi-mobile-link .gi-mobile-arrow {
  opacity    : 0;
  font-size  : 0.875rem;
  transition : opacity var(--gi-nav-transition);
}
[data-gi-nav] .gi-mobile-link:hover .gi-mobile-arrow,
[data-gi-nav] .gi-mobile-link.is-active .gi-mobile-arrow {
  opacity : 1;
}

/* Mobile CTA */
[data-gi-nav] .gi-mobile-cta {
  display         : flex;
  align-items     : center;
  justify-content : center;
  margin-top      : 1.25rem;
  padding         : 1rem;
  border-radius   : var(--gi-nav-radius);
  background      : var(--gi-nav-primary);
  color           : hsl(222 47% 4%);
  font-family     : var(--gi-nav-font);
  font-size       : 0.9375rem;
  font-weight     : 700;
  text-transform  : uppercase;
  letter-spacing  : 0.06em;
  text-decoration : none;
  box-shadow      : 0 0 24px hsl(161 100% 45% / 0.3);
  transition      : opacity var(--gi-nav-transition);
}
[data-gi-nav] .gi-mobile-cta:hover {
  opacity : 0.9;
}

/* Mobile divider label */
[data-gi-nav] .gi-mobile-divider {
  font-family     : var(--gi-nav-font);
  font-size       : 0.65rem;
  font-weight     : 700;
  letter-spacing  : 0.15em;
  text-transform  : uppercase;
  color           : rgba(255,255,255,0.18);
  padding         : 1.25rem 0 0.5rem;
}

/* ── Body offset helper (applied to <body> by JS) ─────────── */
body.gi-nav-offset {
  padding-top : var(--gi-nav-height, 80px);
}

/* ── Overlay backdrop (mobile) ───────────────────────────── */
[data-gi-nav] .gi-nav-overlay {
  display    : none;
  position   : fixed;
  inset      : var(--gi-nav-height) 0 0 0;
  background : rgba(5, 8, 15, 0.7);
  z-index    : calc(var(--gi-nav-z) - 2);
  cursor     : pointer;
}
[data-gi-nav].gi-menu-open .gi-nav-overlay {
  display : block;
  animation : gi-fade-overlay 0.25s ease forwards;
}
@keyframes gi-fade-overlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Responsive logo size adjustment ─────────────────────── */
@media (max-width: 359px) {
  [data-gi-nav] .gi-nav-logo img { width: 130px; }
}