/* Handheld and touch refinements shared by every page on the site.

   This lives in one file rather than in each page's <style> block because the three
   pages were drifting: the door builder carried a mobile layer the other two never
   had, and when the doors page was rebuilt for the public site that layer was dropped
   with it. One file means a touch fix lands everywhere or nowhere.

   Two concerns, deliberately separated:

   1. TOUCH (any finger-driven device). A tablet at 768px is touched exactly like a
      phone at 390px, so this is keyed on pointer:coarse as well as width. The width
      bound stops at 820px on purpose: wider caught narrow *desktop* windows and grew
      the header, which is a design change, not a fix.
   2. PHONE LAYOUT (<=560px). Padding and type that are right on a laptop eat a 390px
      screen alive.

   Nothing here touches a mouse-driven desktop. */

/* ---- 0. The menu button must never inherit its colour -------------------
   .menu-btn was written with color:inherit. On the home and booking pages that
   resolves to the light body text; on the doors page it inherits the door
   builder's #111 and renders black on a near-black bar. The button was there,
   77x44 and clickable, and completely invisible - and below the breakpoint the
   inline links are hidden, so the doors page had no visible way back to the rest
   of the site. Stated outright rather than inherited. */
.menu-btn{ color:#efeae2 }
.menu-btn:hover{ background:rgba(244,241,236,.1) }

/* ---- 1. Touch --------------------------------------------------------- */
@media (max-width:820px), (pointer:coarse){

  /* iOS zooms the whole page when a focused control is under 16px. Without this,
     tapping any field in the door order or the booking form jerks the page in and
     leaves the visitor scrolled sideways. This is the single most felt mobile bug. */
  input, select, textarea { font-size:16px !important; }

  /* 44px is the smallest reliably tappable box. Everything below was under it. */
  .menu-btn{ min-height:44px; padding:11px 18px }
  .menu-close{ min-width:44px; min-height:44px; display:grid; place-items:center }
  .menu-panel a{ min-height:54px; display:flex; align-items:center }
  footer a{ min-height:44px; display:inline-flex; align-items:center }

  /* Booking calendar. A 37px square is a mis-tap generator on a date picker, where
     the wrong target is the day next to the right one. */
  .cal-day{ aspect-ratio:auto; min-height:46px }
  .cal-nav button{ width:44px; height:44px }
  .slot{ min-height:48px }
  .submit{ min-height:54px }

  /* Door builder controls, tapped repeatedly while filling an order. */
  input[type=checkbox], input[type=radio]{ width:22px; height:22px }
  input[type=range]{ height:32px }
  .remove-row, .cab-modal-close{ min-width:40px; min-height:40px }
  .filter-row button, .view-buttons button, .stage-controls button,
  .quality-controls button, .product-choice{ min-height:44px }
}

/* The phone pill needs a flex box for min-height to mean anything - but each page's
   own header hides it under 560px, where the wordmark, the pill and the Menu button
   cannot share a line. Setting display here at any width un-hid it and it wrapped
   across the Menu button. So the target fix applies only above that breakpoint. */
@media (min-width:561px) and (max-width:820px){
  nav .cta, .site-header .header-cta{ min-height:44px; display:inline-flex; align-items:center }
}
@media (min-width:561px) and (pointer:coarse){
  nav .cta, .site-header .header-cta{ min-height:44px; display:inline-flex; align-items:center }
}

/* ---- 2. Phone layout -------------------------------------------------- */
@media (max-width:560px){
  /* 28px of panel padding either side costs 56px of a 390px screen - it is why the
     calendar cells were squeezed. Giving it back widens every day cell by ~3px. */
  .panel{ padding:18px 16px }
  .book{ padding-left:4vw; padding-right:4vw }

  /* .28em of tracking is the design on a laptop; on a 375px screen it pushed a single
     word of every eyebrow onto a second line. Tightened, not removed. */
  .k, .eyebrow{ letter-spacing:.18em }

  /* The footer's three spans were justified apart and read as one run-on line. */
  footer{ flex-direction:column; gap:8px; text-align:left }
}

/* ---- 3. Reduced motion ------------------------------------------------
   Parallax, pinning and scrubbed reveals are exactly what triggers motion
   sensitivity. The page must still READ, so this is scoped to movement: the
   scroll-driven scripts check the same query and paint their finished state. */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}