/* Content block 'availability' of the public website (feature #562), every design.
   Fonts come from the design; the hover/focus colour from the colour scheme (template.css). */
/* Colours: --av-* in default.css, shared with the booking box date picker. */
.av-calendar {
  border: 1px solid #e6e6e2;
  border-radius: 14px;
  padding: 20px;
  background: #fff;
  color: #2b2b2b;
}
.av-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.av-nav[hidden] { display: none; }
.av-range { margin: 0; font-weight: 700; text-align: center; text-transform: capitalize; }
.av-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; font-size: 1.75rem; line-height: 1; cursor: pointer;
}
.av-arrow:hover:not(:disabled) { background: #f2f2ef; }
.av-arrow:disabled { opacity: 0.3; cursor: default; }
.av-arrow:focus-visible, .av-day button:focus-visible { outline: 2px solid var(--av-accent); outline-offset: 2px; }

.av-months {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 24px 32px;
  align-items: start;
}
.av-calendar.is-ready .av-months { grid-template-columns: repeat(var(--av-per-view, 2), minmax(0, 1fr)); }
.av-calendar.is-ready .av-month:not(.is-visible) { display: none; }
/* One month at a time: the range above already names it. */
.av-calendar.is-single .av-month caption { display: none; }

.av-month { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 4px; text-align: center; }
.av-month caption { caption-side: top; padding: 6px 0; text-align: center; font-weight: 600; text-transform: capitalize; color: #555; }
.av-month th { padding: 4px 0; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; color: #666; }
.av-day { padding: 0; height: 40px; border: 1px solid transparent; border-radius: 8px; font-size: 0.875rem; }
.av-day span, .av-day button {
  display: flex; width: 100%; height: 100%; min-height: 38px; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit;
}
.av-day--outside { border-color: transparent; }
.av-day--past { background: var(--av-past); color: var(--av-past-text); }
.av-day--available, .av-day--arrival { background: var(--av-free); border-color: var(--av-free-border); color: var(--av-free-text); }
.av-day--arrival { font-weight: 700; }
.av-day--unavailable { background: var(--av-booked); border-color: var(--av-booked-border); color: var(--av-booked-text); }
/* Changeover: the night before is free, the next guest arrives this day; a stay can end here. */
.av-day--changeover {
  background: linear-gradient(to bottom right, var(--av-free) 50%, var(--av-booked) 50%);
  border-color: var(--av-booked-border);
  color: #2b2b2b;
}
.av-calendar.is-bookable .av-day--arrival button { cursor: pointer; }
.av-calendar.is-bookable .av-day--arrival:hover { background: var(--av-accent); border-color: var(--av-accent); color: #fff; }

.av-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 0.875rem; color: #555; }
.av-legend li { display: flex; align-items: center; gap: 8px; }
/* legend: a sample day with a "1", in the colours of the days above */
.av-swatch { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; border: 1px solid transparent; border-radius: 7px; font-size: 0.75rem; }
.av-hint { margin: 12px 0 0; font-size: 0.875rem; color: #666; }

@media (max-width: 575px) {
  .av-calendar { padding: 12px; }
  .av-month { border-spacing: 2px; }
  .av-day { height: 36px; }
  .av-day span, .av-day button { min-height: 34px; }
}