/* ============================================================
   EduTrack — Legal Pages (content styles only)
   Shared header/footer come from the landing page (landing.css)
   Brand system: Navy #0B2E5C + Bright Blue #1E6FE0 (flat only)
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  font-family: "Cairo", "Tajawal", "Segoe UI", Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.9;
  color: var(--text, #475569);
  background: var(--bg, #F8FAFC);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible { outline: 3px solid rgba(30, 111, 224, 0.45); outline-offset: 2px; }

/* ---------- Main (clear fixed nav) ---------- */
.legal-main {
  padding: 8rem 0 4.5rem;
}

.legal-main .container {
  max-width: 920px;
}

.legal-article {
  background: var(--card, #FFFFFF);
  border: 1px solid var(--line, #E2E8F0);
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(11, 46, 92, 0.05), 0 8px 24px rgba(11, 46, 92, 0.06);
  overflow: hidden;
}

.legal-head {
  padding: 2.2rem 2.5rem 1.8rem;
  border-bottom: 1px solid var(--line, #E2E8F0);
  background: var(--bg, #F8FAFC);
}

.legal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--blue, #1E6FE0);
  font-size: 0.82rem;
  font-weight: 800;
  margin-bottom: 0.6rem;
}

.legal-head h1 {
  margin: 0 0 0.5rem;
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--ink, #0B2E5C);
  line-height: 1.4;
}

.legal-meta {
  margin: 0;
  color: var(--muted, #64748B);
  font-size: 0.85rem;
}

.legal-body {
  padding: 2.2rem 2.5rem 2.6rem;
}

.legal-body h2 {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--ink, #0B2E5C);
  margin: 2.2rem 0 0.7rem;
  padding-inline-start: 0.9rem;
  border-inline-start: 4px solid var(--blue, #1E6FE0);
  line-height: 1.5;
}

.legal-body h2:first-child { margin-top: 0; }

.legal-body p {
  margin: 0 0 1rem;
  color: var(--text, #475569);
}

.legal-body strong { color: var(--ink, #0B2E5C); }

.legal-body ul {
  margin: 0 0 1rem;
  padding-inline-start: 1.4rem;
}

.legal-body li {
  margin-bottom: 0.55rem;
}

.legal-body li::marker { color: var(--blue, #1E6FE0); }

.legal-body a {
  color: var(--blue, #1E6FE0);
  font-weight: 700;
  text-decoration: none;
}

.legal-body a:hover { text-decoration: underline; }

.legal-note {
  background: var(--blue-soft, #EAF2FD);
  border: 1px solid #D3E4FB;
  border-radius: 12px;
  padding: 1rem 1.2rem;
  font-size: 0.92rem;
  color: var(--navy, #0B2E5C);
  margin: 1.6rem 0 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
  .legal-main { padding-top: 7rem; }
  .legal-head, .legal-body { padding-inline: 1.4rem; }
  .legal-head h1 { font-size: 1.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001s !important;
  }
}