/* ============================================================
   LEGAL.CSS  |  Privacy Policy & Terms & Conditions
   MWeb Design V2  —  single shared stylesheet for all legal pages
   Replaces both privacy-policy.css and terms.css (they were identical)
   ============================================================ */

/* ── Page Header ─────────────────────────────────────────── */
.legal-header {
  background: var(--clr-ink);
  padding: calc(var(--navbar-h) + clamp(52px,7vw,88px)) var(--container-px) clamp(48px,6vw,76px);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.legal-header::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 600px; height: 240px;
  background: radial-gradient(ellipse, rgba(26,58,143,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.legal-header__inner { position: relative; z-index: 1; }

.legal-header__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--clr-accent-glow); margin-bottom: var(--sp-4);
}
.legal-header__eyebrow::before {
  content: ''; width: 20px; height: 1px; background: var(--clr-accent-glow);
}
.legal-header__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: var(--fw-bold);
  color: var(--clr-white);
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-4);
}
.legal-header__title em { font-style: italic; color: var(--clr-accent-glow); }
.legal-header__meta {
  font-size: var(--fs-xs); color: rgba(255,255,255,0.28);
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
}
.legal-header__meta a { color: rgba(255,255,255,0.28); text-decoration: none; }
.legal-header__meta a:hover { color: var(--clr-accent-glow); }
.legal-header__meta-sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,0.2); flex-shrink: 0;
}

/* ── Body Layout ─────────────────────────────────────────── */
.legal-body {
  background: var(--clr-white);
  padding: var(--sp-16) 0 var(--sp-24);
}
.legal-body__inner {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--sp-14);
  align-items: start;
}

/* ── TOC Sidebar (right column) ──────────────────────────── */
.legal-toc {
  position: sticky;
  top: calc(var(--navbar-h-scrolled) + var(--sp-6));
  order: 2;
}
.legal-toc__title {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--clr-warm-600); letter-spacing: var(--ls-wider);
  text-transform: uppercase; margin-bottom: var(--sp-4);
}
.legal-toc__list {
  display: flex; flex-direction: column; gap: 2px;
  border-left: 1.5px solid var(--clr-warm-200);
  padding-left: var(--sp-4);
}
.legal-toc__link {
  font-size: var(--fs-xs); color: var(--clr-warm-400);
  text-decoration: none; padding: var(--sp-2) 0;
  transition: color var(--t-base), padding-left var(--t-base);
  display: block; line-height: 1.5;
}
.legal-toc__link:hover { color: var(--clr-black); padding-left: var(--sp-2); }
.legal-toc__link.is-active {
  color: var(--clr-black);
  font-weight: var(--fw-medium);
  border-left: 2px solid var(--clr-black);
  /* Fixed invalid -calc() — correct form: */
  margin-left: calc(-1 * (var(--sp-4) + 1.5px));
  padding-left: calc(var(--sp-4) - 2px);
}

/* ── Content Area (left column) ──────────────────────────── */
.legal-content { max-width: 760px; order: 1; }
.legal-section {
  margin-bottom: var(--sp-14);
  scroll-margin-top: calc(var(--navbar-h-scrolled) + var(--sp-8));
}
.legal-section__num {
  font-size: var(--fs-xs); color: var(--clr-accent-glow);
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  font-weight: var(--fw-medium); margin-bottom: var(--sp-3);
  display: block;
}
.legal-section__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl); font-weight: var(--fw-semibold);
  color: var(--clr-black); letter-spacing: var(--ls-snug);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--clr-warm-200);
}
.legal-section p {
  font-size: var(--fs-sm); color: var(--clr-warm-600);
  line-height: var(--lh-relaxed); margin-bottom: var(--sp-4);
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul {
  padding-left: var(--sp-6); margin-bottom: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.legal-section li {
  font-size: var(--fs-sm); color: var(--clr-warm-600);
  line-height: var(--lh-relaxed);
}
.legal-section strong { color: var(--clr-black); font-weight: var(--fw-medium); }
.legal-section a { color: var(--clr-accent-glow); text-decoration: underline; text-underline-offset: 3px; }
.legal-section a:hover { color: var(--clr-accent); }

/* ── Highlight / Note Box ────────────────────────────────── */
.legal-highlight {
  background: var(--clr-warm-50);
  border: 1px solid var(--clr-warm-200);
  border-left: 3px solid var(--clr-accent-glow);
  border-radius: var(--radius-md);
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-5) 0;
  font-size: var(--fs-sm); color: var(--clr-warm-600);
  line-height: var(--lh-relaxed);
}
.legal-highlight strong { color: var(--clr-accent); }
.legal-highlight a { color: var(--clr-accent-glow); }

/* ── Contact Card ────────────────────────────────────────── */
.legal-contact-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); flex-wrap: wrap;
  background: var(--clr-ink); border-radius: var(--radius-md);
  padding: var(--sp-6) var(--sp-8); margin-top: var(--sp-6);
}
.legal-contact-card h3 {
  font-family: var(--font-display); font-size: var(--fs-xl);
  color: var(--clr-white); margin-bottom: var(--sp-2);
}
.legal-contact-card p {
  font-size: var(--fs-sm); color: rgba(255,255,255,0.5); margin: 0;
}
.legal-contact-card__btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--clr-accent); color: var(--clr-white) !important;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  padding: var(--sp-3) var(--sp-6); border-radius: var(--radius-sm);
  text-decoration: none !important; white-space: nowrap;
  transition: background var(--t-base);
}
.legal-contact-card__btn:hover { background: var(--clr-accent-glow); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .legal-body__inner { grid-template-columns: 1fr; }
  .legal-toc { display: none; }
  .legal-content { max-width: 100%; order: 1; }
}
@media (max-width: 640px) {
  .legal-contact-card { flex-direction: column; align-items: flex-start; }
}