/* ==========================================================================
   Legal / policy pages — privacy, cookies, terms
   ==========================================================================
   Loaded only by page-templates/page-legal.php.

   The content is plain semantic HTML written in the editor: h2, h3, p, ul,
   table, strong, a. No classes, and there should not be any -- an editor
   should be able to rewrite the privacy policy in wp-admin without knowing
   any markup conventions. So everything below is scoped to .legal-body and
   styles the bare elements.

   Measure lives on .legal-body, not on the section. Capping the section is
   what made the COVID page render as a 740px strip in a full-width site;
   the note on .svc-prose in service-pages.css has the detail.
   ========================================================================== */

/* --- Header band ---------------------------------------------------------
   Dark green, full bleed, same family as .svc-stats-section. Gives the page
   a top rather than dropping the reader straight into body copy, and sets
   the last-updated date where it can actually be seen. */
.legal-header {
  position: relative;
  padding: 4.5rem 0 3.5rem;
  background: linear-gradient(135deg, var(--brand-dark, #234F3A), var(--brand-purple, #2F6B4E));
  color: #fff;
}

.legal-header-inner { max-width: 54rem; }

.legal-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);      /* 6.4:1 on the band */
  margin-bottom: 0.9rem;
}

.legal-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}

.legal-updated {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.25rem 0 0;
  padding: 0.45rem 0.9rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
}

.legal-updated i { font-size: 0.8125rem; opacity: 0.85; }

/* Sibling policies. A reader who wanted the cookie policy should not have to
   go back through the footer to find it. */
.legal-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.75rem;
}

.legal-switch-link {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.legal-switch-link:hover,
.legal-switch-link:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.legal-switch-link.is-current {
  background: #fff;
  border-color: #fff;
  color: var(--brand-dark, #234F3A);      /* 7.80:1 */
}

/* --- Layout --------------------------------------------------------------
   One column on phones, contents-plus-prose from 1024px. The aside is first
   in the source so it is reachable before the body on a screen reader and on
   mobile, where it collapses to a summary. */
.legal-section {
  padding: 4rem 0 5rem;
  background: var(--brand-light, #E4EDE6);
}

.legal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .legal-layout {
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 4rem;
  }
}

/* --- Contents ------------------------------------------------------------ */
.legal-toc-box {
  background: #fff;
  border: 1px solid rgba(194, 113, 76, 0.16);
  border-radius: 1.25rem;
  padding: 1.35rem 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

@media (min-width: 1024px) {
  /* 7rem clears the 80px fixed .mega-menu-nav with room to spare. */
  .legal-toc { position: sticky; top: 7rem; }
}

.legal-toc-summary {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-dark, #234F3A);
  cursor: pointer;
  list-style: none;
}

.legal-toc-summary::-webkit-details-marker { display: none; }

.legal-toc-summary::after {
  content: "\f078";                        /* chevron-down */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  float: right;
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

.legal-toc-box[open] .legal-toc-summary::after { transform: rotate(180deg); }

/*
 * Desktop: the list is always open, so the disclosure affordance would be a
 * lie. pointer-events rather than a display override on the list, because a
 * closed <details> hides its children through a UA shadow slot -- setting
 * display on the child does not reliably reveal it. The markup ships with
 * the `open` attribute, so this only prevents closing it.
 */
@media (min-width: 1024px) {
  .legal-toc-summary { cursor: default; pointer-events: none; }
  .legal-toc-summary::after { display: none; }
}

.legal-toc-list {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  counter-reset: legal-toc;
}

.legal-toc-list li { counter-increment: legal-toc; }
.legal-toc-list li + li { margin-top: 0.15rem; }

.legal-toc-list a {
  display: block;
  padding: 0.45rem 0 0.45rem 2rem;
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  color: #414B44;                          /* 9.07:1 on white */
  border-radius: 0.5rem;
  transition: color 0.2s ease, background 0.2s ease;
}

.legal-toc-list a::before {
  content: counter(legal-toc, decimal-leading-zero);
  position: absolute;
  left: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-accent, #6E9583);
  /* Fill colour used as text: fine here at 0.75rem bold against white only
     because it sits beside, not inside, the readable text. It is decoration
     and is not the only way to tell the items apart. */
}

.legal-toc-list a:hover,
.legal-toc-list a:focus-visible {
  color: var(--brand-dark, #234F3A);
  background: var(--brand-light, #E4EDE6);
}

/* --- The policy itself ---------------------------------------------------
   Everything below styles bare elements inside .legal-body. */
.legal-body {
  max-width: 44rem;                        /* ~72 characters at 1.0625rem */
  background: #fff;
  border: 1px solid rgba(194, 113, 76, 0.14);
  border-radius: 1.5rem;
  padding: 3rem 3.25rem 2.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.legal-body > *:first-child { margin-top: 0; }
.legal-body > *:last-child  { margin-bottom: 0; }

.legal-body p,
.legal-body li {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.72;
  color: #3B4A42;                          /* 9.66:1 on white */
}

.legal-body p { margin: 0 0 1.15rem; }

/*
 * h2 gets a rule above it rather than more whitespace. On a document this
 * long, whitespace alone stops reading as division by about the fourth
 * section -- the eye needs an actual line to catch on.
 */
.legal-body h2 {
  margin: 3rem 0 1.1rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(35, 79, 58, 0.14);
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--brand-dark, #234F3A);       /* 7.80:1 */
  scroll-margin-top: 6.5rem;               /* clears the fixed header on anchor jumps */
}

.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.legal-body h3 {
  margin: 2rem 0 0.7rem;
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1E2A23;
  scroll-margin-top: 6.5rem;
}

.legal-body ul,
.legal-body ol { margin: 0 0 1.4rem; padding: 0; list-style: none; }

.legal-body li { position: relative; padding-left: 1.6rem; }
.legal-body li + li { margin-top: 0.8rem; }

.legal-body ul > li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.72em;                             /* on the cap height, not the line box */
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--brand-accent, #6E9583);
}

.legal-body li strong { color: var(--brand-dark, #234F3A); font-weight: 700; }

.legal-body a {
  color: var(--brand-purple, #2F6B4E);     /* 6.30:1 on white */
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-body a:hover,
.legal-body a:focus-visible {
  color: var(--brand-dark, #234F3A);
  text-decoration-thickness: 2px;
}

/*
 * Tables. The lawful-basis table is the densest thing on the page and was
 * rendering with no padding, no header treatment and no row separation, so
 * the two columns ran into each other. It also needs to survive a phone,
 * hence the scroll container.
 */
.legal-body table {
  width: 100%;
  margin: 0 0 1.75rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  background: #fff;
  border: 1px solid rgba(35, 79, 58, 0.14);
  border-radius: 0.9rem;
  overflow: hidden;
}

.legal-body th,
.legal-body td {
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
  border-bottom: 1px solid rgba(35, 79, 58, 0.1);
}

.legal-body thead th,
.legal-body tr:first-child th {
  background: var(--brand-light, #E4EDE6);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-dark, #234F3A);       /* 7.16:1 on brand-light */
}

.legal-body td { color: #3B4A42; }
.legal-body tr:last-child th,
.legal-body tr:last-child td { border-bottom: 0; }

/* --- Closing note -------------------------------------------------------- */
.legal-foot {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin-top: 2.5rem;
  padding: 1.15rem 1.35rem;
  border-radius: 0.9rem;
  background: var(--brand-light, #E4EDE6);
  border: 1px solid rgba(110, 149, 131, 0.3);
}

.legal-foot i { color: var(--brand-purple, #2F6B4E); margin-top: 0.35rem; flex: none; }
.legal-foot p { margin: 0; font-size: 0.9375rem; line-height: 1.65; }

/* --- Phones -------------------------------------------------------------- */
@media (max-width: 767px) {
  .legal-header { padding: 3rem 0 2.5rem; }

  .legal-body {
    /* The card inset costs more than it gives at this width. */
    padding: 1.75rem 1.4rem 1.5rem;
    border-radius: 1.1rem;
  }

  .legal-body p,
  .legal-body li { font-size: 1rem; }

  .legal-body h2 { font-size: 1.375rem; margin-top: 2.25rem; }

  /* Tables are the one thing allowed to scroll sideways. */
  .legal-body table { display: block; overflow-x: auto; white-space: normal; }
}