/* One Fintok site-header contract.
   This file is loaded by both the Next application shell and the dependency-light static
   homepage. Keep the markup contract in sync with src/app/SiteHeader.tsx; the regression test
   fails if the static copy drifts from the React navigation. */

.fk-site-header {
  position: relative;
  z-index: 50;
  flex: none;
  background: var(--canvas, #ffffff);
  border-bottom: 1px solid var(--fk-hair, #e9e6de);
  color: var(--fk-ink, #17255a);
  font-family: var(--font-body), 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.fk-site-header--sticky {
  position: sticky;
  top: 0;
}

/* A FULL-STAGE SURFACE BRINGS ITS OWN HEADER, AND THIS ONE STANDS DOWN FOR IT.
   The lesson player, Lesson 0's player, the sandbox and the marketplace all render the engine's
   LessonHeader, which already carries the wordmark, the part-progress track, credits, sound and
   Exit. Those stages are `fixed inset-0` beneath this header's `z-index: 50`, so leaving both on
   screen paints the site nav over the stage's own top row: two wordmarks, and the learner's Exit,
   credits and progress buried under a signed-out "Start Free". The surface declares the marker;
   nothing here needs to know which routes those are, which matters because the player's routes are
   every unit slug and number in the course. */
body:has([data-lesson-chrome]) .fk-site-header {
  display: none;
}

.fk-site-header-row {
  box-sizing: border-box;
  width: 100%;
  max-width: 1152px;
  min-height: 63px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.fk-site-header-wordmark,
.fk-site-wordmark-link {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.fk-site-header .fk-session > .when-out { display: inline-flex; }
.fk-site-header .fk-session > .when-in { display: none; }
:root[data-session='in'] .fk-site-header .fk-session > .when-out { display: none; }
:root[data-session='in'] .fk-site-header .fk-session > .when-in { display: inline-flex; }

.fk-site-wordmark-image {
  display: block;
  width: auto;
  height: 15px;
}

.fk-header-switch {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  margin-left: auto;
}

.fk-header-switch > .when-out,
.fk-header-switch > .when-in {
  align-items: center;
  min-width: 0;
}

.fk-header-switch > .when-out { display: inline-flex; }
.fk-header-switch > .when-in { display: none; }
:root[data-session='in'] .fk-header-switch > .when-out { display: none; }
:root[data-session='in'] .fk-header-switch > .when-in { display: inline-flex; }

.fk-site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  color: var(--fk-meta, #6e6a5e);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.fk-site-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 0;
  color: inherit;
  text-decoration: none;
  transition: color 150ms ease;
}

.fk-site-nav-link:hover,
.fk-site-nav-link[aria-current='page'] {
  color: var(--fk-ink, #17255a);
}

.fk-site-nav-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
}

.fk-site-nav-caret {
  width: 7px;
  height: 7px;
  margin: -4px 1px 0 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transform-origin: 65% 65%;
  transition: transform 180ms ease;
}

.fk-site-nav-popover {
  position: absolute;
  z-index: 70;
  top: 100%;
  right: -14px;
  width: min(620px, calc(100vw - 48px));
  padding-top: 16px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px) scale(.992);
  transform-origin: top right;
  transition: opacity 160ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.fk-site-nav-popover-inner {
  border: 1px solid var(--fk-hair, #e9e6de);
  border-radius: 18px;
  padding: 16px;
  background: var(--canvas, #ffffff);
  box-shadow: 0 22px 52px rgba(15, 26, 68, .16), 0 5px 0 rgba(15, 26, 68, .08);
}

.fk-site-nav-popover-eyebrow {
  margin: 0;
  padding: 2px 7px 12px;
  color: var(--fk-meta, #6e6a5e);
  font-family: var(--fk-mono, ui-monospace), 'SFMono-Regular', Consolas, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.fk-site-nav-popover-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.fk-site-nav-popover-link {
  display: flex;
  min-width: 0;
  min-height: 88px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 14px;
  color: var(--fk-ink, #17255a);
  text-decoration: none;
  white-space: normal;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.fk-site-nav-popover-link strong,
.fk-site-nav-popover-link small {
  display: block;
}

.fk-site-nav-popover-link strong {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.fk-site-nav-popover-link small {
  max-width: 32ch;
  margin-top: 5px;
  color: var(--fk-meta, #6e6a5e);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}

.fk-site-nav-popover-arrow {
  flex: none;
  margin-top: 1px;
  color: var(--fk-emerald, #1b7a46);
  font-size: 14px;
  line-height: 1;
  transition: transform 160ms ease;
}

.fk-site-nav-popover-link:hover {
  border-color: var(--fk-hair, #e9e6de);
  background: var(--fk-frame, #f7f4ee);
  transform: translateY(-1px);
}

.fk-site-nav-popover-link:hover .fk-site-nav-popover-arrow {
  transform: translateX(2px);
}

.fk-site-nav-popover-link:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  min-height: 76px;
}

/* The 90ms delay is open intent: a cursor crossing the nav on its way somewhere else never
   flashes a panel; a cursor that pauses on a trigger gets one immediately enough to feel direct. */
.fk-site-nav-menu:hover .fk-site-nav-popover,
.fk-site-nav-menu:focus-within .fk-site-nav-popover {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 90ms;
}

.fk-site-nav-menu:hover .fk-site-nav-caret,
.fk-site-nav-menu:focus-within .fk-site-nav-caret {
  transform: rotate(225deg);
}

/* A click chose a destination: the panel drops at once and stays down — even while the pointer
   or a lingering focus still rests on the trigger — until fresh intent (the pointer leaving and
   returning) clears the latch. The React header sets and clears data-closed; the static homepage
   never needs it because its clicks are full page loads. Declared after the openers so equal
   specificity resolves in its favor. */
.fk-site-nav-menu[data-closed] .fk-site-nav-popover {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px) scale(.992);
  transition-delay: 0s;
}

.fk-site-nav-menu[data-closed] .fk-site-nav-caret {
  transform: rotate(45deg);
}

.fk-site-nav-menu--compact .fk-site-nav-popover {
  width: min(390px, calc(100vw - 48px));
}

.fk-site-nav-menu--compact .fk-site-nav-popover-grid {
  grid-template-columns: 1fr;
}

.fk-site-nav-menu--compact .fk-site-nav-popover-link {
  min-height: 0;
}

.fk-site-nav-active {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--fk-emerald, #1b7a46);
}

.fk-site-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--fk-ink, #17255a);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transition: background 150ms ease, transform 150ms ease;
}

.fk-site-nav-cta:hover {
  background: var(--fk-ink-hard, #0f1a44);
  color: #ffffff;
}

.fk-site-nav-cta:active { transform: translateY(1px); }

.fk-site-header a:focus-visible {
  outline: 3px solid var(--fk-ink, #17255a);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .fk-site-nav-caret,
  .fk-site-nav-popover,
  .fk-site-nav-popover-link,
  .fk-site-nav-popover-arrow {
    transition: none;
  }
}

@media (max-width: 760px) {
  .fk-site-header-row {
    min-height: 0;
    padding: 10px 20px 9px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
  }

  .fk-site-header-wordmark {
    flex-basis: 100%;
    justify-content: center;
  }

  .fk-header-switch {
    width: 100%;
    margin-left: 0;
  }

  .fk-header-switch > .when-out,
  .fk-header-switch > .when-in {
    width: 100%;
  }

  .fk-site-nav {
    width: 100%;
    justify-content: flex-start;
    gap: 18px;
    overflow-x: auto;
    padding: 0 2px 2px;
    scrollbar-width: none;
  }

  .fk-site-nav::-webkit-scrollbar { display: none; }
  .fk-site-nav > a,
  .fk-site-nav > .fk-site-nav-menu { flex: none; }

  /* A phone keeps the parent links as direct destinations. The large desktop
     panels would cover the page and leave no reliable hover target on touch. */
  .fk-site-nav-caret,
  .fk-site-nav-popover { display: none; }

  /* The visitor list is longer than the signed-in one, and on a phone the row
     scrolls — which used to carry Start Free off the right edge with no hint
     it existed. The CTA now rides sticky at the right edge while the text
     links scroll beneath it; the gradient pad keeps the overlap readable. */
  .fk-site-nav-cta {
    position: sticky;
    right: 0;
    margin-left: auto;
    flex: none;
    box-shadow: -18px 0 12px -6px rgba(255, 255, 255, 0.92);
  }
}

/* A DARK ROOM ASKS THE HEADER TO STOP INTERRUPTING IT.
   The case-study room — its Lobby index and every study's opening plate — is a screening surface on
   --fk-ink-hard, and an opaque white band across the top of it was the least cinematic element on
   the screen. On those surfaces the header overlays the dark ground instead: no background, no
   rule, paper type, sitting inside the top vignette that already exists there to guarantee small
   text is legible over a photograph.

   The surface declares the marker and the header component knows nothing about which routes those
   are — the same contract `data-lesson-chrome` uses above, and the reason every other route in the
   site renders byte-identically to before: not one rule below applies without the attribute.

   Absolute, never sticky. The header is in normal document flow everywhere else and taking it out
   of flow is the whole trick — the plate then begins at the viewport's literal top edge, and its
   own padding reserves this band inside itself. Sticky would put a floating strip over a
   photograph that is already scrolling under it, which is a different design and a worse one. */
body:has([data-cinema-chrome]) .fk-site-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: transparent;
  border-bottom-color: transparent;
  color: var(--fk-paper, #ffffff);
}

/* The wordmark asset is a navy logotype and there is no light cut of it. It is flat single-colour
   art, so inverting it in place is exact rather than approximate, and cheaper than a second file
   that would then have to be kept in step with the first. */
body:has([data-cinema-chrome]) .fk-site-wordmark-image {
  filter: brightness(0) invert(1);
}

body:has([data-cinema-chrome]) .fk-site-nav {
  color: rgba(255, 255, 255, 0.72);
}

body:has([data-cinema-chrome]) .fk-site-nav-link:hover,
body:has([data-cinema-chrome]) .fk-site-nav-link[aria-current='page'] {
  color: var(--fk-paper, #ffffff);
}

/* The active-route underline is emerald on paper, which on near-black is a dark line on a dark
   ground — the one nav element that would have vanished exactly where the reader is standing. */
body:has([data-cinema-chrome]) .fk-site-nav-active {
  background: var(--fk-paper, #ffffff);
}

body:has([data-cinema-chrome]) .fk-site-nav-cta {
  background: var(--fk-paper, #ffffff);
  color: var(--fk-ink-hard, #0f1a44);
}

body:has([data-cinema-chrome]) .fk-site-nav-cta:hover {
  background: var(--fk-paper, #ffffff);
  color: var(--fk-ink, #17255a);
}

body:has([data-cinema-chrome]) .fk-site-header a:focus-visible {
  outline-color: var(--fk-paper, #ffffff);
}

/* The dropdown panel keeps its own solid ground and its own ink — it is a menu, not part of the
   screening surface, and a panel that inherited transparency here would be unreadable type over a
   photograph. Nothing about it changes except the scroll pad below. */
@media (max-width: 760px) {
  /* The phone rail fades the scrolling links out from under the sticky CTA with a white smear.
     On the dark ground that smear is the brightest thing on the page, so it takes the ground. */
  body:has([data-cinema-chrome]) .fk-site-nav-cta {
    box-shadow: -18px 0 12px -6px rgba(20, 29, 69, 0.92);
  }
}