/* Kneset Israel — shared styles.
   Layout model (mirrors the original Wix site):
   - Desktop (>= 1000px): content sits on a 1440px "stage" centred in the viewport. Inside a
     section, elements are positioned with --x / --y (px from the stage's top-left) and --w.
     Between 1000px and 1379px the whole <main> is zoomed down so the stage still fits.
   - Mobile (< 1000px): Wix's 320-unit mobile design. 1 unit = var(--u), so the page scales with
     the phone width (capped at 560px wide). Spacing uses --m (top margin, in units). */

:root {
  --black: #000;
  --white: #fff;
  --accent: #c2cde4;   /* light blue-grey used for italic emphasis and headings */
  --gold: #ad875f;
  --brown: #926f53;
  --cta-border: #0c4426;
  --muted: #bfbfbf;
  --footer-text: #fafafa;
  --heebo: 'Heebo', sans-serif;
  --bitter: 'Bitter', serif;
  --quicksand: 'Quicksand', sans-serif;
  --playfair: 'Playfair Display', serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--quicksand);
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, ul { margin: 0; font-weight: 400; }
a { color: inherit; }
img, video { display: block; }
.skip-link {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  background: #fff; color: #116dff; padding: 8px 16px; border-radius: 24px; z-index: 100;
  font: 14px Helvetica, Arial, sans-serif; text-decoration: none;
}
.skip-link:focus { top: 8px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Header ---------- */
.site-header { position: relative; height: 90px; background: var(--white); color: #000; z-index: 10; }
.site-header .logo {
  position: absolute; top: 18px; left: min(835px, calc(100vw - 280px));
  width: 69px; height: 58px; object-fit: cover;
}
.site-header .site-title {
  position: absolute; top: 33px; left: min(912px, calc(100vw - 203px));
  font: 22px/1.3 var(--quicksand); color: #000; text-decoration: none; direction: ltr;
}
.menu-toggle, .mobile-menu { display: none; }

/* ---------- Footer ---------- */
.site-footer { position: relative; height: 106px; background: var(--black); }
.site-footer p {
  position: absolute; top: 30px; left: calc(50% - 227px); width: 454px;
  padding-top: 16.8px; /* the empty first line of the Wix text box */
  font: 14px/1.2 var(--quicksand); color: var(--footer-text); text-align: right; direction: ltr;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { text-decoration: underline; }
.site-footer .legal-links { white-space: nowrap; }

/* ---------- Desktop stage ---------- */
.sec { position: relative; height: calc(var(--h) * 1px); }
.stage { position: absolute; inset: 0 auto 0 calc(50% - 720px); width: 1440px; }
.abs {
  position: absolute;
  left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); width: calc(var(--w) * 1px);
}
.flow { margin-top: calc(var(--d, 0) * 1px); }

@media (min-width: 1000px) and (max-width: 1139px) { main { zoom: 0.72; } }
@media (min-width: 1140px) and (max-width: 1279px) { main { zoom: 0.82; } }
@media (min-width: 1280px) and (max-width: 1379px) { main { zoom: 0.9; } }

/* ---------- Video blocks ---------- */
.video { overflow: hidden; background: #000; }
.video video { width: 100%; height: 100%; object-fit: cover; }
.mute {
  position: absolute; right: 0; bottom: 0; width: 51px; height: 44px;
  border: 0; padding: 0; background: transparent; color: #fff; cursor: pointer;
  opacity: 0; transition: opacity .2s;
}
.video:hover .mute, .mute:focus-visible { opacity: 1; }
.mute svg { width: 22px; height: 22px; filter: drop-shadow(0 0 2px rgba(0,0,0,.6)); }
.mute .on { display: none; }
.mute[aria-pressed="false"] .on { display: inline; }
.mute[aria-pressed="false"] .off { display: none; }

/* ---------- Mobile ---------- */
@media (max-width: 999px) {
  :root { --u: calc(min(100vw, 560px) / 320); }
  .wrap { position: relative; width: calc(320 * var(--u)); margin-inline: auto; }

  .site-header { height: calc(85 * var(--u)); }
  .site-header .wrap { height: 100%; }
  .site-header .logo {
    top: calc(21 * var(--u)); left: calc(68 * var(--u));
    width: calc(43 * var(--u)); height: calc(43 * var(--u));
  }
  .site-header .site-title { top: calc(30 * var(--u)); left: calc(117 * var(--u)); font-size: calc(19 * var(--u)); }

  .menu-toggle, .menu-close {
    display: block; position: absolute; top: calc(15 * var(--u)); left: calc(250 * var(--u));
    width: calc(50 * var(--u)); height: calc(50 * var(--u));
    border: 0; padding: 0; cursor: pointer;
  }
  .menu-toggle { background: transparent; }
  .menu-toggle span {
    position: absolute; left: calc(14 * var(--u)); width: calc(22 * var(--u)); height: calc(2 * var(--u));
    background: #000;
  }
  .menu-toggle span:nth-child(1) { top: calc(14 * var(--u)); }
  .menu-toggle span:nth-child(2) { top: calc(24 * var(--u)); }
  .menu-toggle span:nth-child(3) { top: calc(34 * var(--u)); }

  .mobile-menu { position: fixed; inset: 0; background: #000; z-index: 50; }
  .mobile-menu.open { display: block; }
  .menu-close { background: #fff; }
  .menu-close::before, .menu-close::after {
    content: ''; position: absolute; left: calc(16.5 * var(--u)); top: calc(24.5 * var(--u));
    width: calc(17 * var(--u)); height: calc(1.2 * var(--u)); background: #000; transform: rotate(45deg);
  }
  .menu-close::after { transform: rotate(-45deg); }
  .mobile-menu .wrap { padding-top: calc(57 * var(--u)); }
  .mobile-menu ul { list-style: none; padding: 0; margin: 0 auto; width: calc(188 * var(--u)); }
  .mobile-menu li { border-bottom: 1px solid #2f2f2f; }
  .mobile-menu a {
    display: flex; align-items: center; justify-content: center; height: calc(57 * var(--u));
    font: calc(16 * var(--u)) var(--quicksand); color: #fff; text-decoration: none;
  }
  .mobile-menu a[aria-current="page"] { color: var(--muted); }

  .site-footer { height: calc(102 * var(--u)); } /* 85 on Wix; +17 for the line of legal links */
  .site-footer p {
    left: 0; right: 0; width: auto; top: calc(20 * var(--u)); padding-top: calc(18 * var(--u));
    font-size: calc(15 * var(--u)); text-align: center; /* short text: centre instead of touching the edge */
  }
  .site-footer .sep { display: none; }
  .site-footer .legal-links { display: block; margin-top: calc(6 * var(--u)); }

  /* desktop positioning switches off; sections flow */
  .sec { height: auto; }
  .stage { position: relative; inset: auto; width: calc(320 * var(--u)); margin-inline: auto; }
  .abs { position: relative; left: auto; top: auto; width: auto; }
  .flow, .abs { margin-top: calc(var(--m, 0) * var(--u)); }
  .mute { width: calc(51 * var(--u)); height: calc(44 * var(--u)); }
}