/* The policy pages: privacy, cookies, terms and conditions, complaints (13 Oct 2026). Markup: src/pages/legal.mjs.
   Built for reading and finding: the policy in one comfortable column, with an "On this page" list beside it that
   stays in view on wide screens, and each section ruled off from the next. The complaints page adds the four ways to
   raise a complaint as cards, and timelines for the process and for what to do if you're not satisfied. */

/* ---------- Policy text, with the list of sections beside it ---------- */
.lg-grid { display: grid; gap: 36px; }
@media (min-width: 1000px) {
  .lg-grid { grid-template-columns: 16rem minmax(0, 44rem); gap: clamp(48px, 6vw, 88px); align-items: start; }
  .lg-toc { position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow: auto; }
}
.lg-toc ol { font-size: .9688rem; line-height: 1.35; }
.lg-toc a { text-decoration: none; }
.lg-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lg-sec + .lg-sec { margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--line); }
.lg-sec h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); }
.lg-n { color: var(--ink-soft); font-weight: 400; }
.lg-text li strong { color: var(--ink); font-weight: 600; }
.lg-key { margin-top: 16px; color: var(--ink) !important; font-weight: 600; }
.lg-address { margin-top: 10px; font-style: normal; color: var(--ink-soft); line-height: 1.6; }
.lg-text ul + p, .lg-text address + h3 { margin-top: 14px; }

/* ---------- Complaints: four ways to raise one ---------- */
.lg-icon { width: 38px; height: 38px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lg-icon .warm { stroke: var(--sun-coral); stroke-width: 1.8; }
.lg-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 640px) { .lg-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lg-ways { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.lg-way { padding: 22px; border-radius: 14px; background: var(--paper); line-height: 1.55; }
.lg-way .lg-icon { display: block; margin-bottom: 12px; }
.lg-way h3 { font-size: 1.1875rem; font-weight: 600; margin-bottom: 6px; }
.lg-way p { color: var(--ink-soft); }
.lg-way p + p { margin-top: 6px; }
.lg-way-main { color: var(--ink) !important; font-weight: 600; font-size: 1.0625rem; overflow-wrap: anywhere; }
.lg-way-main a { color: var(--ink); }
.lg-way .lg-address { margin-top: 0; }

/* ---------- Complaints: the process, and the steps if you're not satisfied ---------- */
.lg-timeline { list-style: none; margin: 18px 0 0 !important; padding: 0 !important; display: grid; gap: 0 !important; }
.lg-timeline > li { position: relative; display: grid; gap: 4px 24px; padding: 18px 0 18px 28px; }
.lg-timeline > li::before { content: ""; position: absolute; left: 0; top: 24px; width: 12px; height: 12px; border-radius: 50%; background: var(--sun-solid); }
.lg-timeline > li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 42px; bottom: -6px; width: 2px; background: var(--line-strong); }
.lg-when { margin: 0; color: var(--ink) !important; font-weight: 600; font-size: 1rem; line-height: 1.4; }
.lg-timeline h3 { margin: 0 0 4px; font-size: 1.125rem; }
.lg-timeline ul { margin-top: 8px !important; }
@media (min-width: 640px) {
  .lg-timeline > li { grid-template-columns: 11rem minmax(0, 1fr); }
}