/* Light navigation for NordMove — the ARC bar in the company's own colours.
   Scoped to .ln-* so nothing else on the site changes. */

#main-nav .nav-line { display: none !important; }

.ln-rail {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 46%),
    rgba(0, 0, 0, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 10px 26px -16px rgba(0, 0, 0, 0.8);
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
  user-select: none;
  max-width: 100%;
}

.ln-light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

#ln-lamp {
  fill: url(#ln-fill);
  stroke: url(#ln-lit);
  stroke-width: 1.7;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 3px rgba(var(--accent-rgb), 0.5))
    drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.28));
}

#ln-tip {
  fill: #fff;
  opacity: 0;
  filter:
    drop-shadow(0 0 4px #fff)
    drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.9));
}

.ln-link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.18s ease;
}

.ln-link:hover,
.ln-link:focus-visible,
.ln-link.is-near {
  color: var(--page-ink);
}

.ln-link[aria-current="page"] { color: var(--page-ink); }

.ln-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ln-item {
  position: relative;
  display: flex;
  align-items: center;
}

/* the invisible bridge keeps the pointer inside the item while it crosses the 12px gap */
.ln-item::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 100%;
  height: 18px;
}

.ln-sub {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  min-width: 200px;
  padding: 7px;
  border-radius: 12px;
  background: #262626;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -8px) scale(0.98);
  transform-origin: top center;
  transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 220ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 220ms;
  z-index: 30;
}

.ln-item.is-open .ln-sub,
.ln-item:focus-within .ln-sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0s;
}

.ln-sub a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.ln-sub a:hover,
.ln-sub a:focus-visible {
  background: rgba(var(--accent-rgb), 0.09);
  color: var(--page-ink);
}

/* phone: the site folds the menu into the panel behind the three-line button.
   Inside that panel the bar stays a row and scrolls sideways if it must. */
@media (max-width: 980px) {
  #main-nav .ln-rail {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: visible;
    padding: 5px;
    scrollbar-width: none;
  }
  #main-nav .ln-rail::-webkit-scrollbar { display: none; }
  .ln-link { height: 40px; padding: 0 12px; font-size: 13px; }
  .ln-sub {
    left: 0;
    transform: translate(0, -5px);
    min-width: 190px;
  }
  .ln-item:hover .ln-sub,
  .ln-item:focus-within .ln-sub {
    transform: translate(0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ln-link { transition: none; }
  .ln-sub { transition: none; }
}

/* ----------------------------- glass material (homepage) -----------------------------
   The owner's new reference (2026-10-17): a floating glass bar over the film. The header is
   lifted out of the flow so the video runs underneath it, and the rail turns into glass. */

body.ln-glass-page .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
}

body.ln-glass-page .site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0));
}

body.ln-glass-page .site-header.is-scrolled {
  background: rgba(12, 12, 12, 0.32);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* The glass is the bar itself, not a homepage privilege: the same material stands on every page.
   Only the floating header over the film stays a homepage thing (body.ln-glass-page, below). */
/* REAL GLASS: the backdrop is blurred AND darkened (brightness), so the bar reads as glass over a
   dark film and stays readable over a light section; the light rim and the sheen on top are what
   make it glass instead of a black pill. */
.ln-rail {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0.02) 62%, rgba(0, 0, 0, 0.22)),
    rgba(12, 12, 12, 0.16);
  -webkit-backdrop-filter: blur(22px) saturate(185%) brightness(0.5);
  backdrop-filter: blur(22px) saturate(185%) brightness(0.5);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    inset 0 12px 18px -14px rgba(255, 255, 255, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 18px 40px -18px rgba(0, 0, 0, 0.75);
}

/* on glass the letters must be light and carry their own shadow: the bar stands over light and
   dark sections alike, and a dark letter on light glass is unreadable. */
.ln-link {
  color: rgba(250, 247, 240, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.ln-link:hover,
.ln-link:focus-visible,
.ln-link.is-near,
.ln-link[aria-current="page"] { color: #fffaf0; }

.ln-sub {
  background: rgba(14, 14, 14, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-color: rgba(255, 255, 255, 0.22);
}

.ln-sub a {
  color: rgba(250, 247, 240, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.ln-sub a:hover,
.ln-sub a:focus-visible { background: rgba(var(--accent-rgb), 0.14); color: #fffaf0; }

@media (max-width: 980px) {
  body.ln-glass-page .ln-rail {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 55%),
      rgba(8, 8, 8, 0.62);
  }
}
/* ----------------------- the phone stays classic (owner, 2026-10-17) -----------------------
   His word: the hamburger menu needs nothing from this design; the glass bar is a desktop
   thing. Below 980px the site's own header and its classic panel come back, and the lamp is
   hidden. Only the desktop rail is glass. */

@media (max-width: 980px) {
  body.ln-glass-page .site-header {
    position: sticky;
    background: var(--header-bg);
    border-bottom: 1px solid transparent;
  }
  body.ln-glass-page .site-header::after { display: none; }
  body.ln-glass-page .site-header.is-scrolled {
    background: var(--header-bg-solid);
    border-bottom-color: var(--line);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  }

  #main-nav .ln-rail,
  body.ln-glass-page .ln-rail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow: visible;
  }

  #main-nav .ln-light { display: none; }

  #main-nav .ln-link {
    height: auto;
    min-height: 44px;
    padding: 12px 2px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 15px;
    font-weight: 400;
    color: var(--page-ink);
    opacity: 0.88;
  }
  #main-nav .ln-link:last-child { border-bottom: 0; }
  #main-nav .ln-link[aria-current="page"] {
    opacity: 1;
    font-weight: 600;
    color: var(--accent-text, var(--accent));
  }

  #main-nav .ln-item { display: block; }

  #main-nav .ln-sub {
    position: static;
    display: block;
    visibility: visible;
    transition: none;
    min-width: 0;
    padding: 0 0 10px 14px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  #main-nav .ln-sub a {
    padding: 9px 2px;
    font-size: 14px;
    color: var(--muted);
  }
  #main-nav .ln-sub a:hover,
  #main-nav .ln-sub a:focus-visible {
    background: none;
    color: var(--page-ink);
  }
}
/* The bar's place must not depend on what sits in the header actions: the weather widget stands
   only on the homepage, so on every other page the actions were narrower and the bar slid right.
   One reserved width for the actions on desktop puts the bar in the same place everywhere. */
@media (min-width: 1024px) {
  .site-header .header-actions {
    min-width: 300px;
    justify-content: flex-end;
  }
}