/* ===================================
   Stay Calendar — theme overrides
   -----------------------------------
   Pairs with the vendored vanilla-calendar-pro v3.1.0
   (mvp/vendor/vanilla-calendar-pro/*.css, kept pristine).
   All visual overrides for the availability calendar on
   stay.html live here — never edit the vendored CSS directly.

   Scoping note: on init the library overwrites the mount
   element's `class` attribute (to its own "vc" class) but
   leaves `id="stay-calendar"` untouched — so every rule below
   that reaches into the calendar's internals is anchored on
   the #stay-calendar id, not a class.
   =================================== */

.stay-calendar-wrap {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--milk-white);
  border: 1px solid rgba(232, 213, 163, 0.5);
  border-radius: 5px;
  box-shadow:
    0 1px 2px rgba(59, 42, 26, 0.07),
    0 8px 22px -8px rgba(59, 42, 26, 0.20);
}

.stay-calendar-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--deep-soil);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#stay-calendar {
  min-height: 19rem;
}

/* Calendar shell: sit on the milk card, use the site's type */
#stay-calendar.vc {
  width: 100%;
  max-width: none;
  font-family: var(--font-sans);
  background: transparent;
  color: var(--deep-soil);
  padding: 0;
}

/* Month / year title -> serif, like the site's headings */
#stay-calendar .vc-month,
#stay-calendar .vc-year,
#stay-calendar .vc-header__content {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--deep-soil);
}

/* Tap-target size: month/year label buttons compute ~37x32 by default
   (D-NEW-2) — pad up to the 44px target. */
#stay-calendar .vc-month,
#stay-calendar .vc-year {
  min-height: 2.75rem; /* 44px */
  min-width: 2.75rem;  /* 44px */
  padding: 0.625rem 0.75rem;
}

/* Nav arrows recoloured to soil */
#stay-calendar .vc-arrow:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233B2A1A' d='M12 16c-.3 0-.5-.1-.7-.3l-6-6c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l5.3 5.3 5.3-5.3c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-6 6c-.2.2-.4.3-.7.3z'/%3E%3C/svg%3E");
}

/* Tap-target size: month-nav arrows compute 24x24 by default (D-NEW-2) —
   grow the hit box to 44px but pin the glyph near its original size and
   re-center it, so the icon doesn't blow up along with the tap target. */
#stay-calendar .vc-arrow {
  width: 2.75rem;  /* 44px */
  height: 2.75rem; /* 44px */
}
#stay-calendar .vc-arrow:before {
  width: 1.5rem;
  height: 1.5rem;
  top: 50%;
  left: 50%;
}
#stay-calendar .vc-arrow_prev:before {
  transform: translate(-50%, -50%) rotate(90deg);
}
#stay-calendar .vc-arrow_next:before {
  transform: translate(-50%, -50%) rotate(-90deg);
}

/* Weekday row */
#stay-calendar .vc-week__day {
  font-family: var(--font-sans);
  color: var(--clay);
  font-weight: 600;
}

/* Day buttons */
#stay-calendar [data-vc-date-btn] {
  font-family: var(--font-sans);
  color: var(--deep-soil);
  border-radius: 3px;
}

/* Tap-target size: vendor default (1.875rem/30px) is too short for a thumb.
   Row height follows the tallest cell, so padding the date cell + a taller
   min-height on the button together grow the whole grid row. */
#stay-calendar [data-vc-date] {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
#stay-calendar [data-vc-date-btn] {
  min-height: 2.75rem; /* 44px */
}

/* Vendor default text is 0.75rem (12px) — bump weekday header + date
   numbers above the mobile-readability floor. */
#stay-calendar .vc-week__day,
#stay-calendar [data-vc-date-btn] {
  font-size: 0.8rem;
}

#stay-calendar [data-vc-date][data-vc-date-today] [data-vc-date-btn] {
  box-shadow: inset 0 0 0 1px var(--golden-hour);
}

/* Selected range — endpoints and single-day pick, in site gold */
#stay-calendar [data-vc-date][data-vc-date-selected] [data-vc-date-btn],
#stay-calendar [data-vc-date][data-vc-date-selected="first"] [data-vc-date-btn],
#stay-calendar [data-vc-date][data-vc-date-selected="last"] [data-vc-date-btn],
#stay-calendar [data-vc-date][data-vc-date-selected="first-and-last"] [data-vc-date-btn] {
  background-color: var(--golden-hour) !important;
  color: var(--deep-soil) !important;
}

/* Days inside the range */
#stay-calendar [data-vc-date][data-vc-date-selected="middle"] [data-vc-date-btn] {
  background-color: rgba(212, 160, 74, 0.22) !important;
  color: var(--deep-soil) !important;
}

/* Hover preview while dragging a range */
#stay-calendar [data-vc-date][data-vc-date-hover] [data-vc-date-btn] {
  background-color: rgba(212, 160, 74, 0.14) !important;
}

/* Unavailable dates — dimmed with a subtle strikethrough, not just greyed out */
#stay-calendar [data-vc-date][data-vc-date-disabled] [data-vc-date-btn] {
  color: rgba(107, 91, 78, 0.4) !important;
  text-decoration: line-through;
  text-decoration-color: rgba(107, 91, 78, 0.5);
}

/* Focus ring matches the rest of the site */
#stay-calendar [data-vc-date-btn]:focus-visible,
#stay-calendar [tabindex="0"]:focus-visible,
#stay-calendar button:focus-visible {
  outline: 2px solid var(--golden-hour) !important;
  outline-offset: 2px;
}

/* Legend */
.stay-calendar-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 1.1rem 0 0.6rem;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--dusk);
}
.stay-calendar-legend li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.stay-calendar-swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.stay-calendar-swatch.is-open {
  background-color: var(--golden-hour);
}
.stay-calendar-swatch.is-unavailable {
  position: relative;
  background-color: transparent;
  border: 1px solid rgba(107, 91, 78, 0.5);
}
.stay-calendar-swatch.is-unavailable::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  border-top: 1px solid rgba(107, 91, 78, 0.7);
}

.stay-calendar-hint {
  font-size: 0.85rem;
  color: var(--dusk);
  margin: 0;
}

@media (max-width: 480px) {
  .stay-calendar-wrap { padding: 1.25rem; }
}

/* The vendored calendar (vendor/vanilla-calendar-pro/layout.css) animates
   opacity and control states; honor OS-level reduced-motion without editing
   the vendored file. */
@media (prefers-reduced-motion: reduce) {
  .vc,
  .vc *,
  [data-vc],
  [data-vc] * {
    transition: none !important;
    animation: none !important;
  }
}