/* ══════════════════════════════════════════════════════════════
   NAVBAR — shared by index, insight and article pages (Figma "brodra v2").
   Load after index.css / insight.css. Fonts: Geist (Google Fonts).
   ══════════════════════════════════════════════════════════════ */

:root {
  --nav-geist: 'Geist', 'Inter', system-ui, sans-serif;
  --h2-geist: var(--nav-geist);
}

/* ── NAV: dark translucent pill ── */
header nav {
  top: clamp(12px, 4.4vw, 64px);
  left: 50%;
  width: min(1167px, calc(100% - 32px));
  height: 90px;
  transform: translateX(-50%);
  padding: 0 37px 0 26px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.41);
  border: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: top .35s cubic-bezier(.2,.7,.1,1), height .35s cubic-bezier(.2,.7,.1,1),
              background .3s ease, box-shadow .3s ease;
}
header nav.scrolled {
  top: 12px;
  height: 72px;
  background: rgba(9, 15, 30, 0.94);
  border-bottom: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
header .nav-group-left { gap: 47px; flex: 1; min-width: 0; }
header .logo img { display: block; height: 34px; width: auto; }

header .nav-links {
  flex: 0 1 622px;
  justify-content: space-between;
  gap: 24px;
}
header .nav-links a {
  font-family: var(--h2-geist);
  font-weight: 200;
  font-size: 20px;
  letter-spacing: .2px;
  color: #fff;
  opacity: .92;
  transition: opacity .2s, color .2s;
}
header .nav-links a:hover,
header .nav-links .dropdown > a.active { opacity: 1; color: #9db4ff; }

header .nav-group-right { gap: 40px; }

/* Language switch as a flag (Norway flag in English, UK flag in Norwegian) */
.lang-flag-switch,
.lang-flag-switch:hover {
  background: none; border: 0; box-shadow: none; padding: 0; gap: 0;
  transform: none;
}
.lang-flag-switch .flag { display: block; width: 33px; height: 27px; transition: transform .25s ease; }
.lang-flag-switch:hover .flag { transform: scale(1.08); }
.lang-flag-switch .lang-switch-code { display: none; }
html[lang="no"] .lang-flag-switch .flag-no,
html:not([lang="no"]) .lang-flag-switch .flag-en { display: none; }

.nav-contact {
  font-family: var(--h2-geist);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}
.nav-contact:hover { color: #9db4ff; }

@media (max-width: 768px) {
  header nav, header nav.scrolled {
    top: 12px; height: 64px; width: calc(100% - 24px);
    padding: 0 14px; border-radius: 16px;
  }
  header .logo img { height: 22px; width: auto; }
  .nav-contact { font-size: 13px; }
  header .lang-flag-switch { display: none !important; }
}

/* ── DESKTOP: sized on the 1440 × 1024 Figma frame, scaled to the viewport
   (1 design px = var(--u)); the page zoom from index.css is undone here. ── */
@media (min-width: 769px) {
  :root {
    --page-zoom: 1.1;            /* matches html { zoom } in index.css */
    --u: min(calc(100vw / 1440), calc(100vh / 1024));
  }
  header nav { zoom: calc(1 / var(--page-zoom)); }

  header nav {
    top: calc(64 * var(--u));
    width: calc(1167 * var(--u));
    height: calc(90 * var(--u));
    padding: 0 calc(37 * var(--u)) 0 calc(26 * var(--u));
    border-radius: calc(20 * var(--u));
  }
  header nav.scrolled { top: 12px; height: calc(76 * var(--u)); }
  header .nav-group-left { gap: calc(47 * var(--u)); }
  header .logo img { height: calc(34 * var(--u)); width: auto; }
  header .nav-links { flex: 0 0 calc(622 * var(--u)); gap: 0; }
  header .nav-links a, .nav-contact { font-size: calc(20 * var(--u)); }
  header .nav-group-right { gap: calc(32 * var(--u)); }
  .lang-flag-switch .flag { width: calc(33 * var(--u)); height: calc(27 * var(--u)); }

  /* Inner pages: keep their first content clear of the floating bar
     (bar ends at 154 design px; lengths here are scaled by the page zoom). */
  .page-header, .ed.ins-head { padding-top: calc((154 * var(--u) + 56px) / var(--page-zoom)); }
  .article-page { padding-top: calc((154 * var(--u) + 24px) / var(--page-zoom)); }
}
@media (max-width: 768px) {
  .page-header, .ed.ins-head { padding-top: 110px; }
  .article-page { padding-top: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  header nav { transition: none; }
}

/* ══ MOBILE MENU (js/navbar.js) — after FoundersCard's mobile menu ══ */
.mnav-btn, .mnav { display: none; }
@media (max-width: 768px) {
  /* Bar: logo left, menu button right */
  header nav, header nav.scrolled { height: 60px; padding: 0 8px 0 18px; border-radius: 16px; justify-content: space-between; }
  header .nav-group-left > a { position: static; transform: none; }
  header .hamburger, header .nav-contact, header .lang-flag-switch,
  .nav-drawer, .drawer-overlay, .drawer-lang { display: none !important; }
  header .logo img { height: 24px; }

  .mnav-btn, .mnav-close {
    display: grid; place-content: center; gap: 6px; cursor: pointer; border: 0;
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(255, 255, 255, .1); -webkit-tap-highlight-color: transparent;
  }
  .mnav-btn span, .mnav-close span { display: block; width: 18px; height: 1.5px; background: #fff; border-radius: 2px; }

  /* Panel: drops in like a curtain over the whole page */
  .mnav {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 300;
    padding: 18px 24px 28px; box-sizing: border-box; overflow-y: auto;
    background: #eeece6; color: #0b1226;
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path .7s cubic-bezier(.7, 0, .2, 1), visibility 0s .7s;
  }
  .mnav-open .mnav { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .75s cubic-bezier(.7, 0, .2, 1), visibility 0s; }

  /* Top row mirrors the bar exactly (12px inset, 60px tall, same padding),
     so the logo stays put and the menu button turns into the close button. */
  .mnav-top {
    display: flex; align-items: center; justify-content: space-between;
    height: 60px; margin: 2px -12px 0; padding: 0 8px 0 18px; box-sizing: border-box;
  }
  .mnav-close { background: #24262b; gap: 0; }
  .mnav-close span { width: 22px; grid-area: 1 / 1; }
  .mnav-close span:first-child { transform: rotate(45deg); }
  .mnav-close span:last-child { transform: rotate(-45deg); }
  .mnav-logo img { display: block; height: 24px; width: auto; filter: brightness(0) saturate(100%) invert(9%) sepia(19%) saturate(2000%) hue-rotate(196deg); }

  .mnav-list { list-style: none; margin: auto 0 0; padding: 48px 0 28px; }
  .mnav-list li { overflow: hidden; padding: .04em 0 .1em; }
  .mnav-link {
    display: inline-block; font: 400 clamp(46px, 13.5vw, 60px)/1.02 'Instrument Serif', serif; letter-spacing: -.02em;
    color: #0b1226; text-decoration: none;
    transform: translateY(105%); transition: transform .8s cubic-bezier(.16, 1, .3, 1), color .3s ease;
  }
  .mnav-open .mnav-link { transform: none; transition-delay: calc(.32s + var(--i) * 55ms), 0s; }
  .mnav-link.is-current { font-style: italic; color: #8a8e99; }
  .mnav-link:active { font-style: italic; color: #8a8e99; }

  .mnav-cols {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    padding-top: 24px; border-top: 1px solid rgba(11, 18, 38, .14);
    opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
  }
  .mnav-open .mnav-cols { opacity: 1; transform: none; transition-delay: .7s; }
  .mnav-cols > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
  .mnav-label { font: 500 12px/1 'Geist', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #8a8e99; margin-bottom: 8px; }
  .mnav-small { font: 400 16px/1.3 'Geist', sans-serif; color: #0b1226; text-decoration: none; overflow-wrap: anywhere; }
  .mnav-socials { display: flex; gap: 10px; }
  .mnav-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #e2dfd7; color: #0b1226; }
  .mnav-icon svg { width: 22px; height: 22px; }
  .mnav-icon:active { background: #0b1226; color: #fff; }
  .mnav-lang { margin-top: 10px; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid rgba(11, 18, 38, .16); background: none; cursor: pointer; }
  .mnav-lang span { padding: 7px 11px; border-radius: 999px; font: 500 12px/1 'Geist', sans-serif; letter-spacing: .08em; color: #8a8e99; }
  html:not([lang="no"]) .mnav-lang-en, html[lang="no"] .mnav-lang-no { background: #0b1226; color: #eeece6; }

  .mnav-cta {
    margin-top: 24px; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px;
    background: #0b1226; color: #fff; text-decoration: none; font: 500 16px/1 'Geist', sans-serif;
    opacity: 0; transition: opacity .5s ease .8s;
  }
  .mnav-open .mnav-cta { opacity: 1; }
  .mnav-cta:active { background: #0047ff; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .mnav, .mnav-open .mnav, .mnav-link, .mnav-cols, .mnav-cta { transition: none; }
}

/* No visible scrollbar on any page (pages still scroll; see js/smooth-scroll.js) */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }