/* ==========================================================================
   Jane Here — Clarify Tarot
   wp-mobile-fixes.css  (NOT part of the original static site)

   Layout bugs that already exist in the original static site's style.css /
   responsive.css (reproducible by opening website/*.html on a phone). They are
   fixed here, in a separate file, so that style.css and responsive.css stay
   byte-for-byte faithful to the source.

   To revert to the exact original behaviour: delete this file and the
   'jane-here-mobile-fixes' enqueue in functions.php.

   Every rule is scoped to the width range where the original was measured to
   overflow, so at every other width the layout is identical to the original.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Grid items refused to shrink, so forms / heroes overflowed the screen
      (grid items default to min-width:auto, i.e. their min-content).

      Original symptoms (measured):
        - phones: Tarot intake form fields were 399px wide inside a 390px screen;
          the Tarot hero caption forced a 365px column; an About narrative card forced a
          302px column at 320px; the Home hero caption
          forced a 314px column at 320px; the Tarot hero badge and the FAQ wizard
          row could not wrap; the Contact card was wider than the screen.
        - tablets (769-859px): the Contact card was 528px wide at an 820px screen.

      Ranges: 448px is the widest phone width at which any original page
      overflowed the viewport (Contact); 769-859px is where Contact overflows
      on tablets. Outside these ranges the original layout is left untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 448px) {
  .form-grid > *,
  .product-layout-grid > *,
  .hero-grid > *,
  .narrative-cards-grid > * {
    min-width: 0;
  }

  /* The Tarot hero badge ("Love & Relationships • Predefined Question Set")
     is ~355px wide with white-space:nowrap and pushed the page wider than the
     phone below ~390px. */
  .product-info-panel > .badge {
    white-space: normal;
  }
}

/* The FAQ wizard's badge + "% match" row could not wrap and overflowed by 4px
   at 320px (only). */
@media (max-width: 340px) {}

/* FAQ wizard result row (badge + "% match" chip) overflowed by 4px, at 320px only. */
@media (max-width: 340px) {
  .recommendation-head {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

/* Contact only (.contact-layout-grid exists on no other page): between 449 and
   480px its card is 433px wide inside a 418px container and touches the screen
   edge (1px margin at 450px instead of 16px). */
@media (max-width: 480px) {
  .contact-layout-grid > *,
  .contact-layout-grid .form-grid > * {
    min-width: 0;
  }
}

@media (min-width: 769px) and (max-width: 859px) {
  .contact-layout-grid > *,
  .form-grid > * {
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   2. The mobile menu (hamburger) button was pushed off-screen on phones.
      Original symptom: at 390px the hamburger sat at x=399-443 on a 390px
      screen, i.e. unreachable without scrolling sideways.
      Cause: logo + "Explore Readings" button + hamburger need ~442px (Tarot
      page: ~418px), but at this size only the desktop nav is hidden.
      Fix: on small phones hide the header CTA. Nothing is lost: the mobile
      drawer already contains the same "Book a Reading" button
      (.mobile-nav-footer .btn). 448px = same phone range as section 1 (the
      measured overflow onset is 442px).
   -------------------------------------------------------------------------- */
@media (max-width: 448px) {
  .header-actions > .btn {
    display: none;
  }
}