/* Shared page content styles for legal pages, blog posts, tutorials, and previews */
.page-content {
  line-height: 1.7;
  color: #333;
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
  color: #198754;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.page-content h1:first-child,
.page-content h2:first-child,
.page-content h3:first-child { margin-top: 0; }

.page-content p { margin-bottom: 1rem; text-align: justify; }

.page-content ul,
.page-content ol { margin-bottom: 1rem; padding-left: 2rem; }
.page-content li { margin-bottom: 0.5rem; }

.page-content strong { font-weight: 600; color: #495057; }

.page-content a { color: #ffc107; text-decoration: none; }
.page-content a:hover { color: #198754; text-decoration: underline; }

.page-content blockquote {
  border-left: 4px solid #ffc107;
  padding-left: 1rem;
  margin: 1.5rem 0;
  font-style: italic;
  background: #f8f9fa;
  padding: 1rem;
}

.page-content table { width: 100%; margin: 1.5rem 0; border-collapse: collapse; }
.page-content table th,
.page-content table td { padding: 0.75rem; border: 1px solid #dee2e6; text-align: left; }
.page-content table th { background-color: #f8f9fa; font-weight: 600; color: #495057; }

/* Ensure images/videos inside page content are not constrained by parent card styles */
.page-content img,
.page-content video {
  max-width: 100% !important;
  width: auto;
  height: auto;
  display: block;
  margin: 1rem 0;
}

/* Center images when Quill emits ql-align-center on the wrapper */
.page-content .ql-align-center img,
.page-content p.ql-align-center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .page-content { font-size: 0.9rem; }
  .page-content h1 { font-size: 1.5rem; }
  .page-content h2 { font-size: 1.3rem; }
  .page-content h3 { font-size: 1.1rem; }
}