/* ============================================================
   זריז שליחויות · page-legal.css
   ארבעת המסמכים המשפטיים: terms.html, privacy.html, accessibility.html, terms-of-use.html
   נטען אחרי site.css. טוקנים בלבד: בלי צבעים, גדלים, רדיוסים או גופנים חדשים.
   הרעיון: המסמך הוא מסלול. תוכן העניינים הוא קו עם תחנות ממוספרות, והקו הירוק
   מתמלא עד הסעיף שקוראים עכשיו. כל השאר שקט: טקסט, מספרים, הרבה אוויר.
   ============================================================ */

.legal-page {
  --num-col: 2.75rem;     /* עמודת המספרים של הסעיפים: אותו רוחב בכותרות ובסעיפים, כך שהטקסט מיושר לאורך כל המסמך */
  --rail-x: var(--sp-2);  /* מרכז קו המסלול בתוכן העניינים, מצד תחילת השורה */
  --dot: 9px;
}
@media (min-width: 48rem) { .legal-page { --num-col: 3.25rem; } }

/* ---------- מסך פתיחה: פירורי לחם, כותרת, פתיח, תאריך עדכון ---------- */
.crumbs.eyebrow { margin-block: calc(-1 * var(--sp-3)) var(--sp-2); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-2); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.crumbs a { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: var(--fg-2); }
.crumbs .link::before, .crumbs .link::after { bottom: .7rem; }
.crumbs [aria-current="page"] { color: var(--fg-1); }
.crumbs__sep { color: var(--fg-3); }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--fg-1); } }

.legal-hero .page-hero__title { max-inline-size: 12em; }
.legal-hero__meta { margin-block-start: var(--space-in); color: var(--fg-2); }
.legal-hero__meta time { color: var(--fg-1); font-variant-numeric: tabular-nums; }

/* ---------- הגיליון: תוכן עניינים + מסמך ---------- */
.legal { padding-block: calc(var(--space-section) * .75) var(--space-section); }
.legal__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: var(--space-group); align-items: start;
}
.legal-toc, .legal-doc { grid-column: 1 / -1; min-inline-size: 0; }
@media (min-width: 64rem) {
  .legal-toc {
    grid-column: 1 / span 3;
    position: sticky; top: calc(var(--header-h) + var(--space-group));
  }
  .legal-doc { grid-column: 5 / -1; }
}
@media (min-width: 90rem) { .legal-doc { grid-column: 5 / span 7; } }

/* ---------- תוכן העניינים ---------- */
/* טלפון וטאבלט: מגירה נפתחת. מחשב: פתוח תמיד, דביק בצד (page-legal.js מסנכרן) */
.legal-toc__box {
  border-radius: var(--r-lg); background: var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgb(var(--paper-rgb) / .06);
}
.legal-toc__sum {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-in);
  min-block-size: var(--hit); padding: var(--sp-3) var(--sp-5);
  font-weight: var(--fw-bold); cursor: pointer; -webkit-tap-highlight-color: transparent;
  border-radius: var(--r-lg);
}
.legal-toc__sum::-webkit-details-marker { display: none; }
.legal-toc__icon { position: relative; flex: none; inline-size: 24px; block-size: 24px; }
.legal-toc__icon::before, .legal-toc__icon::after {
  content: ""; position: absolute; inset-inline: 3px; top: 11px; block-size: 2px;
  background: var(--fg-2); border-radius: 2px; transition: transform var(--dur-base) var(--ease-out);
}
.legal-toc__icon::after { transform: rotate(90deg); }
.legal-toc__box[open] .legal-toc__icon::after { transform: rotate(0deg); }
.legal-toc__scroll { padding: 0 var(--sp-4) var(--sp-4); }
@supports (interpolate-size: allow-keywords) {
  .legal-toc { interpolate-size: allow-keywords; }
  .legal-toc__box::details-content {
    block-size: 0; overflow: clip;
    transition: block-size var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete;
  }
  .legal-toc__box[open]::details-content { block-size: auto; }
}

@media (min-width: 64rem) {
  .legal-toc__box { background: none; box-shadow: none; border-radius: 0; }
  .legal-toc__sum {
    min-block-size: 0; padding: 0 0 var(--sp-3); cursor: default; pointer-events: none;
    font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-regular); color: var(--fg-3);
  }
  .legal-toc__icon { display: none; }
  .legal-toc__scroll {
    padding: 0;
    max-block-size: calc(100svh - var(--header-h) - 2 * var(--space-group) - 2.5rem);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
}

/* קו המסלול: מסילה דקה, התחנות הן הסעיפים, והמילוי הירוק מגיע עד הסעיף שקוראים */
.toc-wrap { position: relative; }
.toc__rail {
  position: absolute; inset-inline-start: calc(var(--rail-x) - 1px); top: 1.4rem; bottom: 1.4rem;
  inline-size: 2px; background: var(--line); pointer-events: none;
}
.toc__fill {
  position: absolute; inset: 0; background: var(--lime-500);
  transform-origin: 50% 0; transform: scaleY(0);
  transition: transform var(--dur-panel) var(--ease-out);
}
.toc { list-style: none; display: grid; }
.toc li { position: relative; }
.toc li::before {
  content: ""; position: absolute; z-index: 1;
  inset-inline-start: calc(var(--rail-x) - var(--dot) / 2);
  top: calc(var(--sp-3) + var(--fs-small) * var(--lh-small) / 2 - var(--dot) / 2);
  inline-size: var(--dot); block-size: var(--dot); border-radius: 50%;
  background: var(--bg-raised); box-shadow: inset 0 0 0 1.5px var(--line-control);
  transition: background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
@media (min-width: 64rem) { .toc li::before { background: var(--bg); } }
.toc li.is-past::before { background: var(--lime-500); box-shadow: none; }
.toc li.is-here::before { background: var(--lime-500); box-shadow: 0 0 0 4px rgb(var(--lime-rgb) / .2); }
.toc a {
  display: grid; grid-template-columns: 2em minmax(0, 1fr); align-items: baseline;
  padding-block: var(--sp-3); padding-inline: calc(var(--rail-x) + var(--sp-5)) var(--sp-2);
  font-size: var(--fs-small); line-height: var(--lh-small);
  color: var(--fg-2); text-decoration: none; border-radius: var(--r-xs);
  transition: color var(--dur-fast) ease;
}
.toc__n { color: var(--fg-3); font-variant-numeric: tabular-nums; }
.toc a[aria-current] { color: var(--fg-1); }
.toc a[aria-current] .toc__n { color: var(--fg-2); }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--fg-1); } }
.toc a:focus-visible { outline-offset: -2px; }

/* ---------- המסמך ---------- */
.legal-doc { display: grid; gap: 0; }
.legal-sec { padding-block: var(--space-group); }
.legal-sec:first-child { padding-block-start: 0; }
.legal-sec + .legal-sec { box-shadow: 0 -1px 0 var(--line); }
.legal-doc .legal-sec h2 {
  display: grid; grid-template-columns: var(--num-col) minmax(0, 1fr); align-items: baseline;
  max-inline-size: calc(var(--measure) + var(--num-col));
}
.legal-sec__sep { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* heading reads "1. מי ומה", not "1מי ומה" */
.legal-sec__n { font-weight: var(--fw-light); color: var(--fg-3); font-variant-numeric: tabular-nums; }

/* סעיפים ממוספרים: המספר תלוי בצד, הטקסט בעמודה אחת לאורך כל המסמך */
.legal-doc .clauses {
  list-style: none; padding: 0; display: grid; gap: var(--space-in);
  max-inline-size: calc(var(--measure) + var(--num-col));
}
.cl { display: grid; grid-template-columns: var(--num-col) minmax(0, 1fr); align-items: baseline; }
.cl__n {
  font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-3);
  font-variant-numeric: tabular-nums; unicode-bidi: isolate;
}
.cl__b { display: grid; gap: var(--sp-3); min-inline-size: 0; }
.cl__b ul { margin-block-start: var(--sp-1); }
.legal-doc > .legal-sec > ul { margin-inline-start: calc(var(--num-col) - 1.25em); max-inline-size: calc(var(--measure) + 1.25em); }   /* bullets hang in the number column, text aligns with the clauses */
.legal-doc > .legal-sec > .checks { margin-inline-start: calc(var(--num-col) - 1.75em); max-inline-size: calc(var(--measure) + 1.75em); }
.legal-doc .prose li { overflow-wrap: break-word; }
.legal-doc .prose a[data-tel] { white-space: nowrap; }

/* "מה עשיתי באתר": סימני וי קטנים (סימון ירוק מותר, כמו בעמוד הבית) */
.legal-doc .checks { list-style: none; padding-inline-start: 0; gap: var(--space-in); }
.checks li { display: grid; grid-template-columns: 1.75em minmax(0, 1fr); align-items: start; }
.checks__ico { inline-size: var(--icon-sm); block-size: var(--icon-sm); margin-block-start: .2em; color: var(--lime-500); }

.legal-doc__foot { margin-block-start: var(--space-group); padding-inline-start: var(--num-col); display: grid; gap: var(--space-in); justify-items: start; }
.legal-doc__foot p { color: var(--fg-2); }
.legal-doc__back { margin-block-start: var(--space-group); padding-inline-start: var(--num-col); }
@media (min-width: 64rem) { .legal-doc__back { display: none; } }

/* ---------- סטטי: בלי תנועה (הפחתת תנועה, חיסכון בנתונים, עצירת אנימציות) ---------- */
html.no-fx .toc__fill, html.no-fx .toc li::before, html.no-fx .legal-toc__icon::before, html.no-fx .legal-toc__icon::after { transition: none; }
html.no-fx .legal-toc__box::details-content { transition: none; }

/* ---------- צבעים מאולצים ---------- */
@media (forced-colors: active) {
  .legal-toc__box { border: 1px solid CanvasText; }
  .toc__rail { background: CanvasText; }
  .toc__fill { background: Highlight; }
  .toc li::before { border: 1px solid CanvasText; }
  .toc li.is-past::before, .toc li.is-here::before { background: Highlight; forced-color-adjust: none; }
  .toc a[aria-current] { text-decoration: underline; }
}

/* ---------- הדפסה: רק המסמך, שחור על לבן ---------- */
@media print {
  @page { margin: 18mm 16mm; }
  :root, [data-surface] {
    --bg: transparent; --bg-raised: transparent;
    --fg-1: var(--on-paper-1); --fg-2: var(--on-paper-1); --fg-3: var(--on-paper-2);
    --line: rgb(var(--ink-rgb) / .25); --line-control: rgb(var(--ink-rgb) / .5); --hover-wash: transparent;
  }
  html, body, [data-surface], .page-hero { background: none !important; color: var(--on-paper-1); }
  .site-header, .menu, .site-footer, .action-bar, .wa-float, .skip-link, .crumbs,
  .page-hero__media, .page-hero__scrim, .page-hero__route, .legal-toc, .legal-doc__back, .legal-doc__foot .btn { display: none !important; }
  .has-grain::after { display: none; }
  .wrap { inline-size: 100%; }
  .page-hero { display: block; min-block-size: 0; padding: 0 0 var(--sp-6); }
  .page-hero__in { display: block; }
  html.fx [data-words] { visibility: visible !important; }
  html.fx [data-page-hero-copy] > * { opacity: 1 !important; transform: none !important; }
  .page-sheet { margin: 0; box-shadow: none; border-radius: 0; }
  .legal { padding: 0; }
  .legal__grid { display: block; }
  .legal-sec { padding-block: var(--sp-5); }
  .legal-sec h2 { break-after: avoid; }
  .cl, .checks li, .legal-doc .prose li { break-inside: avoid; }
  .checks__ico { color: var(--on-paper-1); }
  .ph { outline-color: var(--on-paper-1); }
}