/* ============================================================
   Legal pages — shared styles for .legal-page and its BEM elements.
   Used by terms.html today, and intended to be reused as-is by
   privacy-policy.html and returns-policy.html once those exist —
   the three legal pages share near-identical rules, which is why
   this is a real external stylesheet rather than the per-page
   inline <style> block every other page on the site uses.
============================================================ */

/* nav.css expects --nav-height, --nav-padding-x and --page-padding to
   be declared per-page (see nav.css's own header comment) — every
   other page sets these in its own inline :root block. legal.css is
   that page's only stylesheet, so they're declared here instead,
   matching faq.html's values exactly. --nav-height is needed for
   .legal-page__hero's padding-top to clear the fixed header;
   --nav-padding-x is read by .site-nav (css/nav.css) for the header's
   own left/right inset — without it the nav content hugs the browser
   edges instead of sitting inset like every other page's header;
   --page-padding is the horizontal padding used below (matching
   About's curve — ~24px floor, fluid up to 110px — not tokens.css's
   separate --page-padding-product, and not FAQ's own --page-padding
   curve, which is a different clamp). */
:root {
  --nav-height: 64px;
  --nav-padding-x: 48px;
  --page-padding: clamp(1.5rem, -0.29rem + 7.96vw, 6.875rem);
}

/* faq.html paints its cream background on <body> (css/faq's inline
   style, body { background-color: var(--color-cream) }), but nav.css
   and footer.css already paint their own backgrounds over the header
   and footer regardless of body's color — so scoping the same cream
   to .legal-page (the <main> wrapper that holds everything between
   nav and footer) produces the identical visible result without
   reaching outside this page's own root element. */
.legal-page {
  background-color: var(--color-cream);
}

.legal-page__body {
  display: grid;
  width: 100%;
  max-width: calc(840px + var(--page-padding) + var(--page-padding));
  margin: 0 auto;
  padding-block: var(--space-6); /* 32px — same floor as the previous clamp */
  padding-inline: var(--page-padding);
}

/* Desktop target from the spacing spec: 64px top / 72px bottom, using
   existing tokens rather than a new clamp curve. Breakpoint matches
   the mobile cutoff already used below for .legal-page__body p's
   font-size step. */
@media (min-width: 769px) {
  .legal-page__body {
    padding-top: var(--space-8); /* 64px */
    padding-bottom: var(--space-9); /* 72px */
  }
}

/* Vertical rhythm: reset browser/UA margins so spacing is deliberate,
   not incidental (reset.css already zeroes all margins globally —
   these are the only two relationships that get a margin back).
   8px between paragraphs that belong together; a paragraph directly
   following a contact block gets the same 8px so the block doesn't
   sit flush against the text before/after it. */
.legal-page__body p {
  margin: 0;
}

.legal-page__body p + p,
.legal-page__body p + .legal-page__contact,
.legal-page__body .legal-page__contact + p {
  margin-top: var(--space-2); /* 8px */
}

/* H2s belong to the content beneath them, not the section above:
   24px separates a new section from the previous one, 8px keeps the
   heading close to its own first paragraph. */
.legal-page__heading {
  margin-top: var(--space-6); /* 24px */
  margin-bottom: var(--space-2); /* 8px */
}

/* Hero now matches FAQ's black full-bleed band exactly — same
   structure (.legal-page__hero > .legal-page__hero-inner > h1), same
   padding-top/black background/border-bottom treatment, same inner
   padding curve, same --page-padding token. */
.legal-page__hero {
  padding-top: var(--nav-height);
  background-color: var(--color-black);
  padding-bottom: 0;
}

.legal-page__hero-inner {
  padding: clamp(48px, 7vw, 96px) var(--page-padding) clamp(40px, 5vw, 72px);
  border-bottom: 1px solid rgba(246, 238, 233, 0.08);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.legal-page__title {
  font-family: var(--font-body);
  font-size: clamp(2.5rem, 2.0833rem + 1.852vw, 3.75rem);
  font-weight: var(--weight-light);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--text-color-inverse);
}

/* Breakpoint matches index.html's .philosophy-body mobile override
   (@media max-width: 768px, font-size only) — the same precedent
   404.html's .error-body already cites and copies. */
.legal-page__body p,
.legal-page__body li {
  font-size: var(--text-body);
}

@media (max-width: 768px) {
  .legal-page__body p,
  .legal-page__body li {
    font-size: var(--text-body-mobile);
  }
}

.legal-page__updated {
  color: var(--text-color-secondary);
  margin-bottom: var(--space-4);
}

.legal-page__updated strong {
  font-weight: var(--weight-medium);
  color: var(--text-color-primary);
}

.legal-page__contact {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  margin: var(--space-3) 0;
  font-size: var(--text-body);
}

@media (max-width: 768px) {
  .legal-page__contact {
    font-size: var(--text-body-mobile);
  }
}

.legal-page__contact dt,
.legal-page__contact dd {
  margin: 0;
}

.legal-page__contact dt {
  font-weight: var(--weight-medium);
  color: var(--text-color-primary);
}

.legal-page__contact dd {
  color: var(--text-color-secondary);
  min-width: 0;
}

.legal-page__contact a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
}

.legal-page__contact a:hover {
  color: var(--text-color-accent);
}

@media (max-width: 600px) {
  .legal-page__contact {
    grid-template-columns: 1fr;
    row-gap: var(--space-1);
  }

  .legal-page__contact dd + dt {
    margin-top: var(--space-2);
  }
}

/* H3 — subsections within a legal H2 (e.g. Privacy's "Information We
   Collect" breaking into Contact/Waitlist/Order/Payment/etc.). No h3
   style existed anywhere in the codebase before this. Deliberately
   subordinate to .legal-page__heading: no font-size/weight override
   (same minimal approach h2 already takes — both just inherit the
   browser's UA heading defaults, which already render h3 smaller than
   h2), only the margin reset.css strips needs restoring. Margin-top
   collapses with whatever precedes it (paragraph or list) the same
   way h2's margin-top already does; margin-bottom collapses with the
   subsection's own first paragraph the same way. */
.legal-page__subheading {
  margin-top: var(--space-4); /* 16px */
  margin-bottom: var(--space-2); /* 8px */
}

/* Lists — reset.css's `ul { list-style: none }` and universal
   margin/padding reset strip both markers and indent by default.
   Restored here, scoped to legal body copy only. */
.legal-page__body ul {
  list-style: disc;
  padding-left: 1.25rem;
}

.legal-page__body li {
  margin: 0;
}

.legal-page__body li + li {
  margin-top: var(--space-1); /* 4px, tighter than paragraph spacing since list items are more tightly related */
}

.legal-page__body p + ul,
.legal-page__body ul + p {
  margin-top: var(--space-2); /* 8px, same rhythm as paragraph-to-paragraph */
}