/* ==========================================================================
   GNC SG — Legal pages (Terms of Use, Privacy Policy, Cookie Policy)
   ==========================================================================
   design/T&C.png and design/mobile/t&c/t&c.png. A plain document: heading over
   the short red rule, then body copy. No hero, no sidebar, no cards.

   The column is narrower than the page and centred in it, which is why the
   width is set here rather than by wrapping the page in .container--narrow —
   the breadcrumb above stays on the full container width, as drawn, and the
   front page (also a Basic Page) is left alone.
   ========================================================================== */

.legal-page {
  /* Matches .container--narrow's content width; measured x488-1438 in the
     1928px-wide design. */
  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-16);
}

/* The rule itself comes from .heading-accent (typography.css), which draws it
   60px wide by default; the designs use 64 here. */
.legal-page__title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-8);
}

.legal-page__title.heading-accent::after {
  width: 64px;
}

.legal-page__body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
}

/* ~25px between paragraphs in the design, against the tighter default. */
.legal-page__body p {
  margin-bottom: var(--space-6);
}

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

/* Legal copy is the one place on the site likely to carry nested lists and
   sub-headings, so they are given sensible spacing rather than left to the
   base styles. */
.legal-page__body h2 {
  font-size: var(--font-size-xl);
  margin: var(--space-10) 0 var(--space-4);
}

.legal-page__body h3 {
  font-size: var(--font-size-lg);
  margin: var(--space-8) 0 var(--space-3);
}

/* ==========================================================================
   Mobile (design/mobile/t&c/t&c.png, drawn at 375px)
   ==========================================================================
   The column stops being a column: the copy runs the full width of the page
   gutter, and the heading and its rule step down a size.
   ========================================================================== */

@media (max-width: 767px) {
  .legal-page {
    max-width: none;
    margin-bottom: var(--space-10);
  }

  .legal-page__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-6);
  }

  /* 48x3 here against the desktop's 64x2 — the same step the About and FAQ
     headings take. */
  .legal-page__title.heading-accent::after {
    width: 48px;
    height: 3px;
  }

  .legal-page__body p {
    margin-bottom: var(--space-5);
  }
}