/* Canonical site navigation — ONE nav, identical on every page including the
   ported homepage. Every value below is taken from the Framer Nav component:
     bar    2px #030303 border on all sides, cream #faf7eb, padding 12px 80px,
            content capped at 1200px
     logo   yellow #ffe74a, 2px #222 border, 12px radius, padding 6px 12px
     links  Poppins 700 / 16px / line-height 24px / -.02em, solid black
     CTA    lavender #c191ff, 3px #030303 border, 32px radius, padding 12px 24px,
            box-shadow 4px 4px 0 0 rgb(15,15,15)
   Literal colours (no tokens) so the same sheet works on the ported homepage,
   which loads framer.css rather than theme.css. */

nav.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 80px;
  background: #faf7eb;
  border: 2px solid #030303;
  font-family: 'Poppins', Inter, -apple-system, sans-serif;
}

/* ---- logo: avatar + yellow name pill, side by side ---- */
nav.site-nav .nav-logo {
  display: inline-flex; align-items: center; gap: 10px;
  flex: none; text-decoration: none; white-space: nowrap;
  transition: transform .12s cubic-bezier(.22,1,.36,1);
}
nav.site-nav .nav-logo:hover { transform: translate(-1px,-1px); }

nav.site-nav .nav-logo-icon {
  display: block; width: 38px; height: 38px; flex: none;
  border: 2px solid #222222; border-radius: 10px;
  box-shadow: 3px 3px 0 0 rgb(15,15,15);
  overflow: hidden; background: #faf7eb;
}
nav.site-nav .nav-logo-icon img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}

nav.site-nav .nav-logo-text {
  display: inline-block; padding: 6px 12px;
  background: #ffe74a; color: #030303;
  border: 2px solid #222222; border-radius: 12px;
  box-shadow: 3px 3px 0 0 rgb(15,15,15);
  font-family: inherit; font-weight: 700; font-size: 18px; letter-spacing: -.02em;
}
nav.site-nav .nav-logo-text span { color: #030303; }

/* ---- links: centred, solid black, Poppins 700 ---- */
nav.site-nav .nav-links {
  display: flex; align-items: center; gap: 32px;
  list-style: none; margin: 0 auto; padding: 0;
}
nav.site-nav .nav-links a {
  color: #000; text-decoration: none;
  font-family: inherit; font-weight: 700; font-size: 16px;
  line-height: 24px; letter-spacing: -.02em;
  transition: opacity .18s;
}
nav.site-nav .nav-links a:hover { opacity: .55; }

/* ---- right-hand group ---- */
nav.site-nav .nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* primary action */
nav.site-nav .nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px;
  background: #c191ff; color: #030303 !important;
  border: 3px solid #030303; border-radius: 32px;
  box-shadow: 4px 4px 0 0 rgb(15,15,15);
  font-family: inherit; font-weight: 700; font-size: 16px;
  line-height: 1; letter-spacing: -.02em; white-space: nowrap;
  text-decoration: none; opacity: 1 !important;
  transition: transform .12s cubic-bezier(.22,1,.36,1), box-shadow .12s;
}
nav.site-nav .nav-cta:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 0 rgb(15,15,15); }
nav.site-nav .nav-cta:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 0 rgb(15,15,15); }

/* language toggle — same treatment, yellow, compact */
nav.site-nav .lang-toggle, nav.site-nav .theme-toggle {
  padding: 11px 14px;
  background: #ffe74a; color: #030303;
  border: 3px solid #030303; border-radius: 32px;
  box-shadow: 4px 4px 0 0 rgb(15,15,15);
  font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1;
  cursor: pointer;
  transition: transform .12s cubic-bezier(.22,1,.36,1), box-shadow .12s;
}
nav.site-nav .lang-toggle:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 0 rgb(15,15,15); }
nav.site-nav .lang-toggle:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 0 rgb(15,15,15); }

nav.site-nav .nav-burger {
  display: none; background: none; border: 0;
  color: #030303; font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0 .2rem;
}

/* ---- responsive ---- */
@media (max-width: 1180px) {
  nav.site-nav { padding: 12px 28px; }
  nav.site-nav .nav-links { gap: 22px; }
}
@media (max-width: 940px) {
  nav.site-nav { padding: 10px 14px; justify-content: space-between; }
  nav.site-nav .nav-links {
    position: fixed; inset: 62px 8px auto 8px; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #faf7eb; border: 2px solid #030303; border-radius: 12px;
    box-shadow: 4px 4px 0 0 rgb(15,15,15);
    padding: .4rem 1rem 1rem; display: none;
  }
  nav.site-nav .nav-links.open { display: flex; }
  nav.site-nav .nav-links li { border-top: 2px solid rgba(3,3,3,.12); }
  nav.site-nav .nav-links li:first-child { border-top: 0; }
  nav.site-nav .nav-links a { display: block; padding: .9rem .2rem; }
  nav.site-nav .nav-burger { display: block; }
  /* CTA + toggle stay in the bar, compact, so they're reachable without opening the menu */
  nav.site-nav .nav-cta { padding: 8px 14px; font-size: 13px; border-width: 2px; box-shadow: 3px 3px 0 0 rgb(15,15,15); }
  nav.site-nav .lang-toggle { padding: 8px 10px; font-size: 12px; border-width: 2px; box-shadow: 3px 3px 0 0 rgb(15,15,15); }
  nav.site-nav .nav-logo { gap: 7px; }
  nav.site-nav .nav-logo-text { font-size: 15px; padding: 5px 10px; }
  nav.site-nav .nav-logo-icon { width: 32px; height: 32px; }
  nav.site-nav .nav-actions { gap: 6px; }
}

/* clearance for the fixed bar */
body { padding-top: 66px; }
@media (max-width: 940px) { body { padding-top: 58px; } }