/* The header of every page of the competition site (assets/header.js). Each rule is under .nav and sets each value
   that it needs, so the header looks the same over site.css on the static pages and over the entry page's own styles. */

@font-face { font-family: 'Inter'; font-weight: 100 900; font-display: swap; src: url('fonts/inter.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 100 900; font-display: swap; src: url('fonts/hanken.woff2') format('woff2'); }

.nav {
  --nav-ink: #0c0c0e;
  --nav-ink-line: #2a292f;
  --nav-lime: #e0ff4f;
  --nav-lime-dark: #cbe93a;
  --nav-navy: #052b42;
  --nav-display: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --nav-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --nav-ring: 0 0 0 3px rgba(93, 82, 246, .28);
  display: block; margin: 0; padding: 0;
  background: var(--nav-ink); color: #fff; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; border-bottom: 1px solid var(--nav-ink-line);
  font: 400 16px/1.55 var(--nav-body); letter-spacing: normal; text-align: left; -webkit-font-smoothing: antialiased;
  /* The height of one row, before header.js fills the header, so the page does not move. */
  min-height: 65px;
}
.nav, .nav *, .nav *::before, .nav *::after { box-sizing: border-box; }
.nav a { text-decoration: none; }
.nav img { display: block; max-width: none; }
.nav [hidden] { display: none !important; }
.nav :focus-visible { outline: none; box-shadow: var(--nav-ring); border-radius: 6px; }
.nav .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; max-width: 1120px; margin: 0 auto; padding: 0 max(20px, 4vw); }

/* The lockup: the competition name, and under it the two organizers with their marks. */
.nav .brand { display: flex; flex-direction: column; gap: 5px; flex: none; color: inherit; }
.nav .brand-title { font: 700 20px/1 var(--nav-display); color: #fff; letter-spacing: -.01em; white-space: nowrap; }
.nav .brand-by { display: flex; align-items: center; gap: 6px; color: #b9bbc2; font-size: 13px; line-height: 1.55; white-space: nowrap; }
.nav .brand-nebius img { height: 16px; width: auto; }
/* The Positronic lockup as on the flyer and positronic.ro: the mark, then the name in one weight and one colour. */
.nav .brand-pos { display: flex; align-items: center; gap: 5px; color: #d7d8dc; font-weight: 600; }
.nav .brand-pos img { height: 16px; width: auto; }
.nav .nav-links { display: flex; gap: 20px; margin: 0 0 0 auto; padding: 0; align-items: center; }
.nav .nav-links a { position: relative; color: #b9bbc2; font-size: 14px; }
.nav .nav-links a:not(.btn):hover { color: #fff; }
.nav .nav-links a { white-space: nowrap; }
.nav .nav-team-short { display: none; }
/* The current page or section: white, bold, and a bar on the bottom edge of the header. */
.nav .nav-links a[aria-current]:not(.btn) { color: #fff; font-weight: 600; }
.nav .nav-links a[aria-current]:not(.btn)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -22px; height: 2px; background: #fff; }
/* "Get started" is the way in: the first link, in lime. */
.nav .nav-links a.nav-start { color: var(--nav-lime); font-weight: 600; }
.nav .nav-links a.nav-start:hover { color: #fff; }
.nav .nav-links a.nav-start[aria-current]::after { background: var(--nav-lime); }
/* The header button is white: a lime button beside the lime Nebius badge reads as one shape. */
.nav .btn { display: inline-flex; align-items: center; gap: 8px; margin: 0; border-radius: 12px; padding: 8px 14px; font: 600 14px var(--nav-body); border: 1px solid transparent; cursor: pointer; flex: none; background: #fff; color: var(--nav-ink); text-transform: none; }
.nav .btn:hover { background: #dfe0e4; color: var(--nav-ink); }
.nav .nav-menu-cta { display: none; }

/* A signed-in visitor: a round avatar that opens the entry page, beside Sign out. */
.nav .nav-account { flex: none; color: #b9bbc2; font-size: 14px; }
.nav .nav-links .nav-menu-account { display: none; }
.nav .nav-account:hover { color: #fff; }
.nav .nav-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--nav-lime); color: var(--nav-navy); overflow: hidden; }
.nav .nav-avatar:hover { color: var(--nav-navy); background: var(--nav-lime-dark); }
.nav .nav-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav .nav-avatar-icon { display: grid; }
.nav .nav-avatar-icon svg { display: block; }
.nav .nav-avatar-initial { font: 700 15px/1 var(--nav-display); }
.nav .nav-account:focus-visible { border-radius: 999px; }
.nav .nav-signout { display: none; }
.nav.signed-in .nav-cta, .nav.signed-in .nav-links .nav-menu-cta { display: none; }
.nav.signed-in .wrap > .nav-signout { display: inline-flex; }
.nav .nav-signout:disabled { opacity: .6; cursor: default; }
.nav .nav-toggle { display: none; flex: none; font: inherit; width: 40px; height: 40px; margin: 0 -8px 0 0; padding: 0; background: none; border: 0; border-radius: 0; color: #fff; cursor: pointer; }
.nav .nav-toggle span, .nav .nav-toggle span::before, .nav .nav-toggle span::after { display: block; width: 20px; height: 2px; margin-inline: auto; background: currentColor; border-radius: 2px; transition: transform .18s, background .18s; }
.nav .nav-toggle span { position: relative; }
.nav .nav-toggle span::before, .nav .nav-toggle span::after { content: ''; position: absolute; left: 0; }
.nav .nav-toggle span::before { top: -6px; }
.nav .nav-toggle span::after { top: 6px; }
.nav.open .nav-toggle span { background: transparent; }
.nav.open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav.open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* A signed-in team from the opening of submissions has one more link, which fits this range in its short text. */
@media (min-width: 861px) and (max-width: 1060px) {
  .nav.signed-in .wrap { gap: 12px; }
  .nav.signed-in .nav-links { gap: 14px; }
  .nav .nav-team-full { display: none; }
  .nav .nav-team-short { display: inline; }
}

/* Signed in, Get started and the team link add two items: under 960 px the links get smaller to keep one row. */
@media (min-width: 861px) and (max-width: 960px) {
  .nav.signed-in .wrap { gap: 10px; }
  .nav.signed-in .nav-links { gap: 10px; }
  .nav.signed-in .nav-links a { font-size: 13px; }
}

/* Below this width the links and Sign up do not fit one row, so the links go into a menu. */
@media (max-width: 860px) {
  .nav .wrap { gap: 12px; position: relative; }
  .nav .nav-cta, .nav .wrap > .nav-account { margin-left: auto; }
  .nav .nav-account + .nav-cta { margin-left: 0; }
  .nav .nav-toggle { display: block; }
  .nav .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 4px max(20px, 4vw) 12px; background: var(--nav-ink); border-bottom: 1px solid var(--nav-ink-line); }
  .nav.open .nav-links { display: flex; }
  .nav .nav-links a { padding: 14px 0; font-size: 16px; border-top: 1px solid var(--nav-ink-line); }
  .nav .nav-links a:first-child { border-top: 0; }
  .nav .nav-links a[aria-current]:not(.btn) { padding-left: 12px; box-shadow: inset 3px 0 0 #fff; }
  .nav .nav-links a[aria-current]:not(.btn)::after { content: none; }
}

@media (max-width: 520px) {
  /* A smaller lockup and button keep Sign up, or Sign out, in the header; the avatar goes into the menu as text. */
  .nav .wrap > .nav-cta, .nav .wrap > .nav-signout { margin-left: auto; padding: 6px 10px; font-size: 13px; }
  .nav .wrap > .nav-account { display: none; }
  .nav .nav-links .nav-menu-account { display: block; }
  .nav .brand { gap: 4px; }
  .nav .brand-title { font-size: 16px; }
  .nav .brand-by { gap: 4px; font-size: 11px; }
  .nav .brand-nebius img, .nav .brand-pos img { height: 13px; }
}

@media (max-width: 340px) {
  .nav .wrap { gap: 6px; padding-inline: 14px; }
  .nav .brand-title { font-size: 15px; }
  .nav .brand-by { font-size: 10px; }
  .nav .brand-nebius img, .nav .brand-pos img { height: 12px; }
  .nav .wrap > .nav-cta, .nav .wrap > .nav-signout { padding: 5px 8px; font-size: 12px; }
  .nav .nav-toggle { margin-right: -10px; }
}