/* ================================================================
   LEGAL PAGES - Privacy Policy & Terms & Conditions
   Consistent with Artist Diary website theme
================================================================ */

.legal-main {
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: 80px;
  min-height: 100vh;
  background: var(--bg);
}

.legal-container {
  max-width: 800px;
}

.legal-container h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.legal-updated {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.legal-container h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
  margin-top: 36px;
  margin-bottom: 12px;
  padding-top: 8px;
}

.legal-container p {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.75;
  margin-bottom: 14px;
  text-wrap: pretty;
}

.legal-container ul {
  margin-bottom: 16px;
  padding-left: 0;
}

.legal-container li {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.75;
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}

.legal-container li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--navy);
  opacity: 0.3;
}

.legal-container li strong {
  color: var(--text-dark);
}

.legal-container a {
  color: var(--navy);
  font-weight: 600;
  transition: color 0.2s ease;
}

.legal-container a:hover {
  color: var(--saffron);
  text-decoration: underline;
}

.legal-container .ad-btn-primary,
.legal-container .ad-btn-primary:hover {
  background: #2F58FF;
  border-color: #2F58FF;
  color: #fff;
  text-decoration: none;
}

/* Highlight box */
.legal-highlight {
  background: var(--saffron-light);
  border: 1px solid rgba(255, 153, 51, 0.15);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin: 28px 0;
}

.legal-highlight h2 {
  color: var(--navy);
  margin-top: 0;
  padding-top: 0;
  font-size: 18px;
}

.legal-highlight p {
  margin-bottom: 0;
}

/* Disclaimer box */
.legal-disclaimer {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin: 28px 0;
}

.legal-disclaimer h2 {
  color: var(--text-dark);
  margin-top: 0;
  padding-top: 0;
  font-size: 18px;
}

/* Responsive */
@media (max-width: 768px) {
  .legal-main {
    padding-top: calc(var(--nav-h) + 24px);
    padding-bottom: 56px;
  }

  .legal-container h1 {
    font-size: 26px;
  }

  .legal-container h2 {
    font-size: 18px;
    margin-top: 28px;
  }

  .legal-highlight,
  .legal-disclaimer {
    padding: 20px;
  }
}

/* ── Back button ──
   First thing inside the article column, so it sits over the same left
   edge as the heading below it. Goes back in history when there is
   somewhere to go back to and to the homepage otherwise - see the inline
   handler; a bare history.back() does nothing on a page opened directly
   from a search result or a new tab.
   Indigo on the page's own ground, matching the Ajrakh chrome above and
   below it rather than the old-system body these pages still use. */
.legal-back {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 24px;
  padding: 9px 16px 9px 13px;
  border-radius: var(--radius-full);
  background: var(--resist);
  border: 1px solid var(--cloth-border);
  color: var(--iron);
  font-family: var(--font); font-size: 14px; font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.legal-back:hover { border-color: var(--neel); color: var(--neel); transform: translateX(-2px); }
.legal-back:focus-visible { outline: 2px solid var(--madder); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .legal-back:hover { transform: none; }
}