/* Israel Canada, the legal pages: terms.html, privacy.html, accessibility.html (Ori, 27.10; built by
   tools/build-legal.py from Israel Canada's own texts). The dock's light bar, an ink header whose tabs sit on
   the accent rule like the hero's "פרויקטים" tab, an index that follows the reading, and the site's footer.
   Loaded after main.css, menu.css and responsive.css; its phone rules are at the end. */

html { scroll-padding-top: calc(var(--dock-h) + 32px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* the skip link's style is in main.css (the homepage has one too since 2.11) */

/* ───────────── Bar ───────────── */
.lbar {
  position: sticky; top: 0; z-index: 50; height: var(--dock-h);
  background: rgba(255, 255, 255, .86); box-shadow: 0 1px 0 var(--border);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
}
.lbar__inner { height: 100%; padding-inline: var(--edge); display: flex; align-items: center; justify-content: space-between; }
.lbar__brand { display: flex; align-items: center; gap: 16px; }
.lbar__brand .round { width: 44px; height: 44px; border: 1px solid var(--border); }
.lbar__brand .round:hover { background: var(--secondary-hover); }
.lbar__logo { display: block; color: var(--ink); }
.lbar__logo svg { width: 160px; height: 16.82px; overflow: visible; }
.lbar__actions { display: flex; align-items: center; gap: 8px; }
.lbar__actions .pill { height: 44px; }
.lbar__actions .round { width: 44px; height: 44px; } /* WhatsApp's icon (v4) */

/* ───────────── Header ───────────── */
.lhero { position: relative; background: var(--ink); color: #fff; padding-top: 88px; }
.lhero::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: var(--accent); }
.lhero .eyebrow .i { --sw: 1.5; }
.lhero__title { margin-top: 20px; font-weight: 400; font-size: 72px; line-height: 80px; letter-spacing: -.01em; }
.lhero__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; color: var(--on-dark-muted); }
.lhero__sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .32); }
.lhero__tabs { display: flex; gap: 8px; margin-top: 56px; }
.ltab {
  display: inline-flex; align-items: center; height: 52px; padding-inline: 24px; border-radius: 12px 12px 0 0;
  background: rgba(255, 255, 255, .08); color: var(--on-dark-muted);
  transition: background-color var(--d-base) var(--ease-standard), color var(--d-base) var(--ease-standard), height var(--d-slow) var(--ease-out);
}
.ltab:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.ltab[aria-current='page'] { background: var(--accent); color: #fff; }

/* the header rises in */
.js .lhero .wrap > * { opacity: 0; transform: translateY(16px); animation: lhero-in 900ms var(--ease-out) forwards; }
.js .lhero .wrap > :nth-child(2) { animation-delay: 80ms; }
.js .lhero .wrap > :nth-child(3) { animation-delay: 160ms; }
.js .lhero .wrap > :nth-child(4) { animation-delay: 240ms; }
@keyframes lhero-in { to { opacity: 1; transform: none; } }

/* ───────────── The document and its index ───────────── */
.legal { display: grid; grid-template-columns: 300px minmax(0, 784px); gap: 112px; padding-block: 88px 136px; }

.ltoc { position: sticky; top: calc(var(--dock-h) + 40px); align-self: start; max-height: calc(100vh - var(--dock-h) - 80px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.ltoc summary { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--accent); list-style: none; pointer-events: none; }
.ltoc summary::-webkit-details-marker { display: none; }
.ltoc__chev { display: none; margin-inline-start: auto; transition: transform var(--d-slow) var(--ease-out); }
.ltoc ol { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--border); }
.ltoc a {
  display: flex; gap: 8px; padding: 7px 16px; margin-inline-start: -1px; border-inline-start: 2px solid transparent;
  font-size: 14px; line-height: 20px; color: var(--muted-fg);
  transition: color var(--d-base) var(--ease-standard), border-color var(--d-base) var(--ease-standard);
}
.ltoc a:hover { color: var(--ink); }
.ltoc a[aria-current='true'] { color: var(--ink); border-color: var(--accent); font-weight: 500; }
.ltoc__num { flex: none; min-width: 20px; color: var(--accent); font-variant-numeric: tabular-nums; }

.ldoc { min-width: 0; font-size: 18px; line-height: 32px; color: #2e2e2e; }
.ldoc:focus { outline: none; }
.ldoc > :first-child { margin-top: 0; }
.ldoc p { margin-top: 18px; }
.ldoc h2 {
  display: flex; gap: 12px; margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--border);
  font-weight: 400; font-size: 28px; line-height: 36px; color: var(--ink);
}
.ldoc > h2:first-child { padding-top: 0; border-top: 0; }
.ldoc__num { flex: none; color: var(--accent); font-variant-numeric: tabular-nums; }
.ldoc h3 { margin-top: 40px; font-weight: 500; font-size: 21px; line-height: 30px; color: var(--ink); }
.ldoc h4 { margin-top: 32px; font-weight: 500; font-size: 18px; line-height: 28px; color: var(--ink); }
.ldoc h5 { margin-top: 24px; font-weight: 500; font-size: 17px; line-height: 26px; color: var(--ink); }
/* a small subhead straight under a section is an h3 for the outline (no h2 to h4 jump), in the h4's size (build-legal.py) */
.ldoc h3.ldoc__h4 { margin-top: 32px; font-size: 18px; line-height: 28px; }
.ldoc h2 + p, .ldoc h3 + p, .ldoc h4 + p, .ldoc h5 + p { margin-top: 12px; }
.ldoc strong { font-weight: 500; color: var(--ink); }
.ldoc em { font-style: normal; } /* Simpler Pro has no italic; a slanted Hebrew face would be faked */
.ldoc a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; transition: color var(--d-base) var(--ease-standard); }
.ldoc a:hover { color: var(--accent-hover); }
.ldoc ul { display: grid; gap: 10px; margin-top: 14px; }
.ldoc li { position: relative; padding-inline-start: 28px; }
.ldoc li::before { content: ''; position: absolute; inset-inline-start: 4px; top: 13px; width: 6px; height: 6px; background: var(--accent); }
.ldoc li ul { margin-top: 10px; }
.ldoc li li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
.ldoc li.is-bare::before { display: none; }
.legal__note {
  margin-top: 28px; padding: 28px 32px; border-radius: 16px; border-inline-start: 4px solid var(--accent);
  background: var(--accent-subtle); color: var(--ink);
}
.legal__note-title { font-weight: 500; color: var(--accent-subtle-fg); }
.legal__note > p:first-child { margin-top: 0; }

/* no bottom bar here (the homepage's phones keep room for it) */
.legal-page .footer { padding-bottom: 0; }

@media (max-width: 1599px) {
  .legal { grid-template-columns: 260px minmax(0, 760px); gap: 72px; }
}
@media (max-width: 1279px) {
  .legal { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; }
  .lhero__title { font-size: 60px; line-height: 68px; }
}

/* ───────────── Phones and tablets ───────────── */
@media (max-width: 1023px) {
  .lbar__inner { padding-inline: max(12px, var(--safe-x)); }
  .lbar__brand { gap: 10px; }
  .lbar__logo svg { width: 128px; height: 13.45px; }
  .lbar__actions .pill { width: 44px; padding: 0; }
  .lbar__actions .pill span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lhero { padding-top: 48px; }
  .lhero__title { margin-top: 12px; font-size: 40px; line-height: 48px; }
  .lhero__meta { margin-top: 10px; font-size: 14px; line-height: 20px; gap: 10px; }
  .lhero__tabs { margin-top: 32px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .lhero__tabs::-webkit-scrollbar { display: none; }
  .ltab { flex: none; height: 44px; padding-inline: 16px; font-size: 14px; }
  .legal { display: block; padding-block: 24px 80px; }
  .ltoc { position: static; max-height: none; overflow: visible; margin-bottom: 32px; border: 1px solid var(--border); border-radius: 16px; }
  .ltoc summary { pointer-events: auto; cursor: pointer; margin: 0; height: 52px; padding-inline: 16px; }
  .ltoc__chev { display: block; color: var(--ink); }
  .ltoc details[open] .ltoc__chev { transform: rotate(180deg); }
  .ltoc ol { border: 0; border-top: 1px solid var(--border); padding-block: 8px; }
  .ltoc a { border: 0; margin: 0; padding: 9px 16px; }
  .ltoc a[aria-current='true'] { font-weight: 400; color: var(--muted-fg); }
  .ldoc { font-size: 17px; line-height: 30px; }
  .ldoc h2 { margin-top: 48px; padding-top: 24px; font-size: 22px; line-height: 30px; gap: 8px; }
  .ldoc h3 { margin-top: 32px; font-size: 19px; line-height: 28px; }
  .ldoc li { padding-inline-start: 22px; }
  .ldoc li::before { inset-inline-start: 2px; top: 12px; }
  .legal__note { padding: 20px; }
  .legal-page .footer__base { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .js .lhero .wrap > * { animation: none; opacity: 1; transform: none; }
}