/* ============================================================================
   LEGAL / PRIVACY STYLES  —  Mind & Body Collective
   ----------------------------------------------------------------------------
   Styling for the Privacy Policy pop-up opened from the footer link.

   Load order:  css/main.css must load BEFORE this file — the rules below reuse
   the brand tokens (var(--accent), var(--card), var(--border)…) defined there.

   Two parts:
     1. .legal-modal / .legal-box  — the full-screen overlay + scrollable panel
        (bigger and scrollable for a long document).
     2. .legal-content ...         — typography for the markdown that js/legal.js
        renders from content/privacy.md (h1–h3, p, ul/li, tables, hr, links).
   ============================================================================ */


/* ============================================================
   1. MODAL SHELL
   ------------------------------------------------------------
   Fixed overlay; the inner box is capped at 85vh and its content area scrolls,
   so a long policy never runs off-screen. z-index sits above the mock modals.
   ============================================================ */
.legal-modal {
  display: none; position: fixed; inset: 0; z-index: 3000;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(0,0,0,.7); backdrop-filter: blur(4px);
}
.legal-modal.open { display: flex; }

.legal-box {
  position: relative;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  max-width: 760px; width: 100%; max-height: 85vh; overflow: hidden;
  box-shadow: var(--shadow);
}

.legal-close {
  position: absolute; top: 12px; right: 16px; z-index: 1;
  background: transparent; border: 0; color: var(--muted);
  font-size: 1.9rem; line-height: 1; cursor: pointer; transition: color .2s;
}
.legal-close:hover { color: var(--accent); }

/* The scrollable content area. Padding-right on the h1 keeps text clear of the ×. */
.legal-content {
  padding: 40px; overflow-y: auto; max-height: 85vh;
}


/* ============================================================
   2. RENDERED-MARKDOWN TYPOGRAPHY
   ------------------------------------------------------------
   Applied to the HTML js/legal.js builds from content/privacy.md.
   ============================================================ */
.legal-content h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 6px; padding-right: 32px; }
.legal-content h2 { font-size: 1.15rem; margin: 28px 0 10px; color: var(--text); }
.legal-content h3 { font-size: 1rem; margin: 20px 0 8px; color: var(--text); }

.legal-content p  { color: var(--muted); font-size: .95rem; line-height: 1.7; margin: 0 0 12px; }
.legal-content ul { margin: 0 0 14px; padding-left: 22px; }
.legal-content li { color: var(--muted); font-size: .95rem; line-height: 1.6; margin-bottom: 6px; }

.legal-content strong { color: var(--text); }
.legal-content a      { color: var(--accent); }
.legal-content a:hover { opacity: .8; }
.legal-content code   { color: var(--accent-2); font-size: .85rem; }

.legal-content hr {
  border: 0; border-top: 1px solid var(--border); margin: 22px 0;
}

/* GFM pipe tables (e.g. the "legal basis" / "retention" tables). */
.legal-content table {
  width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: .88rem;
}
.legal-content th, .legal-content td {
  border: 1px solid var(--border); padding: 8px 10px;
  text-align: left; vertical-align: top; color: var(--muted);
}
.legal-content th { color: var(--text); background: var(--bg-alt); font-weight: 700; }


/* ============================================================
   3. RESPONSIVE
   ============================================================ */
@media (max-width: 560px) {
  .legal-content { padding: 28px 20px; }
  .legal-content h1 { font-size: 1.35rem; }
  .legal-content table { font-size: .8rem; }
  .legal-content th, .legal-content td { padding: 6px 8px; }
}