/* Legal-document family — /retur/, /termeni/, /confidentialitate/.
   Values copied from the original styles.css (plans-hero L2521–2571,
   legal-doc L12279–12521 + .legal-page polish L12531–12750 merged — every
   page loading this file is a legal page). Breakpoints mapped 900→960,
   600→430 (gate Q2). */

@layer tokens {
  :root {
    /* One-off legal shades (original L12639 / L12679 / L12690). */
    --legal-closer-em: var(--green);
    --legal-totop-hover: #173d2a;
    --legal-totop-hover-cream: #f0e4ad;
  }
}

@layer pages {
  /* — Hero head: breadcrumb left, centered intro — */
  .plans-hero-head {
    max-width: var(--container);
    margin: 0 auto 72px;
    padding: 48px 24px 0;
  }

  .plans-hero-intro {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
  }

  .plans-hero-head .section-eyebrow {
    margin: 0 0 12px;
    color: var(--green);
    font-size: 12px;
    font-weight: 800;
  }

  /* .plans-hero-title now lives in site.css (shared with abonament/
     gaseste-ne/jurnal - UI-02); this page's own copy was byte-identical. */

  .plans-hero-sub {
    max-width: 38rem;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-soft);
  }

  /* — Two-column doc card: sticky TOC + 68ch body on warm-cream — */
  .legal-doc {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
    max-width: var(--container);
    margin: 0 auto 72px;
    padding: 64px 24px 96px;
    background: var(--warm-cream);
    border-radius: var(--radius-lg);
  }

  .legal-toc {
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 24px 20px;
    background: var(--surface);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 0 var(--line), 0 8px 24px -16px rgba(var(--green-rgb), 0.18);
    font-size: 14px;
    line-height: 1.5;
  }

  .legal-toc__title {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: var(--green-deep);
  }

  .legal-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .legal-toc__list a {
    display: block;
    padding: 6px 8px;
    margin: 0 -8px;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    transition: background 120ms var(--cf-ease), color 120ms var(--cf-ease);
  }

  .legal-toc__list a:hover,
  .legal-toc__list a:focus-visible {
    background: rgba(var(--green-rgb), 0.08);
    color: var(--green-deep);
  }

  .legal-toc__list a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-green-soft);
  }

  .legal-toc__list a.is-active {
    background: rgba(var(--green-rgb), 0.1);
    color: var(--green-deep);
    font-weight: 600;
  }

  /* — Document body — */
  .legal-doc__body {
    max-width: 68ch;
    font-size: 16px;
    line-height: 1.7;
  }

  .legal-doc__updated {
    margin: 0 0 2px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16px;
    color: var(--green-deep);
  }

  .legal-doc__section {
    margin: 0 0 40px;
    /* 16px + site.css scroll-padding-top 80px = the original's 96px anchor offset */
    scroll-margin-top: 16px;
  }

  .legal-doc__section h2 {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--green-deep);
  }

  .legal-doc__dropcap {
    float: left;
    margin: 4px 12px -4px 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 800;
    font-size: 4.2em;
    line-height: 0.85;
    color: var(--green-deep);
  }

  .legal-doc__body p {
    margin: 0 0 14px;
  }

  .legal-doc__body p:last-child {
    margin-bottom: 0;
  }

  .legal-doc__body a {
    color: var(--green-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
  }

  .legal-doc__body a:hover,
  .legal-doc__body a:focus-visible {
    color: var(--green-hover);
  }

  .legal-doc__body a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-green-soft);
    border-radius: 3px;
  }

  .legal-doc__body ul,
  .legal-doc__body ol {
    margin: 0 0 16px;
    padding-left: 24px;
  }

  .legal-doc__body li {
    margin: 0 0 8px;
  }

  .legal-doc__body li:last-child {
    margin-bottom: 0;
  }

  .legal-doc__body code {
    display: inline-block;
    padding: 1px 6px;
    background: var(--warm-cream);
    border: 1.5px dotted rgba(var(--green-rgb), 0.45);
    border-radius: 4px;
    font-family: "Menlo", "Consolas", monospace;
    font-size: 0.92em;
    color: var(--green-deep);
    word-break: break-word;
  }

  .legal-doc__body blockquote {
    margin: 16px 0;
    padding: 12px 20px;
    border-left: 3px solid var(--green);
    border-radius: 0 8px 8px 0;
    background: rgba(var(--green-rgb), 0.04);
    font-style: italic;
  }

  .legal-doc__body table {
    width: 100%;
    margin: 0 0 20px;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.55;
  }

  .legal-doc__body table:focus-visible {
    outline: 3px solid var(--green-deep);
    outline-offset: 3px;
  }

  .legal-doc__body thead {
    background: var(--warm-cream);
  }

  .legal-doc__body th,
  .legal-doc__body td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
  }

  .legal-doc__body th {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    color: var(--green-deep);
  }

  .legal-doc__body tbody tr:last-child td {
    border-bottom: none;
  }

  /* — Closer card — */
  .legal-doc__closer {
    margin: 56px 0 0;
    padding: 32px 28px;
    background: var(--cream);
    border-left: 4px solid var(--green);
    border-radius: var(--radius-md);
  }

  .legal-doc__closer-line {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    color: var(--green-deep);
  }

  .legal-doc__closer-line em {
    color: var(--legal-closer-em);
  }

  .legal-doc__closer-sub {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
  }

  /* — Back-to-top pill (JS reveals after 800px of scroll) — */
  .legal-doc__totop {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 30;
    min-width: 48px;
    min-height: 48px;
    padding: 12px 18px;
    border: none;
    border-radius: 999px;
    background: var(--green-deep);
    color: var(--cream);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.04em;
    box-shadow: 0 16px 32px -16px rgba(var(--green-rgb), 0.4);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 200ms var(--cf-ease), transform 200ms var(--cf-ease),
      background-color 200ms var(--cf-ease), color 200ms var(--cf-ease);
  }

  .legal-doc__totop.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .legal-doc__totop:hover {
    background: var(--legal-totop-hover);
  }

  /* Over the deep-green footer the deep-green pill vanishes — flip to cream (JS). */
  .legal-doc__totop.is-over-footer {
    background: var(--warm-cream);
    color: var(--green-deep);
  }

  .legal-doc__totop.is-over-footer:hover {
    background: var(--legal-totop-hover-cream);
  }

  .legal-doc__totop:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7), 0 16px 32px -16px rgba(var(--green-rgb), 0.4);
  }

  /* The four-column Russian privacy table exceeds its grid track by a few
     pixels immediately above the one-column breakpoint. Contain that narrow
     transition band without changing the desktop legal-document layout. */
  @media (min-width: 961px) and (max-width: 980px) {
    .legal-doc__body table {
      display: block;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }

  @media (max-width: 960px) {
    .legal-doc {
      grid-template-columns: minmax(0, 1fr);
      gap: 24px;
      margin-bottom: 48px;
      padding: 36px 24px 64px;
      border-radius: var(--radius-md);
    }

    .legal-toc {
      position: static;
      max-height: none;
      overflow-y: visible;
    }

    .legal-doc__body {
      max-width: none;
      min-width: 0;
    }

    /* Wide legal tables scroll horizontally instead of forcing the page wider. */
    .legal-doc__body table {
      display: block;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .legal-doc__section h2 {
      font-size: 22px;
    }

    .legal-doc__closer {
      margin-top: 40px;
      padding: 24px 20px;
    }

    .legal-doc__closer-line {
      font-size: 19px;
    }
  }

  @media (max-width: 768px) {
    .plans-hero-head {
      margin-bottom: 48px;
    }
  }

  @media (max-width: 430px) {
    /* Original cascade at ≤600: .legal-page polish (higher specificity) keeps
       top 36px / sides 24px; only bottom drops to 48px + tighter radius. */
    .legal-doc {
      padding-bottom: 48px;
      border-radius: var(--radius-sm);
    }

    .legal-doc__body {
      font-size: 15.5px;
      line-height: 1.65;
    }

    .legal-doc__body table {
      font-size: 13px;
    }

    .legal-doc__body th,
    .legal-doc__body td {
      padding: 8px 10px;
    }

    /* RU-only: the RU column headers/content run long enough to force the
       table past the viewport at these widths (FQ-02); RO/EN already fit,
       so fixed layout + word-wrap is scoped to RU instead of changing the
       shared table rules everyone else relies on. */
    html[lang="ru"] .legal-doc__body table {
      table-layout: fixed;
    }

    html[lang="ru"] .legal-doc__body th,
    html[lang="ru"] .legal-doc__body td {
      padding: 8px 6px;
      overflow-wrap: break-word;
    }

    .legal-doc__totop {
      right: 16px;
      bottom: 16px;
      padding: 10px 14px;
      font-size: 12px;
    }
  }
}