/* ============================================================
   Cedar Vault — shared styles
   ------------------------------------------------------------
   Linked by: index.html, about.html, getting-started.html,
              partners.html

   Everything here was byte-identical in all four pages' inline
   <style> blocks before extraction. Page-specific rules — and
   the three different footer treatments — stay inline in each
   page and override this file, which is why the <link> must
   come BEFORE the page's own <style>.

   NOT used by privacy.html / terms.html: those two are on the
   older dark/gold design system carried over from
   heirloomvault-site and share no tokens with these pages.
   ============================================================ */

/* ─── RESET ───────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── DESIGN TOKENS ───────────────────────────── */
:root {
  --navy:      #1a1a2e;
  --navy-mid:  #252542;
  --cedar:     #a0785a;
  --cedar-dk:  #7a5840;
  --cedar-lt:  #c4a882;
  --parchment: #f8f7f4;
  --linen:     #f0ece4;
  --stone:     #8a8aaa;
  --mist:      #b8b8cc;
  --ink:       #1a1a2e;
  --body-text: #4a4a62;
}

/* ─── BASE ────────────────────────────────────── */
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: var(--parchment); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* ─── NAV ─────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 72px; height: 72px;
  background: var(--navy);
  border-bottom: 1px solid rgba(160,120,90,0.1);
}
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo-icon { width: 38px; height: 38px; flex-shrink: 0; }
.logo-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.25rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--parchment); white-space: nowrap;
}
.logo-name em { color: var(--cedar-lt); font-style: normal; font-weight: 300; }
.logo-name .tm, .footer-logo-name .tm {
  font-size: 0.55em; vertical-align: super; color: var(--cedar-lt); font-weight: 400; margin-left: 1px;
}
.nav-links {
  display: flex; gap: 40px;
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.03em;
  color: var(--mist); list-style: none;
}
.nav-links a { color: inherit; text-decoration: none; }
.nav-links a:hover { color: var(--parchment); }
.nav-links a.active { color: var(--cedar-lt); }
.nav-right { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.nav-signin { font-size: 0.82rem; color: var(--mist); font-weight: 400; text-decoration: none; }
.nav-signin:hover { color: var(--parchment); }
.nav-back { font-size: 0.82rem; color: var(--mist); font-weight: 400; text-decoration: none; }
.nav-back:hover { color: var(--parchment); }
.nav-cta {
  background: var(--cedar); color: var(--parchment);
  padding: 10px 24px; border-radius: 4px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
  text-decoration: none; white-space: nowrap; transition: background 0.15s;
}
.nav-cta:hover { background: var(--cedar-dk); }

/* ─── FOOTER ──────────────────────────────────────
   One footer for the whole marketing site. This was previously three
   different designs: index had its own darker navy plus the social icons
   and the scripture line, while about/partners and getting-started each
   differed again. The index treatment was adopted sitewide, so the footer
   markup is now byte-identical on every page and all of its CSS lives here.
   ─────────────────────────────────────────────── */
footer {
  background: #111120;
  padding: 64px 72px 40px;
  border-top: 1px solid rgba(160,120,90,0.1);
}
.footer-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 56px;
}
.footer-brand {}
.footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-logo-icon { width: 30px; height: 30px; }
.footer-logo-name {
  font-family: 'DM Sans', sans-serif; font-size: 1.1rem; font-weight: 700;
  color: var(--parchment);
}
.footer-logo-name em { color: var(--cedar-lt); font-style: normal; font-weight: 300; }
.footer-tagline { font-size: 0.85rem; color: var(--mist); line-height: 1.6; font-weight: 400; max-width: 260px; }
.footer-social { display: flex; gap: 12px; margin-top: 16px; }
.footer-social-link { color: var(--mist); transition: color 0.2s; }
.footer-social-link:hover { color: var(--parchment); }
.footer-col h4 {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--cedar-lt); margin-bottom: 20px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 0.85rem; color: var(--mist); text-decoration: none; font-weight: 400; }
.footer-col ul li a:hover { color: var(--parchment); }
.footer-verse { text-align: center; font-size: 0.78rem; color: var(--stone); font-style: italic; padding: 20px 0 4px; border-top: 1px solid rgba(255,255,255,0.06); margin-bottom: 20px; }
.footer-bottom {
  padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: space-between;
}
.footer-copy { font-size: 0.78rem; color: var(--stone); font-weight: 400; }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { font-size: 0.78rem; color: var(--stone); text-decoration: none; }
.footer-legal a:hover { color: var(--mist); }

/* ─── FOOTER, TABLET (≤1024px) ───────────────────── */
@media (max-width: 1024px) {
  footer { padding: 56px 40px 32px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ─── MOBILE, NAV + FOOTER (≤767px) ───────────────
   The nav half is the block that previously had to be edited in four
   files at once (commit e9e2d90), against three different breakpoints.
   It now lives in exactly one place, and so does the footer.
   ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  nav { padding: 0 20px; height: 64px; }
  .nav-links { display: none; }
  .nav-signin { display: none; }
  .nav-back { display: none; }
  .nav-cta { padding: 9px 18px; font-size: 0.8rem; }

  footer { padding: 48px 20px 28px; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .footer-legal { justify-content: center; }
}