/* ==========================================================================
   SIM MASTER — LEGAL TEXT (/politika-privatnosti/, /en/politika-privatnosti/)
   Long-form reading page. The section keeps the full shell so the text
   starts flush with the hero above it; only the text measure is capped.
   ========================================================================== */

.legal {
  padding-block: var(--space-xl) var(--space-section);
}

  .legal__inner > * {
    max-width: var(--shell-text);
  }

  .legal__updated {
    margin: 0 0 var(--space-lg);
    font-family: var(--font-mono);
    font-size: var(--fs-mono-label);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .legal h2 {
    margin: var(--space-xl) 0 var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--line-faint);
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-warm);
  }

  .legal h2:first-of-type {
    margin-top: 0;
  }

  .legal h3 {
    margin: var(--space-lg) 0 var(--space-2xs);
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    font-weight: 600;
    color: var(--text-primary);
  }

  .legal p,
  .legal li {
    color: var(--text-secondary);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  .legal p {
    margin: 0 0 var(--space-sm);
  }

  .legal strong {
    color: var(--text-primary);
    font-weight: 600;
  }

  .legal ul {
    margin: 0 0 var(--space-sm);
    padding-left: 1.25rem;
    display: grid;
    gap: 0.35rem;
  }

  .legal li::marker {
    color: var(--action-text);
  }

  .legal .legal__facts {
    padding: var(--space-sm) var(--space-md);
    list-style: none;
    background: var(--surface-panel);
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--action);
    border-radius: var(--radius-sm);
  }

  .legal a {
    color: var(--action-text);
    text-underline-offset: 0.2em;
    overflow-wrap: anywhere;
  }

  .legal a:hover {
    color: var(--text-primary);
  }

  .legal code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    padding: 0.05em 0.35em;
    background: var(--surface-inset);
    border: 1px solid var(--line-neutral);
    border-radius: var(--radius-xs);
    color: var(--color-cyan-light);
    overflow-wrap: anywhere;
  }

  /* Details the owner still has to supply. Loud on purpose, so the page
     cannot go live with them unnoticed. */
  .legal__todo {
    padding: 0 0.3em;
    background: #ffe14d;
    color: #111;
    border-radius: var(--radius-xs);
  }