/* ============================================================
   8-Bit Photo Converter — shared styles
   Design tokens + site nav + footer + readable content pages.
   The homepage keeps its own inline converter styles; this file
   adds the shared chrome (nav/footer) and long-form typography
   used by the About, Contact, Privacy and article sections.
   ============================================================ */

:root {
  --pink:      #ff4d9e;
  --cyan:      #00d9ff;
  --yellow:    #ffeb3b;
  --green:     #00e676;
  --red:       #ff1744;
  --bg:        #0f1419;
  --bg-card:   #1a1f28;
  --bg-deep:   #0a0d12;
  --bg-input:  #2d3748;
  --text:      #f2f2ed;
  --text-dim:  #8a8a82;
  --glow-pink: rgba(255, 77, 158, 0.8);
  --glow-cyan: rgba(0, 217, 255, 0.8);

  --font-pixel: 'Press Start 2P', monospace;
  --font-body:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                Helvetica, Arial, sans-serif;
}

/* ── SITE NAV ─────────────────────────────────────────────── */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem 0.5rem;
}

.site-nav-brand {
  font-family: var(--font-pixel);
  font-size: 0.6875rem;
  color: var(--pink);
  text-decoration: none;
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(255, 77, 158, 0.5);
  white-space: nowrap;
}

.site-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav-links a {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: var(--cyan);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color 0.2s, text-shadow 0.2s;
}

.site-nav-links a:hover,
.site-nav-links a:focus,
.site-nav-links a[aria-current="page"] {
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(255, 235, 59, 0.6);
}

/* ── CONTENT PAGE SHELL (About / Contact / Privacy) ───────── */
.page-body {
  font-family: var(--font-body);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle, rgba(255, 77, 158, 0.06) 1px, transparent 1px),
    radial-gradient(circle, rgba(0, 217, 255, 0.03) 1px, transparent 1px);
  background-size: 24px 24px, 48px 48px;
  background-position: 0 0, 12px 12px;
  color: var(--text);
  min-height: 100vh;
}

.page {
  max-width: 780px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
  font-family: var(--font-body);
}

.page h1 {
  font-family: var(--font-pixel);
  font-size: clamp(1.1rem, 3.5vw, 1.8rem);
  color: var(--pink);
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-shadow: 0 0 12px var(--glow-pink);
  margin-bottom: 0.5rem;
}

.page .lead {
  color: var(--text-dim);
  font-size: 1.05rem;
  margin: 0.75rem 0 2rem;
}

.page h2 {
  font-family: var(--font-pixel);
  font-size: clamp(0.8rem, 2.4vw, 1.05rem);
  color: var(--cyan);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px var(--glow-cyan);
  margin: 2.75rem 0 1rem;
}

.page h3 {
  font-family: var(--font-pixel);
  font-size: 0.75rem;
  color: var(--yellow);
  line-height: 1.5;
  margin: 2rem 0 0.75rem;
}

.page p,
.page li {
  font-size: 1rem;
  line-height: 1.8;
  color: #d3d7de;
}

.page p { margin-bottom: 1.15rem; }

.page ul,
.page ol {
  margin: 0 0 1.5rem 1.25rem;
  padding: 0;
}

.page li { margin-bottom: 0.6rem; }

.page a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page a:hover { color: var(--yellow); }

.page strong { color: var(--text); }

.page .meta-note {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-top: 0.25rem;
}

/* Cards used inside long-form content (e.g. palette history) */
.info-card {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--pink);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: 2px;
}
.info-card h3 {
  margin: 0 0 0.4rem;
  font-size: 0.6875rem;
  color: var(--pink);
}
.info-card p { margin: 0; font-size: 0.95rem; }

.back-home {
  display: inline-block;
  margin-top: 2.5rem;
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  color: var(--cyan);
  text-decoration: none;
  border: 2px solid var(--cyan);
  padding: 0.85rem 1.25rem;
  transition: background 0.2s, box-shadow 0.2s;
}
.back-home:hover {
  background: rgba(0, 217, 255, 0.1);
  box-shadow: 0 0 18px rgba(0, 217, 255, 0.25);
}

/* ── SHARED FOOTER ────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 2.5rem 1rem;
  margin-top: 2rem;
}

.site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.site-footer-brand {
  font-family: var(--font-pixel);
  font-size: 0.5625rem;
  color: var(--pink);
  text-shadow: 0 0 8px rgba(255, 77, 158, 0.4);
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer-links a {
  font-family: var(--font-pixel);
  font-size: 0.4375rem;
  color: var(--cyan);
  text-decoration: none;
  letter-spacing: 0.05em;
}
.site-footer-links a:hover { color: var(--yellow); }

.site-footer-tagline {
  font-family: var(--font-pixel);
  font-size: 0.4375rem;
  color: var(--text-dim);
  line-height: 2;
  max-width: 480px;
}