/* ============================================================
   LEGAL PAGES — Happy Blue Lessons
   ============================================================ */

.hbl-legal-page {
  background: var(--hbl-blue-50);
  padding-bottom: var(--hbl-space-3xl);
}

/* Hero Section */
.hbl-legal-hero {
  background: linear-gradient(135deg, var(--hbl-blue-900) 0%, var(--hbl-blue-800) 100%);
  padding: var(--hbl-space-3xl) 0 var(--hbl-space-2xl);
  position: relative;
  overflow: hidden;
  color: var(--hbl-white);
  text-align: center;
}

.hbl-legal-hero__grid-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

.hbl-legal-hero__title {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--hbl-white);
  margin: 0 0 var(--hbl-space-xs);
  letter-spacing: -0.02em;
}

.hbl-legal-hero__meta {
  color: var(--hbl-blue-200);
  font-size: 0.9375rem;
  margin: 0;
  font-weight: 500;
}

/* Content Card */
.hbl-legal-content {
  margin-top: calc(-1 * var(--hbl-space-2xl));
  position: relative;
  z-index: 20;
}

.hbl-legal-card {
  background: var(--hbl-white);
  border: 1px solid var(--hbl-gray-200);
  border-radius: var(--hbl-radius-xl);
  padding: var(--hbl-space-xl) var(--hbl-space-lg);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
}

@media (min-width: 768px) {
  .hbl-legal-card {
    padding: var(--hbl-space-3xl) var(--hbl-space-2xl);
  }
}

/* Content Styling (supports default WP + Complianz wrappers) */
.hbl-legal-body,
#cmplz-document {
  color: var(--hbl-gray-800);
  font-size: 1rem;
  line-height: 1.7;
}

.hbl-legal-body h2,
#cmplz-document h2 {
  color: var(--hbl-blue-900);
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: var(--hbl-space-xl);
  margin-bottom: var(--hbl-space-md);
  border-bottom: 2px solid var(--hbl-gray-100);
  padding-bottom: var(--hbl-space-xs);
}

.hbl-legal-body h3,
#cmplz-document h3 {
  color: var(--hbl-blue-900);
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: var(--hbl-space-lg);
  margin-bottom: var(--hbl-space-xs);
}

.hbl-legal-body p,
#cmplz-document p {
  margin-bottom: var(--hbl-space-md);
}

.hbl-legal-body ul,
#cmplz-document ul {
  list-style-type: disc;
  margin-left: var(--hbl-space-xl);
  margin-bottom: var(--hbl-space-md);
}

.hbl-legal-body li,
#cmplz-document li {
  margin-bottom: var(--hbl-space-xs);
}

.hbl-legal-body a,
#cmplz-document a {
  color: var(--hbl-blue-500);
  text-decoration: underline;
  font-weight: 600;
  transition: color var(--hbl-transition-fast);
}

.hbl-legal-body a:hover,
#cmplz-document a:hover {
  color: var(--hbl-blue-800);
}

.cmplz-subtitle {
  font-weight: 700;
  color: var(--hbl-blue-900);
  margin-top: var(--hbl-space-md);
  font-size: 1.1rem;
}