/* ============================================================
   Shared site header + footer.
   Same position and order on every page. Light on light pages,
   dark on the CRT pages (Motoyra, WhuffoBot, privacy).
   The home page has its own nav with the same right-hand links.
   ============================================================ */
.site-head, .site-foot {
  --sh-bg: #f6f7f5;
  --sh-ink: #111a14;
  --sh-ink-2: #4b5a50;
  --sh-line: #e1e5e0;
  --sh-brand: #139a4a;
  --sh-mark: #139a4a;
  font-family: -apple-system, "SF Pro Text", "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  text-shadow: none;
}
@media (prefers-color-scheme: dark) {
  .site-head, .site-foot {
    --sh-bg: #0b0f0c;
    --sh-ink: #e8efe9;
    --sh-ink-2: #a9b8ad;
    --sh-line: #243026;
    --sh-brand: #35f07a;
    --sh-mark: #35f07a;
  }
}
/* CRT pages */
body.mode-calm .site-head, body.mode-off .site-head,
body.mode-calm .site-foot, body.mode-off .site-foot {
  --sh-bg: #050805;
  --sh-ink: #8bf7b0;
  --sh-ink-2: rgba(53, 240, 122, 0.62);
  --sh-line: rgba(53, 240, 122, 0.18);
  --sh-brand: #35f07a;
  --sh-mark: #35f07a;
}

.site-head {
  position: relative; z-index: 70;
  background: var(--sh-bg);
  border-bottom: 1px solid var(--sh-line);
}
.site-head__in, .site-foot__in {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site-head__in { height: 60px; }
.site-head__logo {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700; font-size: 15px; line-height: 1;
  color: var(--sh-ink); text-decoration: none; white-space: nowrap;
}
.site-head__logo span { color: var(--sh-brand); }
.site-head__logo .ping-mark { color: var(--sh-mark); }
.ping-mark svg { width: 1.05em; height: 1.05em; vertical-align: -0.17em; }
.site-head__nav { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.site-head__nav a { color: var(--sh-ink); font-weight: 600; text-decoration: none; }
.site-head__nav a:hover { color: var(--sh-brand); }
.site-head__nav a[aria-current="page"] { color: var(--sh-brand); }
.site-head__nav .site-head__cta {
  padding: 7px 14px; border-radius: 9px;
  background: var(--sh-ink); color: var(--sh-bg);
}
.site-head__nav .site-head__cta:hover { color: var(--sh-bg); opacity: 0.88; }

.site-foot {
  position: relative; z-index: 70;
  background: var(--sh-bg);
  border-top: 1px solid var(--sh-line);
  font-size: 13px; color: var(--sh-ink-2);
}
.site-foot__in { padding-top: 26px; padding-bottom: 40px; flex-wrap: wrap; }
.site-foot__links { display: flex; gap: 18px; }
.site-foot a { color: var(--sh-ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--sh-brand); }
.site-foot__logo .ping-mark { color: var(--sh-mark); }
.site-foot__logo { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; }

@media (max-width: 860px) {
  .site-head__in, .site-foot__in { padding-left: 16px; padding-right: 16px; }
  .site-head__nav { gap: 18px; font-size: 14.5px; }
  .site-head__nav .site-head__cta { display: none; }
}
@media (max-width: 420px) {
  .site-head__logo { font-size: 13.5px; }
  .site-head__nav { gap: 13px; font-size: 13.5px; }
}
@media (max-width: 350px) {
  .site-head__in { height: auto; flex-wrap: wrap; row-gap: 8px; padding-top: 12px; padding-bottom: 12px; }
}
/* Motoyra: the app's own dark palette */
body.theme-moto .site-head, body.theme-moto .site-foot {
  --sh-bg: #070b07;
  --sh-ink: #eef3e8;
  --sh-ink-2: rgba(238, 243, 232, 0.6);
  --sh-line: rgba(200, 240, 74, 0.14);
  --sh-brand: #c8f04a;
  --sh-mark: #35f07a;
}
body.theme-moto .site-head { background: transparent; }
/* Duebook: the app's own corkboard palette */
body.theme-due .site-head, body.theme-due .site-foot {
  --sh-bg: #e6e0d3;
  --sh-ink: #1f2023;
  --sh-ink-2: #5f5a4e;
  --sh-line: rgba(90, 70, 40, 0.16);
  --sh-brand: #9a5412;
  --sh-mark: #139a4a;
}
@media (prefers-color-scheme: dark) {
  body.theme-due .site-head, body.theme-due .site-foot {
    --sh-bg: #1b1d20;
    --sh-ink: #f1ede4;
    --sh-ink-2: rgba(241, 237, 228, 0.6);
    --sh-line: rgba(254, 229, 126, 0.14);
    --sh-brand: #fee57e;
    --sh-mark: #35f07a;
  }
}
body.theme-due .site-head { background: transparent; }