/*
Theme Name: MI Property
Theme URI: https://github.com/mi2-apps/miproperty
Description: Child theme for the San Diego Private Rentals direct-booking site. Holds the §10b mobile-first guarantees and MotoPress template overrides so the parent theme stays updatable.
Author: MI Technologies
Template: twentytwentyfive
Version: 0.1.0
Requires PHP: 8.1
Text Domain: miproperty
*/

/* ---------------------------------------------------------------------------
   §10b MOBILE-FIRST — HARD RULE. These are guarantees, not suggestions.
   Every rule below exists because a booking flow that fails on a phone loses
   the booking, and most short-term-rental traffic is phone traffic.
   --------------------------------------------------------------------------- */

:root {
  --mip-tap: 44px;        /* minimum tap target, both axes */
  --mip-body: 1rem;       /* 16px — see the iOS note below */
}

/* 1. TAP TARGETS — 44x44 CSS px minimum.
      Applies to MotoPress controls too: its date pickers, guest steppers and
      submit buttons are the booking flow, and they ship smaller than this. */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-block-button__link,
.mphb-button,
.mphb_sc_search-submit-button-wrapper button,
/* MotoPress builds its date fields at RUNTIME with jQuery datepick, so they
   are absent from the served HTML and no vendor class can be relied on across
   plugin updates. Target form controls by ROLE instead — that survives. */
input[type="text"],
input[type="date"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input.hasDatepick,
.datepick,
[class*="mphb"] input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
select,
summary {
  min-height: var(--mip-tap);
  min-width: var(--mip-tap);
}

/* Inline text links in prose are exempt from min-width (it would break line
   wrapping), but nav and footer links are real tap targets. */
nav a,
.wp-block-navigation-item__content,
footer a {
  display: inline-block;
  min-height: var(--mip-tap);
  line-height: var(--mip-tap);
}

/* 2. INPUT FONT SIZE >= 16px.
      Below 16px, iOS Safari ZOOMS the viewport when the field takes focus and
      does not zoom back out. On a date picker mid-booking that reads as the
      site breaking. This is the single highest-value mobile rule here. */
input,
select,
textarea,
.mphb-input {
  font-size: max(var(--mip-body), 1rem);
}

/* 3. BODY TEXT — never below 16px. */
body {
  font-size: var(--mip-body);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* 4. NO HORIZONTAL PAGE SCROLL, EVER.
      Wide content scrolls inside its own container instead of pushing the
      document sideways. MotoPress rate tables and availability calendars are
      the usual offenders. */
html, body { overflow-x: hidden; max-width: 100%; }

table,
.mphb-rates-table,
.mphb_sc_rates-table,
.mphb-availability-calendar {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

img, video, iframe { max-width: 100%; height: auto; }

/* 5. Form controls must be reachable and legible at 320px, the narrowest
      viewport still in real use. */
@media (max-width: 480px) {
  .mphb_sc_search-form .mphb_column,
  .mphb-search-form .mphb_column {
    width: 100%;
    float: none;
    margin-bottom: 0.75rem;
  }
}

/* 6. Visible keyboard focus. Removing outlines without a replacement makes the
      booking flow unusable by keyboard and screen-reader users. */
:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}