/* ============================================================
   Eddys Development — Legal pages (terms / privacy / cookies)
   Readable long-form layout on the dark violet theme.
   Builds on styles.css (palette + fonts).
   ============================================================ */

body.legal {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(1000px 520px at 50% -12%, #1c1248 0%, transparent 60%),
    var(--bg-0);
  -webkit-font-smoothing: antialiased;
}

/* Header */
.legal-header { position: sticky; top: 0; z-index: 20; background: rgba(22, 16, 11, .74); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--border); }
.legal-header-inner { width: min(880px, 100%); margin: 0 auto; padding: 13px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.legal-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.legal-brand .mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #fff; background: linear-gradient(135deg, var(--violet), var(--violet-700)); box-shadow: 0 4px 14px rgba(226, 85, 43, .4); }
.legal-brand b { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text); }
.legal-back { font: 600 14px var(--font-ui); color: var(--muted); text-decoration: none; transition: color .15s; }
.legal-back:hover { color: var(--text); }

/* Body */
.legal-main { width: min(780px, 100%); margin: 0 auto; padding: clamp(36px, 6vw, 64px) 24px 72px; }
.legal-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 5vw, 44px); letter-spacing: -.01em; margin: 0 0 10px; }
.legal-meta { color: var(--faint); font-size: 14px; margin: 0 0 26px; }
.legal-intro { font-size: 16px; line-height: 1.75; color: var(--muted); margin: 0 0 30px; }

/* Table of contents */
.legal-toc { background: rgba(21, 17, 43, .5); border: 1px solid var(--border); border-radius: 14px; padding: 18px 22px; margin: 0 0 38px; }
.legal-toc p { font: 600 12px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--violet); margin: 0 0 12px; }
.legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 30px; }
.legal-toc li { margin: 5px 0; break-inside: avoid; }
.legal-toc a { color: var(--muted); text-decoration: none; font-size: 14px; }
.legal-toc a:hover { color: var(--text); text-decoration: underline; }

/* Sections */
.legal-section { margin: 0 0 30px; scroll-margin-top: 80px; }
.legal-section h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 3vw, 25px); color: var(--text); margin: 0 0 12px; }
.legal-section h3 { font-size: 16.5px; font-weight: 600; color: var(--text); margin: 18px 0 8px; }
.legal-section p { font-size: 15.5px; line-height: 1.78; color: #dad5ee; margin: 0 0 14px; }
.legal-section ul, .legal-section ol.list { margin: 0 0 14px; padding-left: 22px; }
.legal-section li { font-size: 15.5px; line-height: 1.72; color: #dad5ee; margin: 6px 0; }
.legal-section a { color: var(--violet-bright); text-decoration: underline; }
.legal-section strong { color: var(--text); font-weight: 600; }

/* Footer */
.legal-footer { border-top: 1px solid var(--border); }
.legal-footer-inner { width: min(780px, 100%); margin: 0 auto; padding: 26px 24px 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.legal-footer a { color: var(--muted); text-decoration: none; font-size: 13.5px; }
.legal-footer a:hover { color: var(--text); }
.legal-footer .legal-links a + a { margin-left: 14px; }
.legal-footer .mono { font-family: var(--font-mono); font-size: 12px; color: var(--faint); width: 100%; margin-top: 6px; }

@media (max-width: 640px) { .legal-toc ol { columns: 1; } }