/* Legal-pages CSS — supplement to _base.css */

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.95rem;
}
.legal-table th,
.legal-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.legal-table th {
  background: var(--surface);
  color: var(--accent-3);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.legal-table td:first-child { font-weight: 500; color: var(--text); }

/* Cookie / consent banner */
.consent-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  max-width: 720px;
  margin: 0 auto;
  background: rgba(20, 18, 16, 0.98);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--text);
  backdrop-filter: none;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease;
}
.consent-banner.hidden { opacity: 0; pointer-events: none; transform: translateY(20px); }
.consent-banner p { margin: 0; }
.consent-banner a { color: var(--accent-3); }
.consent-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.consent-actions button {
  background: var(--accent);
  color: #0c0a09;
  border: none;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
}
.consent-actions button.secondary {
  background: transparent;
  color: var(--text-soft);
  border: 1px solid var(--border-strong);
}
.consent-actions button:hover { background: var(--accent-2); }
.consent-actions button.secondary:hover { color: var(--text); border-color: var(--accent); }

@media (max-width: 600px) {
  .consent-banner { left: 12px; right: 12px; bottom: 12px; padding: 16px; }
  .legal-table { font-size: 0.85rem; }
  .legal-table th, .legal-table td { padding: 8px 10px; }
}

/* No-JS fallback: banner shows until dismissed via cookie — but we don't use cookies,
   so the banner is hidden by default if JS works, OR user can dismiss via the button
   which only sets localStorage flag. Without JS, banner stays visible permanently;
   this is the most privacy-respecting fallback. */
.no-js .consent-banner { display: none; }
.no-js-banner {
  display: none;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 0.9rem;
  color: var(--text);
}
.no-js .no-js-banner { display: block; }

/* Legal sections */
.legal-section {
  margin: 2em 0;
  padding: 1.5em 0;
  border-top: 1px solid var(--border);
}
.legal-section:first-of-type { border-top: 0; padding-top: 0; }

.legal-section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  color: var(--accent-3);
  margin-bottom: 0.8em;
  text-align: left;
}
.legal-section h3 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 1.2em 0 0.4em;
  letter-spacing: 0;
}

.legal-section ul, .legal-section ol {
  padding-left: 1.5em;
  color: var(--text-soft);
}
.legal-section li { margin: 0.4em 0; }

.legal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px;
  margin: 1.5em 0;
}
.legal-card strong { color: var(--accent-3); }