/* ==========================================================
   meowbots.ca - the site header and footer
   The single source of truth for the nav and footer on every
   page. Rules are scoped to .nav / .site-footer so they can't
   leak into page content or fight style.css / detail.css.
   Link this LAST, after any other stylesheet.
   ========================================================== */

:root {
  --hf-line: rgba(164, 151, 255, .18);
  --hf-text: #f7f6ff;
  --hf-muted: #c9cad9;
  --hf-foot: #777b98;
  --hf-max: 1120px;
}

html, body { overflow-x: clip; }

/* ---------- width container (shared by nav + footer) ---------- */
.nav .wrap,
.site-footer .wrap { width: min(calc(100% - 40px), var(--hf-max)); margin-inline: auto; }

/* ---------- header ---------- */
.nav {
  position: sticky; top: 10px; z-index: 20;
  width: min(calc(100% - 40px), var(--hf-max));
  margin: 10px auto 0;
  border: 1px solid var(--hf-line);
  border-radius: 17px;
  background: rgba(9, 11, 29, .86);
  backdrop-filter: blur(18px);
}
.nav .nav-in { height: 64px; padding: 0 16px; display: flex; align-items: center; gap: 24px; }

.nav .brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 1rem; font-weight: 850;
  color: var(--hf-text); text-decoration: none;
  background: none; -webkit-text-fill-color: currentColor;
}
.nav .brand:hover { transform: none; }
.nav .brand img { width: 38px; height: 38px; border-radius: 12px; }

.nav .links { display: flex; gap: 22px; margin-left: auto; color: var(--hf-muted); font-size: .84rem; }
.nav .links a { color: inherit; text-decoration: none; }
.nav .links a:hover { color: #fff; }

.nav .nav-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 16px;
  border: 0; border-radius: 11px;
  font-size: .82rem; font-weight: 800; text-decoration: none;
  background:linear-gradient(150deg,#5ceaff,#55dea5);color:#06121c;border:0;box-shadow:0 4px 0 #1c9c86,0 12px 26px rgba(85,222,165,.17);transition:transform .11s ease,box-shadow .11s ease,filter .18s ease;
}
.nav .nav-btn:hover { transform: none; filter: brightness(1.08); }
.nav .nav-btn:active { transform:translateY(4px);box-shadow:0 0 0 #1c9c86,0 5px 14px rgba(85,222,165,.17); }
[data-bot] .nav .nav-btn { background:linear-gradient(150deg,color-mix(in srgb,var(--accent,#46e4ff) 68%,#ffffff),var(--accent,#46e4ff));box-shadow:0 4px 0 color-mix(in srgb,var(--accent,#46e4ff) 56%,#06121c),0 12px 26px color-mix(in srgb,var(--accent,#46e4ff) 20%,transparent); }
[data-bot] .nav .nav-btn:active { transform:translateY(4px);box-shadow:0 0 0 color-mix(in srgb,var(--accent,#46e4ff) 56%,#06121c),0 5px 14px color-mix(in srgb,var(--accent,#46e4ff) 20%,transparent); }

.nav .menu { display: none; margin-left: auto; }

.nav .mobile { display: none; padding: 0 16px 14px; grid-template-columns: 1fr 1fr; gap: 7px; }
.nav .mobile.open { display: grid; }
.nav .mobile a {
  padding: 9px 11px; border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  color: var(--hf-text); text-decoration: none; font-size: .76rem;
}

/* ---------- footer ---------- */
.site-footer { padding: 34px 0 46px; color: var(--hf-foot); font-size: .72rem; }
.site-footer .foot {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.site-footer .foot-links { display: flex; gap: 15px; flex-wrap: wrap; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--hf-text); }
.site-footer .foot-version { margin-top: 8px; font-size: .66rem; opacity: .5; }

/* ---------- tablet: collapse the nav to the hamburger ---------- */
@media (max-width: 800px) {
  .nav .links, .nav .nav-btn { display: none; }
  .nav .menu { display: inline-flex; }
}

/* ---------- mobile: stack the footer and centre everything ---------- */
@media (max-width: 600px) {
  .nav, .nav .wrap, .site-footer .wrap { width: calc(100% - 24px); }
  .site-footer .foot { display: block; text-align: center; }
  .site-footer .foot-links { justify-content: center; margin-top: 13px; }
  .site-footer .foot-version { text-align: center; }
}