/* assets/legal.css — the legal pages (privacy.php, terms.php): a hero with an "at a glance" card, a contents list that stays in
   view beside the text, and numbered sections. Scoped under .ss-legal; the only rule outside it is the page background, and
   both pages are the only ones that load this file. Layout: includes/legal_page.php. Behaviour: assets/legal.js.

   custom.css makes every link blue with !important, so links on the dark hero and in the contents list set their colour with
   !important too, and it removes the outline of every .btn, so the contact button gets its own focus ring below. Avoid
   <small>: custom.css forces its size and colour. */

body { background: #f5f8fb; }

.ss-legal {
  --ss-legal-ink: #0f2236;
  --ss-legal-text: #2b3d4f;
  --ss-legal-muted: #5b6b7a;
  --ss-legal-line: #dfe7ee;
  --ss-legal-accent: #0b6fa4;
  --ss-legal-soft: #f1f7fb;
  padding-top: 1.25rem;
  padding-bottom: 3rem;
  color: var(--ss-legal-text);
}
/* Bootstrap's container grows to 1320px on a big screen, which makes lines of well over a hundred characters */
.container.ss-legal { max-width: 71.25rem; }

/* ---------- Hero ---------- */
.ss-legal-hero {
  position: relative;
  display: grid;
  gap: 1.75rem;
  margin: 0 0 1.5rem;
  padding: 2rem 1.4rem;
  overflow: hidden;
  border-radius: 1.5rem;
  color: #fff;
  background:
    radial-gradient(48rem 24rem at 92% -20%, rgba(66, 202, 255, .30), transparent 60%),
    radial-gradient(30rem 20rem at -5% 110%, rgba(25, 119, 255, .22), transparent 60%),
    linear-gradient(135deg, #082640 0%, #0a4468 55%, #0a5a6e 100%);
  box-shadow: 0 18px 40px -22px rgba(8, 38, 64, .55);
}
.ss-legal-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #42caff, #1977ff); }
@media (min-width: 992px) {
  .ss-legal-hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: 2.5rem; padding: 2.75rem 2.5rem; }
}
.ss-legal-eyebrow { margin: 0 0 .6rem; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8fe3ff; }
.ss-legal-hero h1 { margin: 0 0 .6rem; font-size: clamp(2rem, 4.6vw, 2.9rem); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; color: #fff; }
.ss-legal-label { margin: 0 0 .5rem; font-size: 1.02rem; font-weight: 600; color: #8fe3ff; }
.ss-legal-lead { margin: 0 0 1.25rem; max-width: 38rem; font-size: 1.1rem; line-height: 1.6; color: #d4e7f1; }
.ss-legal-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ss-legal-chips li { padding: .32rem .8rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .85rem; color: #e4f1f8; }
.ss-legal-chips i { margin-right: .35rem; color: #8fe3ff; }

/* The "at a glance" card */
.ss-legal-glance { padding: 1.25rem 1.35rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 1.25rem; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ss-legal-glance h2 { margin: 0 0 .9rem; font-size: 1.15rem; font-weight: 750; color: #fff; }
.ss-legal-glance ul { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.ss-legal-glance li { display: flex; align-items: flex-start; gap: .75rem; }
.ss-legal-tick { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: .5rem; background: rgba(66, 202, 255, .22); color: #8fe3ff; font-size: .75rem; }
.ss-legal-glance strong { display: block; font-size: .98rem; color: #fff; }
.ss-legal-glance li div > span { display: block; font-size: .9rem; line-height: 1.45; color: #d4e7f1; }
/* A taller hit area than the text, taken back with negative margins so the card does not grow */
.ss-legal-glance a { display: inline-block; margin: -.25rem 0 -.5rem; padding: .5rem 0; font-size: .85rem; color: #8fe3ff !important; text-decoration: underline; text-underline-offset: .15em; }
.ss-legal-glance a:hover { color: #fff !important; }

/* ---------- Contents: folding on a phone, sticky beside the text on a wide screen ---------- */
.ss-legal-toc-m { margin: 0 0 1.25rem; border: 1px solid var(--ss-legal-line); border-radius: 1rem; background: #fff; }
.ss-legal-toc-m summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1.1rem; font-weight: 700; color: var(--ss-legal-ink); cursor: pointer; list-style: none; }
.ss-legal-toc-m summary::-webkit-details-marker { display: none; }
.ss-legal-toc-m summary span { margin-left: auto; font-size: .85rem; font-weight: 500; color: var(--ss-legal-muted); }
.ss-legal-toc-m summary::after { content: ""; flex: none; width: .5rem; height: .5rem; margin: -.2rem .15rem 0 0; border-right: 2px solid var(--ss-legal-accent); border-bottom: 2px solid var(--ss-legal-accent); transform: rotate(45deg); transition: transform .15s ease; }
.ss-legal-toc-m[open] summary::after { margin-top: .2rem; transform: rotate(-135deg); }
.ss-legal-toc-m nav { padding: 0 .5rem .7rem; }
.ss-legal-toc { display: none; }
.ss-legal-toc ol, .ss-legal-toc-m ol { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.ss-legal-toc a, .ss-legal-toc-m a { display: flex; align-items: baseline; gap: .6rem; padding: .42rem .6rem; border-radius: .65rem; color: #41566a !important; font-size: .92rem; line-height: 1.35; text-decoration: none; }
/* A finger needs more than the pointer does */
.ss-legal-toc-m a { align-items: center; min-height: 2.75rem; }
.ss-legal-toc a:hover, .ss-legal-toc-m a:hover { background: #e9f2f8; color: var(--ss-legal-ink) !important; text-decoration: none; }
.ss-legal-toc a:focus-visible, .ss-legal-toc-m a:focus-visible, .ss-legal-related:focus-visible { outline: 2px solid var(--ss-legal-accent); outline-offset: 2px; }
.ss-legal-toc a.is-active, .ss-legal-toc-m a.is-active { background: #dff0fa; color: #0a4e75 !important; font-weight: 650; }
.ss-legal-toc-n { flex: none; min-width: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-legal-accent); }
.ss-legal-toc-title { margin: 0 0 .5rem; padding: 0 .6rem; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-legal-muted); }

.ss-legal-body { display: block; }
@media (min-width: 992px) {
  .ss-legal-toc-m { display: none; }
  .ss-legal-body { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 2rem; align-items: start; }
  /* Never taller than the room above the site's floating "Top" button (fixed at the bottom left, about 5rem high): on a short
     screen the list scrolls inside itself, and assets/legal.js keeps the link being read in view. */
  .ss-legal-toc { display: block; position: sticky; top: 1rem; max-height: calc(100vh - 6.5rem); overflow-y: auto; scrollbar-width: thin; padding: .9rem .6rem; border: 1px solid var(--ss-legal-line); border-radius: 1rem; background: #fff; }
}

/* ---------- Sections ---------- */
.ss-legal-section { margin: 0 0 1rem; padding: 1.3rem 1.4rem 1.5rem; border: 1px solid var(--ss-legal-line); border-radius: 1rem; background: #fff; scroll-margin-top: 1rem; }
.ss-legal-section > header { display: flex; align-items: center; gap: .85rem; margin: 0 0 .85rem; }
.ss-legal-num { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .85rem; background: #e6f2fa; color: var(--ss-legal-accent); font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ss-legal-section h2 { margin: 0; font-size: 1.28rem; font-weight: 750; line-height: 1.25; color: var(--ss-legal-ink); }
.ss-legal-section[data-tone="warning"] { border-color: #f3dcb0; background: #fff9ea; }
.ss-legal-section[data-tone="warning"] .ss-legal-num { background: #ffe9b8; color: #7a4f00; }

.ss-legal-text { font-size: 1rem; line-height: 1.7; overflow-wrap: break-word; }
.ss-legal-text p { margin: 0 0 .75rem; }
.ss-legal-text > :last-child { margin-bottom: 0; }
.ss-legal-text ul { margin: 0 0 .5rem; padding-left: 1.25rem; }
.ss-legal-text li { margin: .5rem 0; padding-left: .15rem; }
.ss-legal-text li > ul { margin: .5rem 0 .25rem; }
.ss-legal-text strong, .ss-legal-text b { color: var(--ss-legal-ink); }
.ss-legal-text p.ss-legal-action { margin: 1rem 0 0; }

/* The contact button: the site's blue with white text is 4.1:1, so on this page it takes the darker blue the links use */
.ss-legal .btn-primary { background: #0a58ca; }
.ss-legal .btn-primary:hover { background: #0847a3; }
.ss-legal a.btn-primary, .ss-legal a.btn-primary:hover { color: #fff !important; text-decoration: none; }
.ss-legal .btn:focus-visible { outline: 2px solid var(--ss-legal-accent) !important; outline-offset: 2px; box-shadow: none !important; }

/* The table of who we share data with: stacked, with a label on each cell, on a phone */
.ss-legal-table-wrap { margin: 1rem 0 .25rem; overflow-x: auto; }
.ss-legal-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--ss-legal-line); border-radius: .85rem; font-size: .95rem; line-height: 1.5; }
.ss-legal-table th { padding: .65rem .85rem; background: var(--ss-legal-soft); font-weight: 700; text-align: left; color: var(--ss-legal-ink); }
.ss-legal-table td { padding: .65rem .85rem; border-top: 1px solid #e9eff4; vertical-align: top; }
@media (max-width: 575.98px) {
  .ss-legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ss-legal-table, .ss-legal-table tbody, .ss-legal-table tr, .ss-legal-table td { display: block; width: 100%; }
  .ss-legal-table tr { padding: .35rem 0; border-top: 1px solid var(--ss-legal-line); }
  .ss-legal-table tbody tr:first-child { border-top: 0; }
  .ss-legal-table td { padding: .3rem .85rem; border: 0; }
  .ss-legal-table td::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-legal-muted); }
}

/* ---------- The end of the page ---------- */
.ss-legal-end { margin-top: 1.5rem; }
.ss-legal-related { position: relative; display: grid; gap: .15rem; padding: 1rem 3rem 1rem 1.25rem; border: 1px solid var(--ss-legal-line); border-radius: 1rem; background: #fff; color: var(--ss-legal-text) !important; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.ss-legal-related:hover { box-shadow: 0 10px 26px rgba(8, 38, 64, .12); transform: translateY(-2px); color: var(--ss-legal-text) !important; text-decoration: none; }
.ss-legal-related span:first-child { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-legal-muted); }
.ss-legal-related strong { font-size: 1.1rem; color: var(--ss-legal-ink); }
.ss-legal-related i { position: absolute; top: 50%; right: 1.25rem; transform: translateY(-50%); color: var(--ss-legal-accent); }

@media (max-width: 575.98px) {
  .ss-legal-hero { padding: 1.6rem 1.15rem; }
  /* On a phone the card needs every pixel of width: the tick tiles go, and the hero gets a little shorter */
  .ss-legal-tick { display: none; }
  .ss-legal-lead { font-size: 1rem; }
  .ss-legal-glance ul { gap: .7rem; }
  .ss-legal-section { padding: 1.1rem 1.05rem 1.25rem; }
  .ss-legal-action .btn { width: 100%; padding-inline: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-legal *, .ss-legal *::before, .ss-legal *::after { transition: none !important; }
}

/* On paper: no colour blocks, no contents list, no buttons */
@media print {
  body { background: #fff; }
  .ss-legal-hero { background: none !important; box-shadow: none; border: 1px solid #999; }
  .ss-legal-hero, .ss-legal-hero * { color: #000 !important; }
  .ss-legal-hero::before, .ss-legal-toc, .ss-legal-toc-m, .ss-legal-end, .ss-legal-text p.ss-legal-action { display: none !important; }
  .ss-legal-body { display: block; }
  .ss-legal-section { border-color: #999; break-inside: avoid; }
}