/* Mobile comfort pass — 20261026
   Scope: phones only (<=768px). Goals:
   1) stop floating layers stacking over content / each other
   2) tighten long forms so they don't dominate the viewport
   3) calm the first screen (hero copy) so users reach the offer faster
   Nothing here changes desktop layout. */

@media (max-width: 768px) {
  /* --- 1) floating enquiry: icon-only pill, clear of bottom nav --- */
  #byf-floating-enquiry .bfe-launch {
    right: 14px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    padding: 10px;
    gap: 0;
    min-width: 46px;
    min-height: 46px;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(19, 60, 53, .22);
  }
  /* keep the label for screen readers, hide it visually on phones */
  #byf-floating-enquiry .bfe-launch > span:not(.bfe-chat) {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
  #byf-floating-enquiry .bfe-chat { width: 26px; height: 26px; font-size: 15px; }

  /* dialog: full-width sheet, never taller than the screen */
  #byf-floating-enquiry .bfe-dialog {
    right: 10px; left: 10px;
    width: auto;
    bottom: calc(130px + env(safe-area-inset-bottom, 0px));
    max-height: min(72dvh, calc(100dvh - 150px));
    border-radius: 16px;
  }
  #byf-floating-enquiry .bfe-header { padding: 16px 18px !important; }
  #byf-floating-enquiry .bfe-header h2 { font-size: 19px; line-height: 1.34; }
  #byf-floating-enquiry .bfe-content { padding: 16px 18px 18px; }

  /* any other element pinned to the bottom must not sit under the launcher */
  .ec-back-top { bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important; }

  /* --- 2) forms: tighter rhythm, still >=44px touch targets --- */
  #byf-floating-enquiry .bfe-content label { gap: 5px; margin-bottom: 10px; }
  #byf-floating-enquiry .bfe-content input,
  #byf-floating-enquiry .bfe-content textarea { min-height: 44px; padding: 9px 11px; }
  #byf-floating-enquiry .bfe-content textarea { rows: 3; max-height: 120px; }
  #byf-floating-enquiry .bfe-intro { margin-bottom: 12px; line-height: 1.7; }

  /* inline page forms (RFQ / contact) */
  form input, form textarea, form select { font-size: 16px; } /* stops iOS zoom-on-focus */
  form label { margin-bottom: 10px; }

  /* --- 3) first screen: reduce copy weight, keep hierarchy --- */
  main p, main li { line-height: 1.65; }
  main h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); line-height: 1.22; }
  main h2 { font-size: clamp(1.25rem, 5.4vw, 1.6rem); line-height: 1.28; }

  /* long intro paragraphs: cap to ~5 lines with graceful expand */
  .ec-hero-copy, .hero-copy, main > section:first-of-type > p {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* --- 4) horizontal scrolling strips: add scroll affordance --- */
  .overflow-x-auto { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
}

/* very small phones */
@media (max-width: 380px) {
  #byf-floating-enquiry .bfe-launch { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  main h1 { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  #byf-floating-enquiry .bfe-launch { transition: none; }
}