/* ============================================================================
   Ohr Chabad - Sukkot in Yatir 2026
   Tokens match the Elementor global kit from ohrchabad.com so this page reads
   as part of the same site.
   ========================================================================== */

:root {
  --black:   #10151D;
  --charcoal:#333231;
  --grey:    #53504C;
  --gold:    #A4832A;
  --gold-lo: #C9A94A;
  --cream:   #E8E4DA;
  --offwhite:#F5F3EE;
  --white:   #FFFFFF;
  --danger:  #9B2C2C;
  --ok:      #2F6B4F;

  --radius: 3px;
  --header-h: 64px;
  --maxw: 1180px;

  --serif:  'Cormorant', Georgia, serif;
  --sans:   'Poppins', system-ui, sans-serif;
  --body:   'Quicksand', system-ui, sans-serif;

  --shadow-sm: 0 1px 3px rgba(16,21,29,.08);
  --shadow-md: 0 8px 30px rgba(16,21,29,.12);
  --shadow-lg: 0 24px 60px rgba(16,21,29,.18);
}

/* Hebrew and Ukrainian: Cormorant/Poppins/Quicksand have no Hebrew or Cyrillic
   coverage, so those languages fall back to Rubik, which has all three scripts
   and holds the same light, airy weight as the Latin stack. */
html[lang="he"], html[lang="uk"] {
  --serif: 'Rubik', system-ui, sans-serif;
  --sans:  'Rubik', system-ui, sans-serif;
  --body:  'Rubik', system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--grey);
  background: var(--offwhite);
  overflow-x: hidden;
}

h1, h2, h3, h4 { color: var(--black); margin: 0 0 .5em; }
h1 { font-family: var(--serif); font-weight: 100; font-size: clamp(2.6rem, 9vw, 5.2rem); text-transform: uppercase; letter-spacing: .02em; line-height: 1.02; }
h2 { font-family: var(--serif); font-weight: 200; font-size: clamp(1.9rem, 5vw, 3rem); text-transform: uppercase; letter-spacing: .03em; }
h3 { font-family: var(--sans); font-weight: 200; font-size: clamp(1.15rem, 3vw, 1.6rem); text-transform: uppercase; letter-spacing: .08em; }
p { margin: 0 0 20px; }
a { color: var(--gold); text-decoration: none; transition: color .2s; }
a:hover { color: var(--black); }
img, video { max-width: 100%; display: block; }

.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.section { padding: clamp(3.5rem, 9vw, 7rem) 0; }
.section--cream { background: var(--cream); }
.section--dark  { background: var(--black); color: var(--cream); }
.section--dark h2, .section--dark h3 { color: var(--white); }

.eyebrow {
  font-family: var(--sans); font-weight: 300; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .32em; color: var(--gold);
  margin: 0 0 1rem;
}

.diamond { width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); margin: 1.5rem auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-weight: 300; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .14em;
  padding: 1rem 2.25rem; min-height: 48px;
  background: var(--gold); color: var(--white);
  border: 1px solid var(--gold); border-radius: var(--radius);
  cursor: pointer; transition: background .25s, color .25s, transform .1s;
}
.btn:hover { background: transparent; color: var(--gold); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--gold); }
.btn--ghost:hover { background: var(--gold); color: var(--white); }
.btn--block { width: 100%; }
.btn--lg { padding: 1.15rem 3rem; font-size: .95rem; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}

/* ---------- Header ---------- */
.hdr {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--cream);
  backdrop-filter: blur(8px);
}
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(100% - 2rem, var(--maxw)); margin-inline: auto; }
.hdr__brand { font-family: var(--serif); font-weight: 300; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .12em; color: var(--black); }
.hdr__nav { display: none; gap: 2rem; }
@media (min-width: 880px) { .hdr__nav { display: flex; } }
.hdr__link { font-family: var(--sans); font-weight: 300; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--grey); }
.hdr__link:hover { color: var(--gold); }
.hdr__right { display: flex; align-items: center; gap: .75rem; }

/* At 375px the brand + language switcher + CTA do not fit and the button gets
   clipped off the edge. The hero CTA sits right below the fold anyway, so drop
   the header one on narrow screens and keep the language switcher, which has
   no duplicate elsewhere. */
@media (max-width: 560px) {
  .hdr__right > .btn { display: none; }
  .hdr__brand { font-size: 1.05rem; letter-spacing: .08em; }
}

/* Language switcher */
.lang { display: flex; border: 1px solid var(--cream); border-radius: var(--radius); overflow: hidden; }
.lang__btn {
  font-family: var(--sans); font-size: .7rem; font-weight: 300; letter-spacing: .1em;
  text-transform: uppercase; padding: .5rem .7rem; min-height: 36px;
  background: transparent; color: var(--grey); border: 0; cursor: pointer; transition: background .2s, color .2s;
}
.lang__btn:hover { background: var(--cream); }
.lang__btn.is-active { background: var(--gold); color: var(--white); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 88vh; display: grid; place-items: center; text-align: center; margin-top: var(--header-h); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(232,228,218,.78), rgba(232,228,218,.58) 45%, rgba(232,228,218,.88)); }
.hero__in { position: relative; z-index: 1; padding: 4rem 1.25rem; }
.hero h1 { color: var(--black); text-shadow: 0 2px 24px rgba(245,243,238,.95); }
/* Gold on the light overlay clears ~4:1 at best — too thin for 12px letter-spaced
   caps. Darken it here only; the gold stays as-is everywhere else. */
.hero .eyebrow { color: #6E5716; text-shadow: 0 1px 12px rgba(245,243,238,.95); }
.hero__dates { text-shadow: 0 1px 12px rgba(245,243,238,.95); }
.hero__dates { font-family: var(--sans); font-weight: 300; font-size: clamp(.85rem, 2.4vw, 1.05rem); text-transform: uppercase; letter-spacing: .16em; color: var(--charcoal); margin: 1.25rem 0 2.25rem; }

.hero__place {
  font-family: var(--sans); font-weight: 300; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .2em; color: var(--charcoal);
  margin: -1.25rem 0 2.25rem; text-shadow: 0 1px 12px rgba(245,243,238,.95);
}

/* ---------- "What's different this year" ----------
   Deliberately loud. Returning families booked in 2025 expecting showers,
   rentable tents and included jeep rides; none of that is true now. */
.notice {
  background: #FFF8E5; border: 1px solid #E8D5A0;
  border-inline-start: 4px solid var(--gold);
  border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem);
}
.notice__title {
  font-family: var(--sans); font-weight: 300; font-size: clamp(1rem, 2.6vw, 1.25rem);
  text-transform: uppercase; letter-spacing: .12em; color: #6E5716; margin: 0 0 .6rem;
}
.notice__lead { color: var(--charcoal); font-weight: 600; margin-bottom: 1rem; }
.notice__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.notice__list li { position: relative; padding-inline-start: 1.6rem; color: var(--charcoal); }
.notice__list li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .55em;
  width: 6px; height: 6px; background: var(--gold); border-radius: 50%;
}

/* ---------- Feature list ---------- */
.feats { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
@media (min-width: 720px) { .feats { grid-template-columns: 1fr 1fr; gap: .9rem 2.5rem; } }
.feats li { position: relative; padding-inline-start: 1.9rem; }
.feats li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .62em;
  width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg);
}

/* ---------- Media strip ---------- */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.strip figure { margin: 0; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius); background: var(--cream); }
.strip img, .strip video { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.strip figure:hover img, .strip figure:hover video { transform: scale(1.04); }

/* ---------- Booking card ---------- */
.book { display: grid; gap: 2rem; }
@media (min-width: 960px) { .book { grid-template-columns: 1fr 380px; align-items: start; } }

.card { background: var(--white); border: 1px solid var(--cream); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow-sm); }
.card + .card { margin-top: 1.25rem; }
.card__title { font-family: var(--sans); font-weight: 300; font-size: .8rem; text-transform: uppercase; letter-spacing: .16em; color: var(--gold); margin: 0 0 1.25rem; }

/* Ticket rows */
.tick { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--offwhite); }
.tick:last-child { border-bottom: 0; }
.tick__label { font-weight: 500; color: var(--black); }
.tick__meta { display: block; font-size: .82rem; color: var(--grey); font-weight: 400; }
.tick__price { font-family: var(--sans); font-weight: 300; white-space: nowrap; color: var(--charcoal); }

/* Quantity stepper - 44px targets, usable with one thumb in a field */
.qty { display: flex; align-items: center; gap: .25rem; }
.qty__btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  font-size: 1.2rem; line-height: 1; color: var(--charcoal);
  background: var(--offwhite); border: 1px solid var(--cream); border-radius: var(--radius);
  cursor: pointer; transition: background .15s;
}
.qty__btn:hover:not(:disabled) { background: var(--cream); }
.qty__btn:disabled { opacity: .35; cursor: not-allowed; }
.qty__val { width: 40px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--black); }

/* Fields */
.field { margin-bottom: 1.1rem; }
.field__label { display: block; font-family: var(--sans); font-weight: 300; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--grey); margin-bottom: .45rem; }
.field__hint { font-size: .8rem; color: var(--grey); margin-top: .35rem; }
.input, .select, .textarea {
  width: 100%; font-family: var(--body); font-size: 16px; /* 16px stops iOS zoom-on-focus */
  color: var(--black); background: var(--white);
  padding: .8rem .9rem; min-height: 48px;
  border: 1px solid var(--cream); border-radius: var(--radius);
  transition: border-color .2s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--gold); outline: none; }
.textarea { min-height: 88px; resize: vertical; }
.row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .row--2 { grid-template-columns: 1fr 1fr; } }

/* Cardknox iFields iframes must be styled from the outside - the input itself
   lives in a cross-origin frame, so we style the frame box to match .input. */
.ifield {
  width: 100%; height: 48px; display: block;
  border: 1px solid var(--cream); border-radius: var(--radius);
  background: var(--white);
}
.ifield.ifields-focused { border-color: var(--gold); }
.ifield.ifields-error   { border-color: var(--danger); }

/* Summary */
.sum { position: sticky; top: calc(var(--header-h) + 1rem); }
.sum__line { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; font-size: .92rem; }
.sum__line--discount { color: var(--ok); font-weight: 600; }
.sum__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--cream); }
.sum__total strong { font-family: var(--sans); font-weight: 400; font-size: 1.6rem; color: var(--black); }
.sum__empty { color: var(--grey); font-size: .9rem; font-style: italic; }

.badge { display: inline-block; font-family: var(--sans); font-size: .7rem; font-weight: 300; text-transform: uppercase; letter-spacing: .12em; padding: .3rem .7rem; border-radius: 99px; }
.badge--left { background: var(--cream); color: var(--charcoal); }
.badge--warn { background: #F6E9C9; color: #7A5A12; }

.alert { padding: .9rem 1.1rem; border-radius: var(--radius); font-size: .92rem; margin-bottom: 1rem; }
.alert--err { background: #FBE9E9; color: var(--danger); border: 1px solid #F0C9C9; }
.alert--ok  { background: #E7F2EC; color: var(--ok);     border: 1px solid #C7E2D4; }
.alert[hidden] { display: none !important; }

/* ---------- Success ---------- */
.done { text-align: center; max-width: 560px; margin-inline: auto; }
.code {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(2rem, 9vw, 3.2rem); letter-spacing: .18em;
  color: var(--black); background: var(--cream);
  padding: 1.4rem 1rem; border-radius: var(--radius); margin: 1.25rem 0;
  user-select: all;   /* one tap selects the whole code */
}

/* ---------- Accordion ---------- */
.acc { border-top: 1px solid var(--cream); }
.acc__item { border-bottom: 1px solid var(--cream); }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--sans); font-weight: 300; font-size: .92rem;
  text-transform: uppercase; letter-spacing: .1em; text-align: start;
  color: var(--black); background: transparent; border: 0;
  padding: 1.35rem 0; min-height: 56px; cursor: pointer;
}
.acc__btn:hover { color: var(--gold); }
.acc__icon { flex: none; width: 12px; height: 12px; position: relative; }
.acc__icon::before, .acc__icon::after { content: ''; position: absolute; background: var(--gold); transition: transform .25s; }
.acc__icon::before { inset-inline: 0; top: 5px; height: 2px; }
.acc__icon::after  { inset-block: 0; inset-inline-start: 5px; width: 2px; }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: scaleY(0); }
.acc__panel { padding: 0 0 1.5rem; }
.acc__panel[hidden] { display: none; }
.acc__panel ul { padding-inline-start: 1.2rem; margin: 0 0 1rem; }
.acc__panel li { margin-bottom: .35rem; }

/* ---------- Directions ---------- */
.maps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; max-width: 620px; margin-inline: auto; }
.maps a { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1.4rem 1rem; background: var(--white); border: 1px solid var(--cream); border-radius: var(--radius); font-family: var(--sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--charcoal); transition: border-color .2s, transform .2s; }
.maps a:hover { border-color: var(--gold); transform: translateY(-2px); }

/* ---------- Footer ---------- */
.ftr { background: var(--black); color: var(--cream); padding: 3.5rem 0 2.5rem; text-align: center; }
.ftr__partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem; margin: 2rem 0; }
.ftr__partners img { height: 44px; width: auto; opacity: .75; filter: brightness(0) invert(1); }
.ftr__small { font-size: .78rem; letter-spacing: .06em; opacity: .65; }

/* ---------- Check-in (staff) ---------- */
.gate { min-height: 100vh; background: var(--black); color: var(--cream); padding: 1.25rem; }
.gate__in { max-width: 620px; margin-inline: auto; }
.gate h1 { color: var(--white); font-size: clamp(1.6rem, 6vw, 2.4rem); }
.gate .input { background: #1A2029; border-color: #2B333F; color: var(--white); font-size: 18px; }
.gate .input::placeholder { color: #6B7480; }
.gate .field__label { color: #9AA2AE; }
.gate__code { font-size: 26px !important; letter-spacing: .22em; text-align: center; text-transform: uppercase; }

.gate__stats { display: flex; gap: 1rem; margin-bottom: 1.25rem; }
.gate__stat { flex: 1; background: #1A2029; border: 1px solid #2B333F; border-radius: var(--radius); padding: .9rem; text-align: center; }
.gate__stat b { display: block; font-family: var(--sans); font-weight: 400; font-size: 1.8rem; color: var(--white); }
.gate__stat span { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: #8B94A0; }

.rec { background: var(--white); color: var(--black); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; }
.rec--in { border-inline-start: 4px solid var(--ok); }
.rec__name { font-family: var(--serif); font-size: 1.7rem; font-weight: 300; margin: 0 0 .15rem; }
.rec__code { font-family: var(--sans); font-size: .8rem; letter-spacing: .14em; color: var(--gold); margin-bottom: .9rem; }
.rec__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.rec__cell span { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--grey); }
.rec__cell b { font-weight: 600; color: var(--black); }
.rec__notes { background: #FFF8E5; border: 1px solid #F0E0B8; border-radius: var(--radius); padding: .7rem .9rem; font-size: .9rem; margin-bottom: 1rem; }
.rec__in { color: var(--ok); font-weight: 600; font-size: .9rem; margin-bottom: .75rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Reveal-on-scroll; JS adds .is-in. No JS, no animation, content still visible. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }