/* ============================================================================
   Chassidish Choir — custom date picker
   ----------------------------------------------------------------------------
   The browser draws its own calendar for <input type="date"> and there is no CSS
   hook into it at all: white panel, blue selection, system font. On this page it
   reads as a foreign object. So datepicker.js hides the native input (keeping it
   as the value holder) and builds the control below.

   Nothing in here is hard-coded colour: every value comes from tokens.css. The
   trigger deliberately repeats the `.field input` rules from pages.css rather
   than inheriting them — it is a <button>, not an <input>, so those selectors
   never reach it, and it has to look like a sibling of name/phone/email.

   IMPORTANT: the native input is only hidden once JS has added `.is-dp-native`
   to it. If this stylesheet loads and the script does not, the page is untouched
   and the native picker still works.
   ========================================================================== */

.field input.is-dp-native {
  /* Not `visibility` or an off-screen clip: a display:none control is still
     submitted with the form and still holds .value, and it cannot be tabbed to
     or read out, so the trigger below is the only thing in the a11y tree. */
  display: none;
}

.dp {
  position: relative;
  min-width: 0;
}

/* ---- Trigger — must be indistinguishable from the other fields ------------ */

.dp__trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 1rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  text-align: left;
  color: var(--cream);
  background: var(--plum-800);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.dp__trigger:hover { border-color: var(--rule); }
.dp__trigger:focus {
  background: var(--plum-700);
  border-color: var(--gold-500);
  outline: none;
}
.dp__trigger:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 2px;
}
.dp__trigger[aria-expanded="true"] {
  background: var(--plum-700);
  border-color: var(--gold-500);
}
.dp__trigger[aria-invalid="true"] { border-color: var(--blush-500); }

.dp__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Matches `.field input::placeholder` so an empty date reads the same weight. */
.dp__trigger.is-empty .dp__text { color: var(--fg-faint); }

.dp__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--gold-300);
  transition: color var(--dur) var(--ease-out);
}
.dp__trigger:hover .dp__icon { color: var(--gold-200); }

/* ---- Panel --------------------------------------------------------------- */

.dp__panel {
  position: absolute;
  z-index: var(--z-menu); /* above the sticky header, which it can overlap when flipped */
  top: calc(100% + 10px);
  left: 0;
  width: max-content;
  max-width: calc(100vw - 2 * var(--sp-4));
  padding: var(--sp-4);
  background: var(--plum-900);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.dp__panel[hidden] { display: none; }

/* Flipped when there is not enough room underneath the field. */
.dp__panel.is-above {
  top: auto;
  bottom: calc(100% + 10px);
}

/* The open animation is a courtesy; base.css already kills motion globally for
   reduce, but this element is created after that rule was written. */
.dp__panel {
  transform-origin: top left;
  /* `backwards`, never `both`: a held identity transform on a positioned
     element is how the header once ended up in the wrong stacking context. */
  animation: dp-in var(--dur-fast) var(--ease-out) backwards;
}
.dp__panel.is-above { transform-origin: bottom left; }

@keyframes dp-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dp__panel { animation: none; }
}

/* ---- Header: month/year + arrows ----------------------------------------- */

.dp__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.dp__month {
  flex: 1 1 auto;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--cream);
}

.dp__nav {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--gold-300);
  background: transparent;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
.dp__nav:hover {
  background: var(--plum-700);
  border-color: var(--rule);
  color: var(--gold-200);
}
.dp__nav:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 2px;
}
/* The month before this one is usually entirely in the past — say so, rather
   than letting the arrow look live and do nothing. */
.dp__nav[disabled] {
  color: var(--fg-faint);
  opacity: 0.4;
  cursor: not-allowed;
}
.dp__nav[disabled]:hover {
  background: transparent;
  border-color: var(--rule-soft);
  color: var(--fg-faint);
}
.dp__nav svg { width: 14px; height: 14px; }

.dp__rule {
  height: 1px;
  margin: 0 0 var(--sp-3);
  background: var(--rule);
  opacity: 0.55;
}

/* ---- Grid ---------------------------------------------------------------- */

/* minmax(0, 40px), not 1fr: 40px is the natural cell, but on a narrow desktop
   window the columns can still give ground rather than overflow the panel. */
.dp__row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 40px));
  gap: 2px;
}

.dp__wd {
  padding: var(--sp-1) 0 var(--sp-2);
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  text-align: center;
  color: var(--gold-400);
}

.dp__day {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--cream);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.dp__day:hover { background: var(--plum-700); }
.dp__day:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: -2px;
}

/* Neighbouring months: present, but clearly not this month. */
.dp__day.is-outside { color: var(--fg-faint); }

/* Today — a thin gold ring, so it never gets confused with the selection. */
.dp__day.is-today { box-shadow: inset 0 0 0 1px var(--gold-500); }

.dp__day.is-selected {
  background: var(--gold-300);
  color: var(--plum-950);
  font-weight: 500;
  box-shadow: none; /* the ring would be invisible on gold anyway — drop it */
}
.dp__day.is-selected:hover { background: var(--gold-200); }

/* Nobody books a simcha for last Tuesday. */
.dp__day[disabled] {
  color: var(--fg-faint);
  opacity: 0.45;
  cursor: not-allowed;
}
.dp__day[disabled]:hover { background: transparent; }