/* ==========================================================================
   LBV mobile fixes
   --------------------------------------------------------------------------
   Loaded AFTER each page's inline <style> block, so equal-specificity rules
   win on source order. Desktop rendering is deliberately untouched — every
   rule here sits inside a max-width media query.

   Addresses Microsoft Clarity findings (Aug 2026) on adventure-basecamp-hub:
     1. Primary CTA sat 115px BELOW the 716px mobile fold. Users tapped the
        hero lede paragraph and hero container instead — the only things on
        screen — producing the reported dead clicks on non-interactive text.
     2. "CHECK IN" dead clicks: the date input had border:none/background:
        transparent (no affordance), an 18px label and 26px input (both under
        the 44px touch minimum), and no showPicker() call, so tapping the
        bold label focused the field without opening the picker on iOS.
     3. No mobile navigation: .nav-menu is display:none under 900px on all
        24 nav pages, with no toggle to replace it.
     4. 15px form inputs, under the 16px threshold that triggers iOS
        zoom-on-focus.
   ========================================================================== */

@media (max-width: 900px) {

  /* --- 1. Lift the primary CTA above the fold ---------------------------
     Compacts vertical rhythm only; no copy is hidden or truncated. */
  .hero {
    padding-top: 36px;
    padding-bottom: 44px;
  }
  .hero .eyebrow {
    margin-bottom: 12px;
  }
  .hero h1.display,
  .hero h1 {
    font-size: clamp(31px, 8.4vw, 44px);
    margin-bottom: 16px;
  }
  .hero p.lede,
  .hero .lede {
    font-size: 16.5px;
    line-height: 1.5;
    margin-bottom: 22px;
  }
  .hero-grid {
    gap: 28px;
  }

  /* Full-width stacked CTAs: bigger targets, unmistakably tappable. */
  .cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .cta-row .btn-primary,
  .cta-row .btn-ghost {
    display: block;
    width: 100%;
    text-align: center;
    min-height: 48px;
    padding-top: 15px;
    padding-bottom: 15px;
    box-sizing: border-box;
  }
  .cta-row .btn-ghost {
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 4px;
  }

  /* The at-a-glance plate is supporting detail — it should not outrank
     the CTA for fold space. */
  .hero-plate {
    padding: 22px 20px;
  }
  .hero-plate li {
    padding: 8px 0;
  }


  /* --- 2. Booking widget: real affordance + real tap targets ------------ */
  .bm-field {
    padding: 0;
    position: relative;
    min-height: 64px;
    cursor: pointer;
  }
  /* The label was the boldest thing in the field, so it absorbed the taps.
     Taking it out of the hit-test lets the tap reach the control itself;
     lbv-mobile.js also opens the picker for taps anywhere in the field. */
  .bm-field label {
    pointer-events: none;
    padding: 10px 18px 0;
    display: block;
  }
  .bm-field input,
  .bm-field select {
    width: 100%;
    min-height: 44px;
    padding: 0 18px 10px;
    box-sizing: border-box;
    background: transparent;
    cursor: pointer;
    /* 16px explicitly here as well as the blanket rule below: the pages'
       own `.bm-field input` rule outranks a bare `input` selector, so the
       blanket rule alone loses on specificity and iOS still zooms. */
    font-size: 16px;
  }
  /* Empty date inputs render as faint mm/dd/yyyy with no box — give the
     control a visible edge so it reads as fillable. */
  .bm-field input[type="date"],
  .bm-field select {
    -webkit-appearance: none;
    appearance: none;
    color: var(--ink, #1d1d1b);
  }
  .bm-field:focus-within {
    background: #f4f8fd;
    outline: 2px solid var(--blue-action, #007bbf);
    outline-offset: -2px;
  }
  .bm-submit {
    min-height: 52px;
  }


  /* --- 3. Mobile navigation --------------------------------------------
     Markup for .nav-toggle is injected by lbv-mobile.js. */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-direction: column;
    width: 46px;
    height: 46px;
    padding: 0;
    margin-right: 4px;
    background: transparent;
    border: 1px solid rgba(0, 34, 62, 0.22);
    border-radius: 4px;
    cursor: pointer;
    order: -1;
  }
  .nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--navy, #00223e);
    transition: transform 0.2s, opacity 0.2s;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  /* Header chrome was consuming 244px of a 716px fold: the utility bar
     wrapped the phone number onto three lines, and toggle + logo + Book Now
     summed to 473px against a 390px viewport, forcing Book Now to its own
     row. Compacting both keeps all three on one line and hands the reclaimed
     space back to the hero CTA. */
  .util-inner {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 11px;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .util-inner .util-right {
    gap: 12px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .util-inner a {
    white-space: nowrap;
  }

  .main-nav .nav-inner {
    flex-wrap: wrap;
    padding: 12px 16px;
    gap: 10px;
  }
  .main-nav .brand img {
    height: 40px;
  }
  .main-nav .book-btn {
    padding: 11px 14px;
    font-size: 12px;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  /* Overrides the page's own `.nav-menu { display: none }` only once the
     toggle has been opened. */
  .main-nav .nav-menu.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    flex-basis: 100%;
    gap: 0;
    margin: 10px 0 4px;
    border-top: 1px solid var(--line, #dbe4ef);
  }
  .main-nav .nav-menu.is-open li {
    width: 100%;
    border-bottom: 1px solid var(--line, #dbe4ef);
  }
  .main-nav .nav-menu.is-open li a {
    display: block;
    padding: 15px 2px;
    min-height: 48px;
    box-sizing: border-box;
    font-size: 15px;
  }


  /* --- 4. Stop iOS zoom-on-focus (fires under 16px) ---------------------
     The bare selector is the catch-all, but every class-scoped rule in the
     pages' inline styles outranks it, so each one is restated here:
       .bm-field input/select  15px   (booking widget, 11 pages)
       .capture-form input     15px   (4 pages)
       .footer-form input      14px   (21 pages)
       .quote-form *           15px   (orlando-golf-group-trip)
     Placeholder font-size is left alone — it does not trigger zoom. */
  input,
  select,
  textarea,
  .capture-form input,
  .check input,
  .footer-form input,
  .quote-form input,
  .quote-form select,
  .quote-form textarea {
    font-size: 16px;
  }


  /* --- 5. Horizontal overflow ------------------------------------------
     Three pages scrolled sideways on mobile. Two share one root cause:
     `1fr` means `minmax(auto, 1fr)`, and that auto floor stops a grid
     column shrinking below its content's min-content width. minmax(0, 1fr)
     replaces the floor with zero so the column can actually shrink. */

  /* factory-stores-savings: 129px over. A 175px max-width logo plus 2x28px
     cell padding pinned each column at ~234px against a 163px share. */
  .fs-retailer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .fs-retailer-cell {
    min-width: 0;
    padding: 14px;
  }
  .fs-retailer-cell img {
    max-width: 100%;
    max-height: 56px;
  }
  .fs-retailer-more .more-num {
    font-size: 40px;
  }

  /* arnold-palmer-week-itinerary: 6px over. Single collapsed column was
     sized to 364px by a descendant's min-content instead of the 326px
     available. */
  .itin-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .itin-layout > * {
    min-width: 0;
  }

  /* index (internal preview, .vercelignore'd): 4 stats in a nowrap flex
     row with 36px gaps overran 390px. */
  .head-stats {
    flex-wrap: wrap;
    gap: 16px 24px;
  }
}

/* The toggle is desktop-hidden; .nav-menu handles navigation there. */
@media (min-width: 901px) {
  .nav-toggle {
    display: none;
  }
}