/* ─────────────────────────────────────────────
   BASE STYLES — inner pages (account, thank you, etc.)
   Landing page has its own CSS block in the template.
   --primary is injected from site_config.py via :root in base.html
─────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --orange: #E8622A;
  --orange-dark: #C94E1E;
  --orange-lt: #FDF0EB;
  --dark: #111111;
  --mid: #555;
  --light: #F7F5F2;
  --border: #E8E4DF;
  --white: #ffffff;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--dark);
  background: var(--white);
  line-height: 1.6;
  font-size: 16px;
}

a { color: var(--primary, var(--orange)); }

/* ── Site header (inner pages) ── */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.site-header nav {
  max-width: 900px;
  margin: 0 auto;
  padding: .875rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  color: var(--dark);
}
.logo img { height: 32px; }
.nav-links a {
  font-size: .875rem;
  color: var(--mid);
  text-decoration: none;
}
.nav-links a:hover { color: var(--dark); }

/* ── Messages ── */
main.site-main { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem; }
main.site-main--full { width: 100%; padding: 0; }
.messages { margin-bottom: 1.5rem; }
.message { padding: .75rem 1rem; border-radius: 6px; margin-bottom: .5rem; background: #f0f0f0; }
.message--error { background: #fee; border-left: 4px solid #c00; }
.message--success { background: #efe; border-left: 4px solid #090; }
.message--info { background: #eef; border-left: 4px solid #00c; }

/* ── Buttons ── */
.btn {
  display: inline-block;
  padding: .65rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-size: .95rem;
  transition: background .15s, transform .1s;
}
.btn--primary { background: var(--primary, var(--orange)); color: #fff; }
.btn--primary:hover { filter: brightness(.9); transform: translateY(-1px); }
.btn--secondary { background: var(--light); color: var(--dark); border: 1px solid var(--border); }
.btn--secondary:hover { background: var(--border); }
.btn--large { font-size: 1.05rem; padding: .875rem 2rem; }

/* ── Inner page sections ── */
.inner-page {
  max-width: 600px;
  margin: 3rem auto;
  text-align: center;
}
.inner-page h1 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.inner-page p { color: var(--mid); font-size: 1.05rem; margin-bottom: 1.5rem; }
.inner-page .actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* ── Customer area ── */
.customer-area h1 {
  font-family: 'Sora', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: .5rem;
}
.customer-area .account-meta {
  color: var(--mid);
  font-size: .9rem;
  margin-bottom: 2rem;
}
.customer-area .account-meta a { color: var(--mid); }
.order-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  background: var(--light);
}
.order-card h3 {
  font-family: 'Sora', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .35rem;
}
.order-card .order-date {
  font-size: .85rem;
  color: var(--mid);
  margin-bottom: 1rem;
}
.order-card .download-meta { font-size: .8rem; color: #aaa; margin-left: .5rem; }

/* ── Magic link login ── */
.magic-link-page {
  max-width: 420px;
  margin: 4rem auto;
}
.magic-link-page h1 {
  font-family: 'Sora', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: .5rem;
}
.magic-link-page p { color: var(--mid); margin-bottom: 1.5rem; }
.magic-link-page form { display: flex; flex-direction: column; gap: .75rem; }
.magic-link-page label { font-size: .875rem; font-weight: 600; color: var(--dark); }
.magic-link-page input[type="email"] {
  width: 100%;
  padding: .65rem .875rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  outline: none;
  transition: border-color .15s;
}
.magic-link-page input[type="email"]:focus { border-color: var(--orange); }

/* ── Site footer (inner pages) ── */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 4rem;
  padding: 1.5rem;
  text-align: center;
  color: var(--mid);
  font-size: .8rem;
}
.site-footer a { color: var(--mid); text-decoration: none; margin: 0 .25rem; }
.site-footer a:hover { color: var(--dark); }
.social-links { margin-top: .5rem; }
.social-links a { margin: 0 .375rem; }