/* ==========================================================================
   Navigation — Figma 280:1297
   Full-bleed white bar, hairline rule, 1269-wide content band. Everything in
   rem or fluid units so the bar scales rather than snapping at breakpoints.
   ========================================================================== */

.gw-nav {
  position: relative;
  z-index: 50;
  background: var(--gw-white);
  border-bottom: 1px solid var(--gw-gray-200);
}

.gw-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 0.9375rem;         /* 15 + 42 content + 15 = the comp's 72px bar */
}

/* ---- logo ---------------------------------------------------------------- */
/* The wordmark's descender drops its box centre 4px (of 44) below its optical
   centre, so centring the two boxes reads as misaligned. The mark is nudged up
   by that fraction to sit on the cap-height centre instead. */
.gw-nav__logo {
  --word-h: clamp(1.05rem, 1.5vw, 1.3125rem);   /* 16.8 -> 21px */
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(var(--word-h) * 0.409);             /* the asset's own 18/44 gap */
}
.gw-nav__mark {
  width: auto;
  height: calc(var(--word-h) * 1.318);          /* the asset's own 58/44 ratio */
  transform: translateY(calc(var(--word-h) * -0.0909));
}
.gw-nav__word { width: auto; height: var(--word-h); }

/* ---- links --------------------------------------------------------------- */
.gw-nav__links { display: contents; }
.gw-nav__links-inner {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.5rem);
}

.gw-nav__link {
  /* the real label and a hidden bold copy share one grid cell, so the cell is
     always as wide as the BOLD text — hovering can then change weight without
     changing width, which is what was shoving the rest of the row about */
  display: inline-grid;
  align-items: center;
  justify-items: center;
  padding: 0.625rem;
  /* Figma sets Canva Sans here — a Canva-only face we cannot ship. Inter is the
     closest of the three the theme loads: same humanist skeleton, single-storey
     g, straight-tailed y. Space Grotesk (the old choice) reads visibly wrong. */
  font-family: var(--gw-font-body);
  font-weight: 500;
  font-size: clamp(0.9375rem, 1.1vw, 1rem);
  line-height: 1.3625;              /* 21.8 on 16, per 280:1302 */
  color: var(--gw-black);
  transition: color var(--gw-dur-fast) var(--gw-ease);
}
/* violet + heavier weight is the hover state the comp is demonstrating */
.gw-nav__link > span,
.gw-nav__link::after { grid-area: 1 / 1; }
.gw-nav__link::after {
  content: attr(data-label);
  font-weight: 700;
  visibility: hidden;
  pointer-events: none;
}

.gw-nav__link:hover,
.gw-nav__link:focus-visible {
  color: var(--gw-violet);
}
.gw-nav__link:hover > span,
.gw-nav__link:focus-visible > span { font-weight: 700; }

/* ---- call to action ------------------------------------------------------ */
.gw-nav__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.5rem 1rem;
  background: var(--gw-black);       /* black in the new comp, was violet */
  color: var(--gw-white);
  font-family: var(--gw-font-display);
  font-weight: 400;
  font-size: clamp(0.9375rem, 1.1vw, 1rem);
  line-height: 1.3;
  white-space: nowrap;
  transition: background var(--gw-dur-fast) var(--gw-ease);
}
.gw-nav__cta:hover { background: #1a1a1a; }
/* the comp's 26px box contains an 18.4x21.7 glyph; our SVG is cropped tight,
   so it renders at the glyph's own size to match optically */
.gw-nav__cta-icon { width: 1.1875rem; height: 1.375rem; flex: none; }

/* ---- disclosure menu ----------------------------------------------------- */
.gw-nav__toggle {
  display: none;
  order: 3;
  width: 2.625rem;
  height: 2.625rem;              /* matches the CTA so the bar keeps its height */
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
}
.gw-nav__bars,
.gw-nav__bars::before,
.gw-nav__bars::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: var(--gw-black);
  transition: transform var(--gw-dur) var(--gw-ease), opacity var(--gw-dur-fast) var(--gw-ease);
}
.gw-nav__bars { position: relative; }
.gw-nav__bars::before,
.gw-nav__bars::after { content: ""; position: absolute; left: 0; }
.gw-nav__bars::before { top: -0.375rem; }
.gw-nav__bars::after  { top: 0.375rem; }
.gw-nav__toggle[aria-expanded="true"] .gw-nav__bars { background: transparent; }
.gw-nav__toggle[aria-expanded="true"] .gw-nav__bars::before { transform: translateY(0.375rem) rotate(45deg); }
.gw-nav__toggle[aria-expanded="true"] .gw-nav__bars::after  { transform: translateY(-0.375rem) rotate(-45deg); }

@media (max-width: 60rem) {          /* 960px */
  /* the collapsed menu is its own flex row: no row-gap, or it pads the bar */
  .gw-nav__inner { flex-wrap: wrap; row-gap: 0; }
  .gw-nav__toggle { display: inline-flex; }
  .gw-nav__cta { order: 2; margin-left: auto; }
  /* one wrapper, one grid row — otherwise the extra links make auto rows that
     never collapse */
  .gw-nav__links {
    display: grid;
    order: 4;
    flex-basis: 100%;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--gw-dur) var(--gw-ease);
  }
  .gw-nav__links-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    overflow: hidden;
  }
  .gw-nav.is-open .gw-nav__links { grid-template-rows: 1fr; }
  .gw-nav__link {
    padding: 0.875rem 0.25rem;
    border-top: 1px solid var(--gw-gray-100);
  }
}

@media (max-width: 30rem) {          /* 480px */
  .gw-nav__cta { padding: 0.5rem 0.75rem; }
  .gw-nav__cta-icon { width: 1rem; height: 1.16rem; }
}