/* ──────────────────────────────────────────────────────────────────
 *  Nano Cart site chrome - SHARED by the marketing page (index.php) and
 *  the neon shop (/shop/). Single source of truth for the scrollbar,
 *  marquee, header/nav and footer, so the two pages are guaranteed
 *  identical and the nav can never shift between them.
 *
 *  Loaded LAST on both pages, so it wins over anything left in
 *  styles.css / theme-neon.css. Markup lives in /partials/site-header.php
 *  and /partials/site-footer.php.
 * ────────────────────────────────────────────────────────────────── */

:root {
  --sc-bg:        #0a0210;
  --sc-bg-2:      #14072a;
  --sc-ink:       #f5e6ff;
  --sc-ink-dim:   #a890c0;
  --sc-ink-faint: #6b4d8a;
  --sc-magenta:   #ff006e;
  --sc-cyan:      #00f0ff;
  --sc-max:       1240px;
  --sc-display:   'Rajdhani', system-ui, sans-serif;
  --sc-data:      'Major Mono Display', ui-monospace, monospace;
}

/* Always show the vertical scrollbar so both pages reserve the same width
   (otherwise a long page and a short one differ by the scrollbar width and
   the centred nav shifts). Identical thin pink->cyan scrollbar on both. */
html { overflow-x: clip; overflow-y: scroll; scrollbar-color: var(--sc-magenta) var(--sc-bg); }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: var(--sc-bg); }
html::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--sc-magenta), var(--sc-cyan)); }

/* ─── marquee ───────────────────────────────────────── */
.marquee {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--sc-magenta);
  color: var(--sc-bg);
  font-family: var(--sc-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.65;   /* pinned so chrome height doesn't inherit a different
                          body line-height per page (shop body has none set) */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 7px 0;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 2px solid var(--sc-bg);
}
.marquee-track {
  display: inline-block;
  animation: sc-marquee 40s linear infinite;
  padding-left: 100%;
}
.marquee span { margin: 0 22px; }
.marquee .glyph { color: var(--sc-cyan); }
@keyframes sc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ─── header ────────────────────────────────────────── */
.header {
  position: sticky;
  top: 32px;
  z-index: 90;
  background: rgba(10, 2, 16, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 0, 110, 0.18);
}
.header-inner {
  box-sizing: border-box;   /* so max-width includes the padding on BOTH pages
                               (the shop has no global border-box reset) */
  max-width: var(--sc-max);
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
  line-height: 1.65;        /* pinned so the brand/nav line box (and thus the
                               header height) is identical on both pages,
                               regardless of each page's body line-height */
}
.brand {
  font-family: var(--sc-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--sc-ink);
  font-size: 22px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  text-transform: uppercase;
  text-decoration: none;
}
.brand .slash { color: var(--sc-magenta); text-shadow: 0 0 14px var(--sc-magenta); }
.brand .cms { color: var(--sc-cyan); text-shadow: 0 0 14px var(--sc-cyan); }
.brand:hover .slash { color: var(--sc-cyan); text-shadow: 0 0 14px var(--sc-cyan); }
.brand:hover .cms { color: var(--sc-magenta); text-shadow: 0 0 14px var(--sc-magenta); }
.nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
  margin-right: 18px;
  font-family: var(--sc-display);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav a { color: var(--sc-ink-dim); padding: 8px 14px 8px 24px; position: relative; text-decoration: none; }
.nav a::before { content: '//'; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--sc-magenta); opacity: 0; transition: opacity 0.2s; }
.nav a:hover { color: var(--sc-ink); }
.nav a:hover::before { opacity: 1; }
.gh-cta {
  display: inline-flex;
  align-items: center;
  align-self: center;
  line-height: 1;
  font-family: var(--sc-display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 11px 22px;
  background: var(--sc-magenta);
  color: var(--sc-bg);
  border: 0;
  white-space: nowrap;
  text-decoration: none;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.gh-cta:hover { background: var(--sc-cyan); color: var(--sc-bg); }

/* Hamburger toggle (mobile only) + the in-menu github link (mobile only). */
.nav-gh { display: none; }
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 38px;
  margin-left: auto;
  padding: 0 9px;
  background: transparent;
  border: 1px solid rgba(0, 240, 255, 0.45);
  cursor: pointer;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.nav-toggle-bar { display: block; height: 2px; background: var(--sc-cyan); transition: transform 0.2s ease, opacity 0.2s ease; }
.header.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.header.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── footer ────────────────────────────────────────── */
.footer {
  margin-top: 80px;
  padding: 80px 0 36px;
  background: linear-gradient(180deg, var(--sc-bg-2), var(--sc-bg));
  font-size: 14px;
  position: relative;
  overflow: hidden;
}
.footer-glyph {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sc-display);
  font-weight: 700;
  font-size: 240px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 0, 110, 0.1);
  pointer-events: none;
  white-space: nowrap;
}
.footer-inner { box-sizing: border-box; max-width: var(--sc-max); margin: 0 auto; padding: 0 32px; position: relative; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer h4 {
  font-family: var(--sc-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--sc-magenta);
  margin: 0 0 16px;
}
.footer-col p { color: var(--sc-ink-dim); font-size: 14px; margin: 0; }
.footer-col a {
  display: block;
  padding: 5px 0;
  color: var(--sc-ink-dim);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--sc-cyan); }
.footer-tagline {
  color: var(--sc-ink-faint);
  font-family: var(--sc-data);
  font-size: 12px;
  letter-spacing: 0.06em;
  margin-top: 10px;
}
.footer-strip {
  margin-top: 50px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  color: var(--sc-ink-faint);
  font-family: var(--sc-data);
  font-size: 12px;
  letter-spacing: 0.06em;
  position: relative;
}
.footer-strip p { margin: 0; }
.footer-strip a { color: var(--sc-ink-dim); text-decoration: none; }
.footer-strip a:hover { color: var(--sc-cyan); }

/* ─── responsive ────────────────────────────────────── */
@media (max-width: 980px) {
  .header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10, 2, 16, 0.92); }
  .header-inner { justify-content: space-between; gap: 16px; }
  .nav-toggle { display: flex; }
  .gh-cta { display: none; }            /* moves into the dropdown as .nav-gh */
  .nav-gh { display: block; }

  /* Nav becomes a full-width dropdown below the header, toggled by .nav-open */
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 6px 0;
    background: rgba(10, 2, 16, 0.98);
    border-top: 1px solid rgba(255, 0, 110, 0.25);
    border-bottom: 2px solid var(--sc-magenta);
    z-index: 95;
  }
  .header.nav-open .nav { display: flex; }
  .nav a { padding: 14px 28px; }        /* full-width tap rows */
  .nav a::before { display: none; }     /* drop the // marker in the dropdown */

  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .marquee { font-size: 11px; }
  .gh-cta { padding: 9px 14px; font-size: 12px; }
  .footer-grid { grid-template-columns: 1fr; }
}