/* legal.css — shared styling for the legal / company pages
 * (privacy.php, terms.php, imprint.php, contact.php).
 *
 * These are long-form reading documents, not tool UIs: the job is a
 * comfortable measure, a clear heading hierarchy and enough contrast to read a
 * policy end to end. Everything sits on the cosmic token set from
 * css/cosmic-shell.css, so both themes come for free.
 */

.lg-main {
  /* ~70 characters at the body size — the readable measure for prose. */
  max-width: 78ch;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px) 64px;
  /* .main-content in cosmic-shell.css sets color:#000, which is invisible on
     the dark ground (--bg is #080611). --ink is the shell's own text token and
     flips with the theme, so state it once here and let everything inherit. */
  color: var(--ink, #f3efff);
}

/* Borders and panel fills are derived from --ink rather than hardcoded, so the
   same rules read correctly in the light theme without a second block. */
.lg-main {
  --lg-line: color-mix(in srgb, var(--ink, #f3efff) 16%, transparent);
  --lg-fill: color-mix(in srgb, var(--ink, #f3efff) 5%, transparent);
}

.lg-lede {
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.12rem);
  line-height: 1.7;
  opacity: 0.92;
  margin: 0 0 8px;
}

/* "Last updated" / status strip under the hero. */
.lg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  margin: 0 0 28px;
  padding: 12px 16px;
  border: 1px solid var(--lg-line);
  border-radius: 12px;
  background: var(--lg-fill);
  font-size: 0.86rem;
  line-height: 1.5;
}
.lg-meta dt { opacity: 0.65; margin: 0; }
.lg-meta dd { margin: 0 18px 0 0; font-weight: 600; }

/* Review banner — deliberately visible, not a whisper. */
.lg-review {
  margin: 0 0 28px;
  padding: 14px 16px;
  border: 1px solid rgba(240, 180, 60, 0.45);
  border-left-width: 4px;
  border-radius: 10px;
  background: rgba(240, 180, 60, 0.09);
  font-size: 0.88rem;
  line-height: 1.6;
}
.lg-review strong { letter-spacing: 0.01em; }

.lg-section { margin: 0 0 34px; scroll-margin-top: 90px; }

.lg-section h2 {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  line-height: 1.3;
  margin: 0 0 10px;
}
.lg-section h3 {
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  margin: 22px 0 8px;
  opacity: 0.95;
}
.lg-section p,
.lg-section li {
  font-size: 0.95rem;
  line-height: 1.75;
  opacity: 0.88;
}
.lg-section p { margin: 0 0 12px; }
.lg-section ul, .lg-section ol { margin: 0 0 14px; padding-left: 1.25em; }
.lg-section li { margin: 0 0 6px; }
/* Scoped to .lg-main, not .lg-section: links also live in the contact cards and
   the lede, and when this rule was narrower those fell through to the browser
   default blue (#0000ee) at 2.22:1 on the card ground — a real AA failure, not
   a cosmetic one. --lg-link is a lightened accent so body-size links clear
   4.5:1 on both themes; the raw --accent does not. */
.lg-main { --lg-link: color-mix(in srgb, var(--accent, #a35bff) 62%, var(--ink, #f3efff)); }
.lg-main a { color: var(--lg-link); }
.lg-main a:hover, .lg-main a:focus-visible { color: var(--ink, #f3efff); }
/* The CTA buttons paint their own label — keep them off the link colour. */
.lg-main .lg-cta { color: #fff; }

/* Table of contents. */
.lg-toc {
  margin: 0 0 34px;
  padding: 16px 18px;
  border: 1px solid var(--lg-line);
  border-radius: 12px;
  background: var(--lg-fill);
}
.lg-toc h2 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em;
  opacity: 0.6; margin: 0 0 10px; }
.lg-toc ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 28px; }
.lg-toc li { margin: 0 0 6px; font-size: 0.9rem; break-inside: avoid; }
.lg-toc a { color: inherit; opacity: 0.85; text-decoration: none; }
.lg-toc a:hover, .lg-toc a:focus-visible { opacity: 1; text-decoration: underline; }
@media (max-width: 560px) { .lg-toc ol { columns: 1; } }

/* Definition-style fact table — the imprint's register data, and the data
 * tables in the privacy policy. Scrolls inside itself so a long value can
 * never push the page sideways on a phone. */
.lg-tablewrap { overflow-x: auto; margin: 0 0 18px; }
.lg-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 460px; }
.lg-table th, .lg-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--lg-line);
  line-height: 1.6;
}
.lg-table th { font-weight: 600; opacity: 0.7; white-space: nowrap; width: 34%; }
.lg-table td { opacity: 0.92; }
@media (max-width: 560px) {
  .lg-table, .lg-table tbody, .lg-table tr, .lg-table th, .lg-table td { display: block; width: auto; }
  .lg-table { min-width: 0; }
  .lg-table th { border-bottom: 0; padding-bottom: 2px; }
  .lg-table td { padding-top: 0; padding-bottom: 12px; }
}

/* Address block. */
.lg-address {
  font-style: normal;
  line-height: 1.8;
  font-size: 0.95rem;
  margin: 0 0 14px;
}

/* Contact cards. */
.lg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  margin: 0 0 28px;
}
.lg-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--lg-line);
  border-radius: 14px;
  background: var(--lg-fill);
}
.lg-card h2 { font-size: 1rem; margin: 0 0 6px; }
.lg-card p { font-size: 0.9rem; line-height: 1.65; opacity: 0.85; margin: 0 0 10px; }
.lg-card .lg-cta {
  display: inline-block;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 10px;
  /* Measured: white on the raw --accent is 3.82:1, and at 14px bold that is
     normal text needing 4.5:1. Darkening the fill toward black clears it
     without changing the button's identity. */
  background: color-mix(in srgb, var(--accent, #a35bff) 75%, #000);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.lg-card .lg-cta:hover, .lg-card .lg-cta:focus-visible { filter: brightness(1.08); }

.lg-updated { font-size: 0.84rem; opacity: 0.6; margin-top: 40px; }

/* Mono palette: --accent collapses to a light grey, and a white label on it
   disappears. Documented trap in this codebase — same fix as elsewhere: paint
   the label with the page ground instead of white. */
[data-palette="mono"] .lg-card .lg-cta { color: var(--bg, #080611); }