/* מחסנים להשכרה בעמק חפר — the skeleton all three designs share.
   Structure, the form's mechanics and accessibility live here; every colour,
   face, radius and the hero's arrangement belong to theme-1/2/3.css.
   Built by scripts/shahar-site/build.mjs. */

@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/heebo-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/heebo-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC,
    U+2122, U+2212;
}

:root {
  --bar-h: 4.25rem;
  --wrap: 72rem;
  --gutter: 1rem;
  --font: "Heebo", "Arial", sans-serif;
  --font-display: var(--font);
  --radius: 1rem;
  --radius-sm: 0.75rem;
  --wa: #1faa59;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  padding-bottom: var(--bar-h);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3,
p,
ul,
figure,
fieldset {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
fieldset {
  border: 0;
  min-width: 0;
}
a {
  color: inherit;
}
svg {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.12;
  text-wrap: balance;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  top: -10rem;
  inset-inline-start: 1rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 0.5rem;
  font-weight: 700;
}
.skip:focus {
  top: 1rem;
}
:focus-visible {
  outline: 3px solid var(--focus, var(--accent));
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── header ─────────────────────────────────────────────── */
.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--top-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3.75rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  min-width: 0;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-sm);
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-text strong {
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
}
.brand-text em {
  font-style: normal;
  font-size: 0.8rem;
  color: var(--muted);
}
.top-call {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}

/* ── buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--btn-radius, 999px);
  font: inherit;
  font-weight: 800;
  font-size: 1.02rem;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    filter 0.15s ease,
    background 0.15s ease;
}
.btn:active {
  transform: scale(0.98);
}
.btn-primary {
  background: var(--accent-fill, var(--accent));
  color: var(--on-accent);
  box-shadow: var(--btn-shadow, none);
}
.btn-primary:hover {
  filter: brightness(1.08);
}
.btn-primary:disabled {
  cursor: progress;
  filter: saturate(0.6) brightness(0.9);
}
.btn-ghost {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink);
}
.btn-wa {
  background: var(--wa);
  color: #fff;
}

/* ── hero ───────────────────────────────────────────────── */
.hero {
  position: relative;
}
.hero-in {
  position: relative;
  display: grid;
  gap: 1.25rem;
  padding-block: 1.25rem 2rem;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-ink, var(--accent));
}
h1 {
  margin-top: 0.5rem;
  font-size: clamp(2.1rem, 8.4vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.01em;
}
h1 .accent {
  color: var(--accent-ink, var(--accent));
  display: block;
}
.lede {
  margin-top: 0.75rem;
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 34rem;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--chip-bg, transparent);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}
.chips svg {
  color: var(--accent-ink, var(--accent));
  width: 1em;
  height: 1em;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── form ───────────────────────────────────────────────── */
.form-card {
  background: var(--card);
  color: var(--card-ink, var(--ink));
  border: 1px solid var(--card-line, var(--line));
  border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: var(--card-shadow, none);
  min-width: 0;
}
.lead-form {
  display: grid;
  gap: 0.65rem;
}
.form-title {
  font-size: 1.3rem;
  font-weight: 800;
}
.form-lede {
  font-size: 0.92rem;
  color: var(--card-muted, var(--muted));
  margin-top: -0.25rem;
}
.field input {
  width: 100%;
  height: 3rem;
  padding: 0 0.95rem;
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius, var(--radius-sm));
  background: var(--field-bg);
  color: var(--field-ink);
  font: inherit;
  font-size: 1rem;
}
.field input::placeholder {
  color: var(--field-ph);
  opacity: 1;
}
.field input[dir="ltr"] {
  text-align: right;
}
.field input:focus {
  outline: 2px solid var(--focus, var(--accent));
  outline-offset: 1px;
  border-color: transparent;
}
.field input[aria-invalid="true"] {
  border-color: var(--danger);
}
.field-error,
.form-fail {
  margin-top: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--danger);
}
.sizes-pick legend {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.sizes-pick legend span {
  font-weight: 400;
  color: var(--card-muted, var(--muted));
}
.sizes-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}
.size-chip {
  position: relative;
  display: block;
}
.size-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.size-chip span {
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius, var(--radius-sm));
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.size-chip input:checked + span {
  background: var(--accent-fill, var(--accent));
  border-color: transparent;
  color: var(--on-accent);
}
.size-chip input:focus-visible + span {
  outline: 3px solid var(--focus, var(--accent));
  outline-offset: 2px;
}
/* The trap. Off-screen on the BLOCK axis: on an RTL page an inline offset adds
   ten thousand pixels of horizontal scroll. */
.hp {
  position: absolute;
  top: -9999px;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
.lead-form .btn {
  width: 100%;
}
.consent {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--card-muted, var(--muted));
  text-align: center;
}
.thanks {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: 1rem 0.25rem;
  text-align: center;
}
.thanks[hidden],
.lead-form[hidden] {
  display: none;
}
.thanks-mark {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--accent-fill, var(--accent));
  color: var(--on-accent);
}
.thanks h2 {
  font-size: 1.5rem;
}
.thanks p {
  color: var(--card-muted, var(--muted));
}
.thanks-actions,
.loc-actions,
.closing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 0.4rem;
}

/* ── sections ───────────────────────────────────────────── */
.band {
  padding-block: 3rem;
}
.sec-head {
  max-width: 40rem;
  margin-bottom: 1.5rem;
}
.kicker {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--accent-ink, var(--accent));
  margin-bottom: 0.35rem;
}
.band h2 {
  font-size: clamp(1.6rem, 5.6vw, 2.5rem);
  font-weight: 900;
}
.sec-head > p:last-child {
  margin-top: 0.6rem;
  color: var(--muted);
}

.size-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.size-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem;
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 0;
}
.size-num {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--font-display);
  line-height: 1;
}
.size-num span {
  font-size: clamp(2rem, 9vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.size-num small {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--muted);
}
.size-line {
  font-size: 0.9rem;
  color: var(--muted);
  flex: 1;
}
.size-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--accent-ink, var(--accent));
  text-decoration: none;
}

.feat-grid {
  display: grid;
  gap: 0.75rem;
}
.feat-grid li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.85rem;
  align-items: start;
  padding: 1rem;
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.feat-ic {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  background: var(--ic-bg);
  color: var(--ic-ink, var(--accent-ink, var(--accent)));
}
.feat-ic svg {
  width: 1.5rem;
  height: 1.5rem;
}
.feat-grid h3 {
  font-size: 1.08rem;
  font-weight: 800;
}
.feat-grid p {
  font-size: 0.93rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.gal-grid {
  display: grid;
  gap: 0.75rem;
}
.gal-grid figure {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--tile);
}
.gal-grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.loc-in {
  display: grid;
  gap: 1.25rem;
}
.loc-copy p:not(.kicker) {
  margin-top: 0.6rem;
  color: var(--muted);
}
.loc-actions {
  justify-content: flex-start;
  margin-top: 1rem;
}
.loc-map {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  min-height: 18rem;
  background: var(--tile);
}
.loc-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 18rem;
  border: 0;
}

.faq-list {
  display: grid;
  gap: 0.5rem;
}
.faq-list details {
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 1rem;
}
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--accent-ink, var(--accent));
  line-height: 1;
}
.faq-list details[open] summary::after {
  content: "−";
}
.faq-list details p {
  padding-bottom: 1rem;
  color: var(--muted);
}

.closing-in {
  display: grid;
  gap: 1.25rem;
}
.closing-copy p {
  margin-top: 0.6rem;
  color: var(--closing-muted, var(--muted));
}
.closing-actions {
  justify-content: flex-start;
  margin-top: 1rem;
}

.foot {
  padding-block: 1.5rem 2rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--muted);
}
.foot-in {
  display: grid;
  gap: 0.35rem;
  text-align: center;
}
.foot strong {
  color: var(--ink);
}
.foot-credit {
  font-size: 0.75rem;
  opacity: 0.75;
}

/* ── the bar: always there, never hides ─────────────────── */
.bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: var(--bar-h);
  padding: 0.6rem var(--gutter);
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--bar-bg);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.bar-main {
  flex: 1;
  min-height: 3rem;
}
.bar-ic {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--btn-radius, 999px);
  color: var(--ink);
}
.bar-ic svg {
  width: 1.4rem;
  height: 1.4rem;
}
.bar-wa {
  background: var(--wa);
  border-color: transparent;
  color: #fff;
}
.lead-form .btn,
.thanks {
  scroll-margin-bottom: calc(var(--bar-h) + 1rem);
}

/* ── the two floating buttons, and the form they open ──────
   Owner, 13/10/2026: a WhatsApp button that follows the visitor on the LEFT, a
   round envelope on the RIGHT that opens the form, and the bar that leads to it.
   Both sit above the bar, and both step aside while a form field has focus, so
   a keyboard on a phone never leaves them lying on top of the field. */
.fab {
  position: fixed;
  bottom: calc(var(--bar-h) + 0.85rem + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.55);
  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
}
.fab:hover {
  transform: translateY(-2px);
}
.fab svg {
  width: 1.7rem;
  height: 1.7rem;
}
/* WhatsApp: round, WhatsApp's own green, with a soft ring that pulses outward —
   the same button the agency's site carries (owner, 13/10/2026: «כפתור עגול
   מהבהב כמו באתר אצלנו»). Round in EVERY design, the square one included. */
.fab-wa {
  left: var(--gutter);
  background: #25d366;
  color: #fff;
  border-radius: 50%;
}
.fab-wa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: #25d366;
  animation: fab-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes fab-ping {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  75%,
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}
.fab-mail {
  right: var(--gutter);
  border-radius: 50%;
  background: var(--accent-fill, var(--accent));
  color: var(--on-accent);
}
body:has(.lead-form input:focus) .fab {
  opacity: 0;
  pointer-events: none;
}
/* On a phone the first form fills the first screen, and two round buttons in its
   corners lay on top of the fields (measured at 360 and 390 in design 3). So on
   a phone they appear once the visitor has scrolled past that form; until then
   the bar under it carries WhatsApp and the phone. */
@media (max-width: 899px) {
  .bar-long {
    display: none;
  }
  body.first-form-in-view .fab {
    opacity: 0;
    pointer-events: none;
  }
}

.lead-dialog {
  width: min(100% - 2rem, 28rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  overflow: visible;
}
.lead-dialog::backdrop {
  background: rgba(8, 10, 16, 0.72);
  backdrop-filter: blur(3px);
}
.lead-dialog .form-card {
  padding: 1.5rem 1.25rem 1.25rem;
  background: var(--dialog-card, var(--card));
  backdrop-filter: none;
}
.dialog-close {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--card-ink, var(--ink));
  cursor: pointer;
}

/* ── wider screens ──────────────────────────────────────── */
@media (min-width: 640px) {
  :root {
    --gutter: 1.5rem;
  }
  .feat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gal-a {
    grid-column: 1 / -1;
  }
  .gal-a img {
    aspect-ratio: 21 / 9;
  }
}
@media (min-width: 900px) {
  /* The bar stays on a desktop too (owner, 13/10/2026: «כפתור למטה כמו באתר
     אצלנו שמעביר לטופס»): one centred button, no icons beside it. */
  .bar {
    justify-content: center;
  }
  .bar-main {
    flex: 0 1 30rem;
  }
  .bar .bar-ic {
    display: none;
  }
  .band {
    padding-block: 4.5rem;
  }
  .hero-in {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 2.5rem;
    padding-block: 3rem 3.5rem;
  }
  .form-card {
    padding: 1.5rem;
  }
  .size-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .feat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .feat-grid li {
    grid-template-columns: 1fr;
    row-gap: 0.6rem;
  }
  .feat-ic {
    grid-row: auto;
  }
  .gal-grid {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .gal-a {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .gal-a img,
  .gal-grid img {
    aspect-ratio: auto;
  }
  .gal-grid {
    height: 30rem;
  }
  .loc-in,
  .closing-in,
  .faq-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 3rem;
  }
  .faq-in {
    align-items: start;
  }
  .loc-map,
  .loc-map iframe {
    min-height: 24rem;
  }
}

/* ── wide and very wide screens ─────────────────────────────
   Owner, 13/10/2026, on a 2048px window: «זה לא נראה טוב, צר מידי». The content
   column was 72rem at every width, i.e. little over half of his screen. From
   1440px the column widens, and above 1920px the ROOT font size grows with the
   window (capped by its height too, so the form stays on the first screen), so
   type, spacing and the column keep their proportions on a 2560 or a 4K screen.
   The same rule the agency's site uses; everything here is in rem for it. */
@media (min-width: 1440px) {
  :root {
    --wrap: 84rem;
    --gutter: 2.5rem;
  }
  .hero-in {
    gap: 4rem;
  }
  h1 {
    font-size: 4.6rem;
  }
  .lede {
    font-size: 1.25rem;
    max-width: 40rem;
  }
  .band h2 {
    font-size: 2.9rem;
  }
  .gal-grid {
    height: 36rem;
  }
}
@media (min-width: 1700px) {
  :root {
    --wrap: 96rem;
  }
}
@media screen and (min-width: 1921px) {
  html {
    font-size: clamp(100%, min(100vw / 120, 100vh / 56), 200%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
    animation: none !important;
  }
  .fab-wa::before {
    display: none;
  }
}

/* ── phones: the first field is on the first screen ───────
   Measured by scripts/shahar-site/check.mjs at 360×640, 390×664 and 412×785
   (a real phone window, bars showing). The chips repeat the sentence above them
   and the form's sub-line repeats its heading, so on a phone both give way. */
@media (max-width: 639px) {
  .hero .chips,
  .hero-form .form-lede {
    display: none;
  }
  .lede {
    font-size: 1rem;
  }
}