/* Site shell — nav (and later footer). Plain CSS on --k- tokens, no Tailwind, so the
   same markup renders identically in Next and inside the static case studies.
   Every class is prefixed k- : Nordra's prototype already uses .site-nav__*. */

@font-face {
  font-family: "Clash Display";
  src: url("/fonts/ClashDisplay-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
}

/* Height of the fixed nav, for pages that need to clear it. */
:root { --k-nav-height: 96px; --k-nav-collapse-max: 0px; }
/* Mobile: the top row (38px wordmark/contact links + 12px gap) scrolls away; see Mobile below. */
@media (max-width: 767px) { :root { --k-nav-height: 130px; --k-nav-collapse-max: 50px; } }

/* --------------------------------------------------------------- Icons ---- */

/* Figma icons are single-colour strokes, drawn as masks so they follow
   currentColor. */
.k-icon {
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  mask: var(--icon) center / contain no-repeat;
}
.k-icon--work    { --icon: url("/icons/work.svg"); }
.k-icon--process { --icon: url("/icons/process.svg"); }
.k-icon--about   { --icon: url("/icons/about.svg"); }
.k-icon--contact { --icon: url("/icons/contact.svg"); }
.k-icon--email    { --icon: url("/icons/email.svg"); }
.k-icon--download { --icon: url("/icons/download.svg"); }
.k-icon--linkedin { --icon: url("/icons/linkedin.svg"); }
.k-icon--arrow-up-right { --icon: url("/icons/arrow-up-right.svg"); }
.k-icon--copy     { --icon: url("/icons/copy.svg"); }
.k-icon--chevrons-down { --icon: url("/icons/chevrons-down.svg"); }
.k-icon--book     { --icon: url("/icons/book.svg"); }
.k-icon--business { --icon: url("/icons/business.svg"); }
.k-icon--briefcase { --icon: url("/icons/briefcase.svg"); }
.k-icon--check    { --icon: url("/icons/check.svg"); }

/* ---------------------------------------------------------------- Nav ---- */

/* The host is the fixed, z-indexed layer. On case studies the inner .k-nav carries
   view-transition-name (a stacking context); keeping the z-index on the host means
   the named hero can never paint over the nav. */
site-nav {
  display: block;
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
}

/* Progressive blur behind the nav (Figma: 10px background blur). One blurred box
   ends in a hard edge, so two masked layers fade it out instead: a light blur
   that runs a little past the nav, and a stronger one that fades sooner. A faint
   dark tint on the first keeps the pill and wordmark legible over bright content. */
site-nav::before,
site-nav::after {
  content: "";
  position: absolute;
  inset: 0 0 -40px;
  z-index: -1;
  pointer-events: none;
}
site-nav::before {
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.45), transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
site-nav::after {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 75%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 75%);
}

/* Figma 568:787 — 3 columns: wordmark, centred pill, contact links (in place of
   Figma's theme switch 547:504; the site is dark-only). */
.k-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "mark menu social";
  align-items: center;
  padding: var(--k-spacing-24) 72px;
  font-family: var(--k-font-body);
  color: var(--k-text-primary);
  -webkit-font-smoothing: antialiased;
}

/* Main pages have Tailwind's reset and the case studies don't, so the shell
   resets what it relies on itself. :where() keeps these at zero specificity. */
.k-nav :where(*, *::before, *::after) { box-sizing: border-box; }
.k-nav :where(ul) { margin: 0; padding: 0; list-style: none; }
.k-nav :where(img) { display: block; max-width: none; }
.k-nav :where(button) { font: inherit; }

.k-nav__wordmark {
  grid-area: mark;
  justify-self: start;
  font-family: var(--k-font-wordmark);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: var(--k-text-primary);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}

/* The rest of the name sits between "K" and "." in a grid column that animates
   0fr -> 1fr, so it opens to the right at its natural width with no measuring.
   Only where there is hover and room: at 1180px the 1fr column beside the pill
   is wider than the full name. */
.k-nav__wordmark-rest {
  display: inline-grid;
  grid-template-columns: 0fr;
  transition: grid-template-columns 420ms cubic-bezier(.2, .8, .2, 1);
}
.k-nav__wordmark-rest > span {
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  translate: -6px 0;
  transition: opacity 260ms ease, translate 420ms cubic-bezier(.2, .8, .2, 1);
}
@media (hover: hover) and (min-width: 1180px) {
  .k-nav__wordmark:is(:hover, :focus-visible) .k-nav__wordmark-rest { grid-template-columns: 1fr; }
  .k-nav__wordmark:is(:hover, :focus-visible) .k-nav__wordmark-rest > span {
    opacity: 1;
    translate: 0 0;
    transition-delay: 60ms, 0s;
  }
}

/* Figma 557:1438 */
.k-nav__menu {
  grid-area: menu;
  display: flex;
  gap: 2px;
  height: 48px;
  padding: var(--k-spacing-4);
  background: var(--k-bg-chrome);
  border: 1px solid var(--k-border-subtle);
  border-radius: var(--k-corner-radius-full);
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.25));
}

.k-nav__menu > li { position: relative; display: flex; }

/* Figma 557:1364 — Default / Hover / Active */
.k-nav__item {
  display: flex;
  align-items: center;
  gap: var(--k-spacing-4);
  height: 38px;
  padding: 0 var(--k-spacing-24);
  border-radius: var(--k-corner-radius-full);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--k-text-tertiary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms ease, background-color 150ms ease;
}

.k-nav__item .k-icon { display: none; }
.k-nav__item:hover { color: var(--k-text-link); }

.k-nav__item[aria-current] {
  background: var(--k-bg-surface-inverted);
  color: var(--k-text-on-inverted);
}
.k-nav__item[aria-current] .k-icon { display: block; }

.k-nav__item:focus-visible,
.k-nav__wordmark:focus-visible,
.k-nav__social-link:focus-visible,
.k-submenu__item:focus-visible {
  outline: 2px solid var(--k-text-link);
  outline-offset: 2px;
}

/* Same pill as Figma's theme switch (547:504), holding two icon links. */
.k-nav__social {
  grid-area: social;
  justify-self: end;
  display: flex;
  gap: 2px;
  height: 38px;
  padding: 2px;
  background: var(--k-bg-chrome);
  border: 1px solid var(--k-border-subtle);
  border-radius: var(--k-corner-radius-full);
}

.k-nav__social-link {
  display: grid;
  place-items: center;
  width: 38px;
  height: 32px;
  border-radius: var(--k-corner-radius-full);
  color: var(--k-text-tertiary);
  transition: color 150ms ease, background-color 150ms ease;
}
.k-nav__social-link .k-icon { width: 18px; height: 18px; }
.k-nav__social-link:hover {
  background: var(--k-bg-surface);
  color: var(--k-text-primary);
}

/* ------------------------------------------------------- Work submenu ---- */

/* Figma 557:1058. Opens on hover / keyboard focus of the Work item, on devices
   that hover. Touch devices skip it: Work goes to the homepage card grid. */
.k-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  padding-top: 14px;          /* bridge so the pointer can travel from the pill */
  /* Centred under Work; site-nav.js sets the shift when centring would overflow. */
  translate: calc(-50% + var(--k-submenu-shift, 0px)) 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s 160ms;
}

@media (hover: hover) {
  .k-nav__work:hover .k-submenu,
  .k-nav__work:focus-within .k-submenu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
}

.k-submenu__list {
  display: flex;
  flex-direction: column;
  width: 500px;            /* Figma 470; a little extra so no line wraps change on hover */
  padding: 40px;
  background: var(--k-bg-chrome);
  border: 1px solid var(--k-border-subtle);
  border-radius: var(--k-corner-radius-22);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.k-submenu__list > li + li {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--k-divider);
}

/* Figma 557:1007 — Default / Hover / Active */
.k-submenu__item {
  display: flex;
  align-items: center;
  gap: var(--k-spacing-24);
  text-decoration: none;
  border-radius: 12px;
}

.k-submenu__thumb {
  display: grid;
  flex: none;
  width: 80px;
}
.k-submenu__thumb img {
  grid-area: 1 / 1;
  width: 80px;
  height: auto;
  transition: opacity 200ms ease;
}
.k-submenu__thumb img:first-child { opacity: 0.6; }
.k-submenu__thumb img:last-child  { opacity: 0; }

.k-submenu__text {
  display: flex;
  flex-direction: column;
  gap: var(--k-spacing-12);
  min-width: 0;
}

.k-submenu__title {
  font-family: var(--k-font-title);
  font-weight: 700;
  font-size: 26px;
  line-height: 26px;
  letter-spacing: -0.78px;
  color: var(--k-text-primary);
  transition: color 200ms ease;
}

.k-submenu__blurb {
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  letter-spacing: -0.14px;
  color: var(--k-text-secondary);
}

.k-submenu__text { transition: transform 200ms ease; }
/* Figma's hover widens the gap 24 -> 32px. Done as a transform so the text column
   keeps its width and never re-wraps. */
.k-submenu__item:hover .k-submenu__text { transform: translateX(var(--k-spacing-8)); }
.k-submenu__item:hover .k-submenu__title { color: var(--k-text-link); }

.k-submenu__item:hover .k-submenu__thumb img:first-child,
.k-submenu__item[aria-current] .k-submenu__thumb img:first-child { opacity: 0; }
.k-submenu__item:hover .k-submenu__thumb img:last-child,
.k-submenu__item[aria-current] .k-submenu__thumb img:last-child  { opacity: 1; }

/* ------------------------------------------------------------ Mobile ---- */

/* No mobile frame in Figma yet: wordmark + contact links on one row, the pill centred
   full-width below. Flagged for design review. */
@media (max-width: 767px) {
  .k-nav {
    grid-template-columns: 1fr auto;
    grid-template-areas: "mark social" "menu menu";
    row-gap: var(--k-spacing-12);
    padding: var(--k-spacing-16);
  }
  .k-nav__menu { justify-self: center; max-width: 100%; }
  .k-nav__item { padding: 0 var(--k-spacing-12); }

  /* The wordmark/contact row scrolls off with the page; the pill stays, floating
     16px from the top. --k-nav-collapse is set from scrollY by site-nav.js. */
  site-nav { translate: 0 calc(-1 * var(--k-nav-collapse, 0px)); }
  /* Fade as they go (0 -> 1 progress), so no sliver of the taller contact pill is
     left at the top edge. */
  .k-nav__wordmark,
  .k-nav__social { opacity: calc(1 - var(--k-nav-collapse-p, 0)); }

  /* The blur layers stay pinned to the viewport top: shifted up with the nav, a
     backdrop blur samples the empty area above the screen and fades to grey.
     They also stop 8px short of the nav's bottom edge (not 40px past it), so
     whatever sticks just under the pill, like the Process tabs, isn't blurred. */
  site-nav::before,
  site-nav::after {
    top: var(--k-nav-collapse, 0px);
    bottom: 8px;
  }

  /* Hiding or re-showing the top row on a scroll-direction change jumps it by
     up to 50px; site-nav.js sets .k-nav-snap for that moment so it slides. */
  .k-nav-snap site-nav,
  .k-nav-snap site-nav::before,
  .k-nav-snap site-nav::after,
  .k-nav-snap .k-nav-follow { transition: translate 250ms ease, top 250ms ease; }
  .k-nav-snap :is(.k-nav__wordmark, .k-nav__social) { transition: opacity 250ms ease; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .k-nav-snap :is(site-nav, .k-nav-follow, .k-nav__wordmark, .k-nav__social),
  .k-nav-snap site-nav::before,
  .k-nav-snap site-nav::after { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .k-submenu, .k-submenu__text, .k-submenu__thumb img,
  .k-nav__wordmark-rest, .k-nav__wordmark-rest > span { transition: none; }
}