/* Styling for the calendar date-picker.js builds in place of the browser's own,
   which is drawn outside the page where no year control of ours can reach the
   keyboard (WCAG 2.1.1, NOVA-607).

   This lives in base-theme because the widget does: the registration age gate
   and the age required action ask for the same date of birth across themes
   that do not all load the same stylesheets. A theme repaints it by setting
   the custom properties below, rather than by restating the rules.

   Every rule is scoped to .date-picker-field, the wrapper the script puts
   around the input, and names the element it styles. That is not decoration:
   a bare .date-picker-toggle loses to a theme's own `form .form-group button`,
   which is how this widget first came up painted as a submit button. The
   widget has to hold its own in whichever page it is dropped into. */

/* :where() holds these at zero specificity, so a theme repaints the widget
   with a plain :root block and wins no matter which stylesheet loads last. */
:where(:root) {
  --date-picker-surface: #ffffff;
  --date-picker-text: #111827;
  --date-picker-muted: #6b7280;
  --date-picker-border: #d1d5db;
  --date-picker-hover: #f3f4f6;
  --date-picker-disabled: #9ca3af;
  --date-picker-selected-bg: #0b0809;
  --date-picker-selected-text: #ffffff;
  --date-picker-focus: #232222;
}

div.date-picker-field {
  position: relative;
  display: flex;
  align-items: center;
}

/* Room for the toggle inside the field's right edge, in place of the browser's
   built-in icon, which the script hides only where that is supported. */
.date-picker-field input[type="date"] {
  width: 100%;
  padding-right: 3rem;
  box-sizing: border-box;
}

.date-picker-field input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}

/* A real <button>, because the built-in icon is a tab stop that only opens the
   picker on Space, and Enter fell through to the page (WCAG 2.1.1, NOVA-500). */
.date-picker-field button.date-picker-toggle {
  position: absolute;
  top: 50%;
  right: 0.375rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  min-height: 2.25rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--date-picker-muted);
  cursor: pointer;
}

.date-picker-field button.date-picker-toggle:hover {
  background: var(--date-picker-hover);
  color: var(--date-picker-text);
}

/* 19rem is the width seven day columns read comfortably at, not a cap on the
   contents: nothing below pins a height, so the dialog grows downwards when
   increased text spacing gives its rows taller line boxes (WCAG 1.4.12,
   NOVA-608). max-width keeps it inside a narrow viewport, and the header
   wraps rather than squeezing when it runs out of room. */
.date-picker-field .date-picker-dialog {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 20;
  width: 19rem;
  max-width: calc(100vw - 2rem);
  box-sizing: border-box;
  padding: 0.75rem;
  text-align: left;
  background: var(--date-picker-surface);
  border: 1px solid var(--date-picker-border);
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* The dialog is closed with the hidden attribute, which the display values
   above and below would otherwise override. */
.date-picker-field .date-picker-dialog[hidden] {
  display: none;
}

/* Deliberately nowrap. A flex container wraps before it shrinks, so a header
   allowed to wrap drops the next-month arrow onto a line of its own and never
   gives the month-and-year group the chance to reflow. Holding this row to one
   line pushes the shrink onto that group, which wraps inside itself and keeps
   both arrows beside it (WCAG 1.4.12, NOVA-608). */
.date-picker-field .date-picker-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

/* The month-and-year group. min-width 0 is what lets the header shrink it far
   enough to wrap, and the wrap is what saves the names from being truncated:
   the two selects stack rather than squeeze (WCAG 1.4.12). */
.date-picker-field .date-picker-period {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

/* Month and year are plain <select>s: the arrow keys walk them, typing jumps to
   a year, and the browser gives them their name and value for free. */
.date-picker-field select.date-picker-select {
  flex: 1 1 auto;
  width: auto;
  /* auto, not 0: a flex item with min-width 0 shrinks past its own content, and
     a select given less room than its longest month silently truncates it to an
     ellipsis. Holding the automatic minimum makes the row wrap instead, which
     costs a line rather than the month's name (WCAG 1.4.12). */
  min-width: auto;
  /* A floor rather than a fixed height, so a taller line box grows the control
     instead of being clipped inside it. */
  min-height: 2.25rem;
  margin: 0;
  padding: 0.25rem 0.375rem;
  font-size: 0.875rem;
  color: var(--date-picker-text);
  background: var(--date-picker-surface);
  border: 1px solid var(--date-picker-border);
  border-radius: 0.25rem;
}

.date-picker-field button.date-picker-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-height: 2.25rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--date-picker-muted);
  cursor: pointer;
}

.date-picker-field button.date-picker-nav:hover {
  background: var(--date-picker-hover);
  color: var(--date-picker-text);
}

.date-picker-field table.date-picker-grid {
  width: 100%;
  margin: 0;
  table-layout: fixed;
  border-collapse: collapse;
}

.date-picker-field .date-picker-grid th {
  padding: 0.25rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--date-picker-muted);
  text-align: center;
  background: transparent;
  border: none;
}

/* height on a table cell is a minimum, not a clamp: the cell keeps its 2rem
   target and still grows when increased text spacing gives the day a taller
   line box. Swapping this for a fixed-height box would break that. */
.date-picker-field td.date-picker-day {
  height: 2rem;
  padding: 0;
  font-size: 0.875rem;
  color: var(--date-picker-text);
  text-align: center;
  vertical-align: middle;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}

/* The padding cells either side of the month keep the seven columns lined up,
   so they stay in the grid without being days. */
.date-picker-field td.date-picker-day.is-empty {
  cursor: default;
}

.date-picker-field td.date-picker-day.is-disabled {
  color: var(--date-picker-disabled);
  cursor: not-allowed;
}

.date-picker-field td.date-picker-day:not(.is-empty):not(.is-disabled):hover {
  background: var(--date-picker-hover);
}

.date-picker-field td.date-picker-day[aria-selected="true"] {
  background: var(--date-picker-selected-bg);
  color: var(--date-picker-selected-text);
  font-weight: 600;
}

.date-picker-field .date-picker-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.date-picker-field button.date-picker-cancel {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  color: var(--date-picker-text);
  background: transparent;
  border: 1px solid var(--date-picker-border);
  border-radius: 0.25rem;
  cursor: pointer;
}

.date-picker-field button.date-picker-cancel:hover {
  background: var(--date-picker-hover);
}

/* Every stop in the widget gets a visible marker where it lands, including the
   day the arrow keys are on (WCAG 2.4.7). */
.date-picker-field :focus-visible {
  outline: 2px solid var(--date-picker-focus);
  outline-offset: 0.125rem;
}

/* A day cell is flush with its neighbours, so its outline goes inside it. */
.date-picker-field td.date-picker-day:focus,
.date-picker-field td.date-picker-day:focus-visible {
  outline: 2px solid var(--date-picker-focus);
  outline-offset: -2px;
}

/* base-theme has no stylesheet of its own, so themes that inherit this file
   without one still need the hook the labels and live regions are hidden with.
   The status region is a sibling of the widget, not a child of it. */
.date-picker-field .sr-only,
.date-picker-field ~ .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}