/* ==========================================================================
   wosh.productions — floating pill navigation
   --------------------------------------------------------------------------
   Turns the full-bleed .site-nav bar into two separate pills floating over
   the page: the wordmark on the left, the link group on the right.

   Loaded LAST in <head> on every page, after that page's own inline
   <style>, so it wins over both nav.css and any per-page rule. Do not
   reorder the <link>.

   The surface values below are copied verbatim from nav.css .site-nav so
   the pills read as the same material as the bar they replace:
     background      rgba(255,255,255,0.82)
     backdrop-filter saturate(180%) blur(14px)
     border          --hairline (raised, see "Hairline" below)
   No colours are redesigned here.

   GEOMETRY IS DELIBERATELY PINNED IN px. nav.css sizes the nav in rem, so a
   page that changed its root font-size would render pills at a different
   size from every other page. Everything below is px for that reason.

   Total pill height is 48px + 10px padding top and bottom = 68px, which is
   exactly --nav-h. That matters: .site-nav-spacer and
   `html { scroll-padding-top: var(--nav-h) }` are both calibrated to 68px on
   ~90 pages, so keeping the total identical means no page needs retuning.
   If you change 10px or 48px here, change --nav-h in site.css with it.
   ========================================================================== */

:root {
  /* Copied from nav.css .site-nav. Reused so both stay one material. */
  --nav-pill-bg: rgba(255, 255, 255, 0.82);
  --nav-pill-blur: saturate(180%) blur(14px);
  /* nav.css uses --hairline for the scrolled underline. Raised from
     rgba(0,0,0,.12) to .20 so the pill outline actually reads on a light
     surface: on white, "30-35% white" would be invisible, so the same job is
     done with black at a comparable weight. Still 1px, still subtle. */
  --nav-pill-line: rgba(0, 0, 0, 0.2);
  --nav-pill-h: 48px;
  --nav-pill-pad: 10px;
  --nav-pill-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .06);
  --nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Container: strip the bar ─────────────────────────────────────────────
   pointer-events:none so the transparent gap between and around the pills
   stops swallowing clicks on the page underneath. Interactive children turn
   it back on below. */
.site-nav {
  /* Kept `fixed` rather than switched to `sticky`: the bar takes no space in
     flow and ~90 pages offset themselves with .site-nav-spacer, which is
     sized to a fixed bar. Switching to sticky would double that offset. */
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 90;
  height: auto !important;
  padding: var(--nav-pill-pad) 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  /* Must be none, or the container becomes the containing block for the
     position:fixed mobile panel and the panel anchors to the bar instead of
     the viewport. nav.css sets this too, but only inside its 900px query. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none;
}

/* nav.css toggles a border-bottom on scroll. With no bar there is nothing to
   draw it under, so the state is neutralised here. */
.site-nav[data-scrolled="true"] {
  border-bottom-color: transparent !important;
}

.site-nav__inner {
  height: auto !important;
  min-height: var(--nav-pill-h);
  align-items: center;
  pointer-events: none;
}

/* Re-enable interaction on the direct children only. */
.site-nav__inner > * {
  pointer-events: auto;
}

/* ── Pill surface ────────────────────────────────────────────────────────
   Shared by the wordmark, the link group and the burger, so they read as
   the same object. */
.site-nav__brand,
.site-nav__menu,
.site-nav__burger {
  border-radius: 999px;
  border: 1px solid var(--nav-pill-line);
  background: var(--nav-pill-bg);
  -webkit-backdrop-filter: var(--nav-pill-blur);
  backdrop-filter: var(--nav-pill-blur);
  box-shadow: var(--nav-pill-shadow);
}

/* ── Wordmark pill ─────────────────────────────────────────────────────── */
.site-nav__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--nav-pill-h);
  padding: 0 18px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  white-space: nowrap;
  /* nav.css pushes the menu right with margin-right:auto on the brand.
     Kept, and mirrored on the menu, so the pair separates cleanly. */
  margin-right: auto;
  transition: transform .3s var(--nav-ease), box-shadow .3s var(--nav-ease);
}

.site-nav__brand:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 10px 24px rgba(0, 0, 0, .08);
}

/* ── Link group pill (desktop) ─────────────────────────────────────────── */
.site-nav__menu {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: var(--nav-pill-h);
  padding: 0 8px 0 16px !important;
  margin-left: auto;
  margin-right: 0;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px !important;
}

.site-nav__list a {
  font-size: 14px !important;
  /* Underline is drawn 6px below the baseline by nav.css; inside a pill that
     pushes it into the padding. Tightened so it sits under the text. */
  line-height: 1;
}

.site-nav__list a::after {
  bottom: -4px;
}

.site-nav__cta {
  min-height: 40px;
  padding: 0 18px !important;
  font-size: 14px !important;
  border-radius: 999px;
}

.site-nav__lang {
  font-size: 13px !important;
  padding: 0 10px 0 14px !important;
  border-left: 1px solid var(--nav-pill-line);
  min-height: 26px;
  display: inline-flex;
  align-items: center;
}

/* ── Burger pill ───────────────────────────────────────────────────────── */
.site-nav__burger {
  display: none;
  width: var(--nav-pill-h);
  min-width: var(--nav-pill-h);
  height: var(--nav-pill-h);
  margin-right: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 4px gap + 1.5px bar puts the bar centres 5.5px apart. The X below is
     translated by exactly that distance — nav.css used 6.5px, which only
     lined up because its bars were 10px apart via `margin: 5px auto`. Zeroing
     those margins without re-deriving this is what folds the X into a single
     stroke. */
  gap: 4px;
}

.site-nav__burger span {
  display: block;
  width: 20px;
  height: 1.5px;
  margin: 0;
  background: currentColor;
}

body[data-menu="open"] .site-nav__burger span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

body[data-menu="open"] .site-nav__burger span:nth-child(2) {
  opacity: 0;
}

body[data-menu="open"] .site-nav__burger span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* ==========================================================================
   Mobile — the panel grows out of the burger pill
   ========================================================================== */
@media (max-width: 900px) {

  /* A content-height card tucked under the nav, not a full-screen sheet. It
     starts below the wordmark pill and ends just after the last item. */
  .site-nav__menu {
    /* Positioned against the nav itself, not the viewport. The nav is
       position:fixed so it is the containing block, and top:100% therefore
       tracks whatever the header's real height turns out to be — no fixed
       header height is hard-coded anywhere. */
    position: absolute;
    top: 100%;
    bottom: auto;
    /* Aligned to the same gutter as the wordmark pill, and no wider than a
       card, so it reads as belonging to the same layout. */
    left: var(--gutter, clamp(1.25rem, 5vw, 4.5rem));
    right: var(--gutter, clamp(1.25rem, 5vw, 4.5rem));
    max-width: 560px;
    margin-inline: auto;
    /* Height follows the content, so the sheet ends just below the last item
       instead of running to the bottom of the screen. */
    height: auto;
    /* Safety valve on short viewports: past this it scrolls rather than
       growing off the bottom. */
    max-height: calc(100dvh - var(--nav-pill-pad) - var(--nav-pill-h) - 24px);
    z-index: 1;
    /* !important because the desktop pill rule above declares padding and
       display with !important to beat nav.css. Without repeating it here, the
       panel silently keeps the desktop pill's padding and the links start
       underneath the wordmark. */
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 20px 24px 24px !important;
    overflow-y: auto;
    border-radius: 999px;
    /* DELIBERATE DEVIATION from the pills.
       The pills keep the bar's exact 0.82 white because they are small and sit
       over the page background, so they read correctly. This panel floats over
       arbitrary content — a hero, a dark band, a photo — and at 0.82 white
       plus a blur the body copy behind it stays legible through the card; the
       blur also samples whatever is behind, so identical CSS renders
       differently over different sections. The panel therefore gets the site's
       solid --paper base for legibility, keeping the same blur. This is the
       remedy for that failure mode, not a redesign. */
    background: var(--paper, #ffffff);
    -webkit-backdrop-filter: var(--nav-pill-blur);
    backdrop-filter: var(--nav-pill-blur);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .16);

    /* Rest state: collapsed to the burger's own shape. */
    transform: scale(.18, .12);
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;

    /* visibility is discrete: with a duration it flips mid-transition and the
       links inside are unfocusable until it does. Delay it to the end on
       close, apply it instantly on open. */
    transition:
      transform 340ms var(--nav-ease),
      opacity 220ms var(--nav-ease),
      border-radius 340ms var(--nav-ease),
      visibility 0s linear 340ms;
  }

  body[data-menu="open"] .site-nav__menu {
    transform: scale(1);
    border-radius: 20px;
    opacity: 1;
    visibility: visible;
    transition:
      transform 340ms var(--nav-ease),
      opacity 220ms var(--nav-ease),
      border-radius 340ms var(--nav-ease),
      visibility 0s;
  }

  /* Wordmark and burger sit above the panel so the burger stays tappable. */
  .site-nav__brand,
  .site-nav__burger {
    position: relative;
    z-index: 2;
  }

  .site-nav__burger {
    display: flex;
  }

  /* Links are laid out with flex, not display:block, so a long label wraps
     inside the panel instead of forcing it wider than the viewport. The li
     takes the full width and the anchor stays inline, which is what lets the
     text wrap without a min-width pushing the panel out. */
  .site-nav__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 26px !important;
    width: 100%;
  }

  .site-nav__list li {
    width: 100%;
  }

  .site-nav__list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 26px !important;
    line-height: 1.25;
    color: var(--ink, #000);
    /* The padding must participate in layout so adjacent tap targets do not
       overlap. Allow long labels to wrap inside the card. */
    padding: 6px 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .site-nav__list a::after {
    display: none;
  }

  /* Stagger, so the links arrive after the panel has started opening. */
  .site-nav__list a,
  .site-nav__cta,
  .site-nav__lang {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 260ms var(--nav-ease), transform 260ms var(--nav-ease);
  }

  body[data-menu="open"] .site-nav__list a,
  body[data-menu="open"] .site-nav__cta,
  body[data-menu="open"] .site-nav__lang {
    opacity: 1;
    transform: none;
  }

  body[data-menu="open"] .site-nav__list li:nth-child(1) > a { transition-delay: 120ms; }
  body[data-menu="open"] .site-nav__list li:nth-child(2) > a { transition-delay: 150ms; }
  body[data-menu="open"] .site-nav__list li:nth-child(3) > a { transition-delay: 180ms; }
  body[data-menu="open"] .site-nav__list li:nth-child(4) > a { transition-delay: 210ms; }
  body[data-menu="open"] .site-nav__list li:nth-child(5) > a { transition-delay: 240ms; }
  body[data-menu="open"] .site-nav__list li:nth-child(n + 6) > a { transition-delay: 260ms; }
  body[data-menu="open"] .site-nav__cta { transition-delay: 300ms; }
  body[data-menu="open"] .site-nav__lang { transition-delay: 330ms; }

  .site-nav__cta {
    margin-top: 18px;
    align-self: flex-start;
  }

  .site-nav__lang {
    margin-top: 14px;
    padding: 0 !important;
    border-left: 0 !important;
    font-size: 14px !important;
  }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  .site-nav__menu,
  .site-nav__list a,
  .site-nav__cta,
  .site-nav__lang,
  .site-nav__brand {
    transition-duration: 1ms !important;
  }

  .site-nav__list a,
  .site-nav__cta,
  .site-nav__lang {
    opacity: 1;
    transform: none;
  }
}

/* ── Pills over an all-dark page ──────────────────────────────────────────
   The project case studies (/projekti/*, /en/projects/*) paint the whole
   <body> black. At 82% white the pills blend with that into a flat mid-grey
   that reads as disabled. Those pages opt in with
   <body data-nav-surface="dark"> and get an opaque pill, so they show the
   same white object as every other page. (0.96 still came out #f4f4f4: the
   saturate/blur backdrop pulls the black through any translucency.) */
body[data-nav-surface="dark"] {
  --nav-pill-bg: #ffffff;
}