/* ============================================================
   EVENT SIGN-UP PAGE (event.html, opened as /e/<code>)

   One narrow column: what the event is, then a form whose questions come
   from the admin. Labels sit above the fields rather than inside them as
   placeholders — the questions are the admin's own wording and can be long.
   ============================================================ */
/* ─── Background picture ───
   A fixed layer rather than `background-attachment: fixed` on body, which
   iPhones ignore (the photo would scroll away and stretch). The gradient keeps
   white text readable on any photo: lighter at the top so the picture shows,
   nearly black where the form sits. */
.event-bg {
  position: fixed; inset: 0; z-index: -1;
  background-color: var(--black);
  background-size: cover; background-position: center;
}
.event-bg[hidden] { display: none; }
.event-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.30) 0%, rgba(10,10,10,0.55) 30%,
    rgba(10,10,10,0.85) 60%, rgba(10,10,10,0.92) 100%);
}
body.has-event-bg { background: transparent; }
body.has-event-bg .event-title,
body.has-event-bg .event-facts,
body.has-event-bg .event-desc { text-shadow: 0 1px 12px rgba(0,0,0,0.85); }
body.has-event-bg .event-desc { color: #e6e6e6; }
body.has-event-bg .event-form { background: rgba(26,26,26,0.92); }

.event-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 120px 5% 80px;
}

.event-notice {
  margin: 24px 0; padding: 18px 20px; border-radius: 6px;
  background: var(--dark2); border: 1px solid rgba(245,200,0,0.25);
  color: var(--white); line-height: 1.6;
}

.event-head { margin-bottom: 28px; }
.event-title {
  font-family: 'Barlow', 'Heebo', sans-serif; font-weight: 900;
  font-size: clamp(1.9rem, 6vw, 2.8rem); line-height: 1.1;
  color: var(--white); margin: 8px 0 18px; overflow-wrap: anywhere;
}

.event-facts { display: grid; gap: 8px; margin-bottom: 18px; }
.event-facts > div { display: flex; gap: 10px; align-items: baseline; }
.event-facts dt {
  flex: none; min-width: 3.5em;
  font-family: 'Barlow Condensed', 'Heebo', sans-serif; font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow);
}
.event-facts dd { color: var(--white); overflow-wrap: anywhere; }

.event-desc { color: #ccc; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; }

/* ─── The form ─── */
.event-form {
  display: grid; gap: 18px;
  padding: 24px; border-radius: 8px;
  background: var(--dark2); border: 1px solid rgba(255,255,255,0.08);
}
.event-custom { display: grid; gap: 18px; }
.event-custom:empty { display: none; }

.event-field > label:not(.event-check) {
  display: block; margin-bottom: 6px;
  font-size: 0.9rem; font-weight: 500; color: var(--white);
}
.event-field small { color: var(--grey); font-weight: 400; }

.event-field input:not([type="checkbox"]),
.event-field select,
.event-field textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  font: inherit; font-size: 1rem; /* 16px: below that, iOS zooms the page on focus */
  color: var(--white); background: var(--dark);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 4px;
}
.event-field textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.event-field input:focus, .event-field select:focus, .event-field textarea:focus {
  outline: none; border-color: var(--yellow);
}

.event-check {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.9rem; line-height: 1.5; color: #ccc; cursor: pointer;
}
.event-check input[type="checkbox"] {
  flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--yellow);
}
.event-check a { color: var(--yellow); text-decoration: underline; }

.event-error { margin-top: 6px; font-size: 0.82rem; color: #ff8080; }
.event-error:empty { display: none; }
.event-field.invalid input:not([type="checkbox"]),
.event-field.invalid select,
.event-field.invalid textarea { border-color: #ff8080; }
.event-field.invalid .event-check { color: #ff8080; }

.event-form .btn-primary { justify-self: start; }
.event-form .btn-primary:disabled { opacity: 0.6; cursor: wait; }

.event-status { font-size: 0.9rem; line-height: 1.4; color: var(--grey); }
.event-status:empty { display: none; }
.event-status.error { color: #ff8080; }

/* ─── After signing up ─── */
.event-done {
  padding: 28px 24px; border-radius: 8px; text-align: center;
  background: rgba(245,200,0,0.08); border: 1px solid rgba(245,200,0,0.35);
}
.event-done h2 {
  font-family: 'Barlow', 'Heebo', sans-serif; font-weight: 900;
  font-size: 1.8rem; color: var(--yellow); margin-bottom: 8px;
}
.event-done p { color: var(--white); margin-bottom: 20px; line-height: 1.6; }

/* Add to calendar: two equal buttons, side by side on a computer, stacked on
   a phone. Both look primary — which one a visitor needs depends on their
   phone, not on us. */
.event-calendar {
  margin: 0 auto 22px; padding-top: 18px; max-width: 460px;
  border-top: 1px solid rgba(245,200,0,0.25);
}
.event-done .event-calendar-title { margin-bottom: 12px; font-weight: 700; }
.event-calendar-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.event-calendar-links .btn-primary { flex: 1 1 180px; text-align: center; text-transform: none; }

.event-help { margin-top: 28px; color: var(--grey); font-size: 0.9rem; line-height: 1.6; }

/* Phone numbers and emails read left-to-right even on the Hebrew page. */
[dir="rtl"] .event-field input[type="tel"],
[dir="rtl"] .event-field input[type="email"] { direction: ltr; text-align: right; }

@media (max-width: 600px) {
  .event-wrap { padding-top: 100px; }
  .event-form { padding: 18px; }
  .event-form .btn-primary { justify-self: stretch; text-align: center; }
}