/* =============================================================
   public.css  –  Shared styles for all public (no-layout) pages
   JumanaJimmy Printable Puzzle Platform
   ============================================================= */

/* ── Base ── */
body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: #f8f9fb;
  color: #1a1a2e;
}

/* ── Nav ── */
.site-nav {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: .75rem 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Legacy Bootstrap nav used on the home page */
.navbar {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: .9rem 2rem;
  display: flex;
  align-items: center;
}
.navbar-brand {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 1.15rem;
  color: #1a1a2e !important;
  text-decoration: none;
}
.navbar-brand img { height: 36px; margin-right: .5rem; }

.nav-logo {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: #1a1a2e;
}
.nav-logo img  { height: 40px; }
.nav-logo span { font-weight: 800; font-size: 1.15rem; }

/* Right-side nav links */
.nav-right {
  margin-left: auto;
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: .9rem;
}
.nav-right a             { color: #6366f1; font-weight: 600; text-decoration: none; }
.nav-right a:hover       { text-decoration: underline; }

.nav-link-right          { margin-left: auto; font-size: .9rem; color: #6c757d; }
.nav-link-right a        { color: #f1641e; font-weight: 600; text-decoration: none; }

/* ── Hero – purple (home / integration) ── */
.hero-purple {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  padding: 80px 0 70px;
  text-align: center;
  color: #fff;
}
.hero-purple h1 { font-size: 2.5rem; font-weight: 900; margin-bottom: 1rem; }
.hero-purple p  { font-size: 1.15rem; opacity: .9; max-width: 650px; margin: 0 auto 1.75rem; }

/* ── Hero – amber (etsy-api page) ── */
.hero-amber {
  background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
  padding: 70px 0 60px;
  text-align: center;
}
.hero-amber h1 { font-size: 2.2rem; font-weight: 800; color: #1a1a2e; margin-bottom: .75rem; }
.hero-amber p  { font-size: 1.1rem; color: #3a3a4e; max-width: 600px; margin: 0 auto; }

/* Generic .hero alias kept for home page */
.hero {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  padding: 90px 0 80px;
  text-align: center;
}
.hero h1 { font-size: 2.6rem; font-weight: 800; margin-bottom: 1rem; }
.hero p  { font-size: 1.15rem; opacity: .9; max-width: 560px; margin: 0 auto 2rem; }

/* Hero badge pills */
.hero-badges { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.hero-badge  {
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.4);
  color: #fff;
  padding: .35rem 1rem;
  border-radius: 2rem;
  font-size: .9rem;
  font-weight: 600;
}

/* Etsy pill badge */
.etsy-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  border: 2px solid #f1641e;
  color: #f1641e;
  font-weight: 700;
  padding: .4rem 1.2rem;
  border-radius: 2rem;
  font-size: .95rem;
  margin-top: 1.25rem;
}

/* ── Sections ── */
.section       { padding: 65px 0; }
.section-alt   { background: #fff; }
.section-title { font-size: 1.85rem; font-weight: 800; margin-bottom: .5rem; }
.section-sub   { color: #6c757d; font-size: 1.05rem; margin-bottom: 2.5rem; }

/* ── Feature cards ── */
.features { padding: 70px 0; }

.feature-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  height: 100%;
  transition: box-shadow .2s;
}
.feature-card:hover  { box-shadow: 0 8px 24px rgba(99,102,241,.12); }
.feature-icon        { font-size: 2.4rem; margin-bottom: .75rem; }
.feature-card h5     { font-weight: 700; margin-bottom: .5rem; }
.feature-card p      { color: #6c757d; font-size: .95rem; }

/* ── Step cards ── */
.step-card {
  background: #f8f9fb;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.75rem;
  height: 100%;
}
.step-card h5 { font-weight: 700; margin-bottom: .4rem; }

/* Purple gradient step number (integration page) */
.step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

/* Amber step number (etsy-api page) */
.step-num-amber {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f7971e;
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

/* ── Policy list ── */
.policy-item { display: flex; gap: .75rem; margin-bottom: 1rem; align-items: flex-start; }
.policy-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: .05rem; }

/* ── API table badges ── */
.api-table td, .api-table th { vertical-align: middle; }
.badge-read  { background: #d1fae5; color: #065f46; font-weight: 700; padding: .25rem .75rem; border-radius: 2rem; font-size: .8rem; }
.badge-write { background: #fef3c7; color: #92400e; font-weight: 700; padding: .25rem .75rem; border-radius: 2rem; font-size: .8rem; }
.badge-never { background: #fee2e2; color: #991b1b; font-weight: 700; padding: .25rem .75rem; border-radius: 2rem; font-size: .8rem; }

/* ── CTA band ── */
.cta-band        { background: linear-gradient(135deg, #f0f0ff 0%, #e8eaff 100%); padding: 60px 0; text-align: center; border-top: 1px solid #e2e8f0; }
.cta-band h2     { font-weight: 800; margin-bottom: .75rem; }

/* ── Buttons ── */
.btn-cta {
  background: #fff;
  color: #6366f1;
  font-weight: 700;
  padding: .85rem 2.4rem;
  border-radius: .8rem;
  font-size: 1.05rem;
  border: none;
  text-decoration: none;
  transition: transform .15s;
  display: inline-block;
}
.btn-cta:hover { transform: translateY(-2px); color: #4f46e5; }

.btn-access {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff !important;
  font-weight: 700;
  padding: .85rem 2.4rem;
  border-radius: .8rem;
  font-size: 1.05rem;
  text-decoration: none;
  display: inline-block;
}
.btn-access:hover { opacity: .9; }

.btn-primary-custom {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff !important;
  font-weight: 700;
  padding: .85rem 2.4rem;
  border-radius: .8rem;
  font-size: 1.05rem;
  text-decoration: none;
  display: inline-block;
  border: none;
  transition: opacity .15s;
}
.btn-primary-custom:hover { opacity: .9; }

.btn-outline-custom {
  font-weight: 600;
  padding: .8rem 2rem;
  border-radius: .8rem;
  font-size: 1rem;
  text-decoration: none;
  display: inline-block;
  border: 2px solid #6366f1;
  color: #6366f1;
  transition: all .15s;
}
.btn-outline-custom:hover { background: #6366f1; color: #fff; }

/* ── Footer ── */
.site-footer {
  background: #1a1a2e;
  color: #adb5bd;
  text-align: center;
  padding: 1.75rem;
  font-size: .9rem;
}
.site-footer a       { color: #a5b4fc; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Inline footer used on home page */
footer {
  padding: 1.5rem 2rem;
  text-align: center;
  font-size: .85rem;
  color: #aaa;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}