/*
 * Folio, the landing pages' base layer: fonts, tokens, base, buttons, the
 * masthead, the footer and the mobile contact bar. Mobile-first, RTL.
 * One display serif (Frank Ruhl Libre) for headlines and figures, one sans
 * (Assistant, the office's own face) for reading, UI and phone numbers.
 * Ink + paper + one metal (the office gold), fine rules instead of boxes.
 * Page layers: hero.css, sections.css, form.css.
 */

/* ---------- Fonts (self-hosted, Hebrew + Latin subsets per family) -------
   fontsource's Hebrew subset has no digits, Latin or ASCII punctuation, so
   each family also declares its Latin subset under the same name. */
@font-face {
  font-family: "Frank Ruhl Libre";
  src: url("fonts/frank-ruhl-libre-hebrew-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
  unicode-range:
    U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Frank Ruhl Libre";
  src: url("fonts/frank-ruhl-libre-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Assistant";
  src: url("fonts/assistant-hebrew-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range:
    U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Assistant";
  src: url("fonts/assistant-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ------------------------------------------------------- */
/* Metric-matched fallbacks: until the web fonts arrive, a system face scaled
   to their width paints the text, so lines don't re-wrap (and the page doesn't
   shift) when the fonts swap in. size-adjust was measured on the work-accidents
   page's text against Liberation Sans / Serif, which share Arial's and Times
   New Roman's widths. */
@font-face {
  font-family: "Assistant Fallback";
  src:
    local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  font-weight: 400;
  size-adjust: 86.9%;
}
@font-face {
  font-family: "Assistant Fallback";
  src:
    local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"),
    local("Arimo Bold");
  font-weight: 700;
  size-adjust: 85%;
}
@font-face {
  font-family: "Frank Ruhl Libre Fallback";
  src:
    local("Times New Roman"), local("TimesNewRomanPSMT"),
    local("Liberation Serif"), local("Tinos");
  font-weight: 400;
  size-adjust: 94.7%;
}
@font-face {
  font-family: "Frank Ruhl Libre Fallback";
  src:
    local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"),
    local("Liberation Serif Bold"), local("Tinos Bold");
  font-weight: 700;
  size-adjust: 96.5%;
}

:root {
  /* Color: ink, paper, one metal */
  --ink: #0c0b17;
  --ink-soft: #2a2838; /* hover of ink surfaces */
  --paper: #f7f3ea; /* page ground */
  --sheet: #fffdf8; /* raised sheet: the form */
  --field: #ffffff;
  --text-2: #5f594d; /* secondary text: 6.27:1 on paper, 6.83:1 on sheet */
  --gold: #e3c165; /* the office gold: a surface, or text on ink only */
  --gold-deep: #7a5c14; /* gold as text on paper: 5.63:1 */
  --gold-rule: #aa8935; /* rules and marks, never body text */
  --gold-wash: #f4e8c6; /* selected choice */
  --field-edge: #8e877a; /* input boundary: 3.56:1 on white */
  --rule: rgb(12 11 23 / 14%); /* decorative hairline */
  --rule-ink: var(--ink);
  --danger: #a3261a;
  --success: #1f6b3a;
  --whatsapp: #157a3f; /* white text: 5.40:1 */

  /* Type */
  --font-display:
    "Frank Ruhl Libre", "Frank Ruhl Libre Fallback", "David Libre",
    "Times New Roman", serif;
  --font-text:
    "Assistant", "Assistant Fallback", "Segoe UI", "Arial Hebrew", Arial,
    sans-serif;

  /* Shape: one radius scale, one shadow scale (shared with the CRM theme) */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --shadow-edge: 0 0 0 1px rgb(12 11 23 / 7%), 0 1px 2px rgb(12 11 23 / 5%);
  --shadow-sheet:
    0 0 0 1px rgb(12 11 23 / 6%), 0 1px 2px rgb(12 11 23 / 6%),
    0 8px 24px -12px rgb(12 11 23 / 18%), 0 24px 48px -32px rgb(12 11 23 / 22%);

  /* Motion: one easing set (shared with the CRM theme) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 160ms;
  --dur-hover: 150ms;

  /* Layout */
  --gutter: 20px;
  --wrap: 1200px;
  --contact-bar-h: 76px;

  /* The page's start side, for what logical properties can't say: an LTR
     value (phone, mail) aligned with the Hebrew fields around it, the
     masthead rule drawing from the start, a field's error bar. */
  --page-start: left;
  --page-start-inset: 3px;

  color-scheme: light;
}

:root[dir="rtl"] {
  --page-start: right;
  --page-start-inset: -3px;
}

/* ---------- Base ---------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

/* Below 860px the fixed contact bar covers the bottom of the screen: keep a
   focused field (and an anchor target) scrolled clear of it. */
@media (max-width: 859px) {
  html {
    scroll-padding-bottom: calc(
      var(--contact-bar-h) + env(safe-area-inset-bottom, 0px) + 8px
    );
  }
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 1.125rem; /* 18px; Assistant sets small, so this reads as ~16px */
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  /* room for the fixed mobile contact bar, including the home indicator */
  padding-bottom: calc(var(--contact-bar-h) + env(safe-area-inset-bottom, 0px));
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}

p {
  margin: 0;
}

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

a,
button,
summary,
label,
input,
textarea {
  touch-action: manipulation;
}

/* --focus-ring changes on ink surfaces (the footer), where an ink ring would
   not show. */
:focus-visible {
  outline: 2px solid var(--focus-ring, var(--ink));
  outline-offset: 3px;
  border-radius: var(--r-1);
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  /* viewport-fit=cover: keep text clear of a notch in landscape */
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* Phone numbers: one face everywhere, isolated left to right (their dir
   attribute), and selectable as content even inside a button. */
.tel {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-text);
  font-variant-numeric: lining-nums;
  white-space: nowrap;
  -webkit-user-select: text;
  user-select: text;
}

/* ---------- Icons (masks, so they take the text color) -------------------- */
.btn::before,
.header-phone::before,
.area h2::after,
.faq li a::after,
.dropzone-icon {
  --icon: none;
  content: "";
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.btn::before {
  display: none;
}

a[href^="tel:"].btn::before,
.header-phone::before {
  display: block;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

a[href^="https://wa.me"].btn::before {
  display: block;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E");
}

/* ---------- Masthead ----------------------------------------------------- */
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px 16px;
  position: relative;
}

/* The masthead rule: a heavy line over a hairline, like a broadsheet. */
.site-header .wrap::after {
  content: "";
  position: absolute;
  inset-inline: var(--gutter);
  bottom: 0;
  height: 5px;
  border-top: 2px solid var(--rule-ink);
  border-bottom: 1px solid var(--rule-ink);
}

.brand {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 12px;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.15;
}

/* The mark: an alef, the first letter of both names, in gold on ink. */
.brand::before {
  content: "א"; /* Safari < 17.4 and Firefox < 128 drop the next line */
  content: "א" / "";
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding-top: 0.06em;
  background: var(--ink);
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1;
  border-radius: var(--r-1);
}

.brand small {
  display: block;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-2);
  margin-top: 3px;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.0625rem;
  min-height: 44px;
}

.header-phone::before {
  width: 0.95em;
  height: 0.95em;
  color: var(--gold-deep);
}

@media (hover: hover) and (pointer: fine) {
  .header-phone:hover .tel {
    text-decoration: underline;
    text-decoration-color: var(--gold-rule);
  }
}

/* ---------- Buttons ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  font: inherit;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition:
    transform var(--dur-press) var(--ease-out),
    background-color var(--dur-hover) ease,
    color var(--dur-hover) ease,
    border-color var(--dur-hover) ease;
}

.btn:active {
  transform: scale(0.97);
}

/* keyboard presses (Space/Enter on a focused control) do not animate */
.btn:focus-visible:active {
  transform: none;
}

/* Primary: ink. The class names stay as the markup has them. */
.btn-gold,
.btn-navy {
  background: var(--ink);
  color: var(--paper);
}

/* Secondary: a quiet, underlined text action, never a ghost box. */
.btn-outline {
  min-height: 48px;
  padding-inline: 2px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold-rule);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.btn-whatsapp {
  background: var(--whatsapp);
  color: #fff;
}

.btn-block {
  width: 100%;
}

.btn-block:active {
  transform: scale(0.985);
}

.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

@media (hover: hover) and (pointer: fine) {
  .btn-gold:hover,
  .btn-navy:hover {
    background: var(--ink-soft);
  }
  .btn-outline:hover {
    text-decoration-color: var(--ink);
  }
  .btn-whatsapp:hover {
    background: #11683a;
  }
}

/* ---------- Footer: the colophon ----------------------------------------- */
.site-footer {
  --focus-ring: var(--gold); /* 11.23:1 on ink */
  background: var(--ink);
  color: #c9c2b2; /* 11.01:1 on ink */
  font-size: 0.9375rem;
  line-height: 1.6;
  padding-block: 40px 44px;
}

.site-footer .wrap {
  display: grid;
  gap: 6px;
}

.site-footer p:first-child {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--paper);
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgb(227 193 101 / 35%);
}

.site-footer a {
  color: var(--gold);
  text-decoration-color: rgb(227 193 101 / 45%);
  white-space: nowrap;
}

/* ---------- Mobile contact bar: the one call action on phones ------------- */
.contact-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px max(12px, env(safe-area-inset-right, 0px))
    calc(10px + env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px));
  background: rgb(247 243 234 / 82%);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow:
    0 -1px 0 rgb(12 11 23 / 8%),
    0 -12px 24px -16px rgb(12 11 23 / 25%);
}

/* Tighter than the base button so "התקשרו עכשיו" stays on one line down to
   320px: a wrapped label makes the bar taller than --contact-bar-h. */
.contact-bar .btn {
  min-height: 52px;
  width: 100%;
  padding-inline: 12px;
  white-space: nowrap;
}

/* ---------- Motion: the masthead rule draws once, from the start side ---- */
@media (prefers-reduced-motion: no-preference) {
  .site-header .wrap::after {
    transform-origin: var(--page-start);
    transition: transform 900ms var(--ease-in-out);
  }
  @starting-style {
    .site-header .wrap::after {
      transform: scaleX(0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .btn:active {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .contact-bar {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --rule: rgb(12 11 23 / 45%);
    --text-2: #3d382f;
    --field-edge: #4f4a40;
  }
  .contact-bar {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 1px solid var(--ink);
  }
}

/* ---------- Wider screens ------------------------------------------------- */
@media (min-width: 720px) {
  :root {
    --gutter: 32px;
  }
  .brand {
    font-size: 1.375rem;
  }
  .brand::before {
    width: 2.875rem;
    height: 2.875rem;
    font-size: 1.875rem;
  }
  .brand small {
    font-size: 0.875rem;
  }
}

/* On a phone the fixed contact bar carries the call; the masthead keeps the
   name and the line under it on one row each. */
@media (max-width: 519px) {
  .header-phone {
    display: none;
  }
}

@media (min-width: 860px) {
  body {
    padding-bottom: 0;
  }
  .contact-bar {
    display: none;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
  }
  body {
    font-size: 1.1875rem;
  }
  .site-header .wrap {
    padding-block: 24px 20px;
  }
  .header-phone {
    font-size: 1.1875rem;
  }
  .site-footer .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 56px;
  }
  .site-footer p:first-child {
    grid-column: 1 / -1;
  }
}