/* ==========================================================================
   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 1099px 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: 1099px) {

  /* 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, 1.5rem));
    right: var(--gutter, clamp(1.25rem, 5vw, 1.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,
  .lang-row {
    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,
  body[data-menu="open"] .lang-row {
    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,
  body[data-menu="open"] .lang-row { 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;
}

/* ── Current page and hover: a filled pill, not an underline ──────────────
   As on rijeka.party: the page you are on sits in a soft grey pill, the same
   pill hover shows, so "here" and "you can go here" read the same way. The
   sliding underline from nav.css is switched off. nav.js still sets
   aria-current="page"; only the look changes. */
.site-nav__list a::after {
  display: none;
}

@media (min-width: 1100px) {
  /* The pills carry their own padding, so the list gap and the menu's left
     padding shrink by about the same amount and the text stays where it was. */
  .site-nav__menu {
    padding-left: 6px !important;
  }

  .site-nav__list {
    gap: 2px;
  }

  .site-nav__list a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    transition: color .25s var(--nav-ease), background-color .25s var(--nav-ease);
  }

  .site-nav__list a:hover,
  .site-nav__list a[aria-current="page"] {
    color: var(--ink, #000);
    background: rgba(0, 0, 0, .07);
  }
}

/* The current page is also a touch bolder, so it doesn't rely on colour
   alone (the pill is a faint tint; WCAG 1.4.1). */
.site-nav__list a[aria-current="page"] {
  font-weight: 500;
}

@media (max-width: 1099px) {
  /* In the open panel: the same pill, pulled left by its own padding so the
     text lines up with the links above and below it. */
  .site-nav__list a[aria-current="page"] {
    margin-left: -14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .07);
  }
}

/* Just above the burger breakpoint the Croatian bar (eight links since
   "AI" joined, plus the HR | EN pill) fills the width; tighter pills keep it inside the
   content edge. Below 1100px the burger menu takes over. */
@media (min-width: 1100px) and (max-width: 1199px) {
  .site-nav__list {
    gap: 0;
  }

  .site-nav__list a {
    padding: 0 9px;
  }
}


/* ── Reading progress (nav.js §6) ───────────────────────────────────────── */
/* Reading progress on articles: a line inside the bottom edge of the link
   pill on desktop, a ring around the menu button on phones. Decorative;
   the contents list says where you are in words. */
.nav-ring {
  display: none;
}

/* Desktop: along the bottom of the whole link pill, from the first link to
   EN, just inside its border (over the pill's own background, so page text
   scrolling underneath never crosses it). Inset 24px each side, the pill's
   radius, so it stays on the straight part of the edge. A faint track shows
   it is progress even at 0. */
@media (min-width: 1100px) {
  .site-nav[data-reading="true"] .site-nav__menu {
    position: relative;
  }

  .site-nav[data-reading="true"] .site-nav__menu::before,
  .site-nav[data-reading="true"] .site-nav__menu::after {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 1px;
    height: 2px;
    border-radius: 2px;
    pointer-events: none;
  }

  .site-nav[data-reading="true"] .site-nav__menu::before {
    background: rgba(0, 0, 0, .08);
  }

  .site-nav[data-reading="true"] .site-nav__menu::after {
    background: var(--ink, #000);
    transform: scaleX(var(--readf, 0));
    transform-origin: left;
  }
}

@media (max-width: 1099px) {
  .site-nav[data-reading="true"] .nav-ring {
    display: block;
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(var(--ink, #000) 0 var(--read, 0%), rgba(0, 0, 0, .1) var(--read, 0%) 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
    pointer-events: none;
  }

  body[data-menu="open"] .nav-ring {
    display: none !important;
  }
}

/* ── "Fond sati · <month>" (nav.js §7) ─────────────────────────────────────
   In the bar beside the wordmark when it fits; otherwise at the top of the
   phone menu. Only one of the two is ever shown. */
.nav-month {
  display: none;
  align-items: center;
  gap: 9px;
  color: var(--ink, #000);
  text-decoration: none;
  white-space: nowrap;
}

.nav-month b {
  display: grid;
  place-items: center;
  height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--ink, #000);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
}

.nav-month span {
  color: var(--muted, rgba(0, 0, 0, .58));
}

.site-nav[data-month="bar"] .site-nav__brand {
  margin-right: 0;
  flex-shrink: 0;
}

.site-nav[data-month="bar"] .nav-month--bar {
  display: inline-flex;
  flex-shrink: 0;
  min-height: var(--nav-pill-h);
  margin-right: auto;
  padding: 0 16px 0 8px;
  border: 1px solid var(--nav-pill-line);
  border-radius: 999px;
  background: var(--nav-pill-bg);
  -webkit-backdrop-filter: var(--nav-pill-blur);
  backdrop-filter: var(--nav-pill-blur);
  box-shadow: var(--nav-pill-shadow);
  font-size: 14px;
  transition: transform .3s var(--nav-ease), box-shadow .3s var(--nav-ease);
}

.site-nav[data-month="bar"] .nav-month--bar:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 10px 24px rgba(0, 0, 0, .08);
}

@media (max-width: 1099px) {
  .site-nav[data-month="menu"] .nav-month--menu {
    display: flex;
    width: 100%;
    min-height: 52px;
    margin-bottom: 6px;
    padding: 0 16px 0 10px;
    border-radius: 16px;
    background: var(--wash, #f6f6f4);
    font-size: 16px;
  }
}


/* ── HR | EN switch ─────────────────────────────────────────────────────────
   Same design as rijeka.party, in wosh's colours. Desktop: its own pill after
   the link pill (10px apart), always visible. Phones and tablets: not in the
   bar; a "Jezik" row at the bottom of the menu panel, under a hairline.
   nav.js points each segment at the matching page. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  flex-shrink: 0;
  border: 1px solid var(--nav-pill-line);
  border-radius: 999px;
  background: var(--nav-pill-bg);
  -webkit-backdrop-filter: var(--nav-pill-blur);
  backdrop-filter: var(--nav-pill-blur);
  box-shadow: var(--nav-pill-shadow);
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--muted, rgba(0, 0, 0, .58));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;
  text-decoration: none;
  transition: color .25s var(--nav-ease), background-color .25s var(--nav-ease);
}

.lang-switch a:hover {
  color: var(--ink, #000);
  background: rgba(0, 0, 0, .07);
}

.lang-switch a[aria-current] {
  color: #fff;
  background: var(--ink, #000);
}

.lang-row {
  display: none;
}

@media (min-width: 1100px) {
  .site-nav__inner {
    column-gap: 10px;
  }

  /* The button is now the last thing in the link pill: same 4px inset on
     the right as above and below it. */
  .site-nav__menu {
    padding-right: 4px !important;
  }
}

@media (max-width: 1099px) {
  .site-nav__inner > .lang-switch {
    display: none;
  }

  .lang-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 8px;
    padding: 14px 0 4px;
    border-top: 1px solid var(--hairline, rgba(0, 0, 0, .12));
  }

  .lang-row > span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted, rgba(0, 0, 0, .58));
  }

  .lang-row .lang-switch {
    box-shadow: none;
  }

  .lang-row .lang-switch a {
    min-width: 52px;
    min-height: 40px;
  }
}