/* Unique House - Stage 14 responsive / touch / mobile-ergonomics fixes.
   Loaded AFTER styles.css + theme.css, so the original stylesheet stays
   byte-identical. Every rule is scoped to small viewports (<=600px) or to the
   one width where the original fixed-width map embed actually overflows, so the
   approved >=820px desktop/tablet design is untouched.

   Owner-approved deviations from the original at phone widths only:
   - interactive controls reach the 44x44px tap-target minimum;
   - form fields use a 16px font (stops iOS Safari zooming the page on focus);
   - the OpenStreetMap iframe becomes fluid so 320px viewports don't scroll
     horizontally. */

/* --------------------------------------------------------------------------
   Map embed - the map fills its dashed container at every width (the original
   hard-codes width="425" on the iframe, which overflows the document below
   ~340px). The height steps down by viewport; all three heights are editable in
   the Customizer (Appearance → Customize → Map) with these as the defaults.
   -------------------------------------------------------------------------- */
@media (max-width:768px){
  .uh-map iframe{height:var(--uh-map-h-tablet,420px)}
}
@media (max-width:480px){
  .uh-map iframe{height:var(--uh-map-h-phone,360px)}
}

/* --------------------------------------------------------------------------
   Phones & small tablets: touch targets + mobile form ergonomics.
   -------------------------------------------------------------------------- */
@media (max-width:600px){
  /* Header controls */
  .uh-header-inner{gap:12px}
  .uh-logo{min-height:44px}
  .uh-book-now{min-height:44px;display:inline-flex;align-items:center}
  .uh-burger{min-width:44px;min-height:44px;align-items:center;justify-content:center}
  .uh-lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 8px}

  /* Footer social icons */
  .uh-social a{width:44px;height:44px}

  /* Gallery filter chips */
  .uh-filter-btn{min-height:44px;padding-top:.6rem;padding-bottom:.6rem}

  /* Booking calendar navigation arrows */
  .uh-cal-nav{width:44px;height:44px}

  /* Review stars + actions */
  .uh-star-rating label{padding:8px}
  .uh-star-rating input:focus-visible+label{outline-offset:4px}
  .uh-review-submit,
  .uh-load-more{min-height:44px}

  /* Lightbox controls */
  .uh-lightbox-close,
  .uh-lightbox-prev,
  .uh-lightbox-next{min-width:44px;min-height:44px}

  /* Booking + review form fields: 16px font (no iOS focus-zoom) and a
     comfortable 44px minimum height/width for taps. */
  .uh-form input,
  .uh-form select,
  .uh-form textarea,
  .uh-form .btn,
  .uh-review-form .uh-review-field input,
  .uh-review-form .uh-review-field select,
  .uh-review-form .uh-review-field textarea,
  .uh-review-form .uh-review-submit{font-size:16px;min-height:44px}
  .uh-form textarea,
  .uh-review-form .uh-review-field textarea{min-height:88px}
}

/* Smallest phones: keep the header on one line once the tap targets grow. */
@media (max-width:380px){
  .uh-header-inner{gap:8px}
  .uh-logo svg{height:30px}
  .uh-lang a{padding:0 6px}
}