/* =============================================================================
   KYBER LEGAL TEMPLATE  -  legal/legal.css
   Self-contained: hardcodes kybers.ca design tokens so all legal pages look
   identical across all Kyber sites regardless of parent site theme variables.
   Load INSTEAD of site theme.css on legal pages.
   ============================================================================= */

/* ── Dark mode (default) ────────────────────────────────────────────────── */
:root,
html.dark {
  --bg-primary:   #060d1a;
  --bg-surface:   #0e1a32;
  --primary:      #3d6ef5;
  --primary-hover:#5b83f7;
  --text-primary: #f0f4ff;
  --text-dim:     #a8b8d8;
  --border:       rgba(255, 255, 255, 0.08);
  --font-ui:      'DM Sans', sans-serif;
  --text-body:    0.9375rem;
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --radius-xl:    28px;
}

/* ── Light mode ─────────────────────────────────────────────────────────── */
html.light {
  --bg-primary:   #ffffff;
  --bg-surface:   #f2f5fd;
  --primary:      #1a3fd4;
  --primary-hover:#1533b0;
  --text-primary: #0a1020;
  --text-dim:     #475778;
  --border:       rgba(0, 0, 0, 0.08);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-family: var(--font-ui);
  font-size:   clamp(14px, 1.1vw, 18px);
}

body {
  background-color: var(--bg-primary);
  color:            var(--text-primary);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* ── Navbar: taller to give logo room ───────────────────────────────────── */
.site-navbar { height: 80px !important; }

/* ── Content width: full on mobile, 75% on desktop ──────────────────────── */
.legal-content-wrap { width: 92%; }
@media (min-width: 768px) { .legal-content-wrap { width: 75%; max-width: 75%; } }

/* ── Sticky sidebar TOC ─────────────────────────────────────────────────── */
.legal-toc {
  position:       sticky;
  top:            5.5rem;
  max-height:     calc(100vh - 7rem);
  overflow-y:     auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.toc-title {
  font-size:      0.6875rem;
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-bottom:  0.875rem;
}

.toc-link {
  display:         block;
  font-size:       0.8125rem;
  color:           var(--text-dim);
  padding:         0.28rem 0.5rem 0.28rem 0.875rem;
  border-left:     2px solid transparent;
  text-decoration: none;
  line-height:     1.45;
  transition:      color 0.15s, border-color 0.15s;
}
.toc-link:hover {
  color:            var(--text-primary);
  border-left-color: var(--border);
}
.toc-link.active {
  color:            var(--primary);
  font-weight:      600;
  border-left-color: var(--primary);
}

/* ── Policy sections ────────────────────────────────────────────────────── */
.policy-section {
  scroll-margin-top: 5.5rem;
  padding: 1rem 0;
}
.policy-section h2 {
  font-size:    clamp(1.0625rem, 2vw, 1.3125rem);
  font-weight:  700;
  color:        var(--text-primary);
  padding-left: 1rem;
  border-left:  4px solid var(--primary);
  margin-bottom: 1.5rem;
  line-height:  1.3;
}
.policy-section h3 {
  font-size:     1rem;
  font-weight:   700;
  color:         var(--text-primary);
  margin-top:    1.75rem;
  margin-bottom: 0.625rem;
}
.policy-section p {
  font-size:     var(--text-body);
  line-height:   1.8;
  color:         var(--text-primary);
  margin-bottom: 1rem;
}
.policy-section ul,
.policy-section ol {
  margin:    0.5rem 0 1.25rem 1.75rem;
  color:     var(--text-primary);
  font-size: var(--text-body);
  line-height: 1.8;
}
.policy-section ul  { list-style-type: disc; }
.policy-section ol  { list-style-type: decimal; }
.policy-section li  { margin-bottom: 0.375rem; }
.policy-section strong { font-weight: 700; }
.policy-section a {
  color:               var(--primary);
  text-decoration:     underline;
  text-underline-offset: 2px;
}
.policy-section a:hover { color: var(--primary-hover); }

/* ── Contact/info block ─────────────────────────────────────────────────── */
.policy-contact-block {
  background:    var(--bg-surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       1.25rem 1.5rem;
  margin:        1.25rem 0;
  line-height:   1.8;
}
.policy-contact-block p { margin: 0; font-size: var(--text-body); }
.policy-contact-block a { color: var(--primary); text-decoration: underline; }

/* ── PDF download button (page header) ─────────────────────────────────── */
.pp-pdf-btn {
  border-color: var(--primary);
  color:        var(--primary);
  background:   transparent;
  transition:   background 0.2s, color 0.2s;
}
.pp-pdf-btn:hover,
.pp-pdf-btn:focus-visible {
  background: var(--primary);
  color:      var(--bg-primary);
}

/* ── Language toggle ────────────────────────────────────────────────────── */
.lang-switch {
  display:     inline-flex;
  align-items: center;
  gap:         0.375rem;
  font-size:   0.8125rem;
  margin-top:  0.5rem;
}
.lang-switch .lang-active {
  font-weight: 700;
  color:       var(--text-primary);
}
.lang-switch .lang-sep {
  color: var(--border);
}
.lang-switch .lang-link {
  color:           var(--text-dim);
  text-decoration: none;
  transition:      color 0.15s;
}
.lang-switch .lang-link:hover { color: var(--primary); }

/* ── PDF download button (sidebar, smaller) ─────────────────────────────── */
.pp-pdf-btn-sm {
  border-color: var(--border);
  color:        var(--text-dim);
  background:   transparent;
  transition:   border-color 0.2s, color 0.2s;
}
.pp-pdf-btn-sm:hover,
.pp-pdf-btn-sm:focus-visible {
  border-color: var(--primary);
  color:        var(--primary);
}