/* The Keen site header for STATIC pages (blog index + posts; adopt on any
   help.html-pattern page that should carry the full menu). ONE menu bar for
   the whole site: the links and pills here mirror the React Header in
   website/src/app.jsx (NAV_LINKS: same labels, Title Case, same order) and
   the Pages Functions' topBar() in functions/_lib/brand.js. KEEP ALL THREE
   IN SYNC when the nav moves. Brand geometry (icon 30 / wordmark 25 / amber
   dot at top 26% right 24%) mirrors assets/site.css .wordmark/.appicon.

   Cache rule (src/README.md): website assets are edge/webview-cached ~4h.
   Bump the ?v= on every <link> that references this file whenever it
   changes, or repeat visitors run the stale header for hours.

   Tokens: declared here so the header works standalone, with each page's
   own :root palette (loaded after this file) winning where it differs. */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/nunito-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --green: #1A7A4C;
  --green-dark: #115C38;
  --amber: #E8B84B;
  --cream-brand: #FAF7F0;
  --ink: #17211B;
  --muted: #55605A;
  --hairline: #ECEBE4;
}

.top {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 1040px; margin: 0 auto; padding: 16px 20px;
  position: relative; /* the mobile nav panel anchors to the bar */
}
.brandLink { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.appicon {
  position: relative; width: 30px; height: 30px; border-radius: 8px;
  background: var(--green); color: #FAF7F0;
  font-family: "Nunito", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none;
}
.appicon .k { font-size: 19px; line-height: 1; transform: translateY(0.02em); }
.appicon .dot { position: absolute; width: 4.5px; height: 4.5px; background: var(--amber); border-radius: 999px; top: 26%; right: 24%; }
.wordmark {
  font-size: 25px;
  font-family: "Nunito", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800; letter-spacing: -0.02em; color: var(--green);
  display: inline-flex; align-items: baseline; line-height: 1; user-select: none;
}
.wordmark .dot { width: 0.18em; height: 0.18em; border-radius: 999px; background: var(--amber); display: inline-block; margin-left: 0.04em; align-self: flex-end; margin-bottom: 0.12em; }

.topLinks { display: flex; align-items: center; gap: 22px; font-weight: 600; font-size: 15px; color: var(--muted); white-space: nowrap; }
.topLinks a { color: inherit; text-decoration: none; }
.topLinks a:hover { color: var(--ink); text-decoration: none; }
.topLinks a.pill {
  border-radius: 999px; padding: 11px 20px; font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
}
.topLinks a.pillLogin { background: var(--green); color: #fff; }
.topLinks a.pillLogin:hover { background: var(--green-dark); color: #fff; }
.topLinks a.pillGet { background: var(--amber); color: var(--ink); }
.topLinks a.pillGet:hover { color: var(--ink); }

/* Mobile: the links fold into a <details> menu (no JS, so the header works
   on every static page as-is); "Get Keen" stays in the bar, "Log in" moves
   into the panel, mirroring the React header's phone behaviour. */
.navMenu { display: none; }
.navMenu > summary {
  list-style: none; cursor: pointer; width: 40px; height: 40px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; margin-right: -8px; color: var(--ink);
}
.navMenu > summary::-webkit-details-marker { display: none; }
.navMenu[open] .icoMenu { display: none; }
.navMenu:not([open]) .icoClose { display: none; }
.navPanel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 80;
  background: var(--cream-brand); border-bottom: 1px solid rgba(23, 33, 27, 0.06);
  box-shadow: 0 18px 40px rgba(23, 33, 27, 0.14);
  padding: 6px 24px 18px; display: grid;
}
.navPanel a {
  display: flex; align-items: center; min-height: 50px;
  font-size: 17px; font-weight: 600; color: var(--muted);
  border-bottom: 1px solid var(--hairline);
}
.navPanel a:hover { color: var(--ink); text-decoration: none; }
.navPanel a.pillLogin { justify-content: center; min-height: 48px; margin-top: 14px; border-bottom: 0; border-radius: 999px; background: var(--green); color: #fff; font-weight: 700; font-size: 16px; }

@media (max-width: 999px) {
  .topLinks { gap: 12px; }
  .topLinks > a.navInline, .topLinks > a.pillLogin { display: none; }
  .navMenu { display: block; }
}