/*
 * Shared mobile rules for every date picker in the booking flow.
 *
 * The three live pickers (homepage hero, /search, /hotel) were each written
 * separately and each sized its day cells for a mouse: 36-38px boxes with 12-13px
 * numbers, no touch-action, and the browser's double-tap-zoom heuristic still
 * armed. On a phone that reads as "the calendar ignores my taps" — the tap either
 * lands between cells or is held back ~300ms while the browser waits to see if a
 * second tap is coming.
 *
 * Rather than a fourth opinion, the day cells now all carry .hty-day (or .hp-day
 * on the hero, which is CSS-driven already) and share the rules below. Loaded from
 * _Head.cshtml so it applies on every page that can open a picker.
 */

.hty-day,
.hp-day {
  /* Tap now, don't wait out the double-tap-zoom window. This is the single
     biggest cause of "I tapped and nothing happened". */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* Phones and small tablets — the desktop grids keep their own sizing. */
@media (max-width: 1023px) {
  .hty-day,
  .hp-day {
    /* 44px is the smallest target a thumb hits reliably (Apple HIG). Width comes
       from the 7-column grid track: on a 360px viewport that lands at ~43px, so
       the cell is a full-size target in both axes. min-width is deliberately NOT
       set — forcing 44px there would overflow the row and give the modal a
       horizontal scrollbar, which is the other half of the same complaint. */
    min-height: 44px;
  }

  /* Day numbers: 12px is the reason people squint and mis-tap. The Tailwind-classed
     grids get 14px from .text-sm in their own markup (setting font-size here would
     tie with it on specificity, and the Tailwind CDN injects at runtime so source
     order is not dependable). The hero calendar uses no utilities, so it is sized
     here. */
  .hp-day {
    font-size: 15px;
  }

  /* Give the cells their width back: a 4px gutter x6 eats 24px of a ~328px row.
     Matched on the grid that actually holds day cells, so no markup has to opt in.
     Where :has() is unsupported the cells are ~2px narrower and still 44px tall,
     which is the axis that matters. */
  .grid:has(> .hty-day),
  .grid:has(> .hty-dow) {
    gap: 2px;
  }

  /* Visible confirmation that the tap landed, even before the range repaints.
     Without this the only feedback is the repaint, which used to lag. */
  .hty-day:active:not(:disabled) {
    background-color: #dbeafe;
    transform: scale(0.94);
  }

  .hp-day:not([disabled]):active {
    background-color: #E5E7EB;
    transform: scale(0.94);
  }

  .hty-day,
  .hp-day {
    transition: background-color .12s ease, transform .08s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hty-day,
  .hp-day {
    transition: none;
  }
  .hty-day:active:not(:disabled),
  .hp-day:not([disabled]):active {
    transform: none;
  }
}

/*
 * The full-screen mobile picker scrolls a long list of months. Two things were
 * missing from that scroller.
 *
 * body{overflow:hidden} — which is what the JS sets — does not stop iOS Safari
 * chaining a scroll to the page once the inner list hits its top or bottom, so
 * rubber-banding at either end dragged the results page around behind the
 * calendar. overscroll-behavior:contain keeps the gesture in the month list.
 *
 * Matched via :has() on the scroller that actually contains day cells, so no
 * markup has to opt in and no other modal's scrolling is touched.
 */
@media (max-width: 1023px) {
  .overflow-y-auto:has(.hty-day) {
    overscroll-behavior: contain;
    /* Momentum scrolling — without it a 15-month list scrolls one stiff drag at
       a time on older iOS, which is its own reason the picker felt broken. */
    -webkit-overflow-scrolling: touch;
  }
}

/*
 * Modal pickers that can outgrow the viewport.
 *
 * #header-date-picker-popup (the live picker on the hotel page from 768px up) is a
 * centred flex modal with no height cap and no scroller. Its two months stack into
 * one column below 1024px, so on a tablet — and on any landscape phone wide enough
 * to get it — the calendar is taller than the screen, and because the modal is
 * vertically centred it is clipped at BOTH ends: the second month and the whole
 * footer, Apply included, are simply unreachable. There is nothing to scroll.
 *
 * Capping the height and letting the panel scroll itself fixes that at every width.
 * When the content already fits, this changes nothing.
 */
.hty-sheet {
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Month-navigation and close controls. These were 34-36px boxes built around a
   16-20px icon — the arrows you must hit repeatedly to reach a month three out. */
.hty-navbtn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 1023px) {
  /* .hp-cal__nav is the hero's own pair of arrows (34px) — the only way to reach a
     later month there, so it belongs with the rest of the touch controls. */
  .hty-navbtn,
  .hp-cal__nav {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}