/* ============================================================================
   Pecan & Petal  .  responsive.css
   Slice: responsive (cross-cutting mobile layer)  .  target: hcf-flowers child
   theme (Storefront) + WooCommerce.

   READ THIS BEFORE ADDING RULES HERE.

   Each page slice already ships and OWNS its own responsive behaviour. This
   file deliberately does NOT re-implement any of it, so there is one source of
   truth per component and no competing breakpoints or two rival mobile drawers:

     nav hamburger + slide-in drawer ..... header slice   (header.css + header.js, <=1023px)
     homepage FLOWERBX section stacking ... homepage slice (homepage.css, <=1000 / 720)
     product grid 2-col on mobile ........ plp slice      (plp.css, <=1100 / 760 / 420)
     PDP single-column + gallery stack ... pdp slice      (pdp.css, <=860)
     mobile sticky add-to-cart bar ....... pdp slice      (pdp.css)
     cart 1-col + line items as cards .... cart slice     (cart.css, <=900 / 768 / 560)
     block-checkout column collapse ...... checkout slice + WooCommerce core (<=700)
     footer column collapse .............. footer slice   (footer.css, <=1000 / 620)

   What lives HERE is only the genuinely CROSS-CUTTING mobile hygiene that no
   single slice can own, because it spans every template at once:

     1. Responsive media defaults, so no image or video can force a horizontal
        scrollbar on a narrow viewport.
     2. iOS focus-zoom prevention on text-entry fields (16px on phones).
     3. Horizontal scroll for the wide tables on the order-received (thank-you)
        page, which is the one WooCommerce surface no slice styles.

   COLOR RULE: this layer needs no brand color, and hardcodes none. If a value
   is ever required it must come from the central theme layer (zzz-pnp-overrides.php)
   via var(--pnp-bronze) / var(--pnp-peach) / var(--pnp-coral) / var(--pnp-bronze-dark)
   / var(--pnp-ink). Fonts are inherited, never set.

   WHY NO GLOBAL overflow-x GUARD: the homepage spans full-bleed colored bands
   with a 100vw negative-margin trick and clips itself on .pnp-home. Putting
   overflow-x on any shared ancestor (#page, #content, .col-full) would clip
   those bands and also risk the sticky header. Overflow is therefore left to
   each slice; this file adds none.

   BREAKPOINTS used here (max-width, so they layer over the slice rules):
     768px  phones and small tablets  (text-field zoom fix)
     600px  phones                    (order-received table scroll)
   ============================================================================ */

/* Stop iOS/iPadOS from inflating text after an orientation change. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ----------------------------------------------------------------------------
   1. GLOBAL RESPONSIVE MEDIA
   A zero-specificity safety net (via :where) so any slice rule, which is
   class-scoped and higher specificity, always wins for its own media. This
   only fills in where nothing else has set sizing. iframe is intentionally
   left out: the header Agent badge iframe is a fixed, transform-scaled embed
   that must keep its own width.
   ---------------------------------------------------------------------------- */
:where(img, svg, video, canvas) {
  max-width: 100%;
}
:where(img, video) {
  height: auto;
}

/* ----------------------------------------------------------------------------
   2. iOS FOCUS-ZOOM PREVENTION
   Mobile Safari auto-zooms the viewport whenever a text-entry field with a
   computed font-size under 16px receives focus. Several slices size inputs
   below 16px for visual rhythm (cart coupon, PDP delivery date + gift message,
   header search, block-checkout fields, the review form). This standardises the
   FONT-SIZE of text-entry controls to 16px on phones so focus never triggers a
   zoom. It changes nothing else: padding, height, radius and layout stay as the
   owning slice set them.

   !important is required on purpose. The slice rules are higher specificity, so
   this is the one place that must win to actually suppress the zoom. <select> is
   excluded on purpose: it opens a native picker and never triggers the zoom, so
   its slice styling (for example the PLP sort pill) is left untouched.
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  input[type="date"],
  input:not([type]),
  textarea {
    font-size: 16px !important;
  }
}

/* ----------------------------------------------------------------------------
   3. ORDER-RECEIVED (THANK-YOU) PAGE: WIDE TABLES SCROLL, NEVER OVERFLOW
   The order-received page is the one WooCommerce surface no slice styles. Its
   order-details, downloads and customer-details tables can be wider than a
   phone. Make just those tables scroll inside their own box so the page body
   never gains a horizontal scrollbar. Scoped to the .woocommerce-order-received
   body class so cart tables (cart slice) and account tables (account slice) are
   untouched.
   ---------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .woocommerce-order-received .woocommerce-table--order-details,
  .woocommerce-order-received .woocommerce-table--order-downloads,
  .woocommerce-order-received .woocommerce-order-details__table,
  .woocommerce-order-received table.shop_table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}