/**
 * @file
 * The date field and its calendar.
 *
 * WHY THE THEME DRAWS THIS
 * ------------------------
 * `<input type="date">` looks like the obvious answer and was the first one
 * tried. Its display format follows the operating system's locale rather than
 * the page's, so an Australian council's search was offering `mm/dd/yyyy` with
 * no way to change it, and its calendar is the browser's own — a light popup in
 * a dark interface, unstyleable, and inconsistent between engines.
 *
 * So the field is a text box the visitor can type into and a calendar this
 * theme draws. See js/datepicker.js for the parsing and the keyboard map.
 */

.datefield {
  position: relative;
  display: flex;
  align-items: center;
  min-inline-size: 0;
}

.datefield__input {
  /* Room for the calendar button, which sits inside the field's box. */
  padding-inline-end: 2.75rem;
}

.datefield.is-invalid .datefield__input {
  border-color: var(--me-danger, #ff6b6b);
}

.datefield__button {
  position: absolute;
  inset-inline-end: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* 2rem square inside a 2.75rem field: a comfortable target that does not
     crowd the text it sits beside. */
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.datefield__button:hover {
  background: var(--surface-3);
  color: var(--me-magenta-300);
}

.datefield__button:focus-visible {
  outline: 2px solid var(--me-magenta);
  outline-offset: 1px;
}

.datefield__button svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

/* ---------------------------------------------------------------------------
 * The calendar
 * ------------------------------------------------------------------------ */

/**
 * Pinned to the viewport from <body>, not to the field.
 *
 * The field sits inside the search panel, and that panel scrolls its own
 * overflow — an absolutely positioned popup inside it is clipped by it, which
 * showed the calendar as a single cut-off week. js/datepicker.js appends it to
 * <body> and positions it against the field's measured rectangle, flipping it
 * above the field when there is no room below.
 */
.datefield__calendar {
  position: fixed;
  z-index: 140;
  inline-size: min(19rem, calc(100vw - var(--gutter) * 2));
  padding: var(--space-s);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  background: var(--surface-1);
  box-shadow: var(--shadow-3, var(--shadow-2));
}

.datefield__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  margin-block-end: var(--space-2xs);
}

.datefield__month {
  margin: 0;
  font-size: var(--step--1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
}

.datefield__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-primary);
  cursor: pointer;
}

.datefield__nav:hover {
  border-color: var(--me-magenta);
  color: var(--me-magenta-300);
}

.datefield__nav:focus-visible {
  outline: 2px solid var(--me-magenta);
  outline-offset: 1px;
}

.datefield__nav svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.datefield__grid {
  display: grid;
  gap: 2px;
}

.datefield__row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.datefield__weekday {
  padding-block: var(--space-3xs);
  color: var(--text-muted);
  font-size: var(--step--2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-align: center;
  text-transform: uppercase;
}

.datefield__day {
  display: grid;
  place-items: center;
  min-block-size: 2.25rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.datefield__day:hover {
  background: var(--surface-3);
}

.datefield__day:focus-visible {
  outline: 2px solid var(--me-magenta);
  outline-offset: -1px;
}

/* The days either side of the month are shown rather than blanked, so the
   weeks read as continuous — but they are quiet. */
.datefield__day.is-outside {
  color: var(--text-muted);
}

/**
 * A day before the field's floor — for the search, anything before today.
 *
 * Shown rather than removed, so the month keeps its shape and it is obvious
 * WHY a day cannot be chosen. `not-allowed` on hover and 45% opacity are the
 * two signals; the button is really disabled, so it takes no click and no tab
 * stop, and the arrow keys stop at the floor rather than walking into it.
 */
.datefield__day.is-blocked {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.datefield__day.is-blocked:hover {
  background: transparent;
}

.datefield__nav[disabled],
.datefield__action[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Today is marked with a ring, not a fill: a fill would compete with the
   selected day, and only one of the two is a choice the visitor made. */
.datefield__day.is-today {
  border-color: color-mix(in srgb, var(--me-magenta) 55%, transparent);
}

.datefield__day.is-selected {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: var(--me-white);
  font-weight: var(--weight-bold);
}

.datefield__foot {
  display: flex;
  gap: var(--space-2xs);
  margin-block-start: var(--space-2xs);
  padding-block-start: var(--space-2xs);
  border-block-start: 1px solid var(--border-subtle);
}

.datefield__action {
  padding: var(--space-3xs) var(--space-2xs);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text-secondary);
  font-size: var(--step--2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
}

.datefield__action:hover {
  color: var(--me-magenta-300);
}

.datefield__action:focus-visible {
  outline: 2px solid var(--me-magenta);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .datefield__day,
  .datefield__button {
    transition: none;
  }
}