/* Long-form legal document pages (privacy policy). Rides on style.css for the brand
   tokens, header and footer; this file only styles the document body.

   Yummy Fish is a light brand — cream paper, navy ink, gold accent — so this is the
   light-theme counterpart of the same house layout used on the other TFC sites. */

.legal-head {
  padding: calc(var(--header-h) + 52px) 0 44px;
  background: var(--navy);
}
/* Keep the heading block and the document text on one left edge, narrower than the
   marketing shell: long-form prose is unreadable at the full 1180px measure. */
.legal-head .shell,
.legal-body .shell { max-width: 820px; }
.legal-head .eyebrow { color: var(--gold); }
.legal-head h1 {
  margin: 10px 0 14px;
  color: var(--cream);
  font-family: var(--display);
  font-size: clamp(2.5rem, 7vw, 4.2rem);
  line-height: .92;
  text-transform: uppercase;
}
.legal-head h1 .gold { color: var(--gold); }
.legal-head p { max-width: 620px; color: #b9ccd9; font-size: .9rem; line-height: 1.8; }
.legal-updated {
  display: inline-block;
  margin-top: 20px;
  padding: 8px 16px;
  border: 1px solid rgba(248, 176, 16, .45);
  border-radius: 999px;
  color: var(--gold);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.legal-body { padding: 58px 0 96px; background: var(--cream); }

.legal-body h2 {
  margin: 46px 0 14px;
  color: var(--navy);
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body h3 {
  margin: 26px 0 10px;
  color: var(--navy-2);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.legal-body p,
.legal-body li { color: #40525f; font-size: .88rem; line-height: 1.85; }
.legal-body p { margin-bottom: 15px; }
.legal-body ul { margin: 0 0 18px; padding-left: 20px; }
.legal-body li { margin-bottom: 9px; }
.legal-body strong { color: var(--ink); }
/* 44px min touch target on links that sit in running prose would break the line
   box, so only the standalone contact links below get the padded treatment. */
.legal-body a { color: var(--navy-2); text-decoration: underline; text-underline-offset: 3px; }
.legal-body a:hover, .legal-body a:focus-visible { color: var(--navy); }

.legal-note {
  margin: 26px 0 0;
  padding: 20px 24px;
  border-left: 4px solid var(--gold);
  border-radius: 0 14px 14px 0;
  background: var(--paper);
}
.legal-note p:last-child { margin-bottom: 0; }

/* An unresolved item the Administrator must close before this page goes public.
   Deliberately loud: it is meant to be impossible to publish by accident. */
.legal-todo {
  margin: 0 0 15px;
  padding: 14px 18px;
  border: 2px dashed #b3541e;
  border-radius: 12px;
  background: #fdf0e6;
}
.legal-todo p { margin: 0; color: #8a3f16; font-weight: 700; }

.legal-table-wrap { overflow-x: auto; margin: 0 0 20px; }
.legal-table { width: 100%; min-width: 540px; border-collapse: collapse; }
.legal-table th,
.legal-table td {
  padding: 12px 14px;
  border: 1px solid #d9cfae;
  color: #40525f;
  font-size: .8rem;
  line-height: 1.6;
  text-align: left;
  vertical-align: top;
}
.legal-table th {
  color: var(--navy);
  background: var(--paper);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* No .site-header override here on purpose. The header is transparent and absolutely
   positioned, and .legal-head is already navy, so it reads as solid from the first
   pixel; adding a background here would also outrank .site-header.scrolled (same
   specificity, later file) and kill the translucent blur on scroll. */

@media (max-width: 700px) {
  .legal-head { padding: calc(var(--header-h) + 30px) 0 34px; }
  .legal-body { padding: 42px 0 72px; }
  .legal-body h2 { margin: 36px 0 12px; font-size: 1.3rem; }
}