/* ============================================================================
   Key for Change — Navigation component (task 12634)

   Fixed top nav. Transparent-over-hero → solid dark-purple on scroll.
   All colour / type / spacing / metric values come from tokens.css (--k4c-*);
   this file only lays out the nav. Loaded after tokens.css so it may reference
   every brand var. Mobile breakpoint: 768px (off-canvas panel below).
   ========================================================================== */

/* ---- The fixed bar ------------------------------------------------------- */
.k4c-nav {
  position: fixed;
  inset: 0 0 auto 0;                 /* top:0; left:0; right:0 */
  z-index: var(--k4c-z-nav);
  height: var(--k4c-nav-height);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color var(--k4c-transition),
              box-shadow var(--k4c-transition),
              height var(--k4c-transition);
}

/* Contrast scrim: dark fade under the bar so white text/logo stays legible at
   the very top even before the dark hero is in place, and over any light
   content that scrolls beneath. Fades out once the bar goes solid. */
.k4c-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--k4c-purple-900) 88%, transparent) 0%,
    color-mix(in oklab, var(--k4c-purple-900) 42%, transparent) 55%,
    transparent 100%
  );
  opacity: 1;
  transition: opacity var(--k4c-transition);
}

/* Scrolled state (toggled by nav.js) — solid brand purple + lift. */
.k4c-nav[data-scrolled="true"] {
  background: var(--k4c-purple);
  box-shadow: var(--k4c-shadow);
  height: calc(var(--k4c-nav-height) - 0.75rem);
}
.k4c-nav[data-scrolled="true"]::before { opacity: 0; }

.k4c-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k4c-space-5);
  width: 100%;
  height: 100%;
  position: relative;                /* sit above the scrim */
  z-index: 1;
}

/* ---- Brand / logo -------------------------------------------------------- */
.k4c-nav__brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}
.k4c-nav__logo {
  display: block;
  height: 2.6rem;                    /* attributes reserve the aspect box (CLS) */
  width: auto;
}

/* ---- Desktop link list --------------------------------------------------- */
.k4c-nav__menu { flex: 1 1 auto; display: flex; justify-content: center; }
.k4c-nav__list {
  display: flex;
  align-items: center;
  gap: var(--k4c-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.k4c-nav__link {
  position: relative;
  display: inline-block;
  padding: var(--k4c-space-2) 0;
  font-family: var(--k4c-font-heading);
  font-weight: var(--k4c-fw-semibold);
  font-size: var(--k4c-fs-sm);
  letter-spacing: 0.01em;
  color: var(--k4c-white);
  text-decoration: none;
  transition: color var(--k4c-transition);
}
/* Yellow underline grows from the centre on hover / focus / current page. */
.k4c-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--k4c-yellow);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--k4c-transition);
}
.k4c-nav__link:hover,
.k4c-nav__link:focus-visible { color: var(--k4c-yellow); }
.k4c-nav__link:hover::after,
.k4c-nav__link:focus-visible::after,
.k4c-nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* ---- Actions (CTA + hamburger) ------------------------------------------- */
.k4c-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--k4c-space-4);
  flex: 0 0 auto;
}
/* Tighten the shared .k4c-btn for the bar. */
.k4c-nav__cta {
  padding: var(--k4c-space-2) var(--k4c-space-5);
  font-size: var(--k4c-fs-sm);
}

/* Hamburger — hidden on desktop. */
.k4c-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.k4c-nav__bar {
  display: block;
  width: 26px;
  height: 2px;
  margin-inline: auto;
  background: var(--k4c-white);
  border-radius: var(--k4c-radius-pill);
  transition: transform var(--k4c-transition), opacity var(--k4c-transition);
}

/* ---- Shared focus ring (keyboard) ---------------------------------------- */
.k4c-nav__brand:focus-visible,
.k4c-nav__link:focus-visible,
.k4c-nav__toggle:focus-visible,
.k4c-nav__close:focus-visible,
.k4c-nav__panel-link:focus-visible,
.k4c-nav__cta:focus-visible,
.k4c-nav__panel-cta:focus-visible {
  outline: 3px solid var(--k4c-yellow);
  outline-offset: 3px;
  border-radius: var(--k4c-radius-sm);
}

/* ---- Off-canvas mobile panel + backdrop ---------------------------------- */
.k4c-nav__backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--k4c-z-overlay) - 1);
  background: color-mix(in oklab, var(--k4c-black) 55%, transparent);
  opacity: 0;
  transition: opacity var(--k4c-transition);
}
.k4c-nav__backdrop.is-open { opacity: 1; }

.k4c-nav__panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--k4c-z-overlay);
  display: flex;
  flex-direction: column;
  gap: var(--k4c-space-5);
  width: min(82vw, 340px);
  height: 100vh;
  height: 100dvh;
  padding: var(--k4c-space-8) var(--k4c-space-6) var(--k4c-space-6);
  background: var(--k4c-purple-dark);
  box-shadow: var(--k4c-shadow-lg);
  transform: translateX(100%);
  transition: transform var(--k4c-transition);
  overflow-y: auto;
}
.k4c-nav__panel.is-open { transform: translateX(0); }

.k4c-nav__close {
  position: absolute;
  top: var(--k4c-space-3);
  right: var(--k4c-space-4);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  color: var(--k4c-white);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.k4c-nav__panel-list {
  display: flex;
  flex-direction: column;
  gap: var(--k4c-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.k4c-nav__panel-link {
  display: block;
  padding: var(--k4c-space-3) 0;
  font-family: var(--k4c-font-heading);
  font-weight: var(--k4c-fw-semibold);
  font-size: var(--k4c-fs-lg);
  color: var(--k4c-white);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--k4c-white) 15%, transparent);
  transition: color var(--k4c-transition), padding-left var(--k4c-transition);
}
.k4c-nav__panel-link:hover,
.k4c-nav__panel-link:focus-visible {
  color: var(--k4c-yellow);
  padding-left: var(--k4c-space-2);
}
.k4c-nav__panel-cta { margin-top: var(--k4c-space-2); align-self: flex-start; }

/* ---- Responsive: collapse to hamburger < 768px --------------------------- */
@media (max-width: 767.98px) {
  .k4c-nav__menu,
  .k4c-nav__cta { display: none; }
  .k4c-nav__toggle { display: flex; }
}

/* ≥ 768px: panel + backdrop never shown (desktop uses the inline list). */
@media (min-width: 768px) {
  .k4c-nav__backdrop,
  .k4c-nav__panel { display: none; }
}

/* Body scroll-lock while the mobile panel is open (class set by nav.js). */
body.k4c-nav-open { overflow: hidden; }

/* Anchor targets shouldn't land hidden behind the fixed bar. */
:target { scroll-margin-top: calc(var(--k4c-nav-height) + var(--k4c-space-4)); }

/* CONCEPT SCAFFOLD — remove when the hero lands.
   Until the 100vh hero (task 12635) provides the dark backdrop the nav is
   designed to overlay, offset the body slot so the placeholder content isn't
   hidden under the fixed bar. The hero task renders a full-height section that
   sits *behind* the transparent nav and owns the top of the page; it signals
   that by adding `.has-hero` to <body>, which auto-disables this fallback. */
body:not(.has-hero) main#start { padding-top: var(--k4c-nav-height); }