/* ============================================================
   MacWish Medical Centre — Legal & support document pages
   (/privacy, /terms, /support)

   These three URLs are declared to Apple App Store Connect and the
   Google Play Data safety form (Privacy Policy, Account Deletion and
   Support URLs), and are linked from the mobile app's Settings screen.
   They must resolve publicly, without a login wall, on the hospital
   domain. Keep the paths stable.

   Brand tokens come from css/styles.css — this file only adds the
   long-form document typography.
   ============================================================ */

.legal-header {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 50;
}

.legal-header .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.legal-header .brand img { width: 40px; height: 40px; }

.legal-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  font-weight: 600;
}

.legal-nav a { color: var(--text-2); text-decoration: none; transition: color .2s var(--ease); }
.legal-nav a:hover,
.legal-nav a[aria-current="page"] { color: var(--primary); }
.legal-nav a[aria-current="page"] { font-weight: 700; }

.legal-main { background: var(--bg); padding: 44px 0 72px; }

.legal-doc {
  max-width: 820px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 48px 52px 56px;
}

.legal-doc h1 {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--secondary);
  letter-spacing: -0.02em;
}

/* The two lines directly after the h1 are the effective date and publisher. */
.legal-doc h1 + p,
.legal-doc h1 + p + p {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  margin: 6px 0 0;
}

.legal-doc h1 + p { margin-top: 12px; }
.legal-doc h1 + p + p { padding-bottom: 22px; border-bottom: 1px solid var(--line); }

.legal-doc h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--secondary);
  margin: 38px 0 12px;
  letter-spacing: -0.01em;
}

.legal-doc h3,
.legal-doc h3.sec-h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  margin: 24px 0 8px;
}

.legal-doc p {
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 14px;
}

.legal-doc ul.bullets { margin: 6px 0 16px 22px; }

.legal-doc ul.bullets li {
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 8px;
}

.legal-doc ul.bullets ul.bullets { margin-top: 8px; }

.legal-doc strong { font-weight: 700; color: var(--text); }
.legal-doc em { font-style: italic; }

.legal-doc a,
.legal-doc a.link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-doc a:hover { color: var(--secondary); }

.legal-doc code {
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 13.5px;
}

.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 20px;
  font-size: 14.5px;
}

.legal-doc th,
.legal-doc td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  font-weight: 500;
  line-height: 1.55;
  vertical-align: top;
}

.legal-doc th { background: var(--bg); font-weight: 700; color: var(--secondary); }

/* Callout used for the account-deletion steps on /support, which the
   Play Data safety form points at. */
.legal-callout {
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 20px 24px 8px;
  margin: 16px 0 20px;
}

.legal-callout h3 { margin-top: 0; }

/* Cross-links to the sibling documents, appended to every page. */
.legal-seealso {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.legal-seealso p { font-size: 14.5px; font-weight: 500; color: var(--text-2); margin-bottom: 8px; }

@media (max-width: 720px) {
  .legal-main { padding: 24px 0 48px; }
  .legal-doc { padding: 30px 22px 38px; border-radius: var(--radius-md); }
  .legal-doc h1 { font-size: 27px; }
  .legal-doc h2 { font-size: 18px; }
  .legal-doc p, .legal-doc ul.bullets li { font-size: 15px; }
  .legal-callout { padding: 16px 18px 6px; }
  .legal-nav { gap: 14px; font-size: 13px; }
  .legal-header .brand .brand-text { display: none; }
}