/* ============================================================
   PencilIQ — CANONICAL NAVIGATION  ·  nav.css
   The single source of truth for the site's shared top chrome.
   Loaded by EVERY page BEFORE any page stylesheet.

   SELF-CONTAINED: the nav defines its OWN colour + font tokens
   (the --nav-* scope below) so it renders identically regardless
   of the host page's :root palette. It carries BOTH themes itself
   and responds to :root[data-theme="light"] / "dark" directly —
   pulled from the canonical "A safer library" design system.
   ============================================================ */

/* ---------- nav-scoped tokens — DARK (default) ----------
   .piq-footer shares these constants but is intentionally LEFT OUT of the
   light override below, so the footer stays a dark ink anchor in both themes. */
.nav, .mobile-menu, .piq-footer{
  /* fonts (referenced by family so nav.css needs no other CSS loaded) */
  --nav-serif:'Newsreader','Times New Roman',serif;
  --nav-sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --nav-mono:'JetBrains Mono',ui-monospace,monospace;
  --nav-hand:'Caveat',cursive;

  /* signature constants (theme-independent) */
  --nav-amber:#E0A35A;
  --nav-cream:#F1EADC; --nav-cream-soft:#C2B49A; --nav-cream-faint:#8C8068;
  --nav-line-cream:rgba(241,234,220,.10); --nav-line-cream-strong:rgba(241,234,220,.20);

  /* DARK palette (warm-violet ink ground) */
  --nav-bg:#0E0B14;
  --nav-text:#F1EADC; --nav-text-soft:#BFB7A5; --nav-text-faint:#8B8395;
  --nav-line:rgba(241,234,220,.09); --nav-line-strong:rgba(241,234,220,.18);
  --nav-accent:#9B8AE8;            /* violet pencil tip + active underline */
  --nav-amber-ink:#E0A35A;
  --nav-h:74px;
  /* footer = deep warm-violet ink band, identical in both themes */
  --nav-footer-bg:radial-gradient(135% 135% at 18% 0%,#1B1530 0%,#0B0913 72%);
}

/* ---------- nav-scoped tokens — LIGHT (paper) ---------- */
:root[data-theme="light"] .nav,
:root[data-theme="light"] .mobile-menu{
  --nav-bg:#F3EBD9;
  --nav-text:#241B11; --nav-text-soft:#6B5E49; --nav-text-faint:#9A8B70;
  --nav-line:rgba(40,30,16,.12); --nav-line-strong:rgba(40,30,16,.22);
  --nav-accent:#6B5BD9;            /* violet tip on paper */
  --nav-amber-ink:#BB6E25;
}

/* ============================================================
   NAV SHELL
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;
  justify-content:space-between;height:var(--nav-h);padding:0 var(--gutter,72px);
  font-family:var(--nav-sans);
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease,height .35s ease;
  border-bottom:1px solid transparent;}
.nav.scrolled{background:color-mix(in srgb,var(--nav-bg) 90%,transparent);
  backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  border-bottom:1px solid var(--nav-line);height:60px;}
/* once scrolled, the nav owns its own ground — text returns to the theme colour */
.nav.scrolled .wordmark{color:var(--nav-text);}

/* solid variant — for subpages with no dark hero band to float over:
   the unscrolled nav already shows its own themed ground + hairline. */
.nav--solid{background:color-mix(in srgb,var(--nav-bg) 92%,transparent);
  backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  border-bottom:1px solid var(--nav-line);}
.nav--solid .wordmark{color:var(--nav-text);}

/* ---------- wordmark ---------- */
.wordmark{display:inline-flex;align-items:center;gap:11px;color:var(--nav-text);}
.wordmark .ico{width:28px;height:28px;flex:none;}
/* size the injected Nib SVG to its box — never depend on a page stylesheet's
   global img,svg reset. Without this, a viewBox-only SVG falls back to its
   300×150 default (the "giant pencil" seen on bfcache restore / docs). */
.wordmark .ico svg{display:block;width:100%;height:100%;}
.wordmark .word{font-family:var(--nav-hand);font-weight:600;font-size:26px;line-height:.9;color:inherit;
  display:inline-flex;align-items:center;gap:8px;}
.wordmark .iq{font-family:var(--nav-mono);font-weight:600;font-size:11px;letter-spacing:.02em;
  color:#1B130B;background:var(--nav-amber);border-radius:5px;padding:2px 5px;line-height:1;align-self:center;}

/* ---------- links ---------- */
.nav-links{display:flex;gap:30px;font-size:14px;color:var(--nav-text-soft);font-weight:500;}
.nav-links a{transition:color .15s;position:relative;color:inherit;}
.nav-links a:hover,.nav-links a.active{color:var(--nav-text);}
.nav-links a.active::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--nav-accent);border-radius:1px;}

/* ---------- right-side CTA cluster ---------- */
.nav-cta{display:flex;gap:14px;align-items:center;}
.nav-cta .signin{font-size:14px;color:var(--nav-text-soft);transition:color .15s;}
.nav-cta .signin:hover{color:var(--nav-text);}

/* ---------- theme toggle ---------- */
.theme-toggle{width:34px;height:34px;border-radius:999px;border:1px solid var(--nav-line-strong);
  background:transparent;color:var(--nav-text-soft);cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;transition:color .15s,border-color .15s;}
.theme-toggle:hover{color:var(--nav-text);border-color:var(--nav-text-soft);}
.theme-toggle svg{width:17px;height:17px;}
.theme-toggle .i-sun{display:none;} .theme-toggle .i-moon{display:block;}
:root[data-theme="light"] .theme-toggle .i-sun{display:block;}
:root[data-theme="light"] .theme-toggle .i-moon{display:none;}

/* ============================================================
   NAV BUTTONS  (only what the nav itself needs)
   ============================================================ */
.nav .btn,
.mobile-menu .btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;
  font-family:var(--nav-sans);font-size:14px;font-weight:500;letter-spacing:.01em;border-radius:999px;
  cursor:pointer;border:1px solid transparent;white-space:nowrap;text-align:center;
  transition:transform .15s,background .15s,border-color .15s,box-shadow .15s;}
.nav .btn-amber,
.mobile-menu .btn-amber{background:var(--nav-amber);color:#1B130B;}
.nav .btn-amber:hover,
.mobile-menu .btn-amber:hover{transform:translateY(-1px);background:#E9B475;
  box-shadow:0 14px 30px -14px var(--nav-amber);}
.nav .btn-sm,
.mobile-menu .btn-sm{padding:9px 16px;font-size:13px;}

/* ============================================================
   HERO-INK VARIANT
   On the landing hero (dark ink band), the unscrolled nav floats
   over the band, so its text is cream regardless of theme. Once
   scrolled it gets its own themed ground (rules above).
   ============================================================ */
.nav--hero-ink:not(.scrolled){border-bottom-color:transparent;}
.nav--hero-ink:not(.scrolled) .wordmark{color:var(--nav-cream);}
.nav--hero-ink:not(.scrolled) .nav-links{color:var(--nav-cream-soft);}
.nav--hero-ink:not(.scrolled) .nav-links a:hover,
.nav--hero-ink:not(.scrolled) .nav-links a.active{color:var(--nav-cream);}
.nav--hero-ink:not(.scrolled) .nav-cta .signin{color:var(--nav-cream-soft);}
.nav--hero-ink:not(.scrolled) .nav-cta .signin:hover{color:var(--nav-cream);}
.nav--hero-ink:not(.scrolled) .theme-toggle{color:var(--nav-cream-soft);border-color:var(--nav-line-cream-strong);}
.nav--hero-ink:not(.scrolled) .theme-toggle:hover{color:var(--nav-cream);}
.nav--hero-ink:not(.scrolled) .nav-burger span{background:var(--nav-cream);}

/* LIGHT theme: the landing hero is paper, not a dark band → the floating
   nav reads as ink text on paper until it scrolls onto its own ground. */
:root[data-theme="light"] .nav--hero-ink:not(.scrolled){
  --nav-cream:var(--nav-text);
  --nav-cream-soft:var(--nav-text-soft);
  --nav-line-cream-strong:var(--nav-line-strong);
}

/* ============================================================
   MOBILE  (burger + full-screen menu)
   ============================================================ */
.nav-burger{display:none;width:40px;height:40px;border:0;background:transparent;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;align-items:center;}
.nav-burger span{display:block;width:22px;height:2px;background:var(--nav-text);border-radius:2px;transition:.3s;}

.mobile-menu{position:fixed;inset:0;z-index:1100;background:var(--nav-bg);font-family:var(--nav-sans);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  transform:translateY(-100%);transition:transform .4s cubic-bezier(.16,1,.3,1);
  visibility:hidden;pointer-events:none;}
.mobile-menu.open{transform:translateY(0);visibility:visible;pointer-events:auto;}
.mobile-menu a{font-family:var(--nav-serif);font-size:30px;color:var(--nav-text);}
.mobile-menu a.amber{color:var(--nav-accent);}
.mobile-menu .close{position:absolute;top:24px;right:28px;font-size:30px;background:0;border:0;
  color:var(--nav-text);cursor:pointer;}

@media(max-width:980px){
  .nav-links,.nav-cta .signin{display:none;}
  .nav-burger{display:flex;}
}
@media(prefers-reduced-motion:reduce){
  .nav,.mobile-menu,.nav-burger span,.theme-toggle{transition-duration:.001ms!important;}
}

/* ============================================================
   CANONICAL FOOTER  ·  .piq-footer
   Shared site chrome, like the nav. Self-contained (--nav-* tokens),
   a dark ink anchor in BOTH themes. Used on every page.
   ============================================================ */
.piq-footer{background:var(--nav-footer-bg);color:var(--nav-cream-soft);
  padding:72px var(--gutter,72px) 44px;font-family:var(--nav-sans);}
.piq-footer .ft-inner{max-width:var(--maxw,1200px);margin:0 auto;display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:40px;border-bottom:1px solid var(--nav-line-cream);}
.piq-footer .ft-brand{max-width:300px;}
.piq-footer .ft-brand .wordmark{margin-bottom:16px;color:var(--nav-cream);}
.piq-footer .ft-brand .word{color:var(--nav-cream);}
.piq-footer .ft-brand p{font-size:14px;line-height:1.6;color:var(--nav-cream-soft);}
.piq-footer .ft-col h5{font-family:var(--nav-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--nav-cream-faint);margin:0 0 16px;font-weight:500;}
.piq-footer .ft-col a{display:block;font-size:14px;color:var(--nav-cream-soft);
  margin-bottom:11px;transition:color .14s;}
.piq-footer .ft-col a:hover{color:var(--nav-cream);}
.piq-footer .ft-bottom{max-width:var(--maxw,1200px);margin:28px auto 0;display:flex;
  justify-content:space-between;font-family:var(--nav-mono);font-size:11px;
  color:var(--nav-cream-faint);letter-spacing:.04em;flex-wrap:wrap;gap:12px;}
@media(max-width:860px){
  .piq-footer .ft-inner{grid-template-columns:1fr 1fr;gap:32px;}
  .piq-footer .ft-brand{grid-column:1/-1;max-width:none;}
}
@media(max-width:520px){
  .piq-footer .ft-inner{grid-template-columns:1fr;}
  .piq-footer .ft-bottom{flex-direction:column;}
}