/* Page: Legal policy pages (Refund/Privacy/Delivery/Cancellation) — UX
   addition, no Figma reference. Content supplied verbatim by the client
   (Google Docs), just laid out with the site's existing typography tokens. */
.legal-page {
  width: 100%;
  margin-top: var(--header-height);
  padding-block: 80px;
  background: var(--dark);
}

.legal-page__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 800px;
}

.legal-page__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--white);
}

.legal-page__updated {
  color: var(--fog-white);
}

.legal-page__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  color: var(--white);
}

.legal-page__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Two selectors because the five policies reach this template by two routes.
   Refund and Cancellation render template-parts/legal/<slug>.php and wrap each
   section in .legal-page__section. Privacy, Terms and Delivery are editor
   content whose own markup emits bare <h2>, so without the second selector
   they fell back to the serif display font and read as a different page.
   Luis flagged the mismatch in his 2026-08-04 review. */
.legal-page__section h2,
.legal-page__editor h2 {
  font-family: var(--font-gotham);
  font-weight: var(--text-heading-h3-weight);
  font-size: var(--text-heading-h3-size);
  line-height: var(--text-heading-h3-line);
  color: var(--gold);
}

.legal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: disc;
  padding-left: 20px;
}

.legal-page__content a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}