/* ==========================================================================
   VIP System: policy.css
   privacy-policy.html · terms-of-use.html · accessibility.html ·
   imprint.html · modern-slavery-statement.html · sitemap.html

   NEEDS site.css LINKED FIRST. Tokens (colours, spacing, type scale),
   reset, buttons, header, footer and the contact modal all live there.
   ========================================================================== */

/* ==========================================================================
   POLICY PAGES — everything below is new and only used by:
   privacy-policy.html, terms-of-use.html, accessibility.html, imprint.html,
   modern-slavery-statement.html, sitemap.html

   Three layouts, matching the templates:
     Style 1  Three columns   contents list | clause number + text | plain-English note
                              (privacy, terms)
     Style 2  Two columns     "on this page" list | text
                              (accessibility, slavery)
     Style 3  Two / one       two columns of cards, then one full-width card
                              (imprint)
   ========================================================================== */

/* -----------------------------------------
   Policy layout tokens (colours are in site.css)
----------------------------------------- */
:root {
  --policy-width: 1320px;
  --policy-offset: 7.5rem;         /* clears the floating navbar when jumping to a clause */
}

/* -----------------------------------------
   Page shell + focus
----------------------------------------- */
.policy-page {
  font-family: var(--font-base);
  color: var(--color-grey-body);
}

.policy-link {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.policy-link:hover { text-decoration-thickness: 2px; }

.policy-link--strong { font-weight: bold; }

.sitemap-link {
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.sitemap-link:hover { text-decoration-thickness: 2px; }

.sitemap-link--strong { font-weight: bold; }

/* -----------------------------------------
   Grey hero band: title, lead sentence, version details
----------------------------------------- */
.policy-hero { background-color: var(--color-grey-hero); }

.policy-hero__inner {
  max-width: var(--policy-width);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) 1.5rem clamp(2rem, 4vw, 3rem);
}

.policy-hero h1 {
  font-size: clamp(2.1rem, 6vw, 5rem);
  line-height: 1.1;
  font-weight: bold;
  letter-spacing: -0.02em;
  color: var(--color-black);
  margin-bottom: 1.25rem;
  overflow-wrap: anywhere;
}

.policy-hero__lead {
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  line-height: 1.4;
  color: var(--color-black);
  max-width: 46ch;
  margin-bottom: 2rem;
}

.policy-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 3.5rem;
}

.policy-meta__item { max-width: 26ch; }

.policy-meta dt {
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: 0.4rem;
}

.policy-meta dd {
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--color-black);
}

/* -----------------------------------------
   Body layout: contents list on the left, everything else beside it
----------------------------------------- */
.policy-body {
  max-width: var(--policy-width);
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
  display: grid;
  grid-template-columns: 14.5rem minmax(0, 1fr);
  column-gap: 3rem;
  align-items: start;
}

.policy-body--single { display: block; }

.policy-content { min-width: 0; }

/* Contents list ("Clauses" / "On this page") */
.policy-toc {
  position: sticky;
  top: var(--policy-offset);
  max-height: calc(100vh - var(--policy-offset) - 1rem);
  overflow-y: auto;
}

.policy-toc__label {
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-grey-slate);
  margin-bottom: 1rem;
}

.policy-toc ol {
  border-left: 2px solid var(--color-rule);
  list-style: none;
}

.policy-toc__link {
  display: block;
  margin-left: -2px;
  padding: 0.45rem 0.5rem 0.45rem 1rem;
  border-left: 4px solid transparent;
  font-size: 0.92rem;
  font-weight: bold;
  line-height: 1.3;
  color: var(--color-grey-slate-dark);
}

.policy-toc__link:hover {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.policy-toc__header {
  display: block;
  margin-left: -2px;
  padding: 0.45rem 0.5rem 0.45rem 1rem;
  border-left: 4px solid transparent;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.3;
  color: var(--color-grey-slate-dark);
}

/* Sitemap: space above each group heading after the first */
.policy-toc li + li:has(> .policy-toc__header) { margin-top: 1.25rem; }

/* .is-current / aria-current are set by the scroll snippet in vip-web.js */
.policy-toc__link.is-current,
.policy-toc__link[aria-current="true"] {
  color: var(--color-navy);
  border-left-color: var(--color-yellow);
}

/* -----------------------------------------
   Style 1 — numbered clauses with a note beside each
----------------------------------------- */
.policy-clause {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) 15rem;
  column-gap: 1.5rem;
  margin-bottom: 3.25rem;
  scroll-margin-top: var(--policy-offset);
}

.policy-clause__num {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.25;
  color: var(--color-grey-num);
}

.policy-clause__main { min-width: 0; }

.policy-clause__main h2 {
  font-size: 1.4rem;
  line-height: 1.25;
  font-weight: bold;
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.policy-clause__main p,
.policy-section p {
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 1rem;
}

.policy-clause__main > :last-child,
.policy-section > :last-child { margin-bottom: 0; }

/* "In plain English" note */
.policy-note {
  align-self: start;
  background: var(--color-yellow-pale);
  border: 1px solid var(--color-yellow-pale-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}

.policy-note__label {
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-yellow-text);
  margin-bottom: 0.4rem;
}

.policy-note p:last-child {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* -----------------------------------------
   Style 2 — flowing sections with a lead-in panel
----------------------------------------- */
.policy-callout {
  background: var(--color-grey-callout);
  border-left: 5px solid var(--color-yellow);
  border-radius: 0 12px 12px 0;
  padding: 1.5rem 1.75rem;
  margin-bottom: 2.5rem;
}

.policy-callout p {
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
}

.policy-section {
  padding-bottom: 2.75rem;
  margin-bottom: 2.75rem;
  border-bottom: 1px solid var(--color-rule);
  scroll-margin-top: var(--policy-offset);
}

.policy-section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.policy-section h2 {
  font-size: 1.6rem;
  line-height: 1.25;
  font-weight: bold;
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.policy-section p,
.policy-section li { max-width: 72ch; }

.policy-sitemap {
  background: var(--color-yellow);
  border-left: 5px solid var(--color-black);
  border-radius: 0 12px 12px 0;
  padding: 1.5rem 1.75rem;
  margin-bottom: 2.5rem;
  margin-right: -15rem;
}

.policy-sitemap li {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.65;
  margin: 0;
}

/* -----------------------------------------
   Lists
----------------------------------------- */
.policy-list {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0 0 1rem;
}

.policy-list li {
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 0.6rem;
}

/* -----------------------------------------
   Tables (Privacy: where data comes from, lawful basis, retention, cookies;
   Accessibility: known issues; Slavery: measures)
----------------------------------------- */
.policy-table-wrap { margin: 1.5rem 0 1.25rem; }

.policy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.policy-table caption {
  text-align: left;
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-grey-slate);
  padding-bottom: 0.6rem;
}

.policy-table th,
.policy-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.8rem 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.policy-table thead th {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-grey-slate);
  border-bottom: 2px solid var(--color-black);
}

.policy-table tbody th {
  width: 30%;
  font-weight: bold;
  color: var(--color-black);
}

.policy-table tbody tr { border-bottom: 1px solid var(--color-rule); }
.policy-table tbody tr:nth-child(even) { background: var(--color-grey-tint); }

/* -----------------------------------------
   "To be inserted" highlight — search the HTML for policy-placeholder
   before launch; every one of these needs a real value.
----------------------------------------- */
.policy-placeholder {
  background: var(--color-flag-bg);
  color: var(--color-black);
  padding: 0.05rem 0.4rem;
  border-bottom: 1px dashed var(--color-amber-dark);
  border-radius: 3px;
}

/* -----------------------------------------
   Sign-off (modern slavery statement)
----------------------------------------- */
.policy-signoff {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--color-black);
}

.policy-signoff__name {
  font-size: 1.15rem;
  font-weight: bold;
  color: var(--color-black);
  margin-bottom: 0.15rem;
}

.policy-signoff p { margin-bottom: 0.5rem; }

/* -----------------------------------------
   Style 3 — imprint cards
----------------------------------------- */
.policy-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.policy-card {
  background: var(--color-white);
  border: 1px solid var(--color-rule);
  border-radius: 16px;
  padding: 1.75rem;
}

.policy-card--full { margin-top: 0; }

.policy-card h2 {
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-bottom: 1.25rem;
}

.policy-facts {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0.85rem 1.25rem;
}

.policy-facts dt {
  font-size: 0.82rem;
  font-weight: bold;
  color: var(--color-grey-slate);
  padding-top: 0.1rem;
}

.policy-facts dd {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-grey-body);
  overflow-wrap: anywhere;
}

.policy-facts dd p { max-width: 80ch; }

/* -----------------------------------------
   Closing strap: "Questions about any of this?"
----------------------------------------- */
.policy-closing {
  background: var(--color-black);
  color: var(--color-white);
  border-radius: 4px;
  padding: 2rem 2rem 2.25rem;
  margin-top: 1rem;
}

.policy-closing h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--color-white);
  margin-bottom: 0.75rem;
}

.policy-closing p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-grey-light-text);
  max-width: 60ch;
  margin-bottom: 1.5rem;
}

.policy-closing .btn { margin: 0; }

/* -----------------------------------------
   Responsive
----------------------------------------- */

/* Below 1200px there is no room for a third column, so the note drops
   underneath its clause. */
@media (max-width: 1199px) {
  .policy-clause { grid-template-columns: 3rem minmax(0, 1fr); }
  .policy-note { grid-column: 2; margin-top: 1.25rem; }
}

/* Tablet: the contents list stops being a sidebar and becomes a panel
   above the text. */
@media (max-width: 899px) {
  .policy-body {
    display: block;
    padding-top: 2rem;
  }

  .policy-toc {
    position: static;
    max-height: none;
    overflow: visible;
    margin-bottom: 2.5rem;
    padding: 1.25rem 1.25rem 0.75rem;
    background: var(--color-grey-tint);
    border-radius: 12px;
  }

  .policy-toc ol { border-left: 0; columns: 2; column-gap: 1.5rem; }
  .policy-toc li { break-inside: avoid; }
  .policy-toc__link { margin-left: 0; padding-left: 0.75rem; }

  .policy-cards { grid-template-columns: 1fr; }
}

/* Phone */
@media (max-width: 600px) {
  .policy-toc ol { columns: 1; }

  /* number sits above the heading instead of beside it */
  .policy-clause { display: block; }
  .policy-clause__num { display: block; font-size: 1.2rem; margin-bottom: 0.25rem; }
  .policy-note { margin-top: 1.25rem; }

  .policy-callout { padding: 1.25rem 1.25rem; }
  .policy-section h2 { font-size: 1.4rem; }

  .policy-card { padding: 1.25rem; }
  .policy-facts { grid-template-columns: 1fr; gap: 0.15rem; }
  .policy-facts dd { margin-bottom: 0.7rem; }

  .policy-closing { padding: 1.5rem 1.25rem 1.75rem; }
  .policy-closing .btn { display: block; text-align: center; }

  /* Tables turn into stacked cards, so nothing scrolls sideways */
  .policy-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .policy-table,
  .policy-table tbody,
  .policy-table tr,
  .policy-table th,
  .policy-table td { display: block; width: auto; }

  /* Left as a table caption inside a block table, it shrank to its
     narrowest width and put one word on each line */
  .policy-table caption { display: block; }

  .policy-table tbody tr { padding: 0.9rem 0.75rem; }
  .policy-table tbody th { width: auto; padding: 0 0 0.35rem; }
  .policy-table td { padding: 0.25rem 0; }

  .policy-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.68rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-grey-slate);
  }
}

/* -----------------------------------------
   Print: drop the contents list and keep the notes beside the text
----------------------------------------- */
@media print {
  .skip-link,
  .policy-toc,
  .policy-closing .btn { display: none; }

  .policy-body { display: block; padding-top: 1rem; }
  .policy-hero { background: none; }
  .policy-clause { grid-template-columns: 2.5rem minmax(0, 1fr) 12rem; break-inside: avoid; }
  .policy-note { grid-column: auto; margin-top: 0; }
}

/* -----------------------------------------
   Responsive fix (October 2026)
   The sitemap's yellow panel used margin-right:-15rem to stretch across
   the empty note column. Below 1200px that column no longer exists, so
   the panel ran 15rem off the right of the screen and its text was cut
   off. It now sits inside the page on laptops, tablets and phones.
----------------------------------------- */
@media (max-width: 1199px) {
  .policy-sitemap { margin-right: 0; }
}