/*
 * Purple Industries — Privacy policy stylesheet
 * ==============================================
 * Must stay aligned with the main site canonical reference (site/styles.css).
 *
 * LAYOUT
 *   Shell:  .policy-shell — same width/margin/padding as .page-shell
 *   Hero:   .policy-hero — pad 32px, radius 28px, blur(16px), bg --paper
 *   Footer: .policy-footer — "Purple Industries © 2026", 0.78rem, centered
 *
 * UTILITY-LINKS ROW (above hero)
 *   Same pattern: Purple Industries + Privacy Policy left, theme toggle right.
 *   0.88rem, weight 400, color --muted / --ink-soft.
 *
 * COLOURS — purple accent in BOTH modes, no orange
 *   --brand #a78bfa dark / #7c3aed light (same as --purple on main site)
 *   --accent-text #a78bfa dark / #7a2bc0 light
 *   --ink #f4f7fb / #1b2430    --muted #c7d2df / #5c6472
 *
 * TYPOGRAPHY
 *   Eyebrow:  0.78rem, weight 700, uppercase, color --brand
 *   Hero h1:  clamp(2.4rem, 7vw, 4.8rem)
 *   Body:     1rem / 1.7 line-height for readability
 *
 * THEME: dark default, light via :root[data-theme="light"]. Uses shared theme.js.
 */
:root {
  color-scheme: dark;
  --bg: #0a1118;
  --page-background:
    radial-gradient(circle at top left, rgba(195, 158, 255, 0.18), transparent 32%),
    radial-gradient(circle at top right, rgba(116, 225, 193, 0.12), transparent 24%),
    linear-gradient(180deg, #141d28 0%, #0a1118 44%, #070b10 100%);
  --paper: rgba(13, 20, 29, 0.92);
  --paper-border: rgba(182, 205, 226, 0.18);
  --surface: rgba(255, 255, 255, 0.05);
  --ink: #f4f7fb;
  --muted: #c8d2dd;
  --line: rgba(199, 210, 223, 0.2);
  --brand: #a78bfa;
  --brand-soft: rgba(195, 158, 255, 0.14);
  --warning: #ffb089;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  color: var(--ink);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef2f6;
  --page-background:
    radial-gradient(circle at top left, rgba(122, 43, 192, 0.12), transparent 32%),
    radial-gradient(circle at top right, rgba(26, 125, 105, 0.08), transparent 24%),
    linear-gradient(180deg, #dfe8f2 0%, #eef2f6 42%, #f7f8fb 100%);
  --paper: rgba(255, 255, 255, 0.94);
  --paper-border: rgba(255, 255, 255, 0.62);
  --surface: rgba(255, 255, 255, 0.76);
  --ink: #192a38;
  --muted: #586774;
  --line: rgba(25, 42, 56, 0.12);
  --brand: #7a2bc0;
  --brand-soft: rgba(122, 43, 192, 0.08);
  --warning: #61209d;
  --shadow: 0 24px 60px rgba(22, 35, 45, 0.14);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--page-background);
}

body {
  min-height: 100vh;
  color: var(--ink);
}

a {
  color: inherit;
}

body,
.policy-hero,
.policy-card,
.policy-nav,
.callout,
.theme-toggle {
  transition:
    background-color 120ms ease,
    color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.policy-shell {
  width: min(1120px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 24px 0 40px;
}

.theme-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--brand);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: 999px;
}

.policy-hero,
.policy-card,
.policy-nav {
  background: var(--paper);
  border: 1px solid var(--paper-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.policy-hero {
  padding: 32px;
  border-radius: 28px;
}

.eyebrow,
.nav-title {
  margin: 0 0 10px;
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.policy-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(2.4rem, 7vw, 4.8rem);
  line-height: 0.94;
  letter-spacing: -0.05em;
}

.hero-copy {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 1.04rem;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.95rem;
}

.policy-layout {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.policy-nav {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px;
  border-radius: 24px;
}

.policy-nav a {
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
}

.policy-card {
  display: grid;
  gap: 28px;
  padding: 32px;
  border-radius: 28px;
}

.policy-card section {
  display: grid;
  gap: 12px;
}

.policy-card h2 {
  margin: 0;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}

.policy-card h3 {
  margin: 6px 0 0;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.policy-card p,
.policy-card li {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.policy-table-shell {
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.policy-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.policy-table th,
.policy-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  color: var(--muted);
  line-height: 1.6;
}

.policy-table th {
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.03);
}

:root[data-theme="light"] .policy-table th {
  background: rgba(122, 43, 192, 0.04);
}

.policy-table tbody tr:last-child td {
  border-bottom: 0;
}

.policy-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
}

.callout {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(180, 76, 34, 0.16);
  background: rgba(180, 76, 34, 0.14);
  color: var(--warning);
  font-weight: 600;
}

@media (max-width: 640px) {
  .policy-shell {
    width: calc(100vw - 16px);
    padding-top: 16px;
  }
}

@media (min-width: 940px) {
  .policy-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
  }

  .policy-nav {
    position: sticky;
    top: 16px;
  }
}

/* ── Utility links + theme toggle row ───────────────────── */
.utility-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  font-size: 0.88rem;
}

.utility-links a {
  color: var(--muted);
  text-decoration: none;
}

.utility-links a:hover,
.utility-links a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}

.utility-links .theme-toggle {
  margin-left: auto;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.88rem;
  color: var(--muted);
}

/* ── Footer ─────────────────────────────────────────────── */
.policy-footer {
  text-align: center;
  padding: 1.5rem 1rem;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 1rem;
}