/* the footer (owner: S3) · shared by every page (src/partials/footer.html). On paper, in C's type. Self-contained: every token
   has a fallback (inner pages may not load css/c.css), and every element is set explicitly so older page styles don't leak in.
   An inner page needs only <link rel="stylesheet" href="css/footer.css">. */

.ft {
  --ft-paper: var(--paper, #EEE8DE);
  --ft-ink: var(--ink, #141210);
  --ft-ink2: var(--ink-2, #4B443C);
  --ft-ink3: #686056;          /* C's ink-3, a step darker for small text on paper (WCAG AA) */
  --ft-copper: #8A5129;        /* the same for C's copper */
  --ft-hair: rgba(20, 18, 16, .16);
  --ft-gut: var(--gut, 16px);
  --ft-text: var(--text, 'IBM Plex Sans Hebrew', 'Assistant', 'Arial Hebrew', 'Segoe UI', system-ui, sans-serif);
  --ft-mono: var(--mono, 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace);
  --ft-latin: var(--latin, 'Instrument Serif', 'Times New Roman', serif);
  --ft-ease: var(--ease, cubic-bezier(.2, .7, .1, 1));
  --ft-fs-xs: var(--fs-xs, 13px);
  --ft-fs-s: var(--fs-s, 15px);
  --ft-fs-body: var(--fs-body, 17px);
  position: relative; z-index: 2; display: block; margin: 0;
  padding: 0 var(--ft-gut) calc(26px + env(safe-area-inset-bottom));
  background: var(--ft-paper) url(../assets/paper.webp) 0 0 / 256px 256px;
  color: var(--ft-ink); font: 400 var(--ft-fs-s)/1.6 var(--ft-text); text-align: start;
}
@media (min-width: 900px) { .ft { --ft-gut: var(--gut, clamp(28px, 4.4vw, 72px)); } }
.ft *, .ft *::before, .ft *::after { box-sizing: border-box; }
.ft p, .ft h2, .ft ul, .ft ol, .ft li { margin: 0; padding: 0; }
.ft ul, .ft ol { list-style: none; }
.ft a { color: inherit; text-decoration: none; }
.ft bdi { unicode-bidi: isolate; }
.ft :focus-visible { outline: 2px solid var(--copper, #9A5B2E); outline-offset: 3px; }

.ft__in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px 24px;
  padding: 8svh 0 44px; border-top: 1px solid var(--ft-hair);
}
.ft__brand { grid-column: 1 / -1; display: grid; gap: 10px; justify-items: start; }
.ft__logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 4px 0; }
.ft__mark { font: 400 clamp(40px, 11vw, 64px)/.9 var(--ft-latin); letter-spacing: .05em; direction: ltr; color: var(--ft-ink); }
.ft__name { font: 500 var(--ft-fs-body)/1.4 var(--ft-text); color: var(--ft-ink); margin-top: 8px; }
.ft__tag { font: 400 var(--ft-fs-s)/1.6 var(--ft-text); color: var(--ft-ink2); max-width: 34ch; }
.ft__social { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px; }
.ft__social[hidden], .ft__social li[hidden] { display: none; }
.ft__social a { display: inline-flex; align-items: center; min-height: 44px; font: 500 var(--ft-fs-s)/1 var(--ft-text); }

.ft__col { min-width: 0; }
.ft__col--reach { grid-column: 1 / -1; }
/* the column heads: plain words (pass 2: no dash, no numbering) */
.ft__h { font: 500 var(--ft-fs-s)/1.3 var(--ft-text); color: var(--ft-ink2); margin-bottom: 8px; }
.ft__list { display: grid; }
.ft__a {
  display: inline-flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 11px 0 9px;
  font: 500 var(--ft-fs-s)/1.4 var(--ft-text); color: var(--ft-ink);
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 6px) / 0 1px no-repeat;
  transition: background-size .35s var(--ft-ease), color .3s;
}
/* (pass 7, QA-19) one-word links ("עבודות", "שאלות") are narrower than 44 px: a transparent hit area, 4 px each side, nothing visible moves */
.ft__a { position: relative; }
.ft__a::after { content: ""; position: absolute; top: 0; bottom: 0; left: -4px; right: -4px; }
@media (hover: hover) and (pointer: fine) { .ft__a:hover { color: var(--ft-copper); background-size: 100% 1px; } }
.ft__btn { -webkit-appearance: none; appearance: none; border: 0; border-radius: 0; margin: 0; cursor: pointer; text-align: start; background-color: transparent; }
.ft__k { font: 400 var(--ft-fs-xs)/1.4 var(--ft-text); color: var(--ft-ink3); min-width: 6.4em; }
/* (bigger text from the accessibility menu: a long e-mail wraps instead of pushing the page sideways) */
.ft__col--reach .ft__a { flex-wrap: wrap; max-width: 100%; }
.ft__col--reach bdi { min-width: 0; overflow-wrap: anywhere; }
.ft__info { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 11px 0 9px; font: 400 var(--ft-fs-s)/1.4 var(--ft-text); color: var(--ft-ink); }
.ft__col--reach .ft__list { grid-template-columns: minmax(0, 1fr); }

.ft__base {
  display: grid; gap: 8px; padding-top: 20px; border-top: 1px solid var(--ft-hair);
  font: 400 var(--ft-fs-xs)/1.65 var(--ft-text); color: var(--ft-ink2);
}
.ft__copy { color: var(--ft-ink3); }
/* the business line: its parts are left out by the build while empty (data-if); the dots go between the parts that remain */
.ft__li + .ft__li::before { content: " · "; }


@media (min-width: 720px) {
  .ft__in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft__col--reach { grid-column: auto; }
}
@media (min-width: 900px) {
  .ft__in { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); column-gap: 4vw; padding: 12svh 0 9svh; }
  .ft__brand { grid-column: auto; align-content: start; }
  .ft__a, .ft__info { min-height: 38px; padding: 8px 0 6px; }
  .ft__base { grid-template-columns: auto auto; justify-content: space-between; column-gap: 4vw; padding-bottom: 6px; }
  .ft__note { grid-column: 1; }
  .ft__copy { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}
@media (hover: none) { .ft__a:hover { background-size: 0 1px; color: var(--ft-ink); } }