/* ===== Legal pages (Terms of Service / Privacy Policy) ===== */
/* Deliberately minimal — Linear-style: black background, no decoration,
   no video/particles/CTA bands. Shares style.css's nav/footer components;
   only the page-specific content column lives here. */

.legal-nav-section {
  background: var(--black);
}

.legal-nav-section #nav {
  padding: var(--space-2) var(--space-5);
}

/* PHONE PADDING. The rule above out-specifies the main nav's own phone steps in
   style-aqua.css (#nav alone), so without these this page kept 64px side padding at
   every width and scrolled sideways on phones: 43px at 320, 3px at 360 on /nl/. */
@media (max-width: 640px) {
  .legal-nav-section #nav {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

@media (max-width: 380px) {
  .legal-nav-section #nav {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
}

.legal-page-section {
  background: var(--black);
  padding: 110px var(--space-3) 120px;
}

.legal-content {
  max-width: 740px;
  margin: 0 auto;
}

.legal-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.legal-updated {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 10px;
  margin-bottom: 56px;
}

.legal-section {
  margin-bottom: 52px;
}

.legal-section:last-child {
  margin-bottom: 0;
}

.legal-section-title {
  font-family: 'Inter', sans-serif;
  font-size: 21px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 14px;
}

.legal-section p {
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}

.legal-section p + p {
  margin-top: 14px;
}

@media (max-width: 767px) {
  .legal-page-section {
    padding: 90px var(--space-3) 90px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * WordPress adaptations — NOT part of the design source.
 *
 * These were written for the v1 port and lost when this file was recopied from
 * Voxion-zain-v3 on 2026-09-23. They correct places where WordPress emits
 * different markup from the static source. Re-copying the source file again
 * will drop them again: keep this section, or re-apply from git history.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── .legal-section--editor ──────────────────────────────────────────────────
 * template-legal.php wraps the_content() in ONE .legal-section so Legal can edit
 * the policy in wp-admin instead of hand-writing the source's nine sibling
 * <div class="legal-section"> blocks. The editor emits BARE <h2> and <p>, which
 * .legal-section-title (:49) cannot match — the template's docblock names these
 * two rules as required and they were never written, so every heading inside an
 * edited policy rendered at the browser default instead of the design's.
 *
 * These mirror .legal-section-title and .legal-section p exactly rather than
 * restating values, so the two cannot drift: change one, change the other.
 */
.legal-section--editor > h2 {
  font-family: 'Inter', sans-serif;
  font-size: 21px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 14px;
}

/* The source separates sections with margin on .legal-section; a single editor
 * block has no siblings, so the spacing has to come from the headings after the
 * first. :not(:first-child) rather than a blanket margin-top, which would push
 * the whole block down and break alignment with the sidebar nav. */
.legal-section--editor > h2:not(:first-child) {
  margin-top: 52px;
}

/* The written policies (reference/apply-legal-pages.php, apply-cookie-policy.php)
 * also use lists, links and bold lead-ins, which nothing styled: the global reset
 * stripped the bullets and links rendered in the browser's default blue on navy.
 * Text values mirror .legal-section p above. */
.legal-section--editor > ul {
  margin-top: 14px;
  padding-left: 1.3em;
  list-style: disc;
}
.legal-section--editor > ul li {
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}
.legal-section--editor > ul li + li {
  margin-top: 8px;
}
.legal-section--editor > ul li::marker {
  color: rgba(255, 255, 255, 0.45);
}
.legal-section--editor > ul + p,
.legal-section--editor > p + ul {
  margin-top: 14px;
}
.legal-section--editor strong {
  color: #ffffff;
  font-weight: 600;
}
.legal-section--editor a {
  /* A link whose text is a URL (policies.google.com/technologies/partner-sites) is one
     unbreakable word: 312px, wider than a 320px phone's column. */
  overflow-wrap: anywhere;
  color: var(--accent-amber, #AAD0E2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-section--editor a:hover {
  color: #ffffff;
}