/* site-nav.css - header condiviso delle pagine "chrome" di Traces
 * (landing, /download, /login, /leaderboard, /drivers).
 *
 * Replica del navbar REALE di www.dg-edge.com (valori estratti dal CSS di
 * produzione, 2026-07-30): barra flottante sticky con angoli arrotondati,
 * vetro sfumato hsla(0,0%,100%,.2) + backdrop blur(10px) che diventa
 * #536c91 pieno all'hover, link bianchi peso 500 con hover a pastiglia
 * rgba(0,0,0,.35) e testo ciano #3ebaf4, bottone Premium giallo #e1ca17
 * su testo #111 (il .btn-warning del sito).
 *
 * TUTTO IN PX, scala 1rem = 13px: dg-edge imposta
 * `html { font-size: var(--default-font-size) }` con --default-font-size:
 * 13px !important - i suoi rem valgono 13px, non 16. Le nostre pagine
 * restano a base 16, quindi qui i valori sono convertiti in px
 * (1rem dg-edge → 13px, .75rem → 10px, .5rem → 6.5px…).
 * Il contenuto interno è FULL-WIDTH: sul sito vero
 * `header .container { max-width: none !important }`.
 *
 * Markup atteso:
 *   <header class="dg-nav"><div class="dg-nav__inner">
 *     <a class="dg-nav__brand" href="/"><img src="/assets/traces-wordmark.svg"></a>
 *     <nav class="dg-nav__links">
 *       <a href="/library">Library</a> …
 *       <a class="dg-nav__premium" href="…subscription">…Premium</a>
 *     </nav>
 *   </div></header>
 */

/* Ingombro della barra, in un posto solo: .dg-nav se lo annulla con un
   margine inferiore negativo, e la sezione sotto lo recupera come padding
   (.dg-nav-underlay). Vedi il blocco "barra trasparente" qui sotto. */
:root {
  --dg-nav-box: 60px;                         /* top (13) + altezza barra (47) */
  --dg-nav-space: 86px;                       /* ingombro originale: box + margine inferiore (26) */
}

.dg-nav {
  position: sticky;
  top: 13px;                                  /* top: 1rem */
  z-index: 100;
  border-radius: 13px;                        /* --hub-border-radius: 1rem */
  transition: all 0.2s ease-out;              /* --hub-transition */

  /* La barra tiene il suo vetro sfumato: quello che va via è la FASCIA
   * dietro di lei. Prima occupava una striscia sua alta 86px - sopra lo
   * sfondo del body, sotto quello dell'hero - e fra i due restava una
   * cucitura orizzontale netta subito sotto la barra.
   *
   * Ora non occupa spazio: il margine inferiore negativo azzera il suo
   * ingombro, così la prima sezione parte da y=0 e il suo sfondo passa
   * DIETRO la barra. Stessa barra di prima, ma appoggiata allo sfondo
   * della prima sezione invece che a una fascia a parte.
   *
   * Il layout non si muove: la sezione sotto ha .dg-nav-underlay, che
   * restituisce come padding-top esattamente lo spazio tolto.
   */
  margin: 13px 13px calc(var(--dg-nav-box) * -1);
  background-color: hsla(0, 0%, 100%, 0.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.dg-nav:hover {
  background-color: #536c91;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}

/* Spazio che la barra non occupa più, restituito dalla prima sezione. */
.dg-nav-underlay { padding-top: var(--dg-nav-space); }

/* Full-width come l'originale: niente max-width, solo il padding del
   container Bootstrap (.75rem → 10px) sui lati. */
.dg-nav__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 47px;                           /* brand 30px + navbar padding-y (.5rem → 6.5px) ×2 + margine ottico */
  padding: 3px 12px;
}

.dg-nav__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  /* The Traces wordmark is ~3.73:1, so the box follows the mark rather than
     the square-ish dg-edge badge it replaced: height first, width from it. */
  height: 21px;
  width: 78px;
}
.dg-nav__brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.dg-nav__links {
  display: flex;
  align-items: center;
  gap: 3px;                                   /* .nav-item margin: 0 .25rem → ~3px */
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.dg-nav__links a {
  color: #fff;
  font-weight: 500;
  font-size: 13px;                            /* --bs-nav-link-font-size: 1rem → 13px */
  line-height: 1.5;
  text-decoration: none;
  padding: 6.5px 10px;                        /* nav-link .5rem / .75rem */
  border-radius: 6.5px;                       /* .5rem */
  white-space: nowrap;
  transition: all 0.2s ease-out;
}
.dg-nav__links a:hover,
.dg-nav__links a.active {
  background: rgba(0, 0, 0, 0.35);
  color: #3ebaf4;                             /* --bs-cyan */
}

/* Il .btn-warning di dg-edge (bottone Premium): padding .375rem/.75rem,
   radius --bs-border-radius (.375rem), font 1rem - su base 13px. */
.dg-nav__links a.dg-nav__premium {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #e1ca17;
  color: #111;
  font-weight: 400;
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 5px;
  margin-left: 4px;
}
.dg-nav__links a.dg-nav__premium:hover {
  background: #e6d23a;
  color: #111;
}
.dg-nav__premium svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* ── Burger + pannello a scomparsa (≤640px) ────────────────────────────
 * Cinque link più il brand non stanno in una barra da 375px: la pastiglia
 * Premium sbordava ~65px oltre il bordo destro e veniva tagliata, e con
 * overflow:visible nulla lasciava intuire che mancasse una voce. Sotto i
 * 640px i link passano in un pannello laterale dietro al burger, come sul
 * navbar vero di www.dg-edge.com.
 *
 * Tutto è agganciato a .dg-nav--collapsible, che aggiunge site-nav.js: se
 * lo script non gira i link restano nella barra (stretti, ma raggiungibili)
 * invece di sparire dietro un burger che nessuno può aprire.
 */
.dg-nav__burger { display: none; }

@media (max-width: 640px) {
  /* Barra più bassa: ingombro ricalcolato (top 6 + altezza 42, margine
     originale 16) così l'underlay resta allineato al pixel. */
  :root {
    --dg-nav-box: 48px;
    --dg-nav-space: 64px;
  }
  .dg-nav {
    top: 8px;
    /* Aligned with the CONTENT: the hero's container starts 18px in, and a
       bar hanging 6px past the "Get started" button read as misaligned. */
    margin: 8px 18px calc(var(--dg-nav-box) * -1);
  }
  .dg-nav__inner { min-height: 42px; gap: 6px; padding: 3px 8px; }
  .dg-nav__brand { width: 72px; height: 24px; }
  .dg-nav__links { gap: 1px; flex-wrap: nowrap; }
  .dg-nav__links a { font-size: 12px; padding: 5px 7px; }

  /* backdrop-filter (anche blur(0) dell'hover) crea un containing block per
     i discendenti position:fixed: il pannello si ancorerebbe alla barra
     invece che al viewport. Su mobile va tolto del tutto - il vetro sfumato
     sopra il gradiente piatto dell'hero non si nota comunque. */
  .dg-nav--collapsible,
  .dg-nav--collapsible:hover {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* dg-edge.com's phone bar reads light periwinkle because its white
       glass sits over a BRIGHT hero; the same glass over the traces navy
       read murky slate and "didn't match". On phones the bar carries the
       light colour itself. */
    background-color: rgba(174, 190, 219, 0.94);
  }
  /* The wordmark stays WHITE on the light bar (user's call, 2026-08-30);
     a soft dark shadow keeps its edges readable against the periwinkle. */
  .dg-nav--collapsible .dg-nav__brand img {
    filter: drop-shadow(0 1px 2px rgba(10, 22, 46, 0.55));
  }

  /* dg-edge.com's exact burger: Bootstrap .btn-light holding FontAwesome
     fa-bars (one glyph). The X glyph shares the button; CSS flips them
     while the panel is open. */
  .dg-nav--collapsible .dg-nav__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* width/margins pinned: the nav is INJECTED into arbitrary pages, and a
       page-local `button { width:100%; margin-top:… }` (the login form) once
       stretched this into a bar-wide white pill. */
    width: auto;
    margin: 0 0 0 auto;
    flex: 0 0 auto;
    padding: 6px 11px;
    background: #f8f9fa;
    color: #212529;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
  }
  .dg-nav--collapsible .dg-nav__burger svg { width: 16px; height: 16px; display: block; }
  .dg-nav--collapsible .dg-nav__burger .dg-nav__burger-x { display: none; }
  body.dg-nav-open .dg-nav { z-index: 1000; }
  body.dg-nav-open .dg-nav__burger .dg-nav__burger-bars { display: none; }
  body.dg-nav-open .dg-nav__burger .dg-nav__burger-x { display: block; }

  .dg-nav__scrim {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(4, 10, 24, 0.62);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  body.dg-nav-open .dg-nav__scrim { opacity: 1; pointer-events: auto; }

  /* La riga di link diventa il pannello. */
  .dg-nav--collapsible .dg-nav__links {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 999;
    width: min(84vw, 340px);
    margin: 0;
    padding: 12px 0 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    flex-wrap: nowrap;
    background: #0a162e;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.5);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.dg-nav-open .dg-nav--collapsible .dg-nav__links { transform: translateX(0); }
  body.dg-nav-open { overflow: hidden; }

  .dg-nav--collapsible .dg-nav__links a {
    /* Bootstrap .nav-link, straight from dg-edge's offcanvas: 16px regular,
       roomy rows, hairline rules running the full panel width. */
    font-size: 16px;
    font-weight: 400;
    padding: 13px 20px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: normal;
    width: 100%;
  }
  .dg-nav--collapsible .dg-nav__links a:hover,
  .dg-nav--collapsible .dg-nav__links a.active {
    background: rgba(255, 255, 255, 0.06);
  }
  /* Premium resta il bottone giallo, ma a tutta larghezza in fondo. */
  .dg-nav--collapsible .dg-nav__links a.dg-nav__premium {
    margin: 16px 18px 0;
    padding: 11px 14px;
    border-radius: 8px;
    border-bottom: 0;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
  }
}

/* ══════════ SITE FOOTER ══════════
   One footer for every hand-written page. It used to be three different
   blocks on three pages (and nothing at all on four others), so the site
   ended differently depending on where you landed. Lives here because this
   stylesheet is the one thing every page already loads. */
.tr-site-foot {
  padding: 2.5rem 0 3rem;
  color: #7f96b8;
  font-size: 14px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* The mark sits above the links: the footer is where someone lands after
   reading, and it should say whose page they just read. */
.tr-site-foot__mark {
  display: block;
  margin: 0 auto 1.15rem;
  width: 118px;
  opacity: .72;
  transition: opacity .15s ease;
}
.tr-site-foot__mark:hover { opacity: 1; }
.tr-site-foot__mark img { width: 100%; height: auto; display: block; }
.tr-site-foot__links {
  display: flex; flex-wrap: wrap;
  gap: 0.35rem 1.1rem; justify-content: center;
  margin-bottom: 0.75rem;
}
.tr-site-foot a { color: #96adcf; font-weight: 600; text-decoration: none; }
.tr-site-foot a:hover { color: #409ed7; }
.tr-site-foot__note { color: rgba(255, 255, 255, 0.35); }

/* ── Sign in / Sign up ────────────────────────────────────────────────
   The trigger wears the same clothes as a nav link so the bar keeps one
   rhythm; the panel borrows the bar's own dark glass. Built by site-nav.js
   from the plain link the pages ship. */
/* flex, not block: as a block the inline-flex trigger sits on a text
   baseline, and the line box inherits the PAGE's font metrics — on /login
   (16px body) that left 16px of descender space under the button and the
   whole bar grew. A flex wrapper has no line box to inherit. */
.dg-nav__auth { position: relative; display: flex; align-items: center; }
.dg-nav__auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Self-contained against page styles: /login styles bare `button` with
     width:100%, margin-top and fat padding for its own form, and those
     properties leaked in here (nothing in this class declared them). */
  width: auto;
  margin: 0;
  color: #fff;
  font-family: inherit;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  padding: 6.5px 10px;
  border: 0;
  border-radius: 6.5px;
  background: transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease-out;
}
.dg-nav__auth-btn:hover,
.dg-nav__auth.is-open .dg-nav__auth-btn {
  background: rgba(0, 0, 0, 0.35);
  color: #3ebaf4;
}
.dg-nav__auth-btn svg { transition: transform 0.15s ease-out; }
.dg-nav__auth.is-open .dg-nav__auth-btn svg { transform: rotate(180deg); }

.dg-nav__auth-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  padding: 4px;
  background: #16233c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  z-index: 1001;
}
.dg-nav__auth.is-open .dg-nav__auth-menu { display: block; }
.dg-nav__auth-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.dg-nav__auth-menu a:hover { background: rgba(255, 255, 255, 0.08); color: #3ebaf4; }
.dg-nav__auth-menu a.dg-nav__noti { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dg-nav__badge { min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; background: #409ed7; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.dg-nav__dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: #409ed7; box-shadow: 0 0 0 2px rgba(11, 21, 46, 0.9); vertical-align: middle; }

/* In the burger panel there is nothing to drop down INTO: the two links sit
   in the list like every other entry.

   THIS BREAKPOINT MUST MATCH THE BURGER'S (640px, above). It used to say
   991px, and the 350px of daylight between the two was a dead band where
   the menu was flattened while the links were still a horizontal row: the
   account entries stacked in the middle of the bar, the row wrapped to
   three lines, and the header grew from 47px to 139px. If you move one of
   these numbers, move both. */
@media (max-width: 640px) {
  .dg-nav--collapsible .dg-nav__auth { width: 100%; }
  .dg-nav--collapsible .dg-nav__auth-btn { display: none; }
  .dg-nav--collapsible .dg-nav__auth-menu {
    display: block;
    position: static;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  /* Account links are rows like any other - they were keeping their
     desktop dropdown sizing, which left the dividers stopping mid-panel. */
  .dg-nav--collapsible .dg-nav__auth-menu { width: 100%; }
  .dg-nav--collapsible .dg-nav__auth-menu a {
    display: block;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    padding: 13px 20px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}