/* chanukah.css — page-specific styles for /chanukah.html (and, where noted,
   reused as-is by /events and the Deploy-2 recap pages).
   Everything reusable from the shared stylesheets (buttons, sections,
   rk-form, rk-checkbox, trust-signal cards, contact-form card, careers'
   AJAX success-panel pattern) is used as-is, unmodified, per CLAUDE.md's
   "reuse existing components" convention. This file only adds what has no
   sitewide precedent: the video tap-to-play card, radio-button groups (the
   site has only ever used checkboxes/selects before this), the hero flyer
   layout, the ride-conditional fields, and the add-to-calendar/partners rows.

   Design-for-seniors note: body text already meets "18px minimum" via the
   site's existing --text-base (18-20px fluid), and .btn already has
   min-height: 54px, clearing the "48px minimum" button requirement. Neither
   needed an override here, both are inherited as-is from style.css. */

/* ============ HERO ============ */
/* Deliberately Cream, not the site's usual Navy page-hero anchor: the
   Chanukah prompt's "Design for seniors" list specifically calls for
   "navy on cream" on this page, and most visitors arrive from a WhatsApp
   link on a phone, not by browsing the site, so it doesn't need to match
   the About/Contact/Careers Navy-anchor convention those inner pages share
   with each other. Noted in HANDOFF.md as a deliberate, informed choice. */
.chanukah-hero {
  background: var(--color-bg);
  padding-block: clamp(var(--space-10), 6vw, var(--space-16));
}
.chanukah-hero__inner {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: var(--space-10);
  align-items: center;
}
@media (max-width: 860px) {
  .chanukah-hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
.chanukah-hero__flyer img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.chanukah-hero__flyer-cta {
  display: block;
  width: 100%;
  margin-top: var(--space-4);
  text-align: center;
}

/* ============ EVENTS PAGE: UPCOMING TEASER ============
   Its own grid + breakpoint, not a reuse of .chanukah-hero__inner with an
   inline style override: an inline `style="grid-template-columns: ..."`
   on the same element beats ANY stylesheet rule, including one inside a
   media query, so .chanukah-hero__inner's own 860px collapse-to-1-column
   rule could never fire once that inline style was present. That's what
   made the Upcoming teaser non-mobile-friendly -- fixed 2026-10-26 by
   giving it a real class instead. */
.events-upcoming__inner {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 760px) {
  .events-upcoming__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .events-upcoming__inner .chanukah-hero__flyer {
    max-width: 280px;
    margin-inline: auto;
  }
}
.chanukah-hero h1 {
  color: var(--color-navy);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
}
.chanukah-hero__meta {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: var(--space-6);
  line-height: 1.5;
}
.chanukah-hero__meta span {
  display: block;
}
.chanukah-hero__cta {
  margin-bottom: 0;
}

/* ============ WHAT TO EXPECT ============
   Reuses .trust-signals-grid / .trust-signal-card from home.css as-is,
   on a plain Cream .section here instead of their one existing Navy
   usage on the homepage; the component has no on-dark-only styling
   baked in, so it works unchanged on either background. */

/* ============ VIDEOS (tap-to-play) ============
   No sitewide precedent for an embedded video, this is new. Shared by
   /chanukah here and, per the prompt, reused as-is on /events and the
   Deploy-2 recap pages. */
.chanukah-video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  justify-items: center;
}
@media (max-width: 760px) {
  .chanukah-video-grid {
    grid-template-columns: 1fr;
  }
}
.chanukah-video-card {
  width: 100%;
  max-width: 360px;
  text-align: center;
}
.chanukah-video-card__frame {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-navy);
  box-shadow: var(--shadow-md);
}
.chanukah-video-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chanukah-video-card__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.chanukah-video-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 27, 46, 0.28);
  border: none;
  padding: 0;
  cursor: pointer;
  width: 100%;
}
.chanukah-video-card__play-circle {
  width: 64px;
  height: 64px;
  min-height: 0;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}
.chanukah-video-card__play:focus-visible .chanukah-video-card__play-circle {
  outline: 3px solid var(--color-text-inverse);
  outline-offset: 2px;
}
.chanukah-video-card h3 {
  font-size: var(--text-base);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  /* No explicit color: this card sits directly on the section (not in a
     white/cream card), so it should inherit the section's text color,
     same as .chanukah-video-card p already does. A hardcoded Navy here
     was invisible on this component's Navy section--on-dark usage (the
     VIDEOS section on /chanukah, and now /events) -- fixed 2026-10-26. */
}
.chanukah-video-card p {
  font-size: var(--text-sm);
}
/* .chanukah-video-card__recap-link removed 2026-10-26: the "more about
   this event" links pointed to /events/... recap pages that don't exist
   yet (Deploy 2 scope) and the owner asked them removed rather than left
   dead. Re-add a link component here once those pages ship. */

/* ============ RSVP FORM ============
   .chanukah-rsvp-card reuses .contact-form's card look (same padding,
   border, radius, shadow pattern) without depending on .contact-block's
   two-column grid, since this page has no sidebar info-card next to it. */
.chanukah-rsvp-card {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  box-shadow: var(--shadow-sm);
  max-width: 720px;
  margin-inline: auto;
}
@media (max-width: 560px) {
  .chanukah-rsvp-card {
    padding: var(--space-5);
  }
}
.chanukah-rsvp-card__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  text-align: center;
}
.chanukah-rsvp-card__intro {
  text-align: center;
  margin-bottom: var(--space-6);
}

/* Radio groups: new, parallel to .rk-checkbox/.rk-checkbox-grid, since
   this is the first form on the site to use radio inputs. Each label row
   gets generous padding so the whole row (not just the 20px dot) is a
   comfortably large tap target, matching the senior-friendly intent of
   the sitewide 48px button rule even though that rule technically only
   names buttons. */
.rk-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rk-form .rk-radio {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text);
  cursor: pointer;
  margin-bottom: 0;
  padding: var(--space-2) 0;
}
.rk-form .rk-radio input[type="radio"] {
  width: 22px;
  height: 22px;
  min-height: 0;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  accent-color: var(--color-primary);
  cursor: pointer;
}

.chanukah-ride-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-block: var(--space-2) var(--space-3);
}
.chanukah-ride-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
}
.chanukah-ride-closed {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.chanukah-rsvp-closed {
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  max-width: 560px;
  margin-inline: auto;
}

/* ============ SUCCESS STATE ============
   Same shape as careers.html's .careers-confirmation (icon, h3, p,
   centered card), self-contained here rather than reusing that class
   directly since it's scoped under .careers-form-section there. */
.chanukah-success {
  max-width: 600px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8) var(--space-6);
}
.chanukah-success svg {
  color: var(--color-success, #2f7d4f);
}
.chanukah-success__calendar-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-2);
}
.chanukah-success__ride-line {
  font-weight: 700;
  color: var(--color-navy);
}
.chanukah-success__share {
  margin-top: var(--space-2);
}
.chanukah-success__rewatch {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  width: 100%;
}

/* ============ GETTING THERE / CALENDAR / HOSTED BY / PARTNERS ============ */
.chanukah-getting-there__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.chanukah-calendar-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-6);
}
.chanukah-brand-block {
  max-width: var(--content-default);
  margin-inline: auto;
  text-align: center;
}
.chanukah-brand-block .btn {
  margin-top: var(--space-5);
}
.chanukah-partners {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-6);
}
.chanukah-partners__item {
  font-weight: 700;
  color: var(--color-navy);
  font-size: var(--text-sm);
}
.chanukah-partners__item img {
  max-height: 48px;
  width: auto;
  display: block;
}