/* Site-wide top navigation. One file for every page (the pages otherwise carry
   their own inline CSS). Markup lives between <!--sitenav--> markers in each
   page and in blog-src/build.py; blog-src/nav.py rewrites it everywhere. */
.sn {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 16, 23, 0.86);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid #1f2b3c;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1;
}
/* Pages whose body has 48px/20px padding: bleed the bar to the edges and sit it flush on top. */
body:has(> .sn-bleed) { padding-top: 0 !important; }
.sn-bleed { margin: 0 -20px 40px; }

.sn-in {
  max-width: 1120px; margin: 0 auto; padding: 0 24px; height: 60px;
  display: flex; align-items: center; gap: 28px;
}
.sn-brand {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  color: #E6EDF7; text-decoration: none; font-weight: 700; font-size: 16.5px; letter-spacing: -0.2px;
}
.sn-brand svg { width: 20px; height: 20px; }
.sn-links { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.sn-links a {
  color: #8B9BB4; text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 9px 12px; border-radius: 10px; white-space: nowrap;
  transition: color .15s, background-color .15s;
}
.sn-links a:hover { color: #E6EDF7; background: rgba(255, 255, 255, 0.05); }
.sn-links a[aria-current="page"] { color: #E6EDF7; }
.sn-links .sn-kaart { color: #4FA3FF; display: inline-flex; align-items: center; gap: 7px; }
.sn-links .sn-kaart:hover { color: #7cbcff; background: rgba(79, 163, 255, 0.1); }
.sn-links .sn-kaart i {
  width: 7px; height: 7px; border-radius: 50%; background: #4FA3FF;
  box-shadow: 0 0 0 3px rgba(79, 163, 255, 0.22);
}
.sn-cta {
  flex: none; color: #0b1017; background: #E6EDF7; text-decoration: none;
  font-size: 14.5px; font-weight: 650; padding: 10px 16px; border-radius: 999px;
  transition: background-color .15s;
}
.sn-cta:hover { background: #fff; }
/* Buy Me a Coffee: their recognisable yellow, so it reads as "support" at a
   glance without competing with Download app. */
.sn-coffee {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  color: #0b1017; background: #FFDD00; text-decoration: none;
  font-size: 14.5px; font-weight: 650; padding: 9px 15px 9px 12px; border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 221, 0, 0.35), 0 6px 18px -8px rgba(255, 221, 0, 0.55);
  transition: transform .15s, box-shadow .15s;
}
.sn-coffee svg { width: 18px; height: 18px; }
.sn-coffee:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 221, 0, 0.5), 0 8px 22px -8px rgba(255, 221, 0, 0.7); }
.sn-links a:focus-visible, .sn-cta:focus-visible, .sn-coffee:focus-visible, .sn-brand:focus-visible {
  outline: 2px solid #4FA3FF; outline-offset: 2px;
}

/* Phone: brand + download on the first row, the links on a second row that
   scrolls sideways if a very narrow screen cannot fit them. */
@media (max-width: 640px) {
  .sn { position: static; }
  .sn-in { flex-wrap: wrap; height: auto; padding: 12px 16px 6px; row-gap: 6px; column-gap: 12px; }
  .sn-brand { flex: 1; }
  .sn-cta { padding: 9px 14px; font-size: 14px; }
  /* Phone: the cup alone, so brand + coffee + Download app fit one row. */
  .sn-coffee { padding: 0; width: 38px; height: 38px; justify-content: center; }
  .sn-coffee span { display: none; }
  .sn-links {
    order: 3; flex: 0 0 100%; margin: 0 -16px; padding: 0 10px 4px;
    overflow-x: auto; scrollbar-width: none;
  }
  .sn-links::-webkit-scrollbar { display: none; }
  .sn-links a { padding: 9px 10px; }
  .sn-bleed { margin-bottom: 28px; }
}