/**
* Page-scoped styles for privacy-policy.html and terms-of-service.html.
*
* This lived as an inline <style> block in both pages until the CSP was tightened to
* style-src 'self'. It is one file, not two, because the two blocks were byte-identical
* — keep it that way; a second copy is how the print pages drifted (see N-1).
*
* Loaded AFTER assets/css/style.css on both pages. The order matters: these rules
* override template defaults, and the var() tokens they use are defined in style.css.
*/

.legal-page {
  padding-top: 120px;
  padding-bottom: 80px;
  background: var(--light-bg);
}

.legal-container {
  max-width: 900px;
  margin: 0 auto;
  background: var(--white);
  padding: 60px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.legal-header {
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 3px solid var(--primary-color);
}

.legal-header h1 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  color: var(--text-dark);
  margin-bottom: 16px;
}

.legal-date {
  color: var(--text-light);
  font-size: 0.875rem;
  font-style: italic;
}

.legal-content h2 {
  font-size: 1.5rem;
  color: var(--text-dark);
  margin-top: 40px;
  margin-bottom: 20px;
  padding-top: 20px;
}

.legal-content h3 {
  font-size: 1.25rem;
  color: var(--text-dark);
  margin-top: 30px;
  margin-bottom: 15px;
}

.legal-content p {
  color: var(--text-light);
  line-height: 1.8;
  margin-bottom: 20px;
}

.legal-content ul, .legal-content ol {
  margin-bottom: 20px;
  padding-left: 30px;
}

.legal-content li {
  color: var(--text-light);
  line-height: 1.8;
  margin-bottom: 10px;
}

.legal-content strong {
  color: var(--text-dark);
  font-weight: 600;
}

.contact-box {
  background: var(--light-bg);
  padding: 30px;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--primary-color);
  margin: 30px 0;
}

.contact-box h3 {
  margin-top: 0;
  font-size: 1.125rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  margin-bottom: 30px;
  transition: var(--transition-normal);
}

.back-link:hover {
  color: var(--secondary-color);
  transform: translateX(-4px);
}

@media (max-width: 768px) {
  .legal-container {
    padding: 30px 20px;
  }

  .legal-page {
    padding-top: 100px;
  }
}